/* ============================================================
   Arbah v1 — Accounting (Round 4 PR 9)
   All rules 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/#111/#112/#113/#114. No --arbah-* declarations
   added here.

   !important policy: 0 in this file.

   Scope covers three surfaces:
   1. AccountingSettings (#/accounting) — integration status
      + queue summary + sync controls + recent sync log.
   2. Invoices (#/invoices) — transactions-style table with
      status pills.
   3. Forward-compat hooks for a future unified Accounting
      dashboard with project-cost-summary KPIs and charts.

   --- Enum-mapping decisions (codebase vs spec) ----------

   Invoice status (transactions table)
     codebase: draft / issued / paid / cancelled
     spec:     paid / pending / overdue / void
     resolution: style the UNION (6).
       paid     → success bg + white text (both)
       issued   → mapped to spec "pending" paint (warning + navy-900)
       pending  → spec hook (same paint as issued)
       overdue  → danger bg + white text (forward-compat)
       cancelled→ mapped to spec "void" paint (navy-100 + navy-700)
       void     → spec hook (same paint as cancelled)
       draft    → navy-100 + navy-700 muted (codebase-only state)

   Integration sync status (sync indicator)
     codebase: connected / disconnected / error / reauth_required
     spec:     synced / syncing / error / never
     resolution: style the UNION (8).
       synced   → success dot
       connected→ same — alias hook
       syncing  → info dot with pulse anim
       processing → same anim (codebase queue state)
       error    → danger dot (shared)
       never    → text-muted dot
       disconnected → text-muted dot (alias)
       reauth_required → warning dot

   --- ----------------------------------------------------
   ============================================================ */

/* -- Page shell --------------------------------------------- */
.arbah-v1 .accounting-page,
.arbah-v1 [data-testid="invoices-list"] {
  background: var(--arbah-bg);
  font-family: var(--arbah-font-sans);
  color: var(--arbah-text);
}

/* -- Filter bar --------------------------------------------- */
.arbah-v1 .accounting-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--arbah-space-3);
  align-items: center;
}
.arbah-v1 .accounting-filters input,
.arbah-v1 .accounting-filters select {
  background: var(--arbah-surface);
  border: 1px solid var(--arbah-border);
  border-radius: var(--arbah-radius-md);
  padding: var(--arbah-space-2) var(--arbah-space-3);
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text);
}
.arbah-v1 .accounting-filters input:focus,
.arbah-v1 .accounting-filters select:focus {
  border-color: var(--arbah-navy-700);
  box-shadow: var(--arbah-focus-ring-glow);
  outline: none;
}

/* -- Transactions / invoices table -------------------------- */
.arbah-v1 .transactions-table,
.arbah-v1 .invoices-list table {
  width: 100%;
  background: var(--arbah-surface);
  font-family: var(--arbah-font-sans);
  border-collapse: collapse;
}
.arbah-v1 .transactions-table thead tr,
.arbah-v1 .invoices-list thead tr {
  background: var(--arbah-navy-50);
  border-bottom: 1px solid var(--arbah-border);
}
.arbah-v1 .transactions-table th,
.arbah-v1 .invoices-list th {
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-sm);
  color: var(--arbah-navy-700);
  text-align: start;
  padding: var(--arbah-space-3) var(--arbah-space-4);
  letter-spacing: 0.02em;
}
.arbah-v1 .transactions-table tbody tr,
.arbah-v1 .invoices-list tbody tr {
  border-top: 1px solid var(--arbah-border);
  transition: background-color var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .transactions-table tbody tr:hover,
.arbah-v1 .invoices-list tbody tr:hover,
.arbah-v1 .transactions-table .invoice-row:hover {
  background: var(--arbah-navy-50);
}
.arbah-v1 .transactions-table td,
.arbah-v1 .invoices-list td {
  padding: var(--arbah-space-3) var(--arbah-space-4);
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text);
}

/* Currency cells — IBM Plex Mono for tabular alignment. The
   existing markup uses `.tabular-nums` (Tailwind utility) plus
   right-alignment; we keep right-align via [text-align: end]
   if a `.txn-amount-cell` class is added, but also style any
   td with `.tabular-nums` inside an .arbah-v1 table to swap
   to Plex Mono so existing invoice tables get the tabular
   look without JSX changes. */
.arbah-v1 .transactions-table .txn-amount,
.arbah-v1 .transactions-table .tabular-nums,
.arbah-v1 .invoices-list .tabular-nums,
.arbah-v1 .txn-amount {
  font-family: var(--arbah-font-mono);
  font-size: var(--arbah-text-sm);
  font-variant-numeric: tabular-nums;
}
.arbah-v1 .transactions-table .txn-amount--credit,
.arbah-v1 .txn-amount--credit {
  color: var(--arbah-success);
}
.arbah-v1 .transactions-table .txn-amount--debit,
.arbah-v1 .txn-amount--debit {
  color: var(--arbah-text);
}

/* -- Transaction / invoice status pills --------------------- */
/* Compound selector base — pill rule requires .txn-status root
   AND the value modifier, so applying a status modifier alone
   on a non-pill element does NOT trigger paint. */
.arbah-v1 .txn-status {
  display: inline-flex;
  align-items: center;
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-xs);
  padding: 2px var(--arbah-space-2);
  border-radius: var(--arbah-radius-full);
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.arbah-v1 .txn-status.txn-status-paid {
  background: var(--arbah-success);
  color: #FFFFFF;
}
.arbah-v1 .txn-status.txn-status-pending,
.arbah-v1 .txn-status.txn-status-issued {
  background: var(--arbah-warning);
  color: var(--arbah-navy-900);
}
.arbah-v1 .txn-status.txn-status-overdue {
  background: var(--arbah-danger);
  color: #FFFFFF;
}
.arbah-v1 .txn-status.txn-status-void,
.arbah-v1 .txn-status.txn-status-cancelled {
  background: var(--arbah-navy-100);
  color: var(--arbah-navy-700);
}
.arbah-v1 .txn-status.txn-status-draft {
  /* Codebase-only state. Muted treatment. */
  background: var(--arbah-surface-2);
  color: var(--arbah-text-muted);
}

/* -- Category tag (categorization chip) --------------------- */
.arbah-v1 .txn-category {
  display: inline-block;
  background: var(--arbah-navy-50);
  color: var(--arbah-text);
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-xs);
  padding: 2px var(--arbah-space-2);
  border-radius: var(--arbah-radius-full);
  line-height: 1.4;
}

/* -- Sync status indicator ---------------------------------- */
.arbah-v1 .sync-status {
  display: inline-flex;
  align-items: center;
  gap: var(--arbah-space-2);
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-xs);
  color: var(--arbah-text);
}
.arbah-v1 .sync-status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--arbah-radius-full);
  display: inline-block;
  flex-shrink: 0;
}
.arbah-v1 .sync-status.sync-status-synced .sync-status-dot,
.arbah-v1 .sync-status.sync-status-connected .sync-status-dot {
  background: var(--arbah-success);
}
.arbah-v1 .sync-status.sync-status-syncing .sync-status-dot,
.arbah-v1 .sync-status.sync-status-processing .sync-status-dot {
  background: var(--arbah-info);
  animation: arbah-sync-pulse 1.4s var(--arbah-ease-standard) infinite;
}
.arbah-v1 .sync-status.sync-status-error .sync-status-dot,
.arbah-v1 .sync-status.sync-status-failed .sync-status-dot,
.arbah-v1 .sync-status.sync-status-dead .sync-status-dot {
  background: var(--arbah-danger);
}
.arbah-v1 .sync-status.sync-status-never .sync-status-dot,
.arbah-v1 .sync-status.sync-status-disconnected .sync-status-dot {
  background: var(--arbah-text-muted);
}
.arbah-v1 .sync-status.sync-status-reauth_required .sync-status-dot {
  background: var(--arbah-warning);
}
@keyframes arbah-sync-pulse {
  0%   { opacity: 1;    transform: scale(1); }
  50%  { opacity: 0.5;  transform: scale(1.3); }
  100% { opacity: 1;    transform: scale(1); }
}

/* Sync status card surface — wraps the integration panel on
   AccountingSettings. White card on tinted background. */
.arbah-v1 .sync-status-card {
  background: var(--arbah-surface);
  border: 1px solid var(--arbah-border);
  border-radius: var(--arbah-radius-lg);
  padding: var(--arbah-space-5);
  box-shadow: var(--arbah-shadow-sm);
  font-family: var(--arbah-font-sans);
}

/* -- Invoice list (PR #111 row pattern) --------------------- */
.arbah-v1 .invoices-list,
.arbah-v1 .invoice-row {
  font-family: var(--arbah-font-sans);
}
.arbah-v1 .invoice-row .invoice-number,
.arbah-v1 .invoice-row td:first-child {
  font-family: var(--arbah-font-mono);
  color: var(--arbah-navy-700);
  font-weight: 600;
}
.arbah-v1 .invoice-row .invoice-amount {
  font-family: var(--arbah-font-mono);
  color: var(--arbah-navy-700);
  font-weight: 600;
  text-align: end;
}

/* -- Charts (forward-compat) ------------------------------- */
/* JS reads computed values via:
     getComputedStyle(el).getPropertyValue('--arbah-chart-primary')
   for runtime color injection. No chart lib in this PR's scope;
   when one lands it must use this pattern (no inline color
   fallbacks). */
.arbah-v1 .accounting-chart {
  /* Cross-PR consistency with #110: same primary/secondary
     channels exposed as scoped custom properties. */
  --arbah-chart-primary:   var(--arbah-navy-500);
  --arbah-chart-secondary: var(--arbah-bronze-500);
  --arbah-chart-axis:      var(--arbah-text-muted);
  font-family: var(--arbah-font-sans);
}
.arbah-v1 .accounting-chart .chart-line-primary,
.arbah-v1 .accounting-chart [data-series="primary"] {
  stroke: var(--arbah-chart-primary);
  fill: none;
}
.arbah-v1 .accounting-chart .chart-line-secondary,
.arbah-v1 .accounting-chart [data-series="secondary"] {
  stroke: var(--arbah-chart-secondary);
  fill: none;
}
.arbah-v1 .accounting-chart .chart-axis,
.arbah-v1 .accounting-chart [data-axis] {
  stroke: var(--arbah-chart-axis);
  color: var(--arbah-text-muted);
  font-size: var(--arbah-text-xs);
}

/* -- Project cost summary (forward-compat KPI cards) -------- */
.arbah-v1 .project-cost-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--arbah-space-3);
}
.arbah-v1 .project-cost-summary .cost-summary-card,
.arbah-v1 .cost-summary-card {
  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);
}
.arbah-v1 .cost-summary-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 .cost-summary-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;
}

/* -- Mobile (375x812) -------------------------------------- */
@media (max-width: 640px) {
  /* Table → card stack: hide thead, stack cells. */
  .arbah-v1 .transactions-table,
  .arbah-v1 .invoices-list table {
    display: block;
  }
  .arbah-v1 .transactions-table thead,
  .arbah-v1 .invoices-list thead {
    display: none;
  }
  .arbah-v1 .transactions-table tbody,
  .arbah-v1 .invoices-list tbody {
    display: block;
  }
  .arbah-v1 .transactions-table tbody tr,
  .arbah-v1 .invoices-list 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 .transactions-table tbody td,
  .arbah-v1 .invoices-list tbody td {
    display: block;
    padding: var(--arbah-space-1) 0;
    border: none;
  }
  /* Filter bar horizontal scroll on phone. */
  .arbah-v1 .accounting-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--arbah-space-2);
  }
  .arbah-v1 .accounting-filters > * {
    flex-shrink: 0;
  }
  /* Charts adapt height. */
  .arbah-v1 .accounting-chart {
    max-height: 240px;
  }
}

/* -- AR / RTL ----------------------------------------------- */
/* Plex Sans Arabic is first in --arbah-font-sans, so AR labels
   pick it up automatically. Currency cells stay Plex Mono so
   digits render LTR even inside an RTL container — `unicode-
   bidi: plaintext` keeps the numeric token directional. */
.arbah-v1 .transactions-table .tabular-nums,
.arbah-v1 .invoices-list .tabular-nums,
.arbah-v1 .txn-amount,
.arbah-v1 .invoice-amount,
.arbah-v1 .cost-summary-value {
  unicode-bidi: plaintext;
}