/* Zietra app shell · Phase 54 (M6) · design system + CSS Grid layout. * * Pairs with /app-shell.js. Renders into via the * shell bootstrap. Dashboard-page chrome overrides lifted from * /shells/enterprise-shell.css (lines 305-405) with the namespace renamed * from body[data-system="enterprise"] → body.z-shelled (Pitfall 7). * * Palette + spacing locked by CONTEXT.md §Design system. */ /* ============================================================ * 1. Design tokens * ============================================================ */ :root { /* Palette */ --z-primary: #7c3aed; --z-primary-2: #6d28d9; --z-bg-dark: #0b1020; --z-bg-canvas: #ffffff; --z-bg-rail: #f9fafb; --z-bg-rail-2: #f1f5f9; --z-success: #10b981; --z-warning: #f59e0b; --z-error: #ef4444; --z-text-1: #0f172a; --z-text-2: #475569; --z-text-3: #94a3b8; --z-border: #e2e8f0; /* Geometry */ --z-header-h: 56px; --z-rail-w: 240px; --z-rail-w-min: 64px; /* Type */ --z-font: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif; } /* ============================================================ * 2. Full-page CSS Grid layout (body.z-shelled) * rows: header (56px) / main (1fr) * cols: rail (240px) / main (1fr) * rail spans both rows; topbar spans col 2 row 1; main spans col 2 row 2. * ============================================================ */ body.z-shelled { margin: 0; padding: 0; display: grid; grid-template-columns: var(--z-rail-w) 1fr; grid-template-rows: var(--z-header-h) 1fr; min-height: 100vh; font-family: var(--z-font); font-size: 14px; background: #fafbfc; color: var(--z-text-1); } /* ============================================================ * 3. Top bar * ============================================================ */ body.z-shelled .z-topbar { grid-column: 2 / 3; grid-row: 1 / 2; display: flex; align-items: center; gap: 14px; padding: 0 22px; background: var(--z-bg-canvas); border-bottom: 1px solid var(--z-border); z-index: 40; } body.z-shelled .z-workspace { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--z-text-1); padding: 4px 8px; border-radius: 6px; transition: background 0.12s; } body.z-shelled .z-workspace:hover { background: var(--z-bg-rail-2); } body.z-shelled .z-ws-badge { width: 28px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, var(--z-primary), var(--z-primary-2)); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } body.z-shelled .z-ws-meta { line-height: 1.2; min-width: 0; } body.z-shelled .z-ws-name { font-weight: 700; font-size: 13.5px; letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; } body.z-shelled .z-ws-sub { font-size: 10.5px; color: var(--z-text-3); margin-top: 1px; text-transform: uppercase; letter-spacing: 0.06em; } body.z-shelled .z-breadcrumb { flex: 1; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--z-text-2); min-width: 0; overflow: hidden; } body.z-shelled .z-topbar-right { display: flex; align-items: center; gap: 14px; margin-left: auto; } /* ============================================================ * 4. Plan badge variants * ============================================================ */ body.z-shelled .z-plan-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; } body.z-shelled .z-plan-badge .z-icon { width: 13px; height: 13px; } body.z-shelled .z-plan-badge .z-icon svg { width: 13px; height: 13px; } body.z-shelled .z-plan-badge.trial { background: #ecfdf5; color: #065f46; } body.z-shelled .z-plan-badge.trial-amber { background: #fef3c7; color: #92400e; } body.z-shelled .z-plan-badge.paid { background: #d1fae5; color: #065f46; } body.z-shelled .z-plan-badge.disabled { background: #fee2e2; color: #991b1b; } /* ============================================================ * 5. Avatar + dropdown menu * ============================================================ */ body.z-shelled .z-avatar-wrap { position: relative; } body.z-shelled .z-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--z-primary), var(--z-primary-2)); color: #fff; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; } body.z-shelled .z-avatar .z-icon { width: 16px; height: 16px; } body.z-shelled .z-avatar .z-icon svg { width: 16px; height: 16px; } body.z-shelled .z-avatar:hover { filter: brightness(1.05); } body.z-shelled .z-avatar-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px; background: var(--z-bg-canvas); border: 1px solid var(--z-border); border-radius: 8px; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18); padding: 6px; z-index: 60; display: flex; flex-direction: column; gap: 2px; } body.z-shelled .z-avatar-menu[hidden] { display: none; } body.z-shelled .z-avatar-menu-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 13px; color: var(--z-text-1); background: transparent; border: none; border-radius: 6px; text-decoration: none; cursor: pointer; font-family: inherit; text-align: left; width: 100%; } body.z-shelled .z-avatar-menu-item:hover { background: var(--z-bg-rail-2); } body.z-shelled .z-avatar-menu-signout { color: var(--z-error); } /* ============================================================ * 6. Left rail * ============================================================ */ body.z-shelled .z-rail { grid-column: 1 / 2; grid-row: 1 / 3; background: var(--z-bg-rail); border-right: 1px solid var(--z-border); overflow-y: auto; display: flex; flex-direction: column; font-size: 13px; } body.z-shelled .z-init-banner { padding: 8px 12px; margin: 8px; background: #fef3c7; color: #92400e; border-radius: 6px; font-size: 12px; line-height: 1.35; } body.z-shelled .z-rail-groups { display: flex; flex-direction: column; } body.z-shelled .z-rail-section { padding: 6px 0 4px; } body.z-shelled .z-rail-section + .z-rail-section { border-top: 1px solid var(--z-border); } body.z-shelled .z-rail-section-h { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 14px; background: transparent; border: none; cursor: pointer; text-align: left; font-family: inherit; color: var(--z-text-2); } body.z-shelled .z-rail-section-h:hover { background: var(--z-bg-rail-2); } body.z-shelled .z-rail-section-h .z-icon { width: 16px; height: 16px; flex-shrink: 0; } body.z-shelled .z-rail-section-h .z-icon svg { width: 16px; height: 16px; } body.z-shelled .z-rail-section-name { flex: 1; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--z-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.z-shelled .z-rail-section-chev { transition: transform 0.18s ease-out; color: var(--z-text-3); } body.z-shelled .z-rail-section-chev svg { width: 12px; height: 12px; } body.z-shelled .z-rail-section-h[aria-expanded="true"] .z-rail-section-chev { transform: rotate(90deg); } body.z-shelled .z-rail-section.collapsed .z-rail-section-body { display: none; } body.z-shelled .z-rail-section-body { padding: 2px 0 6px; } /* Disabled module group — grey out, single CTA */ body.z-shelled .z-rail-section.disabled .z-rail-section-name { color: var(--z-text-3); } body.z-shelled .z-rail-section.disabled .z-rail-section-h .z-icon { opacity: 0.45; } body.z-shelled .z-nav-cta { display: block; padding: 7px 16px 9px; font-size: 12px; color: var(--z-primary); text-decoration: none; border-left: 3px solid transparent; font-weight: 500; } body.z-shelled .z-nav-cta:hover { background: rgba(124, 58, 237, 0.06); color: var(--z-primary-2); } /* Nav links */ body.z-shelled .z-nav-link { display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 11px; color: var(--z-text-2); text-decoration: none; border-left: 3px solid transparent; font-size: 13px; line-height: 1.3; transition: background 0.12s, color 0.12s, border-color 0.12s; } body.z-shelled .z-nav-link:hover { background: var(--z-bg-rail-2); color: var(--z-text-1); } body.z-shelled .z-nav-link.active { border-left: 3px solid var(--z-primary); background: rgba(124, 58, 237, 0.08); color: var(--z-primary); font-weight: 600; } body.z-shelled .z-nav-link .z-icon { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; color: currentColor; opacity: 0.75; flex-shrink: 0; } body.z-shelled .z-nav-link.active .z-icon { opacity: 1; } body.z-shelled .z-nav-link .z-icon svg { width: 16px; height: 16px; } body.z-shelled .z-nav-link .z-nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; } /* Bottom rail (Team / Catalog / Settings / Help) */ body.z-shelled .z-rail-bottom { margin-top: auto; padding: 6px 0; border-top: 1px solid var(--z-border); background: var(--z-bg-rail-2); } /* ============================================================ * 7. Main column * ============================================================ */ body.z-shelled .z-main { grid-column: 2 / 3; grid-row: 2 / 3; overflow-y: auto; min-width: 0; } /* Generic icon span — currentColor inherits from parent */ body.z-shelled .z-icon { display: inline-flex; align-items: center; justify-content: center; color: currentColor; } body.z-shelled .z-icon svg { display: block; } /* ============================================================ * 8. Collapsed-rail variant * ============================================================ */ body.z-shelled.z-rail-collapsed { grid-template-columns: var(--z-rail-w-min) 1fr; } body.z-shelled.z-rail-collapsed .z-nav-link .z-nav-label, body.z-shelled.z-rail-collapsed .z-rail-section-name, body.z-shelled.z-rail-collapsed .z-rail-section-chev, body.z-shelled.z-rail-collapsed .z-nav-cta { display: none; } /* ============================================================ * 9. Mobile — hide rail entirely (Pitfall: keep parity with * enterprise-shell.css:277-286 behaviour) * ============================================================ */ @media (max-width: 768px) { body.z-shelled { grid-template-columns: 1fr; grid-template-rows: var(--z-header-h) 1fr; } body.z-shelled .z-rail { display: none; } body.z-shelled .z-topbar { grid-column: 1 / 2; } body.z-shelled .z-main { grid-column: 1 / 2; grid-row: 2 / 3; } body.z-shelled .z-ws-sub { display: none; } body.z-shelled .z-ws-name { max-width: 120px; } } /* ============================================================ * 10. Print stylesheet * ============================================================ */ @media print { body.z-shelled .z-topbar, body.z-shelled .z-rail { display: none !important; } body.z-shelled { display: block; } } /* ============================================================ * 11. Dashboard chrome overrides — LIFTED VERBATIM from * /shells/enterprise-shell.css:303-405 with namespace renamed * body[data-system="enterprise"] → body.z-shelled * * The 53 pages already-wired to shells/enterprise-shell.css use * these .dash-top / .dash-header / .src-strip / .kpi-strip class * names and depend on the overrides to look right inside the shell. * Without these, dashboards revert to their original dark gradient * headers and compete with the topbar (Pitfall 7). * ============================================================ */ body.z-shelled .dash-top { background: #ffffff !important; background-image: none !important; color: var(--z-text-1); border-bottom: 1px solid var(--z-border); padding: 10px 22px; display: flex; align-items: center; gap: 14px; font-size: 12.5px; } body.z-shelled .dash-top .logo { font-size: 14px; font-weight: 700; color: var(--z-text-1); letter-spacing: -0.005em; } body.z-shelled .dash-top .crumb { font-size: 11.5px; color: var(--z-text-3); opacity: 1; } body.z-shelled .dash-top .crumb a { color: var(--z-primary); text-decoration: none; } body.z-shelled .dash-top .crumb a:hover { text-decoration: underline; } /* Role badge — keep per-page accent color but tighten size + spacing */ body.z-shelled .dash-top .role-badge { margin-left: auto; padding: 3px 10px !important; border-radius: 4px !important; font-size: 10px !important; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid rgba(0,0,0,0.08); } /* Page header — lighter section instead of gradient */ body.z-shelled .dash-header { background: var(--z-bg-rail-2); background-image: none; border-bottom: 1px solid var(--z-border); padding: 16px 22px 14px; } body.z-shelled .dash-header h1 { font-size: 22px; font-weight: 700; color: var(--z-text-1); letter-spacing: -0.01em; line-height: 1.25; } body.z-shelled .dash-header .subtitle { font-size: 13px; color: var(--z-text-2); margin-top: 4px; line-height: 1.5; } body.z-shelled .dash-header .as-of { font-size: 10.5px; color: var(--z-text-3); margin-top: 6px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; } /* "Live data sources" strip — softer, doesn't compete */ body.z-shelled .src-strip { background: var(--z-bg-rail-2); border-bottom: 1px solid var(--z-border); padding: 6px 22px; font-size: 10.5px; color: var(--z-text-3); } body.z-shelled .src-strip code { background: #fff; border: 1px solid var(--z-border); color: var(--z-text-2); } /* KPI strip — preserve original styling but ensure max-width fits inside the shell */ body.z-shelled .kpi-strip { max-width: none !important; margin: 0; padding: 16px 22px; } /* Widget grid — no max-width clamp needed inside shell */ body.z-shelled .widget-grid { max-width: none !important; margin: 0; padding: 0 22px 22px; } /* Mobile: hide the .dash-top role-badge to prevent wrap */ @media (max-width: 768px) { body.z-shelled .dash-top .role-badge { display: none; } body.z-shelled .dash-header h1 { font-size: 18px; } }