/* ============================================================
   Arbah v3 — Cashflow (owner finance) surface styles
   Source: design/arbah-v3/project/cashflow.css — ported verbatim
   (values) and scoped under .av3. Net-position hero, inflow/outflow
   sub-figures, CSS bar chart, transactions table, category chips.
   ============================================================ */

.av3 .cf-page .kpi-strip { grid-template-columns:repeat(4,1fr); }

/* page header row */
.av3 .cf-head .page-sub { margin-top:7px; font-size:14px; color:var(--arbah-ink-muted); }

/* ---------- net-position hero ---------- */
.av3 .cf-hero {
  background:var(--arbah-surface); border:1px solid var(--arbah-border); border-radius:var(--r-12);
  box-shadow:var(--shadow-card); padding:22px 26px; display:flex; align-items:center; justify-content:space-between;
  gap:28px; flex-wrap:wrap; row-gap:18px; position:relative; overflow:hidden;
}
.av3 .cf-hero::before { content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px; background:var(--arbah-success); }
.av3 .cf-hero.negative::before { background:var(--arbah-danger); }
.av3 .cf-hero .nh-label { font-family:var(--font-mono); font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--arbah-ink-muted); }
.av3 .cf-hero .nh-net { font-family:var(--font-serif); font-size:52px; font-weight:600; line-height:1.04; color:var(--arbah-success); font-variant-numeric:tabular-nums; letter-spacing:-1px; margin-top:8px; white-space:nowrap; }
.av3 .cf-hero .nh-net.negative { color:var(--arbah-danger); }
.av3 .cf-hero .nh-net bdi { font-family:var(--font-mono); }

.av3 .cf-subfigs { display:flex; gap:14px; }
.av3 .cf-subfig { background:var(--arbah-surface-sunken); border:1px solid var(--arbah-border); border-radius:var(--r-8); padding:13px 18px; min-width:150px; }
.av3 .cf-subfig .sf-l { display:flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--arbah-ink-muted); }
.av3 .cf-subfig .sf-dot { width:8px; height:8px; border-radius:2px; flex-shrink:0; }
.av3 .cf-subfig .sf-dot.in { background:var(--arbah-success); }
.av3 .cf-subfig .sf-dot.out { background:var(--arbah-navy-500); }
.av3 .cf-subfig .sf-v { font-family:var(--font-mono); font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; margin-top:5px; white-space:nowrap; }
.av3 .cf-subfig .sf-v.in { color:var(--arbah-success); }
.av3 .cf-subfig .sf-v.out { color:var(--arbah-ink); }

/* ---------- CSS bar chart (no chart lib) ---------- */
.av3 .cf-chart { background:var(--arbah-surface); border:1px solid var(--arbah-border); border-radius:var(--r-12); box-shadow:var(--shadow-card); padding:18px 20px 16px; }
.av3 .cf-chart-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; row-gap:10px; }
.av3 .cf-legend { display:flex; gap:16px; }
.av3 .cf-legend .lg { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--arbah-ink-muted); font-weight:500; }
.av3 .cf-legend .lg-dot { width:10px; height:10px; border-radius:3px; }
.av3 .cf-legend .lg-dot.in { background:var(--arbah-success); }
.av3 .cf-legend .lg-dot.out { background:var(--arbah-navy-500); }

.av3 .cf-plot { display:flex; align-items:flex-end; gap:0; height:220px; border-bottom:1px solid var(--arbah-border); position:relative; padding-bottom:0; }
.av3 .cf-gridline { position:absolute; left:0; right:0; border-top:1px dashed var(--arbah-border); }
.av3 .cf-gridline span { position:absolute; inset-inline-start:0; top:-8px; font-family:var(--font-mono); font-size:9.5px; color:var(--arbah-ink-subtle); background:var(--arbah-surface); padding-inline-end:6px; }
.av3 .cf-month { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:0; z-index:1; }
.av3 .cf-bars { display:flex; align-items:flex-end; gap:5px; height:100%; width:100%; justify-content:center; padding:0 4px; }
.av3 .cf-bar { width:17px; border-radius:3px 3px 0 0; position:relative; transition:height .3s; min-height:2px; }
.av3 .cf-bar.in { background:linear-gradient(180deg, #0a9e6e, var(--arbah-success)); }
.av3 .cf-bar.out { background:linear-gradient(180deg, #3a577a, var(--arbah-navy-500)); }
.av3 .cf-axis { display:flex; }
.av3 .cf-axis .cf-mlabel { flex:1; text-align:center; font-family:var(--font-mono); font-size:11px; color:var(--arbah-ink-muted); padding-top:8px; font-variant-numeric:tabular-nums; }

/* ---------- transactions table ---------- */
.av3 .transactions-wrap { background:var(--arbah-surface); border:1px solid var(--arbah-border); border-radius:var(--r-12); box-shadow:var(--shadow-card); overflow:hidden; }
.av3 .tw-head { padding:15px 18px 13px; border-bottom:1px solid var(--arbah-border); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.av3 .tw-title { font-family:var(--font-serif); font-size:18px; font-weight:600; color:var(--arbah-ink); }
[dir="rtl"] .av3 .tw-title { font-family:var(--font-sans-ar); }
.av3 .tw-scroll { overflow-x:auto; }
.av3 .transactions-table { width:100%; border-collapse:collapse; min-width:680px; }
.av3 .transactions-table thead th {
  text-align:start; font-family:var(--font-mono); font-size:10px; letter-spacing:1px; text-transform:uppercase;
  color:var(--arbah-ink-muted); font-weight:600; padding:11px 18px; background:var(--arbah-surface-sunken); border-bottom:1px solid var(--arbah-border); white-space:nowrap;
}
.av3 .transactions-table tbody td { padding:13px 18px; border-bottom:1px solid var(--arbah-border); font-size:13px; color:var(--arbah-ink); vertical-align:middle; }
.av3 .transactions-table tbody tr:last-child td { border-bottom:none; }
.av3 .transactions-table tbody tr:hover { background:var(--arbah-surface-sunken); }
.av3 .tt-date { font-family:var(--font-mono); font-size:12.5px; color:var(--arbah-ink-muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.av3 .tt-desc { font-weight:600; color:var(--arbah-ink); }
.av3 .tt-proj { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.av3 .tt-proj .id-chip { font-size:10px; padding:2px 6px; }
.av3 .tt-proj .tp-name { color:var(--arbah-ink-muted); font-size:12.5px; }
.av3 .tt-amt { font-family:var(--font-mono); font-size:13.5px; font-weight:600; text-align:end; white-space:nowrap; font-variant-numeric:tabular-nums; display:inline-block; }
.av3 .tt-amt.in { color:var(--arbah-success); }
.av3 .tt-amt.out { color:var(--arbah-ink); }

/* ---------- category chips ---------- */
.av3 .cat { font-size:11.5px; font-weight:600; padding:4px 9px; border-radius:999px; white-space:nowrap; border:1px solid transparent; display:inline-block; }
.av3 .cat--income { background:var(--arbah-success-soft); color:var(--arbah-success); border-color:#A7E3CB; }
.av3 .cat--materials { background:var(--arbah-bronze-100); color:var(--arbah-bronze-700); border-color:var(--arbah-bronze-200); }
.av3 .cat--labor { background:var(--arbah-info-soft); color:var(--arbah-info); border-color:#BFD3F5; }
.av3 .cat--equipment { background:var(--arbah-navy-100); color:var(--arbah-navy-500); border-color:var(--arbah-border-strong); }
.av3 .cat--subcontractor { background:var(--arbah-warning-soft); color:var(--arbah-warning); border-color:#F0D69A; }
.av3 .cat--neutral { background:var(--arbah-surface-raised); color:var(--arbah-ink-muted); border-color:var(--arbah-border-strong); }

/* ---------- responsive (container queries key off the .av3 surface) ---------- */
@container app (max-width: 760px) {
  .av3 .cf-page .kpi-strip { grid-template-columns:none; }
  .av3 .cf-hero { padding:18px; gap:16px; }
  .av3 .cf-hero .nh-net { font-size:42px; }
  .av3 .cf-subfigs { width:100%; }
  .av3 .cf-subfig { flex:1; min-width:0; }
  .av3 .cf-bar { width:13px; }
}