/* ============================================================ Arbah v2 — Shell migration Scoped overrides for the app frame (sidebar, topbar, bottom-nav) under the .arbah-v2 class. Legacy declarations in tokens.css AND the v1 stylesheets in arbah-tokens.css / arbah-shell.css stay byte-identical; nothing here applies unless has .arbah-v2. Source mockups: progress/v2-source/arbah-v2/ - desktop-chrome.jsx → Sidebar + DesktopTopbar - screen-shell.jsx → MobileTopbar (52px, 3-col) - screen-body.jsx → BottomNav (bronze active pill) ============================================================ */ /* ---------- Root shell frame ----------------------------------- */ /* `app-shell` is an additive class on the outer Layout wrapper. The legacy wrapper carries .legacy-app-shell-bg (defined in arbah-shell.css under v1) — under .arbah-v2 we override with the v2 surface-sunken at specificity (0,2,0) > (0,1,0). */ .arbah-v2 .app-shell { background: var(--arbah-v2-surface-sunken); color: var(--arbah-v2-ink); font-family: var(--arbah-v2-font-sans); } /* ---------- Sidebar (desktop, 240px navy-700) ------------------ */ /* Per desktop-chrome.jsx: 240px width is set by Layout/Sidebar DOM; this stylesheet only paints. Brand block reuses ./assets/logo.png with an invert filter so the dark mark reads on the navy field. */ .arbah-v2 .sidebar { background: var(--arbah-v2-navy-700); color: rgba(255, 255, 255, .78); font-family: var(--arbah-v2-font-sans); } .arbah-v2 .sidebar-brand { border-bottom-color: rgba(255, 255, 255, .06); } .arbah-v2 .sidebar-brand-title { font-family: var(--arbah-v2-font-display); font-weight: 500; color: #fff; } .arbah-v2 .sidebar-brand-sub { font-family: var(--arbah-v2-font-mono); font-size: 9.5px; letter-spacing: 1.4px; color: rgba(243, 232, 213, .55); } /* On-navy logo: the asset is a dark mark; invert it so it reads white on the navy field. brightness(0) flattens to black, then invert(1) flips to white — works on any PNG/SVG silhouette. */ .arbah-v2 .sidebar-logo { color: #fff; } .arbah-v2 .sidebar-logo img { filter: brightness(0) invert(1); } .arbah-v2 .sidebar-item { font-family: var(--arbah-v2-font-sans); font-weight: 500; font-size: 13.5px; color: rgba(255, 255, 255, .72); border-radius: var(--arbah-v2-radius-sm); } .arbah-v2 .sidebar-item:hover { background: rgba(255, 255, 255, .08); color: #fff; } .arbah-v2 .sidebar-item-active { background: rgba(255, 255, 255, .08); color: #fff; font-weight: 600; } /* Bronze indicator on active item — sits at inline-start so RTL flips for free. The Sidebar.js DOM already gives sidebar-item-active a ::before; we just override its paint. */ .arbah-v2 .sidebar-item-active::before { background: var(--arbah-v2-bronze-500); } .arbah-v2 .sidebar-item:focus-visible { outline: 2px solid var(--arbah-v2-bronze-500); outline-offset: -2px; } .arbah-v2 .sidebar-footer { border-top-color: rgba(255, 255, 255, .06); } .arbah-v2 .sidebar-avatar { background: var(--arbah-v2-bronze-500); color: #fff; font-weight: 700; } .arbah-v2 .sidebar-user-name { color: #fff; font-weight: 600; } .arbah-v2 .sidebar-user-role { color: rgba(255, 255, 255, .5); } /* ---------- Topbar (desktop header) ---------------------------- */ /* Per desktop-chrome.jsx DesktopTopbar: 64px tall, surface bg, bottom border. The legacy DOM uses .topbar; nothing structural changes — just paint via v2 tokens. */ .arbah-v2 .topbar { background: var(--arbah-v2-surface); border-bottom: 1px solid var(--arbah-v2-border); font-family: var(--arbah-v2-font-sans); font-size: 13.5px; color: var(--arbah-v2-ink); } .arbah-v2 .topbar-date { color: var(--arbah-v2-ink-muted); font-size: 13px; } .arbah-v2 .topbar-lang { background: var(--arbah-v2-surface-sunken); border-color: var(--arbah-v2-border); color: var(--arbah-v2-ink-muted); font-family: var(--arbah-v2-font-mono); font-weight: 600; letter-spacing: 0.4px; } .arbah-v2 .topbar-lang:hover { background: var(--arbah-v2-surface); color: var(--arbah-v2-ink); } /* ---------- Mobile topbar styling ------------------------------ The mobile chrome reuses the same .topbar element (Layout.js renders a single topbar; CSS makes it adapt). v2 mobile spec from screen-shell.jsx MobileTopbar: 52px, surface bg, ink color, danger dot on bell. We keep desktop paint as the default and let the shared rules above carry over; per-mobile-only tweaks would slot in under a `.phone` scope alongside .arbah-v2 if needed. */ /* ---------- Bottom nav (mobile) -------------------------------- */ /* Per screen-body.jsx BottomNav: white surface, bronze active pill, bronze-700 active text. Differs from v1 (navy background + bronze text) — v2 mobile nav reads brighter. */ .arbah-v2 .bottom-nav { background: var(--arbah-v2-surface); border-top: 1px solid var(--arbah-v2-border); box-shadow: 0 -1px 0 var(--arbah-v2-border), 0 -8px 24px rgba(15, 23, 42, .05); font-family: var(--arbah-v2-font-sans); } .arbah-v2 .bottom-nav .bn { color: var(--arbah-v2-ink-muted); font-size: 10.5px; font-family: var(--arbah-v2-font-sans); font-weight: 500; letter-spacing: 0.1px; position: relative; } .arbah-v2 .bottom-nav .bn:hover { color: var(--arbah-v2-ink); } .arbah-v2 .bottom-nav .bn-active { color: var(--arbah-v2-bronze-700); font-weight: 600; } /* Active pill — bronze-100 background behind the icon. Implemented as a pseudo-element so it sits beneath the icon glyph that Layout.js already paints inside .bn. inset-inline-* keeps the geometry RTL-safe. */ .arbah-v2 .bottom-nav .bn-active::before { content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 56px; height: 28px; border-radius: 999px; background: var(--arbah-v2-bronze-100); z-index: 0; } /* The Icon component renders an inside the button — float it above the pill so the bronze sits beneath. */ .arbah-v2 .bottom-nav .bn > * { position: relative; z-index: 1; } /* ---------- RTL adjustments ----------------------------------- */ /* The app sets from lang. .arbah-v2[dir="rtl"] handles the common case where both classes sit on the same element; the ancestor/descendant variants cover the rarer scope orderings. Most geometry is already RTL-safe via inset-inline / borderInline, so this scope mostly just swaps the Arabic font ordering. */ .arbah-v2[dir="rtl"] .sidebar-brand-title, [dir="rtl"] .arbah-v2 .sidebar-brand-title, .arbah-v2 [dir="rtl"] .sidebar-brand-title { font-family: "IBM Plex Sans Arabic", var(--arbah-v2-font-display); } .arbah-v2[dir="rtl"] .bottom-nav .bn, [dir="rtl"] .arbah-v2 .bottom-nav .bn, .arbah-v2 [dir="rtl"] .bottom-nav .bn { font-family: "IBM Plex Sans Arabic", var(--arbah-v2-font-sans); } .arbah-v2[dir="rtl"] .sidebar-item, [dir="rtl"] .arbah-v2 .sidebar-item, .arbah-v2 [dir="rtl"] .sidebar-item { font-family: "IBM Plex Sans Arabic", var(--arbah-v2-font-sans); } /* ============================================================ Arbah v2 — SHELL REBUILD (flag-gated, real markup) Dark-navy grouped sidebar + light search topbar emitted by Layout.js (v2 branch) + src/components/shell/SidebarV2.js. Distinct av2-* class names — does NOT collide with the legacy-shell restyle above (which targets .sidebar/.topbar and is inert under the rebuild). RTL: logical properties; the sidebar lands on the inline-end (right) under dir=rtl because the shell is a flex row in document order. ============================================================ */ .arbah-v2 .av2-shell { font-family: var(--arbah-v2-font-sans); color: var(--arbah-v2-ink); } /* -- Sidebar (240px, navy-700) ------------------------------ */ .arbah-v2 .av2-sidebar { width: 240px; flex: 0 0 240px; height: 100vh; background: var(--arbah-v2-navy-700); color: #fff; display: flex; flex-direction: column; } .arbah-v2 .av2-brand { display: flex; align-items: center; gap: 11px; padding: 18px 16px 14px; border-bottom: 1px solid rgba(255,255,255,0.06); } .arbah-v2 .av2-brand-logo { display: inline-flex; align-items: center; justify-content: center; } /* Real brand mark (assets/arbah-logo-mark.png), on-navy treatment per the design's Logo component: force the navy mark to off-white. */ .arbah-v2 .av2-brand-logo img { height: 32px; width: auto; display: block; filter: brightness(0) invert(1); opacity: 0.95; } .arbah-v2 .av2-brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; } .arbah-v2 .av2-brand-name { font-family: var(--arbah-v2-font-display); font-size: 19px; font-weight: 500; color: #fff; } .arbah-v2[dir="rtl"] .av2-brand-name { font-family: "IBM Plex Sans Arabic", var(--arbah-v2-font-display); font-weight: 600; } .arbah-v2 .av2-brand-sub { font-family: var(--arbah-v2-font-mono); font-size: 9.5px; letter-spacing: 2px; font-weight: 500; color: rgba(243,232,213,0.55); margin-top: 2px; } /* -- Nav ---------------------------------------------------- */ .arbah-v2 .av2-nav { flex: 1; overflow-y: auto; padding: 12px 10px; scrollbar-width: thin; } .arbah-v2 .av2-nav-group + .av2-nav-group { margin-top: 18px; } .arbah-v2 .av2-nav-header { padding: 6px 10px 8px; font-family: var(--arbah-v2-font-mono); font-size: 10px; letter-spacing: 1.5px; font-weight: 500; color: rgba(255,255,255,0.42); text-transform: uppercase; } .arbah-v2 .av2-nav-item { position: relative; display: flex; align-items: center; gap: 11px; padding: 0 12px; height: 36px; margin-bottom: 1px; border-radius: var(--arbah-v2-radius-sm); color: rgba(255,255,255,0.72); font-size: 13.5px; font-weight: 500; text-decoration: none; cursor: pointer; transition: background-color 120ms cubic-bezier(.2,0,0,1), color 120ms cubic-bezier(.2,0,0,1); } .arbah-v2 .av2-nav-item:hover { background: rgba(255,255,255,0.05); color: #fff; } .arbah-v2 .av2-nav-item.is-active { background: rgba(255,255,255,0.08); color: #fff; font-weight: 600; } .arbah-v2 .av2-nav-item.is-active::before { content: ""; position: absolute; inset-inline-start: -10px; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: var(--arbah-v2-bronze-500); } .arbah-v2 .av2-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .arbah-v2 .av2-nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; font-size: 10.5px; font-weight: 700; line-height: 1; color: #fff; background: rgba(255,255,255,0.10); } .arbah-v2 .av2-nav-badge.is-attn { background: var(--arbah-v2-bronze-500); } .arbah-v2 .av2-nav-badge.is-urgent { background: var(--arbah-v2-danger); } /* -- Sidebar footer (profile) ------------------------------- */ .arbah-v2 .av2-sidebar-footer { padding: 10px; border-top: 1px solid rgba(255,255,255,0.06); } .arbah-v2 .av2-profile { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(255,255,255,0.05); border-radius: var(--arbah-v2-radius-md); } .arbah-v2 .av2-avatar { width: 32px; height: 32px; border-radius: 999px; background: var(--arbah-v2-bronze-500); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px; flex: 0 0 auto; } .arbah-v2 .av2-profile-text { flex: 1; min-width: 0; line-height: 1.2; display: flex; flex-direction: column; } .arbah-v2 .av2-profile-name { color: #fff; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .arbah-v2 .av2-profile-role { color: rgba(255,255,255,0.5); font-size: 11px; margin-top: 2px; } .arbah-v2 .av2-signout { background: transparent; border: none; color: rgba(255,255,255,0.6); cursor: pointer; padding: 4px; border-radius: var(--arbah-v2-radius-sm); flex: 0 0 auto; } .arbah-v2 .av2-signout:hover { background: rgba(255,255,255,0.1); color: #fff; } /* -- Mobile drawer ------------------------------------------ */ .arbah-v2 .av2-drawer-overlay { background: rgba(10,27,46,0.55); } .arbah-v2 .av2-drawer { width: 240px; max-width: 82vw; box-shadow: var(--arbah-v2-shadow-md); } .arbah-v2[dir="rtl"] .av2-drawer { margin-inline-start: auto; } /* -- Topbar (light) ----------------------------------------- */ .arbah-v2 .av2-topbar { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 20px; flex: 0 0 60px; background: var(--arbah-v2-surface); border-bottom: 1px solid var(--arbah-v2-border); } .arbah-v2 .av2-topbar-menu { background: transparent; border: none; color: var(--arbah-v2-ink-muted); cursor: pointer; padding: 6px; border-radius: var(--arbah-v2-radius-sm); } .arbah-v2 .av2-topbar-menu:hover { background: var(--arbah-v2-surface-sunken); } /* Search field (button styled as input; opens GlobalSearch) */ .arbah-v2 .av2-search { display: inline-flex; align-items: center; gap: 8px; flex: 1; max-width: 420px; height: 38px; padding: 0 10px 0 12px; background: var(--arbah-v2-surface-sunken); border: 1px solid var(--arbah-v2-border); border-radius: var(--arbah-v2-radius-md); color: var(--arbah-v2-ink-subtle); cursor: text; text-align: start; font-family: var(--arbah-v2-font-sans); } .arbah-v2 .av2-search:hover { border-color: var(--arbah-v2-border-strong); } .arbah-v2 .av2-search-ph { flex: 1; font-size: 13px; color: var(--arbah-v2-ink-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .arbah-v2 .av2-search-kbd { font-family: var(--arbah-v2-font-mono); font-size: 11px; color: var(--arbah-v2-ink-muted); background: var(--arbah-v2-surface); border: 1px solid var(--arbah-v2-border); border-radius: var(--arbah-v2-radius-sm); padding: 1px 6px; flex: 0 0 auto; } .arbah-v2 .av2-topbar-end { display: inline-flex; align-items: center; gap: 10px; margin-inline-start: auto; } .arbah-v2 .av2-date-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; background: var(--arbah-v2-surface-sunken); border: 1px solid var(--arbah-v2-border); border-radius: var(--arbah-v2-radius-md); color: var(--arbah-v2-ink-muted); font-size: 12.5px; } .arbah-v2 .av2-date-chip .tnum { font-variant-numeric: tabular-nums; } @media (max-width: 700px) { .arbah-v2 .av2-date-chip { display: none; } } /* EN/AR segmented toggle */ .arbah-v2 .av2-lang-seg { display: inline-flex; padding: 2px; background: var(--arbah-v2-surface-sunken); border: 1px solid var(--arbah-v2-border); border-radius: 999px; } .arbah-v2 .av2-lang-opt { border: none; background: transparent; cursor: pointer; height: 26px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--arbah-v2-ink-muted); font-family: var(--arbah-v2-font-sans); } .arbah-v2 .av2-lang-opt.is-on { background: var(--arbah-v2-brand); color: #fff; } /* -- "More" expander (surfaces every other route in-rail) ---- The toggle reuses .av2-nav-item chrome (it's a