/* Expenses — staff expense claims (documents parity Wave E2, src/tenant/expenses.js).
   Wire from aboo.css with `@import 'expenses.css';` at the TOP of the file (CSS @import must
   precede all rules). Only `exp-*` classes here (unique — no clash with aboo.css); the screen
   otherwise reuses aboo.css's .page/.toolbar/.doc-lines-tbl/.st-pill/.modal-*/.pay-f/.pay-actions
   /.row-err/.alert/.muted-block. Colours come from the aboo tokens, so dark mode is automatic.
   Every font here is >= 12px (the a11y gate). */

/* ── toolbar: filter chips + the two summary KPIs ─────────────────────────── */
.exp-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;margin-bottom:12px}
.exp-chips{display:flex;gap:6px;flex-wrap:wrap}
.exp-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);
  border-radius:16px;background:var(--surface);color:var(--muted);font-size:13px;font-weight:600;
  cursor:pointer;white-space:nowrap}
.exp-chip:hover{border-color:var(--muted)}
.exp-chip.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.exp-chip-n{font-size:12px;opacity:.85;font-weight:700}
.exp-chip.on .exp-chip-n{opacity:1}

.exp-kpis{display:flex;gap:10px}
.exp-kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:8px 14px;min-width:120px}
.exp-kpi-l{font-size:12px;color:var(--muted);font-weight:600}
.exp-kpi-v{font-size:16px;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}

/* ── list rows ───────────────────────────────────────────────────────────── */
.exp-tbl td{vertical-align:top}
.exp-tbl .st-pill{margin-left:8px;vertical-align:middle}
.exp-sub{font-size:12px;color:var(--muted);margin-top:2px}
.exp-note{font-size:12px;color:var(--brand-ink,var(--ink));margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;max-width:36ch;white-space:nowrap}
.exp-row.exp-rejected b{color:var(--muted)}
.exp-actions{white-space:nowrap}
.exp-actions .btn{margin-left:4px}
.exp-done{font-size:12px;color:var(--muted)}
.exp-reason{font-size:12px;color:var(--bad);overflow:hidden;text-overflow:ellipsis;
  max-width:30ch;white-space:nowrap;display:inline-block;vertical-align:bottom}

/* ── modals: submit form + the small reimburse/reject dialogs ─────────────── */
.exp-modal{width:min(720px,94vw)}
.exp-modal-sm{width:min(460px,94vw)}
.exp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin-bottom:12px}
.exp-f-wide{grid-column:1 / -1}
.exp-hint{font-size:12px;color:var(--muted);margin-top:3px}
.exp-calc{font-size:13px;color:var(--brand-ink,var(--ink));min-height:18px;margin:2px 0 8px}
.exp-reimburse-sum{font-size:13px;color:var(--ink);margin:4px 0 14px;line-height:1.5}

/* Danger-tinted buttons for Reject / decline. Scoped to the outline variant — a bare
   `.btn-danger{color:var(--bad)}` here loads AFTER aboo.css and painted every FILLED danger
   button app-wide red-on-red (invisible "Yes" on the void banner, owner sweep 2026-09-05). */
.btn-outline.btn-danger{border-color:var(--bad);color:var(--bad)}
.btn-danger.btn-primary{background:var(--bad);border-color:var(--bad);color:#fff}

/* Depth (parity): receipt-scan dropzone in the modal, scope toggles, group-by-employee */
.exp-scan{margin-bottom:12px}
.exp-redo-note{margin-bottom:10px}
.exp-scope{display:inline-flex;gap:6px;margin-left:auto}
.exp-group{margin-bottom:16px}
.exp-group-head{display:flex;align-items:center;gap:10px;padding:6px 2px;border-bottom:2px solid var(--line);margin-bottom:2px}
.exp-group-head>b{font-size:14px;color:var(--ink)}
.exp-group-meta{font-size:12.5px;color:var(--muted)}
.exp-group-head .btn{margin-left:auto}
@media(max-width:640px){.exp-grid{grid-template-columns:1fr}.exp-kpis{width:100%}.exp-scope{margin-left:0;width:100%}}

/* Claim peek — read-only "view the expense" modal opened by clicking an expense row (owner 2026-09-06) */
.claim-peek{max-width:520px}
.claim-peek .modal-head h3{display:flex;align-items:center;gap:10px}
.claim-peek-amount{font-size:26px;font-weight:800;color:var(--ink);margin:6px 0 2px}
.claim-peek-desc{color:var(--ink);font-size:14px;margin-bottom:12px}
.claim-peek-grid{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.claim-peek-row{display:grid;grid-template-columns:170px 1fr;gap:12px;padding:8px 2px;border-bottom:1px solid var(--line);font-size:13.5px}
.claim-peek-lbl{color:var(--muted);font-weight:600}
.claim-peek-val{color:var(--ink)}