/* ============================================================ Arbah v2 — Selections surface Scoped restyle of the existing Selections page DOM under .arbah-v2. Legacy AND v1 paint stay byte-identical when the flag is off — nothing here applies unless carries .arbah-v2. Builds on --arbah-v2-* tokens only (src/design/arbah-v2-tokens.css) and the v2 primitives layer (arbah-v2-primitives.css: PageHeader, Button, Chip, KpiCard, EmptyState). This file does NOT redefine any primitive — it paints only the selections-specific hooks emitted by the page DOM: .selections-page (root), .selections-grid + .selection-card (+ .selection-card-title / -project / -foot / -manage), the v1 status pills .arbah-status-pill.status-{muted|warning|success|navy}, the filter filters (project, category) followed by a flex-wrap pill-button group (status filter). The selects pick up token chrome matching the page-header; the pills below pick up the v2 button language without touching the existing class names. */ .arbah-v2 .selections-page 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 .selections-page select:focus { outline: none; border-color: var(--arbah-v2-brand); box-shadow: 0 0 0 3px rgba(16, 42, 67, .18); } /* Status filter pill-row uses Tailwind border-rounded-full pill chips. Repaint surfaces + selected tone with v2 tokens; preserve the existing 3-state shape (idle / hover / selected). */ .arbah-v2 .selections-page button.rounded-full { background: var(--arbah-v2-surface); border-color: var(--arbah-v2-border); color: var(--arbah-v2-ink-muted); transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; } .arbah-v2 .selections-page button.rounded-full:hover { background: var(--arbah-v2-surface-raised); border-color: var(--arbah-v2-border-strong); color: var(--arbah-v2-ink); } /* Selected state — Tailwind brings .bg-blue-600/.text-white when active; repaint via the utility-class signal. */ .arbah-v2 .selections-page button.rounded-full.bg-blue-600 { background: var(--arbah-v2-brand); border-color: var(--arbah-v2-brand); color: var(--arbah-v2-surface); } /* -- Card grid + card body --------------------------------- */ /* Three-up responsive grid; each card is a raised surface with a token border and a v2 hover bump. The card stays at 12px radius (radius-lg) to read a touch more spacious than the tight Tasks/ Approvals rows. */ .arbah-v2 .selections-page .selections-grid { gap: 16px; } .arbah-v2 .selections-page .selection-card { background: var(--arbah-v2-surface); border: 1px solid var(--arbah-v2-border); border-radius: var(--arbah-v2-radius-lg, 12px); padding: 16px; box-shadow: var(--arbah-v2-shadow-sm); transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease; } .arbah-v2 .selections-page .selection-card:hover { border-color: var(--arbah-v2-border-strong); box-shadow: var(--arbah-v2-shadow-md, 0 4px 12px rgba(15, 23, 42, .08)); transform: translateY(-1px); } /* Card title: sans-bold, full-ink. The project subtitle drops to mono eyebrow for the project name. */ .arbah-v2 .selections-page .selection-card-title { color: var(--arbah-v2-ink); font-family: var(--arbah-v2-font-sans); font-weight: 600; font-size: 14.5px; line-height: 1.35; } .arbah-v2 .selections-page .selection-card-project { color: var(--arbah-v2-ink-subtle); font-family: var(--arbah-v2-font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; } /* Card foot is the divider strip with category + manage CTA. */ .arbah-v2 .selections-page .selection-card-foot { border-top-color: var(--arbah-v2-border); color: var(--arbah-v2-ink-subtle); } .arbah-v2 .selections-page .selection-card-manage { color: var(--arbah-v2-brand); font-weight: 500; } .arbah-v2 .selections-page .selection-card-manage:hover { text-decoration: underline; } /* -- Status pill (v1 .arbah-status-pill, light wrapper polish) - */ /* The page emits . The inner Chip is themed by the primitives layer (#140); the wrapper here only tightens the box the Chip sits in. Scoped under .selections-page so sibling surfaces using the same wrapper (e.g. Approvals) are unaffected. */ .arbah-v2 .selections-page .arbah-status-pill { display: inline-flex; align-items: center; } /* -- Empty / loading state --------------------------------- */ /* The page emits plain text-center blocks for the no-rows and loading cases. Nudge the ink ramp without structural change. */ .arbah-v2 .selections-page .text-center.py-16, .arbah-v2 .selections-page .text-center.py-20 { color: var(--arbah-v2-ink-subtle); } .arbah-v2 .selections-page .text-center.py-16 p, .arbah-v2 .selections-page .text-center.py-20 p { color: var(--arbah-v2-ink-muted); } /* -- Decision modal --------------------------------------- */ /* SelectionDecisionModal renders inside Modal primitive chrome (already themed at the primitives layer) and adds: .selection-decision-modal-card — card wrapper .selection-decision-options — option grid (1col mobile / 2col) .selection-decision-option-name — picked option name .selection-decision-option-price — picked option price (SAR) Class names are unique enough to use directly without a modal ancestor selector. */ .arbah-v2 .selection-decision-modal-card { background: var(--arbah-v2-surface); font-family: var(--arbah-v2-font-sans); color: var(--arbah-v2-ink); } .arbah-v2 .selection-decision-options { gap: 12px; } .arbah-v2 .selection-decision-option-name { color: var(--arbah-v2-ink); font-family: var(--arbah-v2-font-sans); font-weight: 600; font-size: 13.5px; } .arbah-v2 .selection-decision-option-price { color: var(--arbah-v2-ink); font-family: var(--arbah-v2-font-mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13.5px; } /* -- Mobile (375x812 anchor) ------------------------------- */ /* Stack the card grid to a single column at phone widths; the page header already collapses via existing Tailwind responsive utilities. */ @media (max-width: 640px) { .arbah-v2 .selections-page .selection-card { padding: 14px; } .arbah-v2 .selections-page .selection-card-title { font-size: 14px; } } /* -- AR / RTL ---------------------------------------------- */ /* Card grid + body are symmetric, so no extra RTL flipping needed for layout. The price figure in the decision modal joins "ر.س" which Plex Mono can't render — swap price digits to Plex Sans Arabic in RTL, mirroring the invoices/tasks pattern. The triple selector mirrors arbah-v2-shell.css and covers the three ways .arbah-v2 and [dir="rtl"] can nest. */ .arbah-v2[dir="rtl"] .selection-decision-option-price, [dir="rtl"] .arbah-v2 .selection-decision-option-price, .arbah-v2 [dir="rtl"] .selection-decision-option-price { font-family: "IBM Plex Sans Arabic", var(--arbah-v2-font-sans); } /* -- Design parity: 3-col selections grid (selections-grid.jsx SelectionsGrid = repeat(3, minmax(0,1fr))) + radius-12 cards. CSS-only over the legacy DOM; flag OFF unaffected. -- */ .arbah-v2 .selections-page .selections-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .arbah-v2 .selections-page .selection-card { border-radius: var(--arbah-v2-radius-lg); } @media (max-width: 1000px) { .arbah-v2 .selections-page .selections-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .arbah-v2 .selections-page .selections-grid { grid-template-columns: minmax(0, 1fr); } }