/* ============================================================ Arbah v1 — Dashboard page migration Scoped under .arbah-v1. Legacy rules in tokens.css and Tailwind utility classes on src/pages/Dashboard.js stay byte-identical; nothing here applies unless has .arbah-v1. Spec: cluade/design/arbah-v1-design-system-COMPLETE-2026-05-12.md (Dashboard mockups in the design vault — Dashboard - Owner EN/AR + Mobile EN/AR, four mockups total). CANONICAL: bronze hover === --arbah-bronze-700 (NOT -600). -600 is the spec's print goldenrod (#B8860B), brighter than -500 — wrong direction for interactive states. -500 base, -700 hover, -800 active throughout. ============================================================ */ /* ---- Outer page wrapper ---- Tailwind `p-6 lg:p-8 max-w-7xl mx-auto space-y-6` already handles layout; v1 just sets the font + text color. */ .arbah-v1 .dashboard { font-family: var(--arbah-font-sans); color: var(--arbah-text); } /* ---- Page header ---- Legacy h1 is `text-2xl font-bold text-gray-900` (Tailwind). v1: IBM Plex Sans 600 navy-700 at --arbah-text-xl (26px), with the subtitle muted. */ .arbah-v1 .dashboard-title { font-family: var(--arbah-font-sans); font-weight: 600; font-size: var(--arbah-text-xl); color: var(--arbah-navy-700); letter-spacing: -0.01em; } .arbah-v1 .dashboard-subtitle { font-family: var(--arbah-font-sans); font-size: var(--arbah-text-sm); color: var(--arbah-text-muted); } /* ---- Section heading h2 (Key Indicators, Phase Overview, etc.) ---- */ .arbah-v1 .dashboard-section-title, .arbah-v1 .dashboard-card-title { font-family: var(--arbah-font-sans); font-weight: 600; font-size: var(--arbah-text-md); color: var(--arbah-navy-700); } /* ---- KPI cards (existing .kpi class from tokens.css) ---- Specificity: .arbah-v1 .kpi (0,2,0) beats legacy .kpi (0,1,0). No !important needed. */ .arbah-v1 .kpi { background: var(--arbah-surface); border: 1px solid var(--arbah-border); border-radius: var(--arbah-radius-lg); box-shadow: var(--arbah-shadow-sm); padding: var(--arbah-space-6); transition: box-shadow var(--arbah-duration-fast) var(--arbah-ease-standard), border-color var(--arbah-duration-fast) var(--arbah-ease-standard); } .arbah-v1 .kpi-clickable:hover { border-color: var(--arbah-border-strong); /* Subtle navy-50 wash on hover for interactive KPI tiles. NEVER bronze-600 (that's the print goldenrod). */ background: var(--arbah-navy-50); } .arbah-v1 .kpi-label { font-family: var(--arbah-font-sans); font-weight: 500; font-size: var(--arbah-text-xs); color: var(--arbah-text-muted); letter-spacing: 0.06em; text-transform: uppercase; } .arbah-v1 .kpi-value { font-family: var(--arbah-font-sans); font-weight: 600; font-size: clamp(20px, 2vw, var(--arbah-text-xl)); color: var(--arbah-navy-700); line-height: 1.15; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .arbah-v1 .kpi-sub { font-family: var(--arbah-font-sans); font-size: var(--arbah-text-xs); color: var(--arbah-text-muted); } /* KPI icon tone backgrounds — semantic colors swap to v1 tokens. */ .arbah-v1 .kpi-icon { background: var(--arbah-surface-2); color: var(--arbah-text-muted); } .arbah-v1 .kpi-icon-brand { background: var(--arbah-brand-soft); color: var(--arbah-navy-700); } .arbah-v1 .kpi-icon-accent { background: var(--arbah-bronze-100); color: var(--arbah-bronze-700); } .arbah-v1 .kpi-icon-success { background: var(--arbah-success-soft); color: var(--arbah-success); } .arbah-v1 .kpi-icon-warning { background: var(--arbah-warning-soft); color: var(--arbah-warning); } .arbah-v1 .kpi-icon-danger { background: var(--arbah-danger-soft); color: var(--arbah-danger); } .arbah-v1 .kpi-icon-info { background: var(--arbah-info-soft); color: var(--arbah-info); } /* ---- Body cards (white card wrappers around chart, milestones, projects summary, latest logs) ---- */ .arbah-v1 .dashboard-card { background: var(--arbah-surface); border: 1px solid var(--arbah-border); border-radius: var(--arbah-radius-lg); box-shadow: var(--arbah-shadow-sm); padding: var(--arbah-space-5); } /* ---- "View all" / "View phase tracker" link buttons ---- Legacy: text-blue-600 hover:text-blue-800. v1: bronze-500 base, bronze-700 hover (canonical interactive ramp). */ .arbah-v1 .dashboard-link { font-family: var(--arbah-font-sans); font-size: var(--arbah-text-sm); font-weight: 500; color: var(--arbah-bronze-500); transition: color var(--arbah-duration-fast) var(--arbah-ease-standard); } .arbah-v1 .dashboard-link:hover { color: var(--arbah-bronze-700); text-decoration: underline; } /* ---- Portfolio PDF button (inline style="background:#0B2545") ---- */ .arbah-v1 .dashboard-portfolio-btn { background: var(--arbah-navy-700) !important; color: #fff !important; font-family: var(--arbah-font-sans); font-weight: 600; border-radius: var(--arbah-radius-md); transition: background var(--arbah-duration-fast) var(--arbah-ease-standard); } .arbah-v1 .dashboard-portfolio-btn:hover { background: var(--arbah-navy-800) !important; } /* ---- Project snippet rows (inside the Projects summary card) ---- */ .arbah-v1 .project-snippet { border-radius: var(--arbah-radius-md); transition: background var(--arbah-duration-fast) var(--arbah-ease-standard); } .arbah-v1 .project-snippet:hover { background: var(--arbah-navy-50); } /* ---- AR mode ---- Page-level font fallback to IBM Plex Sans Arabic. The lang useEffect in src/app.js sets `dir="rtl"` on when lang === 'ar'; .arbah-v1 lives on the same element. */ .arbah-v1[dir="rtl"] .dashboard, .arbah-v1[dir="rtl"] .dashboard-title, .arbah-v1[dir="rtl"] .dashboard-subtitle, .arbah-v1[dir="rtl"] .dashboard-section-title, .arbah-v1[dir="rtl"] .dashboard-card-title, .arbah-v1[dir="rtl"] .kpi-label, .arbah-v1[dir="rtl"] .kpi-value, .arbah-v1[dir="rtl"] .kpi-sub { font-family: "IBM Plex Sans Arabic", var(--arbah-font-sans); } /* ---- Mobile ---- */ @media (max-width: 768px) { .arbah-v1 .dashboard-card { padding: var(--arbah-space-4); } .arbah-v1 .kpi { padding: var(--arbah-space-4); } }