/* Finance module (billing, expenses, accounting). Uses core design tokens only, so light/dark themes just work. */

.fin-note, .fin-verify { font-size: .78rem; color: var(--muted); display: flex; gap: .35rem; align-items: flex-start; }
.value-money { font-variant-numeric: tabular-nums; font-size: clamp(1.15rem, 2.4vw, 1.55rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mono { font-variant-numeric: tabular-nums; }

/* ---------- line-item editor ---------- */
.li-editor { border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem; background: var(--surface-2, var(--surface)); }
.li-head, .li-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px 104px 84px 78px 108px 32px; gap: .4rem; align-items: start; }
.li-head { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; padding: 0 0 .35rem; }
.li-row { padding: .45rem 0; border-top: 1px dashed var(--border); animation: fin-in var(--dur, 240ms) var(--ease, ease) both; }
.li-row:first-child { border-top: 0; }
.li-sub { display: flex; gap: .35rem; align-items: center; margin-top: .3rem; }
.li-sub input { max-width: 110px; }
.li-num { text-align: right; font-variant-numeric: tabular-nums; }
.li-total { align-self: center; text-align: right; font-size: .86rem; font-weight: 600; }
.li-totals { display: flex; flex-direction: column; align-items: flex-end; }
.li-totals .kv { min-width: min(320px, 100%); }
.kv-tight { gap: .25rem 1rem; font-size: .88rem; }
.kv-right dd { text-align: right; }
.kv-right { margin-left: auto; max-width: 380px; }

@media (max-width: 767.98px) {
  .li-head { display: none; }
  .li-row { grid-template-columns: 1fr 1fr 1fr; }
  .li-row .li-desc { grid-column: 1 / -1; }
  .li-row .li-total { grid-column: 1 / 3; text-align: left; }
  .li-row [data-remove] { justify-self: end; }
  .li-sub input { max-width: none; }
}

/* ---------- collections column chart ---------- */
.col-chart { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; align-items: end; height: 150px; }
.col-chart-item { display: flex; flex-direction: column; align-items: center; gap: .35rem; height: 100%; min-width: 0; }
.col-chart-track { flex: 1; width: 100%; max-width: 46px; display: flex; align-items: flex-end; background: var(--surface-hover); border-radius: 8px; overflow: hidden; }
.col-chart-fill { display: block; width: 100%; height: 0; background: linear-gradient(180deg, var(--brand), color-mix(in srgb, var(--brand) 55%, var(--ok))); border-radius: 8px 8px 0 0; transition: height 900ms var(--ease, ease); }
.col-chart-item:last-child .col-chart-fill { background: var(--ok); }

.bar-amt { min-width: 92px; }
.bars .bar-row { grid-template-columns: 110px 1fr auto; }

/* ---------- statements ---------- */
.fin-statement { width: 100%; }
.fin-statement td, .fin-statement th { padding: .4rem .6rem; }
.fin-statement .grp td { font-weight: 650; background: var(--surface-hover); }
.fin-statement .tot td { font-weight: 700; border-top: 2px solid var(--border-strong); }
.fin-statement .ind { padding-left: 1.4rem; }
.fin-balanced { color: var(--ok); }
.fin-unbalanced { color: var(--bad); }
.je-lines .je-line { display: grid; grid-template-columns: minmax(0, 1fr) 110px 110px 32px; gap: .4rem; margin-bottom: .4rem; animation: fin-in var(--dur, 240ms) var(--ease, ease) both; }
@media (max-width: 575.98px) { .je-lines .je-line { grid-template-columns: 1fr 1fr; } .je-lines .je-line select { grid-column: 1 / -1; } }
.recon-line.matched { opacity: .7; }
.recon-sugg { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }

@keyframes fin-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .li-row, .je-lines .je-line { animation: none; } .col-chart-fill { transition: none; } }