/* ============================================================ Arbah v2 — Approvals surface (master-detail rebuild) Bespoke layout for the flag-gated v2 Approvals page DOM emitted by src/pages/Approvals.js (ApprovalsV2) + src/components/approvals/*. Nothing here applies unless carries .arbah-v2, so the legacy AND v1 paint stay byte-identical when the flag is off. Built on --arbah-v2-* tokens (arbah-v2-tokens.css) and the v2 primitives layer (arbah-v2-primitives.css: .card/.card-hero, .ribbon, .tabs/.tab, .chip, .btn-*, .empty, .page-title/.page-subtitle). This file owns ONLY the approvals-specific master-detail scaffolding: the page shell, header, toolbar, the two-column grid, the list items, the detail pane, and the New-Request modal chrome. !important policy: 0. The .arbah-v2 ancestor + compound selectors out-specify any utility without escalation. RTL: layout uses logical properties + CSS-grid source order, so the master list lands on the inline-end (right) side under dir=rtl with no direction-specific overrides. Currency/amount runs are wrapped in in the markup so SAR numerics stay LTR inside an AR row. ============================================================ */ /* -- Page shell --------------------------------------------- */ .arbah-v2 .approvals-v2-page { font-family: var(--arbah-v2-font-sans); color: var(--arbah-v2-ink); max-width: 1100px; margin-inline: auto; padding: 24px; display: flex; flex-direction: column; gap: 18px; } /* -- Header ------------------------------------------------- */ .arbah-v2 .approvals-v2-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .arbah-v2 .approvals-v2-header-main { min-width: 0; } /* .page-title / .page-subtitle inherit the primitive type; nothing to add beyond the flex placement above. */ /* Header summary stat line (design approvals-queue.jsx header sub-stats). Inline, wraps; each stat is a Plex Mono .tnum numeral + a muted label. Tone classes tint only the NUMERAL, mirroring the design accents. */ .arbah-v2 .approvals-v2-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-top: 10px; font-size: 13px; color: var(--arbah-v2-ink-muted); } .arbah-v2 .approvals-v2-stat { white-space: nowrap; } .arbah-v2 .approvals-v2-stat-num { font-family: var(--arbah-v2-font-mono); font-weight: 600; color: var(--arbah-v2-ink); margin-inline-end: 4px; } .arbah-v2 .approvals-v2-stat.is-warning .approvals-v2-stat-num { color: var(--arbah-v2-warning); } .arbah-v2 .approvals-v2-stat.is-danger .approvals-v2-stat-num { color: var(--arbah-v2-danger); } .arbah-v2 .approvals-v2-stat.is-success .approvals-v2-stat-num { color: var(--arbah-v2-success); } /* Status-section dividers (design 'Awaiting you' / 'Recently approved' / 'Recently declined'). Mono uppercase label + tnum count. */ .arbah-v2 .approvals-v2-section-head { display: flex; align-items: baseline; gap: 8px; padding: 14px 4px 6px; font-family: var(--arbah-v2-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--arbah-v2-ink-subtle); } .arbah-v2 .approvals-v2-section-head:first-child { padding-top: 2px; } .arbah-v2 .approvals-v2-section-count { color: var(--arbah-v2-ink-muted); } /* -- Toolbar (status tabs + project filter) ----------------- */ .arbah-v2 .approvals-v2-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .arbah-v2 .approvals-v2-tabs { flex-wrap: wrap; max-width: 100%; } /* Count chip rides inside each .tab; tighten its inline gap. */ .arbah-v2 .approvals-v2-tab-count { margin-inline-start: 6px; height: 18px; min-width: 18px; padding-inline: 6px; font-size: 10.5px; } /* Project filter