/* === Expenses module styles ===========================================
 * List/KPI/toolbar/table chrome reuses .cust-* (customers.css); the drawer
 * split-line rows follow the .inv-lines pattern (invoices.css). Only
 * expense-specific bits live here: the category quick-add tiles, the split
 * line rows, the ad-spend banner, and the DR/CR post preview.
 * ===================================================================== */

/* ─── Category quick-add tiles ───────────────────────────────────── */
.exp-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.exp-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--b1);
  border-radius: var(--r);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.exp-tile:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--sh-1);
}
.exp-tile__name {
  font-weight: var(--w-semibold);
  color: var(--tx);
  font-size: var(--text-sm);
}
.exp-tile__sub {
  font-size: var(--text-xs);
  color: var(--t3);
}
.exp-tile--add {
  align-items: center;
  justify-content: center;
  border-style: dashed;
  color: var(--t2);
  font-weight: var(--w-semibold);
}

/* ─── Amount / mono cells ────────────────────────────────────────── */
.exp-amount { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.exp-cat-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-size: var(--text-2xs);
  font-weight: var(--w-semibold);
  background: var(--surface-2);
  color: var(--t2);
}
.exp-cat-tag--ad { background: var(--coral-tint); color: var(--coral); }

/* ─── Ad-spend mode banner (drawer) ──────────────────────────────── */
.exp-mode-banner {
  padding: 10px 14px;
  border-radius: var(--rs);
  background: var(--coral-tint);
  color: var(--coral);
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
  margin-bottom: var(--s-3);
}

/* ─── Split line rows (drawer) — modeled on .inv-lines ───────────── */
.exp-lines__head,
.exp-line {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 120px 28px;
  gap: var(--s-2);
  align-items: center;
}
.exp-lines__head {
  padding: 0 0 var(--s-2);
  font-size: var(--text-2xs);
  font-weight: var(--w-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t3);
}
.exp-line { padding: var(--s-2) 0; }
.exp-line .field__input,
.exp-line .field__select { padding: 8px 10px; font-size: var(--text-sm); }
.exp-line .field__select { padding-right: 26px; background-position: right 8px center; }
.exp-line__amount .field__input { text-align: right; }
.exp-line__remove {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: none; background: transparent;
  color: var(--t3); border-radius: var(--rs);
  cursor: pointer;
}
.exp-line__remove:hover { background: var(--negative); color: #fff; }

.exp-add-line {
  margin-top: var(--s-2);
  font-size: var(--text-sm);
  color: var(--primary-deep);
  background: none; border: none; cursor: pointer;
  font-weight: var(--w-semibold);
  padding: var(--s-2) 0;
}

/* ─── DR/CR post preview ─────────────────────────────────────────── */
.exp-preview {
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-2);
  border-radius: var(--rs);
  border: 1px solid var(--b1);
}
.exp-preview__title {
  font-size: var(--text-2xs);
  font-weight: var(--w-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: var(--s-2);
}
.exp-preview__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--text-sm);
  padding: 3px 0;
}
.exp-preview__acct { color: var(--t2); }
.exp-preview__dr { color: var(--negative); font-family: var(--font-mono); }
.exp-preview__cr { color: var(--primary-deep); font-family: var(--font-mono); }
.exp-preview__total {
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid var(--b1);
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  font-weight: var(--w-semibold);
}
.exp-preview__total .exp-amount { color: var(--tx); }

@media (max-width: 620px) {
  .exp-lines__head { display: none; }
  .exp-line {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--b0);
  }
  .exp-line__cat { grid-column: 1 / -1; }
}