/* ===================================================================== Rainier IT Client Portal — production CSS 6 layouts × 2 themes, switchable via [data-layout][data-theme] on Available layouts: supabase (default), calm-glass, pierce-county, superhuman, stripe, linear Source of truth: portal-stack/mockups/dashboard-mockup.html ===================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-sans); background: var(--bg-page); color: var(--text-body); font-size: 14px; line-height: 1.55; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color .35s ease, color .35s ease; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } a { color: var(--accent-link); text-decoration: none; } img, svg { display: block; max-width: 100%; } ul, ol { list-style: none; } /* ---------- BASE TOKENS ---------- */ :root { --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --radius-card: 12px; --radius-pill: 9999px; --radius-input: 8px; --radius-btn: 8px; --container: 1280px; } /* ===================================================================== LAYOUT × THEME TOKENS ===================================================================== */ /* ============ SUPABASE (default) ============ */ [data-layout="supabase"][data-theme="light"] { --bg-page: #fafafa; --bg-canvas: #fafafa; --bg-card: #ffffff; --bg-elevated: #ffffff; --bg-subtle: #f4f4f4; --shell: #ffffff; --shell-glass: transparent; --shell-text: #1f1f1f; --border: #e4e4e4; --border-strong: #d4d4d4; --border-subtle: #f1f1f1; --text-heading: #1f1f1f; --text-body: #383838; --text-muted: #737373; --accent: #3ecf8e; --accent-hover: #2eb878; --accent-on: #052b14; --accent-link: #00a565; --accent-link-soft: rgba(62,207,142,.10); --accent-soft: rgba(62,207,142,.14); --status-ok: #00a565; --status-warn: #d97706; --status-error: #dc2626; --shadow-card: 0 0 0 1px var(--border); --shadow-pop: 0 8px 24px rgba(62,207,142,.12); --tile-radius: 12px; } [data-layout="supabase"][data-theme="dark"] { --bg-page: #171717; --bg-canvas: #171717; --bg-card: #1c1c1c; --bg-elevated: #242424; --bg-subtle: #1a1a1a; --shell: #0f0f0f; --shell-glass: transparent; --shell-text: #fafafa; --border: #2e2e2e; --border-strong: #393939; --border-subtle: #242424; --text-heading: #fafafa; --text-body: #d4d4d4; --text-muted: #898989; --accent: #3ecf8e; --accent-hover: #4adfa0; --accent-on: #052b14; --accent-link: #3ecf8e; --accent-link-soft: rgba(62,207,142,.10); --accent-soft: rgba(62,207,142,.14); --status-ok: #3ecf8e; --status-warn: #fbbf24; --status-error: #f87171; --shadow-card: 0 0 0 1px var(--border); --shadow-pop: 0 8px 24px rgba(0,0,0,.4); --tile-radius: 12px; } /* ============ CALM GLASS ============ */ [data-layout="calm-glass"][data-theme="light"] { --bg-page: #f4f3fb; --bg-canvas: radial-gradient(1200px 600px at 80% -200px, rgba(102,126,234,.10), transparent 60%), #f4f3fb; --bg-card: #ffffff; --bg-elevated: #ffffff; --bg-subtle: #faf9ff; --shell: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --shell-glass: rgba(255,255,255,0.10); --shell-text: #ffffff; --border: #e8e6f1; --border-strong: #d4d1e3; --border-subtle: #f1f0f8; --text-heading: #1f1d2e; --text-body: #2c2a3e; --text-muted: #6b6985; --accent: #4ade80; --accent-hover: #22c55e; --accent-on: #062b14; --accent-link: #5b6dca; --accent-link-soft: rgba(91,109,202,.10); --accent-soft: rgba(74,222,128,.14); --status-ok: #16a34a; --status-warn: #d97706; --status-error: #dc2626; --shadow-card: 0 1px 2px rgba(31,29,46,.04), 0 1px 3px rgba(31,29,46,.06); --shadow-pop: 0 16px 40px rgba(102,126,234,.18); --tile-radius: 16px; } [data-layout="calm-glass"][data-theme="dark"] { --bg-page: #1a1826; --bg-canvas: radial-gradient(1200px 600px at 80% -200px, rgba(102,126,234,.08), transparent 60%), #1a1826; --bg-card: #222035; --bg-elevated: #2a2742; --bg-subtle: #1e1c30; --shell: linear-gradient(135deg, #4a3fa8 0%, #5b3e9e 100%); --shell-glass: rgba(255,255,255,0.08); --shell-text: #e8e6f8; --border: #2e2c45; --border-strong: #3d3a5a; --border-subtle: #252340; --text-heading: #e8e6f8; --text-body: #c2bfe0; --text-muted: #7b7896; --accent: #4ade80; --accent-hover: #22c55e; --accent-on: #062b14; --accent-link: #8b9cf4; --accent-link-soft: rgba(139,156,244,.10); --accent-soft: rgba(74,222,128,.12); --status-ok: #4ade80; --status-warn: #fbbf24; --status-error: #f87171; --shadow-card: 0 1px 2px rgba(0,0,0,.4); --shadow-pop: 0 24px 60px rgba(0,0,0,.5); --tile-radius: 16px; } /* ============ PIERCE COUNTY ============ */ [data-layout="pierce-county"][data-theme="light"] { --bg-page: #f5f1e8; --bg-canvas: #f5f1e8; --bg-card: #fdfcf8; --bg-elevated: #fdfcf8; --bg-subtle: #ede9df; --shell: linear-gradient(160deg, #1a2e1f 0%, #2d4a35 50%, #4a6e51 100%); --shell-glass: rgba(245,241,232,.10); --shell-text: #f5f1e8; --border: #d8d3c4; --border-strong: #c2bba8; --border-subtle: #eae6db; --text-heading: #1a1a14; --text-body: #2d2d22; --text-muted: #6b6654; --accent: #4a7c59; --accent-hover: #3d6b4a; --accent-on: #f5f1e8; --accent-link: #3d6b4a; --accent-link-soft: rgba(74,124,89,.10); --accent-soft: rgba(74,124,89,.12); --status-ok: #3d6b4a; --status-warn: #a05c10; --status-error: #b91c1c; --shadow-card: 0 1px 2px rgba(26,26,20,.06), 0 1px 3px rgba(26,26,20,.08); --shadow-pop: 0 12px 32px rgba(74,110,81,.20); --tile-radius: 10px; } [data-layout="pierce-county"][data-theme="dark"] { --bg-page: #141a14; --bg-canvas: #141a14; --bg-card: #1a2218; --bg-elevated: #202c1e; --bg-subtle: #171d16; --shell: linear-gradient(160deg, #0d1710 0%, #162418 50%, #1e3322 100%); --shell-glass: rgba(245,241,232,.06); --shell-text: #c8d8c0; --border: #253020; --border-strong: #304228; --border-subtle: #1d2a1b; --text-heading: #c8d8c0; --text-body: #a0b098; --text-muted: #5a6e50; --accent: #5a9e6a; --accent-hover: #4a8e5a; --accent-on: #0d1a10; --accent-link: #5a9e6a; --accent-link-soft: rgba(90,158,106,.10); --accent-soft: rgba(90,158,106,.12); --status-ok: #5a9e6a; --status-warn: #d97706; --status-error: #f87171; --shadow-card: 0 0 0 1px var(--border); --shadow-pop: 0 12px 32px rgba(0,0,0,.5); --tile-radius: 10px; } /* ============ SUPERHUMAN ============ */ [data-layout="superhuman"][data-theme="light"] { --bg-page: #f8f7ff; --bg-canvas: #f8f7ff; --bg-card: #ffffff; --bg-elevated: #ffffff; --bg-subtle: #f1f0fa; --shell: linear-gradient(160deg, #1b1938 0%, #2a2456 50%, #3b2f7d 100%); --shell-glass: rgba(255,255,255,.08); --shell-text: #f8f7ff; --border: #e4e2f0; --border-strong: #ccc9e0; --border-subtle: #eeecf8; --text-heading: #1b1938; --text-body: #2d2b50; --text-muted: #6b6884; --accent: #7c3aed; --accent-hover: #6d28d9; --accent-on: #ffffff; --accent-link: #7c3aed; --accent-link-soft: rgba(124,58,237,.10); --accent-soft: rgba(124,58,237,.12); --status-ok: #059669; --status-warn: #d97706; --status-error: #dc2626; --shadow-card: 0 1px 2px rgba(27,25,56,.05), 0 1px 4px rgba(27,25,56,.06); --shadow-pop: 0 16px 40px rgba(124,58,237,.18); --tile-radius: 14px; } [data-layout="superhuman"][data-theme="dark"] { --bg-page: #0f0e1a; --bg-canvas: #0f0e1a; --bg-card: #17162a; --bg-elevated: #1f1e35; --bg-subtle: #131224; --shell: linear-gradient(160deg, #0c0b18 0%, #130f2c 50%, #1a1440 100%); --shell-glass: rgba(203,183,251,.06); --shell-text: #ede8ff; --border: #26233e; --border-strong: #342f52; --border-subtle: #1c1a30; --text-heading: #ede8ff; --text-body: #c0b8e8; --text-muted: #6b6490; --accent: #a78bfa; --accent-hover: #8b5cf6; --accent-on: #ffffff; --accent-link: #a78bfa; --accent-link-soft: rgba(167,139,250,.10); --accent-soft: rgba(167,139,250,.12); --status-ok: #34d399; --status-warn: #fbbf24; --status-error: #f87171; --shadow-card: 0 1px 2px rgba(0,0,0,.4); --shadow-pop: 0 24px 60px rgba(0,0,0,.5); --tile-radius: 14px; } /* ============ STRIPE ============ */ [data-layout="stripe"][data-theme="light"] { --bg-page: #f6f9fc; --bg-canvas: #f6f9fc; --bg-card: #ffffff; --bg-elevated: #ffffff; --bg-subtle: #f0f4f8; --shell: linear-gradient(135deg, #533afd 0%, #6951ff 50%, #8a6dff 100%); --shell-glass: rgba(255,255,255,.10); --shell-text: #ffffff; --border: #e6eaef; --border-strong: #d0d8e4; --border-subtle: #eef2f6; --text-heading: #0a2540; --text-body: #1a3353; --text-muted: #5a7184; --accent: #4ade80; --accent-hover: #22c55e; --accent-on: #062b14; --accent-link: #533afd; --accent-link-soft: rgba(83,58,253,.08); --accent-soft: rgba(74,222,128,.14); --status-ok: #00a65a; --status-warn: #d97706; --status-error: #dc2626; --shadow-card: 0 2px 4px rgba(10,37,64,.06), 0 1px 2px rgba(10,37,64,.04); --shadow-pop: 0 16px 40px rgba(83,58,253,.16); --tile-radius: 12px; } [data-layout="stripe"][data-theme="dark"] { --bg-page: #0a0e14; --bg-canvas: #0a0e14; --bg-card: #111620; --bg-elevated: #18202e; --bg-subtle: #0e1318; --shell: linear-gradient(135deg, #2d1fa8 0%, #3d2acc 50%, #4e38e8 100%); --shell-glass: rgba(255,255,255,.06); --shell-text: #e8eaf4; --border: #1c2538; --border-strong: #283450; --border-subtle: #141d2e; --text-heading: #e8eaf4; --text-body: #a8b4cc; --text-muted: #4a5a74; --accent: #4ade80; --accent-hover: #22c55e; --accent-on: #062b14; --accent-link: #8b7fff; --accent-link-soft: rgba(139,127,255,.08); --accent-soft: rgba(74,222,128,.12); --status-ok: #4ade80; --status-warn: #fbbf24; --status-error: #f87171; --shadow-card: 0 1px 2px rgba(0,0,0,.4); --shadow-pop: 0 24px 60px rgba(0,0,0,.5); --tile-radius: 12px; } /* ============ LINEAR ============ */ [data-layout="linear"][data-theme="light"] { --bg-page: #f7f8f8; --bg-canvas: #f7f8f8; --bg-card: #ffffff; --bg-elevated: #ffffff; --bg-subtle: #f3f4f5; --shell: #ffffff; --shell-glass: transparent; --shell-text: #181a20; --border: #e6e6e6; --border-strong: #d0d6e0; --border-subtle: #efeff1; --text-heading: #181a20; --text-body: #28282c; --text-muted: #62666d; --accent: #5e6ad2; --accent-hover: #7170ff; --accent-on: #ffffff; --accent-link: #5e6ad2; --accent-link-soft: rgba(94,106,210,.08); --accent-soft: rgba(94,106,210,.10); --status-ok: #10b981; --status-warn: #d97706; --status-error: #dc2626; --shadow-card: 0 0 0 1px var(--border); --shadow-pop: 0 8px 24px rgba(94,106,210,.10); --tile-radius: 10px; } [data-layout="linear"][data-theme="dark"] { --bg-page: #08090a; --bg-canvas: #08090a; --bg-card: #0f1011; --bg-elevated: #191a1b; --bg-subtle: #0d0e0f; --shell: #08090a; --shell-glass: transparent; --shell-text: #f7f8f8; --border: #1f2024; --border-strong: #28282c; --border-subtle: #141516; --text-heading: #f7f8f8; --text-body: #d0d6e0; --text-muted: #8a8f98; --accent: #7170ff; --accent-hover: #828fff; --accent-on: #ffffff; --accent-link: #7170ff; --accent-link-soft: rgba(113,112,255,.08); --accent-soft: rgba(113,112,255,.12); --status-ok: #10b981; --status-warn: #fbbf24; --status-error: #f87171; --shadow-card: 0 0 0 1px var(--border); --shadow-pop: 0 8px 24px rgba(0,0,0,.5); --tile-radius: 10px; } body { background: var(--bg-canvas, var(--bg-page)); } /* ===================================================================== STRUCTURAL — nav orientation, density, decorative backgrounds ===================================================================== */ /* Side nav: only for linear + supabase */ .side-nav { display: none; } [data-layout="linear"] .side-nav, [data-layout="supabase"] .side-nav { display: flex; } [data-layout="linear"] .top-nav, [data-layout="supabase"] .top-nav { display: none; } /* Density */ [data-layout="superhuman"] .dashboard, [data-layout="stripe"] .dashboard, [data-layout="pierce-county"] .dashboard { padding-top: var(--space-12); } [data-layout="linear"] .dashboard, [data-layout="supabase"] .dashboard { padding-top: var(--space-6); } [data-layout="superhuman"] .hero h1, [data-layout="stripe"] .hero h1 { font-size: 44px; letter-spacing: -.02em; } [data-layout="linear"] .hero h1, [data-layout="supabase"] .hero h1 { font-size: 22px; letter-spacing: -.01em; } [data-layout="linear"] .metric-tile .num, [data-layout="supabase"] .metric-tile .num { font-family: var(--font-mono); letter-spacing: -.02em; } [data-layout="linear"] .activity-row time, [data-layout="supabase"] .activity-row time { font-family: var(--font-mono); } /* Superhuman editorial hero band */ [data-layout="superhuman"] .hero-band { background: var(--shell); color: var(--shell-text); padding: var(--space-16) 0 var(--space-16); margin-bottom: calc(-1 * var(--space-12)); position: relative; overflow: hidden; } [data-layout="superhuman"] .hero-band::after { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 400px at 90% 30%, rgba(203,183,251,.30), transparent 60%); pointer-events: none; } :not([data-layout="superhuman"]) .hero-band { display: none; } [data-layout="superhuman"] .hero { display: none; } /* Pierce County: subtle topo lines */ [data-layout="pierce-county"][data-theme="light"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: repeating-linear-gradient(45deg, rgba(45,94,63,.03) 0 1px, transparent 1px 24px); } /* Calm Glass: subtle dot grid in light */ [data-layout="calm-glass"][data-theme="light"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(rgba(102,126,234,.08) 1px, transparent 1px); background-size: 24px 24px; } /* ===================================================================== TOP NAV (most layouts) ===================================================================== */ .top-nav { display: flex; align-items: center; padding: var(--space-3) var(--space-6); background: var(--shell); color: var(--shell-text); position: relative; z-index: 5; } [data-layout="calm-glass"] .top-nav, [data-layout="pierce-county"] .top-nav, [data-layout="superhuman"] .top-nav, [data-layout="stripe"] .top-nav { border-bottom: 1px solid rgba(255,255,255,.10); } .top-nav .brand { display: flex; align-items: center; gap: var(--space-3); font-weight: 700; font-size: 16px; letter-spacing: -.01em; color: var(--shell-text); } .top-nav nav { display: flex; gap: var(--space-2); margin-left: var(--space-8); flex: 1; } .top-nav nav a { padding: 8px 14px; border-radius: var(--radius-pill); color: var(--shell-text); opacity: .82; font-size: 13px; font-weight: 500; transition: all .18s; } .top-nav nav a:hover { opacity: 1; background: var(--shell-glass); } .top-nav nav a.active { opacity: 1; background: var(--shell-glass); font-weight: 600; } .top-nav-actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; } .user-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px 12px 4px 4px; border-radius: var(--radius-pill); background: var(--shell-glass); font-size: 13px; font-weight: 500; color: var(--shell-text); } .avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #4ade80 0%, #22d3ee 100%); color: #052b14; font-size: 12px; font-weight: 700; display: grid; place-items: center; } .logout-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--shell-glass); color: var(--shell-text); font-size: 12px; font-weight: 600; border: 1px solid rgba(255,255,255,.15); transition: all .18s; } .logout-btn:hover { background: rgba(255,255,255,.18); } .logout-btn svg { width: 12px; height: 12px; } /* ===================================================================== SIDE NAV (linear + supabase) ===================================================================== */ .app-shell { display: flex; min-height: calc(100vh - 50px); position: relative; z-index: 1; } .side-nav { width: 240px; flex-shrink: 0; background: var(--bg-card); border-right: 1px solid var(--border); flex-direction: column; padding: var(--space-5) var(--space-3); gap: var(--space-2); position: sticky; top: 0; height: 100vh; } .side-nav .brand { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3) var(--space-5); font-weight: 700; font-size: 15px; color: var(--text-heading); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-2); } /* Stacked logo gets centered in the sidebar column (the wide wordmark would otherwise crowd the left edge) */ .side-nav .brand.brand-stacked { justify-content: center; } .side-nav .brand-logo-stacked { margin: 0 auto; } .side-nav-section { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); padding: var(--space-3) var(--space-3) var(--space-1); } .side-nav a { display: flex; align-items: center; gap: var(--space-3); padding: 8px var(--space-3); border-radius: 6px; color: var(--text-body); font-size: 13px; font-weight: 500; transition: all .15s; } .side-nav a svg { width: 16px; height: 16px; opacity: .7; flex-shrink: 0; } .side-nav a:hover { background: var(--bg-subtle); color: var(--text-heading); } .side-nav a.active { background: var(--accent-link-soft); color: var(--accent-link); font-weight: 600; } .side-nav a.active svg { opacity: 1; color: var(--accent-link); } /* ===================================================================== DASHBOARD CANVAS ===================================================================== */ .dashboard { flex: 1; max-width: var(--container); margin: 0 auto; padding: var(--space-10) var(--space-6) var(--space-16); width: 100%; position: relative; z-index: 1; } [data-layout="linear"] .app-shell .dashboard, [data-layout="supabase"] .app-shell .dashboard { margin: 0; max-width: none; padding-left: var(--space-10); padding-right: var(--space-10); } /* Hero (per page) */ .hero { margin-bottom: var(--space-10); display: flex; flex-direction: column; gap: var(--space-2); } .hero .greeting { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--text-muted); text-transform: uppercase; } .hero h1 { font-size: 32px; font-weight: 700; letter-spacing: -.015em; color: var(--text-heading); line-height: 1.15; } .hero .status-line { display: inline-flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); color: var(--text-body); font-size: 15px; } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--status-ok); position: relative; flex-shrink: 0; } .status-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: var(--status-ok); opacity: .35; animation: pulse 2s ease-out infinite; } @keyframes pulse { 0% { transform: scale(.8); opacity: .35; } 100% { transform: scale(2.2); opacity: 0; } } /* Superhuman editorial hero */ .hero-band-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-6); position: relative; z-index: 1; } .hero-band-eyebrow { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin-bottom: var(--space-4); } .hero-band h1 { font-size: clamp(40px, 6vw, 64px); font-weight: 700; letter-spacing: -.025em; line-height: 1.05; max-width: 18ch; } .hero-band .status-line { color: var(--shell-text); opacity: .85; font-size: 17px; margin-top: var(--space-5); } .hero-band .status-line .status-dot { background: var(--accent); } .hero-band .status-line .status-dot::after { background: var(--accent); } /* Sub-page hero (non-dashboard pages) */ .page-hero { margin-bottom: var(--space-8); } .page-hero h1 { font-size: 32px; font-weight: 700; color: var(--text-heading); letter-spacing: -.015em; line-height: 1.1; margin-bottom: var(--space-2); } .page-hero p { font-size: 15px; color: var(--text-muted); max-width: 60ch; } [data-layout="superhuman"] .page-hero h1, [data-layout="stripe"] .page-hero h1 { font-size: 40px; letter-spacing: -.02em; } [data-layout="linear"] .page-hero h1, [data-layout="supabase"] .page-hero h1 { font-size: 22px; letter-spacing: -.01em; } /* ===================================================================== METRIC TILES ===================================================================== */ .metric-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); } .metric-tile { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--tile-radius); padding: var(--space-5); box-shadow: var(--shadow-card); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; position: relative; overflow: hidden; } .metric-tile:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-pop); } .metric-tile .label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: var(--space-3); } .metric-tile .num { font-size: 32px; font-weight: 700; letter-spacing: -.02em; color: var(--text-heading); line-height: 1; } .metric-tile .sub { margin-top: var(--space-2); font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: var(--space-2); } .metric-tile .sub strong { color: var(--text-body); font-weight: 600; } .metric-tile .spark { margin-top: var(--space-4); height: 32px; } .metric-tile .spark svg { width: 100%; height: 100%; } .metric-tile .spark path.line { fill: none; stroke: var(--accent); stroke-width: 2; } .metric-tile .spark path.fill { fill: var(--accent-soft); stroke: none; } .metric-tile .delta { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; } .metric-tile .delta.up { background: var(--accent-soft); color: var(--status-ok); } .metric-tile .delta.down { background: rgba(220,38,38,.10); color: var(--status-error); } .metric-tile.primary { background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-subtle) 100%); } [data-layout="superhuman"] .metric-tile.primary { background: var(--bg-card); } /* ===================================================================== CARDS ===================================================================== */ .card-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-4); margin-bottom: var(--space-6); } .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; } .card-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); } .card-head h2 { font-size: 15px; font-weight: 600; color: var(--text-heading); letter-spacing: -.005em; } .card-head .link { font-size: 13px; font-weight: 500; color: var(--accent-link); } .card-head .link:hover { text-decoration: underline; } .card-body { padding: var(--space-3) var(--space-5) var(--space-5); } .two-col { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-4); margin-bottom: var(--space-6); } .equal-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-6); } /* ===================================================================== ACTIVITY ROWS ===================================================================== */ .activity-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: start; padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); } .activity-row:last-child { border-bottom: none; } .activity-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--accent-link-soft); color: var(--accent-link); display: grid; place-items: center; flex-shrink: 0; } .activity-icon.ok { background: var(--accent-soft); color: var(--status-ok); } .activity-icon.warn { background: rgba(217,119,6,.12); color: var(--status-warn); } .activity-icon svg { width: 16px; height: 16px; } .activity-content .title { font-size: 14px; font-weight: 500; color: var(--text-heading); line-height: 1.4; } .activity-content .meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .activity-row time { font-size: 12px; color: var(--text-muted); white-space: nowrap; } /* Invoice card */ .invoice-card .amount { font-size: 36px; font-weight: 700; letter-spacing: -.02em; color: var(--text-heading); line-height: 1; } .invoice-card .amount-sub { font-size: 13px; color: var(--text-muted); margin-top: var(--space-2); } .invoice-card .meta-row { display: flex; justify-content: space-between; padding: var(--space-3) 0; font-size: 13px; border-top: 1px solid var(--border-subtle); } .invoice-card .meta-row:first-of-type { margin-top: var(--space-4); } .invoice-card .meta-row dt { color: var(--text-muted); } .invoice-card .meta-row dd { color: var(--text-body); font-weight: 500; } /* ===================================================================== BUTTONS ===================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; font-size: 13px; font-weight: 600; border-radius: var(--radius-btn); transition: all .18s ease; white-space: nowrap; } .btn-primary { background: var(--accent); color: var(--accent-on); border-radius: var(--radius-pill); } .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); } .btn-secondary { background: var(--bg-subtle); color: var(--text-body); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--bg-elevated); border-color: var(--border-strong); } .btn-ghost { color: var(--accent-link); padding: 8px 12px; } .btn-ghost:hover { background: var(--accent-link-soft); } .btn-block { width: 100%; } /* ===================================================================== ALERTS STRIP ===================================================================== */ .alerts { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-4) var(--space-5); display: flex; align-items: center; gap: var(--space-4); } .alerts-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--accent-link-soft); color: var(--accent-link); display: grid; place-items: center; flex-shrink: 0; } .alerts-icon svg { width: 18px; height: 18px; } .alerts-text { flex: 1; } .alerts-text .title { font-size: 14px; font-weight: 600; color: var(--text-heading); } .alerts-text .desc { font-size: 13px; color: var(--text-muted); margin-top: 2px; } /* ===================================================================== PILLS ===================================================================== */ .pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; } .pill.ok { background: var(--accent-soft); color: var(--status-ok); } .pill.warn { background: rgba(217,119,6,.12); color: var(--status-warn); } .pill.error { background: rgba(220,38,38,.12); color: var(--status-error); } .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ===================================================================== AI CHAT DOCK ===================================================================== */ .chat-dock { position: fixed; bottom: 24px; right: 24px; width: 60px; height: 60px; border-radius: 50%; background: var(--accent); color: var(--accent-on); display: grid; place-items: center; box-shadow: 0 12px 32px rgba(74,222,128,.30), 0 4px 12px rgba(0,0,0,.10); cursor: pointer; transition: all .25s ease; z-index: 50; } .chat-dock:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(74,222,128,.40); } .chat-dock svg { width: 26px; height: 26px; } .chat-dock.hidden { display: none; } .chat-dock .badge { position: absolute; top: -2px; right: -2px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg-card); border: 2px solid var(--bg-page); font-size: 10px; font-weight: 700; color: var(--text-heading); display: grid; place-items: center; } /* ===================================================================== DATA TABLES ===================================================================== */ .table-card { padding: 0; } .table-card .card-head { padding: var(--space-4) var(--space-5); } .data-table { width: 100%; border-collapse: collapse; } .data-table th { text-align: left; padding: var(--space-3) var(--space-5); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); border-bottom: 1px solid var(--border); background: var(--bg-subtle); } .data-table td { padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border-subtle); font-size: 13px; color: var(--text-body); vertical-align: middle; } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr:hover { background: var(--bg-subtle); } .data-table .mono { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); } .data-table .strong { color: var(--text-heading); font-weight: 600; } .data-table .right { text-align: right; } /* ===================================================================== FIELD ROWS ===================================================================== */ .field-list { display: grid; gap: 0; } .field-row { display: grid; grid-template-columns: 180px 1fr; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); } .field-row:last-child { border-bottom: none; } .field-row dt { color: var(--text-muted); font-size: 13px; } .field-row dd { color: var(--text-body); font-weight: 500; font-size: 13px; } /* ===================================================================== TOGGLE ROWS (settings) ===================================================================== */ .toggle-list { display: grid; gap: 0; } .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--border-subtle); } .toggle-row:last-child { border-bottom: none; } .toggle-row .stack .label { font-size: 14px; font-weight: 500; color: var(--text-heading); } .toggle-row .stack .desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; max-width: 60ch; } .toggle { width: 38px; height: 22px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 11px; position: relative; cursor: pointer; transition: all .2s ease; flex-shrink: 0; } .toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--bg-card); border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: all .2s ease; } .toggle.on { background: var(--accent); border-color: var(--accent); } .toggle.on::after { left: 18px; background: #ffffff; } /* ===================================================================== CHAT WINDOW (ai-support) ===================================================================== */ .chat-card { padding: 0; overflow: hidden; } .chat-window { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); min-height: 360px; max-height: 520px; overflow-y: auto; } .chat-msg { max-width: 78%; padding: var(--space-3) var(--space-4); border-radius: 14px; font-size: 13px; line-height: 1.55; } .chat-msg.user { align-self: flex-end; background: var(--accent-link-soft); color: var(--text-body); border-bottom-right-radius: 4px; } .chat-msg.bot { align-self: flex-start; background: var(--bg-subtle); color: var(--text-body); border: 1px solid var(--border-subtle); border-bottom-left-radius: 4px; } .chat-msg .who { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; font-weight: 600; } .chat-input-row { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-subtle); background: var(--bg-subtle); } .chat-input { flex: 1; padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--text-body); font-size: 13px; outline: none; } .chat-input:focus { border-color: var(--accent); } .chat-send { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--accent-on); display: grid; place-items: center; } .chat-send svg { width: 16px; height: 16px; } .prompt-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border-subtle); } .prompt-chip { padding: 6px 12px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: 12px; color: var(--text-body); cursor: pointer; transition: all .15s; } .prompt-chip:hover { border-color: var(--accent); color: var(--accent-link); } /* ===================================================================== ACTION CARDS (support quick-actions) ===================================================================== */ .action-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); } .action-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--tile-radius); padding: var(--space-5); box-shadow: var(--shadow-card); cursor: pointer; transition: all .25s ease; } .action-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-pop); } .action-card .ico { width: 42px; height: 42px; border-radius: 10px; background: var(--accent-link-soft); color: var(--accent-link); display: grid; place-items: center; margin-bottom: var(--space-3); } .action-card .ico svg { width: 22px; height: 22px; } .action-card h3 { font-size: 15px; font-weight: 600; color: var(--text-heading); margin-bottom: 4px; letter-spacing: -.005em; } .action-card p { font-size: 13px; color: var(--text-muted); line-height: 1.5; } /* ===================================================================== KB LIST (support) ===================================================================== */ .kb-list { display: grid; gap: 0; } .kb-item { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: all .15s; text-decoration: none; color: inherit; } .kb-item:last-child { border-bottom: none; } .kb-item:hover .kb-title { color: var(--accent-link); } .kb-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--bg-subtle); color: var(--text-muted); display: grid; place-items: center; } .kb-icon svg { width: 14px; height: 14px; } .kb-title { font-size: 14px; font-weight: 500; color: var(--text-heading); transition: color .15s; } .kb-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .kb-arrow { color: var(--text-muted); } .kb-arrow svg { width: 14px; height: 14px; } /* ===================================================================== STATUS GRID (support) ===================================================================== */ .status-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-2); } .svc-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: 8px; } .svc-row .name { font-size: 13px; font-weight: 500; color: var(--text-body); flex: 1; } .svc-row .ms { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); } /* ===================================================================== THEME PICKER GRID (settings) ===================================================================== */ .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-3); } .theme-card { border: 2px solid var(--border); border-radius: var(--radius-card); overflow: hidden; cursor: pointer; transition: all .2s ease; background: var(--bg-card); } .theme-card:hover { border-color: var(--border-strong); transform: translateY(-2px); } .theme-card.active { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .theme-card .preview-area { height: 90px; padding: var(--space-3); display: flex; flex-direction: column; gap: 4px; position: relative; } .theme-card .preview-bar { height: 6px; border-radius: 3px; opacity: .9; } .theme-card .preview-tile { flex: 1; border-radius: 4px; opacity: .85; } .theme-card .label-strip { padding: 8px var(--space-3); font-size: 12px; font-weight: 600; background: var(--bg-card); color: var(--text-heading); border-top: 1px solid var(--border-subtle); display: flex; justify-content: space-between; align-items: center; } .theme-card .check { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); color: var(--accent-on); display: none; place-items: center; } .theme-card .check svg { width: 10px; height: 10px; } .theme-card.active .check { display: grid; } /* ===================================================================== USER AVATAR LIST (settings team) ===================================================================== */ .user-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: var(--space-4); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); } .user-row:last-child { border-bottom: none; } .user-row .avatar { width: 36px; height: 36px; font-size: 13px; } .user-row .name { font-size: 14px; font-weight: 500; color: var(--text-heading); } .user-row .email { font-size: 12px; color: var(--text-muted); margin-top: 2px; } /* ===================================================================== FOOTER ===================================================================== */ .app-footer { margin-top: var(--space-16); padding: var(--space-6); border-top: 1px solid var(--border); font-size: 12px; color: var(--text-muted); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); } .app-footer a { color: var(--text-muted); } .app-footer a:hover { color: var(--accent-link); } /* ===================================================================== BRAND LOGO ===================================================================== */ .brand-logo { height: 30px; width: auto; display: block; flex-shrink: 0; } .top-nav .brand-logo { height: 30px; } .side-nav .brand-logo { height: 26px; } .hero-band .brand-logo { height: 36px; margin-bottom: var(--space-4); } /* Stacked brand: mountain over "Rainier IT" wordmark. Pair with .brand-stacked on the anchor and drop the adjacent Rainier IT wordmark. */ .brand-logo-stacked { height: 44px; width: auto; } .top-nav .brand-logo-stacked { height: 44px; } .side-nav .brand-logo-stacked { height: 56px; } .login-card .brand-logo-stacked { height: 90px; } /* Sidebar user-chip: surfaces signed-in identity in the supabase layout (which hides .top-nav). Sits just under the centered brand logo. */ .side-nav-user { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); margin: 0 var(--space-2) var(--space-3); background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-card, 10px); font-size: 13px; font-weight: 600; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .side-nav-user .avatar { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: var(--accent-link, #5e6ad2); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .side-nav-user > span:last-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; } .login-error { margin-top: var(--space-4); padding: 12px 14px; background: color-mix(in srgb, #ef4444 12%, transparent); border: 1px solid color-mix(in srgb, #ef4444 30%, transparent); color: #ef4444; border-radius: var(--radius-card, 10px); font-size: 13px; text-align: left; } .login-loading { margin-top: var(--space-4); padding: 10px 14px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-card, 10px); color: var(--text-muted); font-size: 13px; } @media (max-width: 600px) { .brand-logo-stacked, .top-nav .brand-logo-stacked { height: 36px; } } /* White halo on dark gradient shells */ [data-layout="calm-glass"] .top-nav .brand-logo, [data-layout="pierce-county"] .top-nav .brand-logo, [data-layout="superhuman"] .top-nav .brand-logo, [data-layout="stripe"] .top-nav .brand-logo, [data-layout="supabase"][data-theme="dark"] .side-nav .brand-logo, [data-layout="linear"][data-theme="dark"] .side-nav .brand-logo { filter: drop-shadow(0 0 6px rgba(255,255,255,.25)); } /* ===================================================================== LOGIN PAGE ===================================================================== */ .login-shell { min-height: 100vh; display: grid; place-items: center; padding: var(--space-8); background: var(--bg-canvas, var(--bg-page)); } .login-card { max-width: 420px; width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-10); box-shadow: var(--shadow-pop); text-align: center; } .login-card .brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); } .login-card .brand-logo { height: 60px; } .login-card h1 { font-size: 24px; font-weight: 700; color: var(--text-heading); letter-spacing: -.01em; } .login-card p { font-size: 14px; color: var(--text-muted); margin-top: var(--space-2); margin-bottom: var(--space-6); } .login-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; width: 100%; background: var(--accent); color: var(--accent-on); border-radius: var(--radius-pill); font-size: 15px; font-weight: 600; transition: all .18s; } .login-btn:hover { background: var(--accent-hover); transform: translateY(-1px); } /* AI chat scrollbar — match dark/light theme via CSS vars */ .chat-window { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .chat-window::-webkit-scrollbar { width: 10px; height: 10px; } .chat-window::-webkit-scrollbar-track { background: transparent; } .chat-window::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; border: 2px solid var(--bg-card, transparent); } .chat-window::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* AI chat typing indicator + escalate panel */ .typing-dots { display: inline-flex; gap: 4px; padding: 6px 0; } .typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); display: inline-block; animation: typingPulse 1.2s infinite ease-in-out; } .typing-dots span:nth-child(2) { animation-delay: .15s; } .typing-dots span:nth-child(3) { animation-delay: .3s; } @keyframes typingPulse { 0%,80%,100%{opacity:.25;transform:scale(.8);} 40%{opacity:1;transform:scale(1);} } .chat-escalate { margin-top: var(--space-3); padding: var(--space-4); background: color-mix(in srgb, var(--accent-link) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent-link) 24%, transparent); border-radius: var(--radius-card, 10px); display: flex; flex-direction: column; gap: var(--space-3); } .chat-escalate .esc-text { font-size: 13px; color: var(--text-heading); font-weight: 600; } .chat-escalate .esc-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; } .login-foot { margin-top: var(--space-6); font-size: 12px; color: var(--text-muted); } .login-foot a { color: var(--accent-link); } /* ===================================================================== RESPONSIVE ===================================================================== */ @media (max-width: 960px) { .top-nav nav { display: none; } .top-nav-actions { display: none; } .nav-toggle { display: inline-flex; } .top-nav { gap: var(--space-3); } .metric-tiles { grid-template-columns: 1fr; } .card-grid, .two-col, .equal-col { grid-template-columns: 1fr; } .action-grid { grid-template-columns: 1fr; } .field-row { grid-template-columns: 1fr; gap: 2px; } .side-nav { display: none !important; } .top-nav { display: flex !important; } .dashboard { padding: var(--space-6); } [data-layout="linear"] .app-shell .dashboard, [data-layout="supabase"] .app-shell .dashboard { padding-left: var(--space-6); padding-right: var(--space-6); } } @media (max-width: 600px) { .hero h1 { font-size: 24px; } .page-hero h1 { font-size: 22px; } .top-nav .brand span { display: none; } .top-nav { padding-left: var(--space-4); padding-right: var(--space-4); } } /* ===== Mobile nav: hamburger + off-canvas drawer (Option A) ===== */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--shell-text); cursor: pointer; margin-left: auto; flex-shrink: 0; } @media (max-width: 960px) { .nav-toggle { display: inline-flex; } } .nav-toggle:hover { border-color: var(--accent); } .nav-toggle svg { width: 20px; height: 20px; } .nav-drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 199; opacity: 0; pointer-events: none; transition: opacity .22s ease; } .nav-drawer-backdrop.open { opacity: 1; pointer-events: auto; } .nav-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(86vw, 320px); background: var(--shell); color: var(--shell-text); border-left: 1px solid var(--border); z-index: 200; transform: translateX(100%); transition: transform .24s ease; padding: var(--space-5); overflow-y: auto; display: flex; flex-direction: column; box-shadow: -8px 0 24px rgba(0,0,0,0.25); } .nav-drawer.open { transform: translateX(0); } .nav-drawer-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--border); } .nav-drawer-header span { font-weight: 700; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; opacity: .65; } .nav-drawer-close { width: 36px; height: 36px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--shell-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .nav-drawer-close:hover { border-color: var(--accent); } .nav-drawer nav { display: flex; flex-direction: column; gap: 2px; } .nav-drawer nav a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius); color: var(--shell-text); font-size: 15px; font-weight: 500; text-decoration: none; transition: background .15s; } .nav-drawer nav a svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .8; } .nav-drawer nav a:hover, .nav-drawer nav a.active { background: var(--bg-subtle); font-weight: 600; } .nav-drawer nav a.active svg { opacity: 1; } .nav-drawer-actions { margin-top: auto; padding-top: var(--space-5); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--space-3); } .nav-drawer-actions .user-chip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg-subtle); border-radius: var(--radius); font-size: 14px; } .nav-drawer-actions .logout-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--shell-text); cursor: pointer; font-size: 14px; font-weight: 500; width: 100%; } .nav-drawer-actions .logout-btn:hover { border-color: var(--accent); color: var(--accent-link); } .nav-drawer-actions .logout-btn svg { width: 16px; height: 16px; } body.nav-open { overflow: hidden; }