/* ============================================================ Arbah v2 — Reports surface (Lane D) Scoped restyle of the existing Reports hub 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, Card). This file does NOT redefine any primitive — it paints only the reports-hub-specific hooks emitted by the page DOM: .reports-hub, .report-tile + descendants (-icon / -title / -desc), the date-range/project filter card (no named class — targeted by Tailwind class compounds), and the cards grid container ([data-testid="reports-cards"]). DOM source (NO edits — visual rollout only): src/pages/Reports.js (hub page). Out of scope (intentional — flagged for the architect): - Charts / KPIs: the Reports.js hub is a launcher; the SPEC's chart-in-card / summary-KPI regions live on the print report viewer pages (ReportPortfolio.js, ReportFinancial.js, etc.), NOT the hub. Per protocol decision default: style only what exists, log missing DOM, continue. Charts on the viewer pages would be a future Reports-detail surface, not this stub. - Print stylesheets: src/design/print.css and src/pages/PrintReports.css drive the report viewers' print output. Per SPEC, "do NOT restyle the print stylesheet." This file never references the .report-root / .report-page / .report-kpi-unit classes those pages use. - "Empty" state: hub always renders five report-tile cards, so there's no empty-state DOM to style. - "Tabs / status bar": the hub uses a date-range picker + a project ("Required for Project Summary…"). Tailwind class is .text-xs.text-gray-400 — bump to ink-subtle. */ .arbah-v2 .reports-hub .text-xs.text-gray-400 { color: var(--arbah-v2-ink-subtle); } /* Project 's chrome on the v2 token system. */ .arbah-v2 .reports-hub input[type="date"], .arbah-v2 .reports-hub input[type="text"], .arbah-v2 .reports-hub input[type="number"] { background: var(--arbah-v2-surface); border: 1px solid var(--arbah-v2-border); border-radius: var(--arbah-v2-radius-sm); color: var(--arbah-v2-ink); font-family: var(--arbah-v2-font-sans); font-size: 13px; padding-block: 6px; padding-inline: 10px; transition: border-color 120ms ease, box-shadow 120ms ease; } .arbah-v2 .reports-hub input[type="date"]:focus, .arbah-v2 .reports-hub input[type="text"]:focus, .arbah-v2 .reports-hub input[type="number"]:focus { outline: none; border-color: var(--arbah-v2-brand); box-shadow: 0 0 0 3px rgba(16, 42, 67, .12); } /* Date helper / muted / error text inside the picker. */ .arbah-v2 .reports-hub .text-xs.text-gray-500 { color: var(--arbah-v2-ink-muted); } .arbah-v2 .reports-hub .text-xs.text-red-600 { color: var(--arbah-v2-danger); } /* -- Cards grid --------------------------------------------- */ /* Grid wrapper retains Tailwind layout (cols/gap); only the gap is normalised to the v2 spacing scale. Selected via data-testid for precision against the page DOM. */ .arbah-v2 .reports-hub [data-testid="reports-cards"] { gap: 16px; } /* -- Report tile -------------------------------------------- */ /* Each launcher card. The hub uses .report-tile + Tailwind chrome. Lift to v2 surface + border + shadow + radius. Hover raises the shadow and tightens the border so the affordance reads. */ .arbah-v2 .reports-hub .report-tile { background: var(--arbah-v2-surface); border: 1px solid var(--arbah-v2-border); border-radius: var(--arbah-v2-radius-lg); box-shadow: var(--arbah-v2-shadow-sm); padding: 18px; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; } .arbah-v2 .reports-hub .report-tile:hover { border-color: var(--arbah-v2-border-strong); box-shadow: var(--arbah-v2-shadow-md); transform: translateY(-1px); } /* Tile icon — the .report-tile-icon wrapper carries .kpi-icon.kpi-icon-brand from the page DOM, which the primitives layer styles. Reinforce sizing + radius so the inline style= width/height on the source DOM doesn't fight us. */ .arbah-v2 .reports-hub .report-tile-icon { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--arbah-v2-radius-md); background: var(--arbah-v2-navy-100); color: var(--arbah-v2-brand); flex: 0 0 auto; } /* Tile title — Plex Serif display, the v2 enhancement over .font-semibold.text-gray-900. RTL falls back to the sans stack (Plex Serif has no Arabic coverage) via the dir="rtl" block. */ .arbah-v2 .reports-hub .report-tile-title { font-family: var(--arbah-v2-font-display); font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--arbah-v2-ink); } /* Tile description — small ink-muted body. */ .arbah-v2 .reports-hub .report-tile-desc { font-family: var(--arbah-v2-font-sans); font-size: 12.5px; line-height: 1.55; color: var(--arbah-v2-ink-muted); } /* Blocked-reason hint under a disabled Generate button — the page DOM uses .text-amber-600 Tailwind. Lift to v2 warning ink so the cue carries through the v2 token system. */ .arbah-v2 .reports-hub .report-tile .text-amber-600 { color: var(--arbah-v2-warning); font-family: var(--arbah-v2-font-sans); font-size: 12px; } /* -- RTL ---------------------------------------------------- */ /* Plex Serif has no Arabic coverage; in RTL the tile title falls back to IBM Plex Sans Arabic via the sans stack so AR titles don't render in a serif fallback. Grid + flow direction mirror automatically via the page's dir="rtl" + CSS logical flow. */ .arbah-v2[dir="rtl"] .reports-hub .report-tile-title { font-family: var(--arbah-v2-font-sans); } /* -- Mobile bump -------------------------------------------- */ /* The .phone scope from arbah-v2-tokens.css already bumps base font-size to 15px; tighten the card padding slightly on narrow screens and bump the tile title for foreman-on-site reading. */ @media (max-width: 640px) { .arbah-v2 .reports-hub > .bg-white { padding: 16px; } .arbah-v2 .reports-hub .report-tile { padding: 16px; } .arbah-v2 .reports-hub .report-tile-title { font-size: 16px; } }