/* ============================================================
   Arbah v1 — Finance cluster (Round 4 PR 12)
   Covers 4 routes — #/reports, #/trends, #/cashflow, #/budget —
   in a single file scoped under .arbah-v1. Legacy paint byte-
   identical when the flag is off; this file is a no-op.

   Reads tokens from src/design/arbah-tokens.css. Cross-PR reuse
   with #109/#110 (KPI cards), #111 (filter chips), #115
   (transactions-table, currency Plex Mono, chart channel
   custom properties), #116 (segmented control), #117 (tab nav
   active = navy-700 + bronze-500 underline).

   !important policy: 0 in this file.

   --- Variance enum (locked) ---------------------------------
   Across cashflow + budget surfaces:
     variance positive (over-budget or surplus) → --arbah-success
     variance negative (under-budget or deficit) → --arbah-danger
   Replaces the legacy text-emerald-700 / text-red-700 Tailwind
   utility classes only under the flag — they remain on the DOM
   so no-flag paint is identical.
   ------------------------------------------------------------

   --- Chart token contract (cross-PR with #115) --------------
   `.accounting-chart` exposes:
     --arbah-chart-primary   → --arbah-navy-500
     --arbah-chart-secondary → --arbah-bronze-500
     --arbah-chart-axis      → --arbah-text-muted
   This file re-declares those same channels on .trends-page
   and .cashflow-page so chart libs at those routes pick them
   up via getComputedStyle without needing a separate import.
   ------------------------------------------------------------
   ============================================================ */

/* -- Shared page shell -------------------------------------- */
.arbah-v1 .reports-hub,
.arbah-v1 .trends-page,
.arbah-v1 .cashflow-page,
.arbah-v1 .budget-page {
  background: var(--arbah-bg);
  font-family: var(--arbah-font-sans);
  color: var(--arbah-text);
}

/* =====  REPORTS HUB  ====================================== */
.arbah-v1 .reports-hub {
  /* Wrap is the page-level container; tiles below are the
     interactive surface. */
}
.arbah-v1 .reports-hub .report-tile,
.arbah-v1 .report-tile {
  background: var(--arbah-surface);
  border: 1px solid var(--arbah-border);
  border-radius: var(--arbah-radius-lg);
  box-shadow: var(--arbah-shadow-sm);
  padding: var(--arbah-space-5);
  font-family: var(--arbah-font-sans);
  cursor: pointer;
  transition: box-shadow var(--arbah-duration-base) var(--arbah-ease-standard),
              transform var(--arbah-duration-base) var(--arbah-ease-standard);
}
.arbah-v1 .report-tile:hover {
  box-shadow: var(--arbah-shadow-md);
  transform: scale(1.02);
}
.arbah-v1 .report-tile-title {
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-base);
  color: var(--arbah-navy-700);
  line-height: 1.4;
  margin: 0;
}
.arbah-v1 .report-tile-desc {
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-xs);
  color: var(--arbah-text-muted);
  line-height: 1.5;
  margin: 0;
}
.arbah-v1 .report-tile-icon {
  color: var(--arbah-bronze-500);
}
/* The Reports page reuses .kpi-icon.kpi-icon-brand for the
   tile icon (legacy class). Wrap that in scope so bronze
   wins over the legacy navy when the flag is on. */
.arbah-v1 .reports-hub .kpi-icon.kpi-icon-brand,
.arbah-v1 .report-tile .kpi-icon.kpi-icon-brand {
  color: var(--arbah-bronze-500);
  background: var(--arbah-bronze-50);
}

/* =====  TRENDS  =========================================== */
.arbah-v1 .trends-page {
  --arbah-chart-primary:   var(--arbah-navy-500);
  --arbah-chart-secondary: var(--arbah-bronze-500);
  --arbah-chart-axis:      var(--arbah-text-muted);
}
.arbah-v1 .trends-chart-card,
.arbah-v1 .trends-page > section,
.arbah-v1 .trends-page [data-testid^="trends-chart"] {
  background: var(--arbah-surface);
  border: 1px solid var(--arbah-border);
  border-radius: var(--arbah-radius-lg);
  box-shadow: var(--arbah-shadow-sm);
  padding: var(--arbah-space-5);
  font-family: var(--arbah-font-sans);
}
.arbah-v1 .trends-chart-title,
.arbah-v1 .trends-page h2 {
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-base);
  color: var(--arbah-navy-700);
  margin: 0 0 var(--arbah-space-3) 0;
}

/* Trends chart series + axes — same pattern as #115. */
.arbah-v1 .trends-page .chart-line-primary,
.arbah-v1 .trends-page [data-series="primary"],
.arbah-v1 .trends-chart-card [data-series="primary"] {
  stroke: var(--arbah-chart-primary);
  fill: none;
}
.arbah-v1 .trends-page .chart-line-secondary,
.arbah-v1 .trends-page [data-series="secondary"] {
  stroke: var(--arbah-chart-secondary);
  fill: none;
}
.arbah-v1 .trends-page .chart-axis,
.arbah-v1 .trends-page [data-axis] {
  stroke: var(--arbah-chart-axis);
  color: var(--arbah-text-muted);
  font-size: var(--arbah-text-xs);
}

/* Trends period selector — segmented control (PR #116 pattern). */
.arbah-v1 .trends-period-selector {
  display: inline-flex;
  background: var(--arbah-navy-50);
  border-radius: var(--arbah-radius-md);
  padding: 2px;
  gap: 2px;
  font-family: var(--arbah-font-sans);
}
.arbah-v1 .trends-period-option,
.arbah-v1 .trends-period-selector button {
  background: transparent;
  border: none;
  padding: var(--arbah-space-1) var(--arbah-space-3);
  border-radius: var(--arbah-radius-sm);
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text);
  cursor: pointer;
  transition: background-color var(--arbah-duration-fast) var(--arbah-ease-standard),
              color var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .trends-period-option.is-active,
.arbah-v1 .trends-period-option[aria-pressed="true"],
.arbah-v1 .trends-period-selector button.is-active {
  background: var(--arbah-bronze-500);
  color: #FFFFFF;
}

/* =====  CASHFLOW  ========================================= */
.arbah-v1 .cashflow-page {
  --arbah-chart-primary:   var(--arbah-navy-500);
  --arbah-chart-secondary: var(--arbah-bronze-500);
  --arbah-chart-axis:      var(--arbah-text-muted);
}

/* Cashflow has its own tab nav (actual / forecast). The legacy
   markup uses the same `border-blue-600` Tailwind active state
   as Project Detail tabs did — we re-paint it under the flag
   with PR #117's pattern (navy-700 text + bronze-500 underline). */
.arbah-v1 .cashflow-page .cashflow-tabs,
.arbah-v1 .cashflow-page > div > .flex.gap-0,
.arbah-v1 .cashflow-page .border-b.border-gray-200 > .flex.gap-0 {
  border-bottom: 1px solid var(--arbah-border);
  font-family: var(--arbah-font-sans);
}
.arbah-v1 .cashflow-page .cashflow-tab,
.arbah-v1 .cashflow-tab {
  background: transparent;
  border-bottom: 2px solid transparent;
  padding: var(--arbah-space-3) var(--arbah-space-5);
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text-muted);
  cursor: pointer;
  transition: color var(--arbah-duration-fast) var(--arbah-ease-standard),
              border-color var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .cashflow-tab:hover {
  color: var(--arbah-navy-700);
}
.arbah-v1 .cashflow-tab.is-active,
.arbah-v1 .cashflow-tab[aria-selected="true"] {
  color: var(--arbah-navy-700);
  border-bottom-color: var(--arbah-bronze-500);
}

/* Cashflow phase budgets table — reuses #115 transactions-table */
.arbah-v1 .cashflow-page table {
  width: 100%;
  background: var(--arbah-surface);
  border-collapse: collapse;
  font-family: var(--arbah-font-sans);
}
.arbah-v1 .cashflow-page thead tr {
  background: var(--arbah-navy-50);
  border-bottom: 1px solid var(--arbah-border);
}
.arbah-v1 .cashflow-page th {
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-sm);
  color: var(--arbah-navy-700);
  padding: var(--arbah-space-3) var(--arbah-space-4);
  text-align: start;
}
.arbah-v1 .cashflow-page tbody tr {
  border-top: 1px solid var(--arbah-border);
  transition: background-color var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .cashflow-page tbody tr:hover {
  background: var(--arbah-navy-50);
}
.arbah-v1 .cashflow-page td {
  padding: var(--arbah-space-3) var(--arbah-space-4);
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text);
}
.arbah-v1 .cashflow-page .tabular-nums {
  font-family: var(--arbah-font-mono);
  font-size: var(--arbah-text-sm);
  font-variant-numeric: tabular-nums;
  unicode-bidi: plaintext;
}

/* Cashflow KPI strip — reuses #110 KPI card pattern. */
.arbah-v1 .cashflow-page .kpi-strip,
.arbah-v1 .cashflow-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--arbah-space-3);
}
.arbah-v1 .cashflow-page .cashflow-kpi,
.arbah-v1 .cashflow-kpi {
  background: var(--arbah-surface);
  border: 1px solid var(--arbah-border);
  border-radius: var(--arbah-radius-lg);
  padding: var(--arbah-space-4);
  box-shadow: var(--arbah-shadow-sm);
  font-family: var(--arbah-font-sans);
}
.arbah-v1 .cashflow-kpi-label {
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-xs);
  color: var(--arbah-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.arbah-v1 .cashflow-kpi-value {
  font-family: var(--arbah-font-mono);
  font-size: var(--arbah-text-xl);
  font-weight: 600;
  color: var(--arbah-navy-700);
  font-variant-numeric: tabular-nums;
  unicode-bidi: plaintext;
}

/* =====  BUDGET  =========================================== */
.arbah-v1 .budget-page {
  --arbah-chart-primary:   var(--arbah-navy-500);
  --arbah-chart-secondary: var(--arbah-bronze-500);
  --arbah-chart-axis:      var(--arbah-text-muted);
}

/* Budget KPI strip — same pattern as cashflow. */
.arbah-v1 .budget-page .budget-kpi-strip,
.arbah-v1 .budget-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--arbah-space-3);
}
.arbah-v1 .budget-page .budget-kpi,
.arbah-v1 .budget-kpi {
  background: var(--arbah-surface);
  border: 1px solid var(--arbah-border);
  border-radius: var(--arbah-radius-lg);
  padding: var(--arbah-space-4);
  box-shadow: var(--arbah-shadow-sm);
  font-family: var(--arbah-font-sans);
}
.arbah-v1 .budget-kpi-label {
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-xs);
  color: var(--arbah-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.arbah-v1 .budget-kpi-value {
  font-family: var(--arbah-font-mono);
  font-size: var(--arbah-text-xl);
  font-weight: 600;
  color: var(--arbah-navy-700);
  font-variant-numeric: tabular-nums;
  unicode-bidi: plaintext;
}

/* Budget expense table — reuses #115 transactions-table. */
.arbah-v1 .budget-page table {
  width: 100%;
  background: var(--arbah-surface);
  border-collapse: collapse;
  font-family: var(--arbah-font-sans);
}
.arbah-v1 .budget-page thead tr {
  background: var(--arbah-navy-50);
  border-bottom: 1px solid var(--arbah-border);
}
.arbah-v1 .budget-page th {
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-sm);
  color: var(--arbah-navy-700);
  padding: var(--arbah-space-3) var(--arbah-space-4);
  text-align: start;
}
.arbah-v1 .budget-page tbody tr {
  border-top: 1px solid var(--arbah-border);
  transition: background-color var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .budget-page tbody tr:hover {
  background: var(--arbah-navy-50);
}
.arbah-v1 .budget-page td {
  padding: var(--arbah-space-3) var(--arbah-space-4);
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text);
}
.arbah-v1 .budget-page .tabular-nums,
.arbah-v1 .budget-page .budget-amount {
  font-family: var(--arbah-font-mono);
  font-size: var(--arbah-text-sm);
  font-variant-numeric: tabular-nums;
  unicode-bidi: plaintext;
}

/* Budget phase breakdown — horizontal stacked progress bars. */
.arbah-v1 .phase-bar {
  position: relative;
  display: block;
  width: 100%;
  height: 8px;
  background: var(--arbah-navy-50);
  border-radius: var(--arbah-radius-full);
  overflow: hidden;
}
.arbah-v1 .phase-bar-fill,
.arbah-v1 .phase-bar > .fill {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  height: 100%;
  background: var(--arbah-bronze-500);
  border-radius: var(--arbah-radius-full);
  transition: width var(--arbah-duration-base) var(--arbah-ease-standard);
}
.arbah-v1 .phase-bar-label,
.arbah-v1 .phase-name {
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text);
}
.arbah-v1 .phase-bar-amount {
  font-family: var(--arbah-font-mono);
  font-size: var(--arbah-text-xs);
  color: var(--arbah-text-muted);
  font-variant-numeric: tabular-nums;
  unicode-bidi: plaintext;
}

/* =====  VARIANCE (cashflow + budget) ====================== */
/* Compound selector — both `.variance` (base) AND the value
   modifier must be present, so the modifier alone on a
   non-variance element does NOT trigger paint. */
.arbah-v1 .variance {
  font-family: var(--arbah-font-mono);
  font-variant-numeric: tabular-nums;
  unicode-bidi: plaintext;
}
.arbah-v1 .variance.variance-positive {
  color: var(--arbah-success);
}
.arbah-v1 .variance.variance-negative {
  color: var(--arbah-danger);
}
/* The existing markup uses inline conditional Tailwind:
     ${varAmt >= 0 ? 'text-emerald-700' : 'text-red-700'}
   We layer a token-driven repaint on top via the Tailwind
   classes themselves inside .arbah-v1. */
.arbah-v1 .cashflow-page td.text-emerald-700,
.arbah-v1 .budget-page td.text-emerald-700,
.arbah-v1 td.cashflow-variance-pos,
.arbah-v1 td.budget-variance-pos {
  color: var(--arbah-success);
}
.arbah-v1 .cashflow-page td.text-red-700,
.arbah-v1 .budget-page td.text-red-700,
.arbah-v1 td.cashflow-variance-neg,
.arbah-v1 td.budget-variance-neg {
  color: var(--arbah-danger);
}

/* =====  Mobile (375x812)  ================================= */
@media (max-width: 640px) {
  /* Reports tiles: 1 column. */
  .arbah-v1 .reports-hub .report-tile {
    padding: var(--arbah-space-4);
  }
  /* Trends/Cashflow/Budget tables → card stack at phone width. */
  .arbah-v1 .cashflow-page table,
  .arbah-v1 .cashflow-page thead,
  .arbah-v1 .cashflow-page tbody,
  .arbah-v1 .budget-page table,
  .arbah-v1 .budget-page thead,
  .arbah-v1 .budget-page tbody {
    display: block;
  }
  .arbah-v1 .cashflow-page thead,
  .arbah-v1 .budget-page thead {
    display: none;
  }
  .arbah-v1 .cashflow-page tbody tr,
  .arbah-v1 .budget-page tbody tr {
    display: block;
    background: var(--arbah-surface);
    border: 1px solid var(--arbah-border);
    border-radius: var(--arbah-radius-md);
    padding: var(--arbah-space-3);
    margin-bottom: var(--arbah-space-2);
  }
  .arbah-v1 .cashflow-page tbody td,
  .arbah-v1 .budget-page tbody td {
    display: block;
    padding: var(--arbah-space-1) 0;
    border: none;
  }
  /* KPI strips collapse to 2×2 at small width, 1×N at narrowest. */
  .arbah-v1 .cashflow-kpi-strip,
  .arbah-v1 .budget-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Charts adapt height. */
  .arbah-v1 .trends-chart-card,
  .arbah-v1 .cashflow-page .chart,
  .arbah-v1 .budget-page .chart {
    max-height: 240px;
  }
}

@media (max-width: 360px) {
  .arbah-v1 .cashflow-kpi-strip,
  .arbah-v1 .budget-kpi-strip {
    grid-template-columns: 1fr;
  }
}

/* =====  AR / RTL  ========================================= */
/* Plex Sans Arabic is first in --arbah-font-sans, so AR labels
   pick it up automatically. Phase bars use inset-inline-start
   for the fill anchor — direction inverts under [dir="rtl"]
   without per-rule overrides. Table column order is direction-
   driven via `text-align: start`. Currency cells carry
   `unicode-bidi: plaintext` so digits render LTR even inside
   an RTL container. */