/* ============================================================ Arbah v1 — Project Detail (Overview) migration Scoped under .arbah-v1. Legacy rules in tokens.css and Tailwind utility classes on src/pages/ProjectDetail.js stay byte-identical; nothing here applies unless has .arbah-v1. Spec: cluade/design/arbah-v1-design-system-COMPLETE-2026-05-12.md (Detail mockups: ProjectDetail desktop + mobile, EN + AR). Scope: OVERVIEW only. Tasks / Photos / Accounting / Selections tab content is intentionally untouched here — those migrate in later PRs (PR 7+). CANONICAL (locked PR #109/#110/#111): - bronze hover === --arbah-bronze-700 (NOT -600). -500 base, -700 hover, -800 active throughout. -600 is the spec's print goldenrod — never interactive. - !important is reserved for defeating inline style= attributes. Tailwind utility classes are specificity 0,1,0; the .arbah-v1 .x selectors below are 0,2,0+ and win cleanly. - JS color hooks (chart palettes, etc.): read via getComputedStyle at init time so flag changes propagate. - Status badge enum locked at PR #111 (Projects List): planning / active / on-hold / completed / cancelled. - Scope-nest rules under .project-detail / .project-overview / .project-card so chip + button styling never leaks to other pages' surfaces. Timeline phase semantic (locked here, referenced by tests): completed → --arbah-bronze-500 fill + white text current → --arbah-navy-700 fill + white text + ring shadow upcoming → --arbah-navy-50 fill + --arbah-text-muted text ============================================================ */ /* ---- Outer page wrapper ---- */ .arbah-v1 .project-detail { font-family: var(--arbah-font-sans); color: var(--arbah-text); } /* ---- Project header wrapper ---- Wraps the shared primitive. The legacy primitive keeps its own internal `.page-header` styling; the v1 wrapper gives it a white surface + radius + shadow so it reads as a card, per spec. Specificity (0,2,0) beats Tailwind utilities on the same node without !important. */ .arbah-v1 .project-header { 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); } .arbah-v1 .project-header .page-title { font-family: var(--arbah-font-sans); font-weight: 600; font-size: var(--arbah-text-2xl); color: var(--arbah-navy-700); line-height: 1.15; letter-spacing: -0.01em; } .arbah-v1 .project-header .page-subtitle { font-family: var(--arbah-font-sans); font-size: var(--arbah-text-sm); color: var(--arbah-text-muted); } .arbah-v1 .project-header .page-breadcrumb { font-family: var(--arbah-font-sans); font-size: var(--arbah-text-xs); color: var(--arbah-text-muted); } /* Primary CTA inside header actions — bronze ramp. Scope-nested so we don't restyle every .btn on the page. */ .arbah-v1 .project-header .btn-primary { background: var(--arbah-bronze-500); color: #fff; border-color: var(--arbah-bronze-500); transition: background var(--arbah-duration-fast) var(--arbah-ease-standard); } .arbah-v1 .project-header .btn-primary:hover { background: var(--arbah-bronze-700); border-color: var(--arbah-bronze-700); } .arbah-v1 .project-header .btn-primary:active { background: var(--arbah-bronze-800); border-color: var(--arbah-bronze-800); } /* Status badge (kind="project") in the header title. Mirrors the PR #111 locked enum mapping. Scoped to .project-header so other surfaces' chips are not affected. */ .arbah-v1 .project-header .chip { font-family: var(--arbah-font-sans); font-weight: 500; font-size: var(--arbah-text-xs); border-radius: var(--arbah-radius-full); padding: 2px var(--arbah-space-2); letter-spacing: 0.02em; } .arbah-v1 .project-header .chip-info { background: var(--arbah-info-soft); color: var(--arbah-info); border-color: var(--arbah-info-soft); } .arbah-v1 .project-header .chip-success { background: var(--arbah-success-soft); color: var(--arbah-success); border-color: var(--arbah-success-soft); } .arbah-v1 .project-header .chip-warning { background: var(--arbah-warning-soft); color: var(--arbah-warning); border-color: var(--arbah-warning-soft); } .arbah-v1 .project-header .chip-danger { background: var(--arbah-danger-soft); color: var(--arbah-danger); border-color: var(--arbah-danger-soft); } .arbah-v1 .project-header .chip-neutral { /* completed → navy-500 fill (PR #111 signature). NOT bronze. */ background: var(--arbah-navy-500); color: #fff; border-color: var(--arbah-navy-500); } /* ---- Overview tab wrapper ---- Everything below applies only to the Overview tab's content container. Other tabs (Tasks/Photos/Accounting/Selections) render outside .project-overview and so are unaffected. */ .arbah-v1 .project-overview { font-family: var(--arbah-font-sans); color: var(--arbah-text); } /* ---- KPI strip ---- Reuses the dashboard PR #110 card pattern: white surface, --arbah-shadow-sm, --arbah-radius-lg, IBM Plex Sans 600 navy-700 values. Cross-PR token consistency is asserted by Test D. */ .arbah-v1 .project-kpis { display: grid; gap: var(--arbah-space-4); } .arbah-v1 .project-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-5); transition: box-shadow var(--arbah-duration-fast) var(--arbah-ease-standard), border-color var(--arbah-duration-fast) var(--arbah-ease-standard); } .arbah-v1 .project-kpi:hover { border-color: var(--arbah-border-strong); } .arbah-v1 .project-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 .project-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 .project-kpi-sub { font-family: var(--arbah-font-sans); font-size: var(--arbah-text-xs); color: var(--arbah-text-muted); } /* ---- Budget progress bar (inside Overview) ---- */ .arbah-v1 .project-budget-progress { background: var(--arbah-surface); border: 1px solid var(--arbah-border); border-radius: var(--arbah-radius-lg); padding: var(--arbah-space-5); } .arbah-v1 .project-budget-progress-label { font-family: var(--arbah-font-sans); font-size: var(--arbah-text-sm); font-weight: 500; color: var(--arbah-text); } .arbah-v1 .project-budget-progress-pct { font-family: var(--arbah-font-sans); font-weight: 600; font-variant-numeric: tabular-nums; } /* ---- Description block ---- */ .arbah-v1 .project-description-label { font-family: var(--arbah-font-sans); font-weight: 600; font-size: var(--arbah-text-sm); color: var(--arbah-navy-700); } .arbah-v1 .project-description-body { font-family: var(--arbah-font-sans); font-size: var(--arbah-text-sm); color: var(--arbah-text-muted); line-height: 1.6; } /* ---- Meta grid (Client / Address / Start / End) ---- */ .arbah-v1 .project-meta { font-family: var(--arbah-font-sans); } .arbah-v1 .project-meta-label { color: var(--arbah-text-muted); font-size: var(--arbah-text-sm); } .arbah-v1 .project-meta-value { color: var(--arbah-text); font-weight: 500; font-size: var(--arbah-text-sm); } /* ---- Timeline strip ---- Horizontal phase markers with locked phase semantic: completed → bronze-500 fill current → navy-700 fill + ring shadow upcoming → navy-50 fill The connecting line is --arbah-border. logical-property `inset-inline-*` keeps RTL flowing right→left without an explicit dir flip. */ .arbah-v1 .project-timeline { 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) var(--arbah-space-5); overflow-x: auto; -webkit-overflow-scrolling: touch; } .arbah-v1 .project-timeline-track { display: flex; align-items: flex-start; justify-content: space-between; position: relative; min-width: max-content; gap: var(--arbah-space-6); } /* Connecting line: positioned at the dot center (18px = half of 36). logical inset-inline-* covers both LTR + RTL automatically. */ .arbah-v1 .project-timeline-track::before { content: ""; position: absolute; top: 18px; inset-inline-start: var(--arbah-space-5); inset-inline-end: var(--arbah-space-5); height: 2px; background: var(--arbah-border); z-index: 0; } .arbah-v1 .project-timeline-marker { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--arbah-space-2); min-width: 80px; } .arbah-v1 .project-timeline-dot { width: 36px; height: 36px; border-radius: var(--arbah-radius-full); display: flex; align-items: center; justify-content: center; background: var(--arbah-navy-50); color: var(--arbah-text-muted); font-family: var(--arbah-font-sans); font-weight: 600; font-size: var(--arbah-text-xs); border: 2px solid var(--arbah-surface); transition: transform var(--arbah-duration-fast) var(--arbah-ease-standard); } .arbah-v1 .project-timeline-marker-completed .project-timeline-dot { background: var(--arbah-bronze-500); color: #fff; } .arbah-v1 .project-timeline-marker-current .project-timeline-dot { background: var(--arbah-navy-700); color: #fff; box-shadow: 0 0 0 4px rgba(16, 42, 67, .18); } .arbah-v1 .project-timeline-marker-upcoming .project-timeline-dot { background: var(--arbah-navy-50); color: var(--arbah-text-muted); } .arbah-v1 .project-timeline-label { font-family: var(--arbah-font-sans); font-weight: 500; font-size: var(--arbah-text-xs); color: var(--arbah-text); text-align: center; max-width: 100px; line-height: 1.3; } .arbah-v1 .project-timeline-marker-upcoming .project-timeline-label { color: var(--arbah-text-muted); } .arbah-v1 .project-timeline-date { font-family: var(--arbah-font-sans); font-size: var(--arbah-text-xs); color: var(--arbah-text-subtle); } /* ---- Team members card ---- White surface, member avatars in pill circles, name navy-700 500, role text-muted xs. Scoped under .arbah-v1 .team-card so the pattern doesn't bleed into other surfaces (e.g. ChatPanel member rows) on this page or anywhere else. */ .arbah-v1 .team-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); } .arbah-v1 .team-card-title { font-family: var(--arbah-font-sans); font-weight: 600; font-size: var(--arbah-text-md); color: var(--arbah-navy-700); } .arbah-v1 .team-card-list { display: grid; gap: var(--arbah-space-3); } .arbah-v1 .team-member { display: flex; align-items: center; gap: var(--arbah-space-3); } .arbah-v1 .team-member-avatar { width: 36px; height: 36px; border-radius: var(--arbah-radius-full); background: linear-gradient( 135deg, var(--arbah-bronze-100) 0%, var(--arbah-bronze-200) 100% ); color: var(--arbah-bronze-700); font-family: var(--arbah-font-sans); font-weight: 600; font-size: var(--arbah-text-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; text-transform: uppercase; } .arbah-v1 .team-member-name { font-family: var(--arbah-font-sans); font-weight: 500; font-size: var(--arbah-text-sm); color: var(--arbah-text); line-height: 1.3; } .arbah-v1 .team-member-role { font-family: var(--arbah-font-sans); font-size: var(--arbah-text-xs); color: var(--arbah-text-muted); } /* ---- Recent activity ---- Reuses dashboard PR #110 pattern: dividers, hover, timestamps. */ .arbah-v1 .project-activity { 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); } .arbah-v1 .project-activity-title { font-family: var(--arbah-font-sans); font-weight: 600; font-size: var(--arbah-text-md); color: var(--arbah-navy-700); } .arbah-v1 .project-activity-list { display: flex; flex-direction: column; } .arbah-v1 .project-activity-item { display: flex; align-items: flex-start; gap: var(--arbah-space-3); padding: var(--arbah-space-3) 0; border-bottom: 1px solid var(--arbah-border); transition: background var(--arbah-duration-fast) var(--arbah-ease-standard); } .arbah-v1 .project-activity-item:last-child { border-bottom: 0; } .arbah-v1 .project-activity-item:hover { background: var(--arbah-navy-50); } .arbah-v1 .project-activity-body { flex: 1; min-width: 0; } .arbah-v1 .project-activity-text { font-family: var(--arbah-font-sans); font-size: var(--arbah-text-sm); color: var(--arbah-text); line-height: 1.4; } .arbah-v1 .project-activity-time { font-family: var(--arbah-font-sans); font-size: var(--arbah-text-xs); color: var(--arbah-text-muted); font-variant-numeric: tabular-nums; } .arbah-v1 .project-activity-empty { font-family: var(--arbah-font-sans); font-size: var(--arbah-text-sm); color: var(--arbah-text-muted); text-align: center; padding: var(--arbah-space-4) 0; } /* ---- AR mode ---- Plex Sans Arabic for AR; logical properties handle direction. The track's ::before uses inset-inline-* so it auto-flips. */ .arbah-v1[dir="rtl"] .project-detail, .arbah-v1[dir="rtl"] .project-header, .arbah-v1[dir="rtl"] .project-header .page-title, .arbah-v1[dir="rtl"] .project-header .page-subtitle, .arbah-v1[dir="rtl"] .project-header .page-breadcrumb, .arbah-v1[dir="rtl"] .project-overview, .arbah-v1[dir="rtl"] .project-kpi-label, .arbah-v1[dir="rtl"] .project-kpi-value, .arbah-v1[dir="rtl"] .project-kpi-sub, .arbah-v1[dir="rtl"] .project-timeline-label, .arbah-v1[dir="rtl"] .project-timeline-date, .arbah-v1[dir="rtl"] .team-card-title, .arbah-v1[dir="rtl"] .team-member-name, .arbah-v1[dir="rtl"] .team-member-role, .arbah-v1[dir="rtl"] .project-activity-title, .arbah-v1[dir="rtl"] .project-activity-text, .arbah-v1[dir="rtl"] .project-activity-time { font-family: "IBM Plex Sans Arabic", var(--arbah-font-sans); } /* ---- Mobile (375x812) ---- Header stacks. KPI strip goes 2×2 by default at narrow widths (Tailwind `grid-cols-2 lg:grid-cols-4` already handles this); the rule below only adjusts padding scale. Timeline scrolls horizontally (already overflow-x:auto above). Team card stacks members one per row. */ @media (max-width: 768px) { .arbah-v1 .project-header { padding: var(--arbah-space-4); } .arbah-v1 .project-kpi { padding: var(--arbah-space-4); } .arbah-v1 .project-timeline { padding: var(--arbah-space-5) var(--arbah-space-4); } .arbah-v1 .team-card, .arbah-v1 .project-activity { padding: var(--arbah-space-4); } } /* ---- Narrowest viewport (≤360px) ---- KPI strip collapses to 1 column on the very narrow phones. */ @media (max-width: 360px) { .arbah-v1 .project-kpis { grid-template-columns: 1fr; } }