/* ============================================================
   Arbah v2 — Cashflow surface (portfolio cash view rebuild)
   Flag-gated: applies only under .arbah-v2 .cashflow-v2-page, so the
   legacy + v1 paint stay byte-identical when the flag is off.

   The v2 "actual" tab is a real rebuild on v2 primitives (KPI row,
   monthly inflow/outflow CSS bars + running-balance dots, movements
   table, net-by-project). The shared header / tabs / phase-budget /
   forecast subsystem keep their DOM and get light v2 token paint here.

   Built on --arbah-v2-* tokens. !important policy: 0. SAR amounts are
   <bdi> mono; the chart strip is rendered dir=ltr in the markup.
   ============================================================ */

.arbah-v2 .cashflow-v2-page { font-family: var(--arbah-v2-font-sans); color: var(--arbah-v2-ink); }

/* Shared chrome (legacy DOM) — light v2 token paint. */
.arbah-v2 .cashflow-v2-page .page-title { font-family: var(--arbah-v2-font-display); color: var(--arbah-v2-ink); }
.arbah-v2[dir="rtl"] .cashflow-v2-page .page-title { font-family: "IBM Plex Sans Arabic", var(--arbah-v2-font-display); }
.arbah-v2 .cashflow-v2-page select {
  background: var(--arbah-v2-surface); border: 1px solid var(--arbah-v2-border);
  border-radius: var(--arbah-v2-radius-md); color: var(--arbah-v2-ink); font-family: var(--arbah-v2-font-sans);
}
.arbah-v2 .cashflow-v2-page select:focus { outline: none; border-color: var(--arbah-v2-brand); box-shadow: 0 0 0 3px rgba(16,42,67,.14); }
/* Tabs (legacy border-b buttons) → v2 accent underline. */
.arbah-v2 .cashflow-v2-page [role="tab"][aria-selected="true"] { color: var(--arbah-v2-brand); border-bottom-color: var(--arbah-v2-accent); }
/* Shared bg-white cards (phase budgets, forecast tables) → v2 surface. */
.arbah-v2 .cashflow-v2-page .bg-white {
  background: var(--arbah-v2-surface); border-color: var(--arbah-v2-border); border-radius: var(--arbah-v2-radius-lg);
}

/* -- KPI row ------------------------------------------------ */
.arbah-v2 .cashflow-v2-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 980px) { .arbah-v2 .cashflow-v2-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .arbah-v2 .cashflow-v2-kpis { grid-template-columns: minmax(0, 1fr); } }
.arbah-v2 .cashflow-v2-kpi { position: relative; overflow: hidden; }
.arbah-v2 .cashflow-v2-kpi::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--arbah-v2-border-strong); }
.arbah-v2 .cashflow-v2-kpi.is-brand::before   { background: var(--arbah-v2-brand); }
.arbah-v2 .cashflow-v2-kpi.is-success::before { background: var(--arbah-v2-success); }
.arbah-v2 .cashflow-v2-kpi.is-danger::before  { background: var(--arbah-v2-danger); }
.arbah-v2 .cashflow-v2-kpi.is-warning::before { background: var(--arbah-v2-warning); }
.arbah-v2 .cashflow-v2-kpi .kpi-value bdi { unicode-bidi: isolate; }

/* -- Section card ------------------------------------------- */
.arbah-v2 .cashflow-v2-section { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.arbah-v2 .cashflow-v2-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.arbah-v2 .cashflow-v2-section-title { font-family: var(--arbah-v2-font-display); font-weight: 600; font-size: 15px; color: var(--arbah-v2-ink); }
.arbah-v2[dir="rtl"] .cashflow-v2-section-title { font-family: "IBM Plex Sans Arabic", var(--arbah-v2-font-display); }
.arbah-v2 .cashflow-v2-section-sub { font-size: 12.5px; color: var(--arbah-v2-ink-muted); margin-top: 2px; }
.arbah-v2 .cashflow-v2-empty { padding: 24px; text-align: center; color: var(--arbah-v2-ink-subtle); }

/* -- Legend ------------------------------------------------- */
.arbah-v2 .cashflow-v2-legend { display: inline-flex; gap: 14px; flex-wrap: wrap; }
.arbah-v2 .cashflow-v2-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--arbah-v2-ink-muted); }
.arbah-v2 .cashflow-v2-swatch { width: 12px; height: 12px; border-radius: 3px; }
.arbah-v2 .cashflow-v2-swatch.is-in  { background: var(--arbah-v2-success); }
.arbah-v2 .cashflow-v2-swatch.is-out { background: var(--arbah-v2-danger); }
.arbah-v2 .cashflow-v2-swatch.is-bal { background: var(--arbah-v2-brand); border-radius: 999px; }

/* -- Monthly chart (CSS paired bars + balance dots) --------- */
.arbah-v2 .cashflow-v2-chart { display: flex; gap: 8px; align-items: flex-end; height: 200px; overflow-x: auto; padding-top: 8px; }
.arbah-v2 .cashflow-v2-col { flex: 1 0 auto; min-width: 38px; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.arbah-v2 .cashflow-v2-bars-cell { position: relative; width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.arbah-v2 .cashflow-v2-bar { width: 42%; max-width: 14px; border-radius: 3px 3px 0 0; transition: height 200ms cubic-bezier(.2,0,0,1); }
.arbah-v2 .cashflow-v2-bar.is-in  { background: var(--arbah-v2-success); }
.arbah-v2 .cashflow-v2-bar.is-out { background: var(--arbah-v2-danger); }
.arbah-v2 .cashflow-v2-bal-dot { position: absolute; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 999px; background: var(--arbah-v2-brand); box-shadow: 0 0 0 2px var(--arbah-v2-surface); }
.arbah-v2 .cashflow-v2-col-label { font-size: 10px; color: var(--arbah-v2-ink-subtle); font-variant-numeric: tabular-nums; }

/* -- Movements table ---------------------------------------- */
.arbah-v2 .cashflow-v2-table-scroll { overflow-x: auto; }
.arbah-v2 .cashflow-v2-mov-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.arbah-v2 .cashflow-v2-mov-table th { text-align: start; padding: 8px 10px; font-size: 11px; font-weight: 600; color: var(--arbah-v2-ink-subtle); border-bottom: 1px solid var(--arbah-v2-border); white-space: nowrap; }
.arbah-v2 .cashflow-v2-mov-table td { padding: 9px 10px; border-bottom: 1px solid var(--arbah-v2-border); color: var(--arbah-v2-ink-muted); }
.arbah-v2 .cashflow-v2-num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.arbah-v2 .cashflow-v2-num bdi { unicode-bidi: isolate; font-family: var(--arbah-v2-font-mono); font-weight: 600; }
.arbah-v2 .cashflow-v2-num.is-in  { color: var(--arbah-v2-success); }
.arbah-v2 .cashflow-v2-num.is-out { color: var(--arbah-v2-danger); }
.arbah-v2 .cashflow-v2-dir { font-size: 10px; letter-spacing: 0.04em; }
.arbah-v2 .cashflow-v2-mov-desc { color: var(--arbah-v2-ink); font-weight: 500; }
.arbah-v2 .cashflow-v2-mov-proj { font-size: 12px; color: var(--arbah-v2-ink-muted); }
.arbah-v2 .cashflow-v2-mov-date { font-size: 12px; color: var(--arbah-v2-ink-subtle); }

/* -- Net by project ----------------------------------------- */
.arbah-v2 .cashflow-v2-netrows { display: flex; flex-direction: column; gap: 10px; }
.arbah-v2 .cashflow-v2-netrow { display: grid; grid-template-columns: 160px 1fr auto; align-items: center; gap: 12px; }
.arbah-v2 .cashflow-v2-net-name { font-size: 13px; color: var(--arbah-v2-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arbah-v2 .cashflow-v2-net-track { height: 12px; background: var(--arbah-v2-surface-sunken); border-radius: 999px; overflow: hidden; }
.arbah-v2 .cashflow-v2-net-bar { height: 100%; border-radius: 999px; }
.arbah-v2 .cashflow-v2-net-bar.is-pos { background: var(--arbah-v2-success); }
.arbah-v2 .cashflow-v2-net-bar.is-neg { background: var(--arbah-v2-danger); }

/* -- v2 portfolio header (CashflowV2Header) ----------------- */
/* Matches the design bundle's CashflowPageHeader: Plex-display title +
   portfolio subtitle on the leading side, a period ButtonGroup (pill /
   segmented filter variant) + project select + actions on the trailing
   side. Logical properties throughout so it flips clean in RTL. */
.arbah-v2 .cashflow-v2-page .cashflow-v2-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.arbah-v2 .cashflow-v2-page .cashflow-v2-title { margin: 0; font-size: 26px; line-height: 1.2; }
.arbah-v2 .cashflow-v2-page .cashflow-v2-subtitle {
  margin: 4px 0 0; color: var(--arbah-v2-ink-muted); font-size: 13px;
}
.arbah-v2 .cashflow-v2-page .cashflow-v2-header-controls {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
/* Period segmented control (pill variant for filter context, per locked spec). */
.arbah-v2 .cashflow-v2-page .cashflow-v2-period {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--arbah-v2-surface-sunken); border: 1px solid var(--arbah-v2-border);
  border-radius: var(--arbah-v2-radius-pill);
}
.arbah-v2 .cashflow-v2-page .cashflow-v2-period-btn {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: var(--arbah-v2-font-sans); font-size: 13px; font-weight: 600;
  color: var(--arbah-v2-ink-muted); padding: 6px 14px; min-height: 32px;
  border-radius: var(--arbah-v2-radius-pill); transition: background .12s, color .12s;
}
.arbah-v2 .cashflow-v2-page .cashflow-v2-period-btn:hover { color: var(--arbah-v2-ink); }
.arbah-v2 .cashflow-v2-page .cashflow-v2-period-btn.is-on {
  background: var(--arbah-v2-surface); color: var(--arbah-v2-brand);
  box-shadow: 0 1px 2px rgba(15,23,42,.08);
}
.arbah-v2 .cashflow-v2-page .cashflow-v2-select {
  background: var(--arbah-v2-surface); border: 1px solid var(--arbah-v2-border);
  border-radius: var(--arbah-v2-radius-md); color: var(--arbah-v2-ink);
  font-family: var(--arbah-v2-font-sans); font-size: 13px; padding: 7px 12px; min-height: 36px;
}
.arbah-v2 .cashflow-v2-page .cashflow-v2-select:focus {
  outline: none; border-color: var(--arbah-v2-brand); box-shadow: 0 0 0 3px rgba(16,42,67,.14);
}
.arbah-v2 .cashflow-v2-page .cashflow-v2-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: var(--arbah-v2-font-sans); font-size: 13px; font-weight: 600;
  padding: 8px 14px; min-height: 36px; border-radius: var(--arbah-v2-radius-md);
  border: 1px solid var(--arbah-v2-border); background: var(--arbah-v2-surface); color: var(--arbah-v2-ink);
}
.arbah-v2 .cashflow-v2-page .cashflow-v2-btn:hover { background: var(--arbah-v2-surface-raised); }
.arbah-v2 .cashflow-v2-page .cashflow-v2-btn.is-primary {
  background: var(--arbah-v2-accent); border-color: var(--arbah-v2-accent); color: #fff;
}
.arbah-v2 .cashflow-v2-page .cashflow-v2-btn.is-primary:hover { background: var(--arbah-v2-bronze-700, #7A4F1F); }