/* ============================================================
   Arbah v2 — Receipts surface
   All rules scoped under .arbah-v2. Off-state byte-identical —
   no-op without the .arbah-v2 ancestor (see theme-flag.js).

   Scope decision: Receipts' live DOM (src/pages/Receipts.js) is a
   table layout (NOT a card grid) with three KPI summary cards
   above the filter row, then `<table class="receipts-table">`
   with bespoke per-cell hooks. The lightbox + add/edit modal
   share photo/modal primitives.

   Hooks present + styled here:
     `.receipts-page` page wrapper (also carries data-testid)
     `.receipts-filters` filter row
     `.receipt-summary-card` + `.receipt-summary-card--net|--vat|--total`
       + `.receipt-summary-label` + `.receipt-summary-value`
     `.receipts-table`, `.receipt-supplier`, `.receipt-category`
     `.receipt-amount` + `.receipt-amount--vat|--total`
     `.receipt-modal`, `.receipt-payment-modal`
     `.photo-lightbox.receipt-lightbox` / `.receipt-lightbox-image`
       / `.receipt-lightbox-close`

   Out of scope (handled by primitives layer):
     - `.modal-panel / -header / -body` chrome (shared modal)
     - PageHeader primitive (`.page-header / -title / -subtitle`)
     - `.btn / .btn-primary / .btn-secondary` (add/export buttons)
     - `.chip / .chip-*` (none on receipts — no status pill in DOM)

   Enrichment notes (logged, NOT auto-fixed by CSS):
     - Spec: status chip per row (pending=warning, approved=success).
       Receipts schema has no approval_status field → no status chip
       in DOM. Style what exists; flagged for future enrichment.
     - Spec: filter chips by category/project. Current DOM is a
       single project `<select>` inside `.receipts-filters` — styled
       what exists.
     - Row alternating backgrounds via JS-computed `bg-blue-50` /
       `bg-white` per index; overridden via `tbody tr:nth-child(2n)`
       inside this scope so v2 stripes use v2 surface tokens.
     - Amount cells `.receipt-amount--vat` and `--total` carry
       Tailwind bg-yellow-50 + bg-blue-100 inline; we override at
       higher specificity with v2 warning-soft / brand-soft.
     - Balance ok/error inside the modal uses Tailwind `bg-green-50`
       / `bg-red-50` literally without a semantic class — not
       reachable from CSS without a JSX hook. Flagged.

   Specificity: Tailwind utilities (0,1,0); `.arbah-v2 .x` (0,2,0)
   wins. !important policy: 0.
   ============================================================ */

/* -- Page shell --------------------------------------------- */
.arbah-v2 .receipts-page {
  color: var(--arbah-v2-ink);
  font-family: var(--arbah-v2-font-sans);
}

/* -- Filters row -------------------------------------------- */
.arbah-v2 .receipts-filters select {
  background: var(--arbah-v2-surface);
  border: 1px solid var(--arbah-v2-border);
  border-radius: var(--arbah-v2-radius-md);
  padding: 8px 12px;
  font-family: var(--arbah-v2-font-sans);
  font-size: 13.5px;
  color: var(--arbah-v2-ink);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.arbah-v2 .receipts-filters select:focus {
  outline: none;
  border-color: var(--arbah-v2-brand);
  box-shadow: 0 0 0 3px rgba(16, 42, 67, .18);
}

/* -- KPI summary cards (Net / VAT / Grand) ------------------ */
/* DOM emits `rounded-xl border ${s.color} p-4 text-center` with
   per-variant Tailwind `bg-blue-50 border-blue-200 text-blue-800`
   (net), `bg-yellow-50 border-yellow-200 text-yellow-800` (VAT),
   `bg-slate-800 border-slate-800 text-white` (grand). We repaint
   each variant in v2 token equivalents. */
.arbah-v2 .receipt-summary-card {
  border-radius: var(--arbah-v2-radius-lg);
  border: 1px solid var(--arbah-v2-border);
  background: var(--arbah-v2-surface);
  box-shadow: var(--arbah-v2-shadow-sm);
  transition: box-shadow 120ms ease;
}
.arbah-v2 .receipt-summary-card:hover {
  box-shadow: var(--arbah-v2-shadow-md);
}
.arbah-v2 .receipt-summary-card--net {
  background: var(--arbah-v2-info-soft);
  border-color: var(--arbah-v2-info);
}
.arbah-v2 .receipt-summary-card--vat {
  background: var(--arbah-v2-warning-soft);
  border-color: var(--arbah-v2-warning);
}
.arbah-v2 .receipt-summary-card--total {
  background: var(--arbah-v2-brand);
  border-color: var(--arbah-v2-brand);
}

/* Per-variant text colors (override inline `${s.text}` Tailwind). */
.arbah-v2 .receipt-summary-card--net  .receipt-summary-label,
.arbah-v2 .receipt-summary-card--net  .receipt-summary-value {
  color: var(--arbah-v2-info);
}
.arbah-v2 .receipt-summary-card--vat  .receipt-summary-label,
.arbah-v2 .receipt-summary-card--vat  .receipt-summary-value {
  color: var(--arbah-v2-warning);
}
.arbah-v2 .receipt-summary-card--total .receipt-summary-label,
.arbah-v2 .receipt-summary-card--total .receipt-summary-value {
  color: #fff;
}

/* Label = Plex Mono eyebrow; Value = Plex Serif at numeric scale.
   Tabular-nums keeps the digit columns aligned across the row. */
.arbah-v2 .receipt-summary-label {
  font-family: var(--arbah-v2-font-mono);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.arbah-v2 .receipt-summary-value {
  font-family: var(--arbah-v2-font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  unicode-bidi: plaintext;
}

/* -- Receipts table ----------------------------------------- */
/* DOM: `bg-white rounded-xl border border-gray-100 shadow-xs
   overflow-hidden` wrapping `<table class="receipts-table">`. */
.arbah-v2 .receipts-table {
  font-family: var(--arbah-v2-font-sans);
  color: var(--arbah-v2-ink);
}

/* Header row — DOM uses `bg-slate-800 text-white tracking-wide`;
   we repaint with v2 brand navy. */
.arbah-v2 .receipts-table thead tr {
  background: var(--arbah-v2-brand);
  color: #fff;
}
.arbah-v2 .receipts-table thead th {
  font-family: var(--arbah-v2-font-mono);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Body rows — alternating stripes via :nth-child override the
   JS-computed Tailwind `bg-blue-50 / bg-white` per-row classes. */
.arbah-v2 .receipts-table tbody tr {
  background: var(--arbah-v2-surface);
  transition: background-color 120ms ease;
}
.arbah-v2 .receipts-table tbody tr:nth-child(2n) {
  background: var(--arbah-v2-surface-sunken);
}
.arbah-v2 .receipts-table tbody tr:hover {
  background: var(--arbah-v2-navy-100);
}

/* Footer row — total summary; same navy as header for symmetry. */
.arbah-v2 .receipts-table tfoot tr {
  background: var(--arbah-v2-brand);
  color: #fff;
}

/* -- Per-cell text ------------------------------------------ */
.arbah-v2 .receipts-table .receipt-supplier {
  color: var(--arbah-v2-ink);
  font-weight: 500;
}
.arbah-v2 .receipts-table .receipt-category {
  color: var(--arbah-v2-brand);
  font-family: var(--arbah-v2-font-sans);
  font-size: 11.5px;
}

/* Amount cells — Plex Mono numerics, tabular-nums, plaintext bidi
   so signed amounts render LTR under AR. */
.arbah-v2 .receipts-table .receipt-amount {
  font-family: var(--arbah-v2-font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  unicode-bidi: plaintext;
  color: var(--arbah-v2-ink);
}
.arbah-v2 .receipts-table .receipt-amount--vat {
  background: var(--arbah-v2-warning-soft);
  color: var(--arbah-v2-warning);
}
.arbah-v2 .receipts-table .receipt-amount--total {
  background: var(--arbah-v2-navy-100);
  color: var(--arbah-v2-brand);
  font-weight: 700;
}

/* -- Add/Edit modal body ------------------------------------ */
.arbah-v2 .receipt-modal,
.arbah-v2 .receipt-payment-modal {
  font-family: var(--arbah-v2-font-sans);
  color: var(--arbah-v2-ink);
}

/* -- Lightbox ----------------------------------------------- */
.arbah-v2 .photo-lightbox.receipt-lightbox {
  background: rgba(15, 23, 42, .92);
}
.arbah-v2 .photo-lightbox.receipt-lightbox .receipt-lightbox-image {
  border-radius: var(--arbah-v2-radius-lg);
  box-shadow: var(--arbah-v2-shadow-md);
}
.arbah-v2 .photo-lightbox.receipt-lightbox .receipt-lightbox-close {
  color: rgba(255, 255, 255, .85);
  background: transparent;
  border-radius: var(--arbah-v2-radius-sm);
  transition: color 120ms ease, background-color 120ms ease;
}
.arbah-v2 .photo-lightbox.receipt-lightbox .receipt-lightbox-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, .12);
}

/* -- Mobile --------------------------------------------------
   KPI grid is `grid-cols-3` from Tailwind (fixed); under 640px we
   reduce the value font size + tighten card radius so it stays
   readable on phones. Table relies on parent `overflow-hidden` +
   horizontal scroll for narrow screens. */
@media (max-width: 640px) {
  .arbah-v2 .receipt-summary-card {
    border-radius: var(--arbah-v2-radius-md);
  }
  .arbah-v2 .receipt-summary-value {
    font-size: 18px;
  }
  .arbah-v2 .receipts-table thead th {
    font-size: 10px;
  }
}

/* -- RTL ----------------------------------------------------
   Page sets dir="rtl" inline. Amount cells use plaintext bidi
   (already set) so digits + signs read LTR. Plex Serif on
   `.receipt-summary-value` swapped to the sans stack under RTL
   (Plex Serif has no Arabic coverage). Three-selector pattern
   for all .arbah-v2 / [dir="rtl"] nest orders. */
.arbah-v2[dir="rtl"] .receipt-summary-value,
[dir="rtl"] .arbah-v2 .receipt-summary-value,
.arbah-v2 [dir="rtl"] .receipt-summary-value {
  font-family: var(--arbah-v2-font-sans);
  letter-spacing: 0;
}