/* ─── DealerDMS — THEME TOKENS ────────────────────────────────────────────── Every color/surface/shadow the UI uses is defined here. Component rules below read ONLY from these vars — no hardcoded colors anywhere outside token blocks. :root = default "dms" theme (neutral automotive: graphite + steel blue + amber). Switch themes via [data-theme="x"] on . Same token approach as the wider codebase family so DealerDMS feels like a sibling app. */ :root, :root[data-theme="dms"]{ /* brand */ --steel:#1e2a3a; --steel-d:#141d29; --steel-l:#2a3a4f; /* surfaces & text */ --bg:#f3f5f8; --surface:#fff; /* cards, panels, modals, topbar, inputs */ --surface-2:#eaeef3; /* subtle fills: buttons, badges, icon-btn hover */ --surface-3:#f7f9fb; /* table header bg */ --surface-hover:#f2f6fb; /* hover rows / org-choice hover */ --surface-sel:#e7f0fa; /* selected switcher item */ --surface-sel-2:#f1f5fa; /* switcher item hover */ --text:#1b232e; --ink:#1b232e; /* --ink kept as alias for safety */ --text-muted:#6b7885; --muted:#6b7885; --border:#e0e5ec; --line:#e0e5ec; /* accents / semantic — steel-blue primary + automotive amber accent */ --primary:#2f6fb0; --primary-hover:#255d95; --primary-d:#255d95; --primary-soft:#a6c6e4; /* light end of dashboard bar gradient */ --on-primary:#fff; /* text/icon on primary surfaces */ --accent:#e08a1e; --accent-2:#f0a53f; --accent-soft:#fdf0dc; --good:#2f9e63; --warn:#e0a92e; --danger:#c0392b; --danger-bg:#fdecec; --danger-border:#f5c6c6; /* drawer (graphite nav) */ --drawer-bg:#1e2a3a; --drawer-bg-active:#141d29; --drawer-text:#dbe3ec; --drawer-text-strong:#fff; --drawer-text-muted:#93a3b5; --drawer-text-nav:#c4d0dd; --drawer-hover:rgba(255,255,255,.07); --drawer-hover-strong:rgba(255,255,255,.13); --drawer-active:rgba(255,255,255,.07); --drawer-border:rgba(255,255,255,.10); --drawer-card-bg:rgba(255,255,255,.07); --drawer-card-border:rgba(255,255,255,.12); --drawer-avatar-bg:rgba(255,255,255,.14); --drawer-ghost-border:rgba(255,255,255,.2); --drawer-ghost-text:#dbe3ec; /* login gradient (drawer-tinted) */ --login-grad-a:#243449; --login-grad-b:#141d29; /* overlays */ --backdrop:rgba(15,25,40,.5); /* shape */ --radius:10px; --shadow:0 2px 10px rgba(20,35,55,.08); --shadow-lg:0 12px 40px rgba(20,35,55,.18); /* scrollbars — derived from theme tokens so they follow every theme automatically */ --scrollbar-track:var(--bg); --scrollbar-thumb:var(--border); --scrollbar-thumb-hover:var(--text-muted); } /* ─── Themed scrollbars ────────────────────────────────────────────────────── The tokens above existed but nothing consumed them, so every scrollable area showed the browser's default light-grey bar (jarring against the dark sidebar). Wire them up here. Firefox uses scrollbar-color; WebKit uses the pseudo-els. */ * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; } ::-webkit-scrollbar { width:10px; height:10px; } ::-webkit-scrollbar-track { background:transparent; } ::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb); border-radius:8px; border:2px solid transparent; background-clip:content-box; } ::-webkit-scrollbar-thumb:hover { background:var(--scrollbar-thumb-hover); background-clip:content-box; } /* The dark drawer needs its OWN scrollbar tokens — the global ones are derived from the LIGHT app background and would show a pale bar on the dark rail. */ .drawer, .drawer .nav { scrollbar-color: var(--drawer-border) transparent; } .drawer ::-webkit-scrollbar-thumb, .drawer.nav::-webkit-scrollbar-thumb, .drawer .nav::-webkit-scrollbar-thumb { background:var(--drawer-border); background-clip:content-box; } .drawer ::-webkit-scrollbar-thumb:hover, .drawer .nav::-webkit-scrollbar-thumb:hover { background:var(--drawer-text-muted); background-clip:content-box; } /* ─── MIDNIGHT (dark mode) ───────────────────────────────────────────────── */ :root[data-theme="midnight"]{ --steel:#13202c; --steel-d:#0c161f; --steel-l:#1c3040; --bg:#0e141b; --surface:#18222d; --surface-2:#212e3a; --surface-3:#1e2833; --surface-hover:#233140; --surface-sel:#1c3547; --surface-sel-2:#212e3a; --text:#e6edf3; --ink:#e6edf3; --text-muted:#8598a8; --muted:#8598a8; --border:#2a3846; --line:#2a3846; --primary:#3f8fd6; --primary-hover:#5ba3e2; --primary-d:#5ba3e2; --primary-soft:#1d465f; --on-primary:#06121a; --accent:#f0a53f; --accent-2:#f6bd6a; --accent-soft:#3a2c14; --good:#3cbd7c; --warn:#e7bb55; --danger:#e8625b; --danger-bg:#3a1f1f; --danger-border:#5c2c2c; --drawer-bg:#0c1720; --drawer-bg-active:#13202c; --drawer-text:#cdd9e2; --drawer-text-strong:#fff; --drawer-text-muted:#7c8fa0; --drawer-text-nav:#b3c3d1; --drawer-hover:rgba(255,255,255,.06); --drawer-hover-strong:rgba(255,255,255,.12); --drawer-active:rgba(255,255,255,.06); --drawer-border:rgba(255,255,255,.08); --drawer-card-bg:rgba(255,255,255,.05); --drawer-card-border:rgba(255,255,255,.10); --drawer-avatar-bg:rgba(255,255,255,.12); --drawer-ghost-border:rgba(255,255,255,.16); --drawer-ghost-text:#cdd9e2; --login-grad-a:#13202c; --login-grad-b:#0c1720; --backdrop:rgba(0,0,0,.6); --shadow:0 2px 10px rgba(0,0,0,.4); --shadow-lg:0 12px 40px rgba(0,0,0,.55); } /* ─── GRAPHITE (neutral cool grey, minimal) ──────────────────────────────── */ :root[data-theme="graphite"]{ --steel:#33383f; --steel-d:#282c32; --steel-l:#3f454e; --bg:#f1f2f4; --surface:#fff; --surface-2:#e9ebee; --surface-3:#f5f6f8; --surface-hover:#eef1f5; --surface-sel:#e6ebf1; --surface-sel-2:#f0f2f5; --text:#22262c; --ink:#22262c; --text-muted:#767d87; --muted:#767d87; --border:#e1e3e7; --line:#e1e3e7; --primary:#3b6ea5; --primary-hover:#2f5a88; --primary-d:#2f5a88; --primary-soft:#aec6df; --on-primary:#fff; --accent:#c77d2e; --accent-2:#dc9445; --accent-soft:#f6e8d6; --good:#2f9e63; --warn:#cf9a2e; --danger:#c93f33; --danger-bg:#fbe7e7; --danger-border:#f0c4c4; --drawer-bg:#33383f; --drawer-bg-active:#282c32; --drawer-text:#dde0e5; --drawer-text-strong:#fff; --drawer-text-muted:#9aa1ab; --drawer-text-nav:#c6cbd3; --drawer-hover:rgba(255,255,255,.07); --drawer-hover-strong:rgba(255,255,255,.13); --drawer-active:rgba(255,255,255,.07); --drawer-border:rgba(255,255,255,.09); --drawer-card-bg:rgba(255,255,255,.06); --drawer-card-border:rgba(255,255,255,.11); --drawer-avatar-bg:rgba(255,255,255,.13); --drawer-ghost-border:rgba(255,255,255,.18); --drawer-ghost-text:#dde0e5; --login-grad-a:#3f454e; --login-grad-b:#282c32; --backdrop:rgba(20,22,26,.5); --shadow:0 2px 10px rgba(30,34,40,.08); --shadow-lg:0 12px 40px rgba(30,34,40,.18); } /* ─── FLEET (deep teal-blue, energetic) ──────────────────────────────────── */ :root[data-theme="fleet"]{ --steel:#0d3b45; --steel-d:#082a31; --steel-l:#124d59; --bg:#eef4f5; --surface:#fff; --surface-2:#e2ebed; --surface-3:#f4f8f9; --surface-hover:#ecf4f5; --surface-sel:#e2f0f2; --surface-sel-2:#eef4f5; --text:#132227; --ink:#132227; --text-muted:#5f7379; --muted:#5f7379; --border:#d7e2e4; --line:#d7e2e4; --primary:#0f8a9c; --primary-hover:#0b7182; --primary-d:#0b7182; --primary-soft:#a2d5dd; --on-primary:#fff; --accent:#e0731e; --accent-2:#f08e3f; --accent-soft:#fbe6d5; --good:#2f9e63; --warn:#d99b2f; --danger:#c93f33; --danger-bg:#fbe7e7; --danger-border:#f0c4c4; --drawer-bg:#0d3b45; --drawer-bg-active:#082a31; --drawer-text:#d3e6e9; --drawer-text-strong:#fff; --drawer-text-muted:#8db3ba; --drawer-text-nav:#bcd9dd; --drawer-hover:rgba(255,255,255,.08); --drawer-hover-strong:rgba(255,255,255,.14); --drawer-active:rgba(255,255,255,.08); --drawer-border:rgba(255,255,255,.10); --drawer-card-bg:rgba(255,255,255,.08); --drawer-card-border:rgba(255,255,255,.12); --drawer-avatar-bg:rgba(255,255,255,.15); --drawer-ghost-border:rgba(255,255,255,.2); --drawer-ghost-text:#d3e6e9; --login-grad-a:#124d59; --login-grad-b:#082a31; --backdrop:rgba(10,30,35,.5); --shadow:0 2px 10px rgba(15,45,50,.10); --shadow-lg:0 12px 40px rgba(15,45,50,.20); } *{box-sizing:border-box} html,body{margin:0;height:100%} body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg);font-size:14px} .hidden{display:none !important} .muted{color:var(--text-muted);font-size:12px} a{color:var(--primary);text-decoration:none;cursor:pointer} /* Buttons */ .btn{border:1px solid transparent;border-radius:8px;padding:9px 14px;font-size:14px;font-weight:600;cursor:pointer;background:var(--surface-2);color:var(--text);transition:.12s} .btn:hover{filter:brightness(.97)} .btn-primary{background:var(--primary);color:var(--on-primary)} .btn-primary:hover{background:var(--primary-hover)} .btn-ghost{background:transparent;border-color:var(--drawer-ghost-border);color:var(--drawer-ghost-text)} /* Disabled buttons read as clearly-inactive (not invisible/broken): muted text, dashed border, no-drop cursor, and no hover shift. */ .btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;filter:none} .btn:disabled:hover,.btn[disabled]:hover{filter:none} .btn-ghost:disabled,.btn-ghost[disabled]{color:var(--text-muted);border-style:dashed;border-color:var(--border)} .btn-block{display:block;width:100%} .btn-sm{padding:6px 10px;font-size:12px} .icon-btn{background:transparent;border:none;font-size:18px;color:var(--text-muted);cursor:pointer;padding:6px 9px;border-radius:8px} .icon-btn:hover{background:var(--surface-2);color:var(--text)} /* Help (?) topbar button — monochrome circled glyph that follows the theme, replacing the always-red ❓ emoji which read as an error/alert indicator. */ .topbar-help span{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:1.5px solid currentColor;border-radius:50%;font-size:12px;font-weight:800;line-height:1} /* Login */ .login-view{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--login-grad-a),var(--login-grad-b))} .login-card{background:var(--surface);border-radius:16px;box-shadow:var(--shadow-lg);padding:32px;width:380px;max-width:92vw} .brand{display:flex;align-items:center;gap:12px;margin-bottom:22px} .brand-mark{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--accent));color:var(--on-primary);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;letter-spacing:-.02em} .brand-mark.sm{width:30px;height:30px;border-radius:8px;font-size:12px} .brand-name{font-weight:800;font-size:18px} .brand-sub{font-size:12px;color:var(--text-muted)} #login-form label,#login-form{display:block} #login-form label{font-size:12px;font-weight:700;color:var(--text-muted);margin-bottom:12px} #login-form input{display:block;width:100%;margin-top:6px;padding:11px 12px;border:1px solid var(--border);border-radius:8px;font-size:14px;background:var(--surface);color:var(--text)} #login-form input:focus{outline:none;border-color:var(--primary)} #mfa-form input[type=text]{display:block;width:100%;margin-top:6px;padding:11px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text)} #mfa-form input[type=text]:focus{outline:none;border-color:var(--primary)} #mfa-form label{display:block;font-size:12px;font-weight:700;color:var(--text-muted);margin-bottom:12px} .form-error{background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger-border);border-radius:8px;padding:9px 11px;font-size:13px;margin-bottom:12px} .org-list{display:flex;flex-direction:column;gap:8px} .org-choice{display:flex;justify-content:space-between;align-items:center;padding:13px 14px;border:1px solid var(--border);border-radius:10px;cursor:pointer;background:var(--surface)} .org-choice:hover{border-color:var(--primary);background:var(--surface-hover)} .org-choice .oc-name{font-weight:700} .org-choice .oc-role{font-size:12px;color:var(--text-muted)} /* Shell */ .app-shell{display:flex;height:100vh;overflow:hidden} .drawer{width:250px;flex-shrink:0;background:var(--drawer-bg);color:var(--drawer-text);display:flex;flex-direction:column;height:100%} .drawer-brand{display:flex;align-items:center;gap:10px;padding:16px 16px 10px;font-weight:800;font-size:15px;color:var(--drawer-text-strong)} .drawer-brand .brand-logo{width:34px;height:34px;border-radius:9px;flex:none;background:#0d0d0d;object-fit:cover;display:block} .drawer-brand-txt{display:flex;flex-direction:column;line-height:1.1} .drawer-brand-txt small{font-size:10px;font-weight:600;color:var(--drawer-text-muted,var(--text-muted));letter-spacing:.01em} .org-context{margin:6px 12px 10px;background:var(--drawer-card-bg);border:1px solid var(--drawer-card-border);border-radius:10px;padding:10px 12px;text-align:left;cursor:pointer;color:var(--drawer-text);position:relative} .org-context:hover{background:var(--drawer-hover-strong)} .org-context-label{font-size:9.5px;letter-spacing:.12em;color:var(--drawer-text-muted);font-weight:700} .org-context-name{font-weight:800;font-size:15px;margin-top:2px;line-height:1.15;padding-right:16px} .org-context-role{font-size:11px;color:var(--drawer-text-muted);margin-top:2px} .org-context-caret{position:absolute;right:10px;top:12px;color:var(--drawer-text-muted)} .nav{flex:1;overflow:auto;padding:6px 8px} .nav-group{padding:14px 12px 5px;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--drawer-text-muted);opacity:.85} .nav-group:first-of-type{padding-top:10px} .nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:8px;color:var(--drawer-text-nav);font-weight:600;font-size:14px;cursor:pointer} .nav-item .ni-ico{width:18px;text-align:center;opacity:.85} .nav-item:hover{background:var(--drawer-hover);color:var(--drawer-text-strong)} .nav-item.active{background:var(--drawer-bg-active);color:var(--drawer-text-strong);box-shadow:inset 3px 0 0 var(--primary)} .drawer-foot{padding:10px 12px;border-top:1px solid var(--drawer-border)} .user-chip{display:flex;align-items:center;gap:10px;margin-bottom:8px} .user-avatar{width:34px;height:34px;border-radius:50%;background:var(--drawer-avatar-bg);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:var(--drawer-text-strong)} .user-meta{font-size:13px;line-height:1.2;min-width:0} .user-meta div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .user-meta .muted{color:var(--drawer-text-muted)} /* Theme picker (drawer footer) */ .theme-select-wrap{margin-bottom:8px} .theme-select-wrap label{display:block;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--drawer-text-muted);font-weight:700;margin-bottom:4px} #theme-select{width:100%;padding:7px 10px;border:1px solid var(--drawer-card-border);border-radius:8px;background:var(--drawer-card-bg);color:var(--drawer-text);font-size:13px;font-weight:600;cursor:pointer} #theme-select:focus{outline:none;border-color:var(--primary)} #theme-select option{background:var(--surface);color:var(--text)} .main{flex:1;display:flex;flex-direction:column;min-width:0} .topbar{min-height:60px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:8px 18px;flex-shrink:0} .topbar-left,.topbar-right{display:flex;align-items:center;gap:10px} .topbar-titles{display:flex;flex-direction:column;justify-content:center;line-height:1.25;min-width:0;gap:1px} .topbar-title{font-weight:800;font-size:17px;letter-spacing:-0.01em;color:var(--text)} .topbar-sub{font-size:12.5px;font-weight:500;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw} @media (max-width:640px){.topbar-sub{display:none !important}} /* Top-bar org chip (mirrors drawer org context; opens the same switcher) */ .topbar-org{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:20px;padding:5px 12px 5px 10px;cursor:pointer;color:var(--text);font-weight:700;font-size:13px} .topbar-org:hover{background:var(--surface-hover);border-color:var(--primary)} .topbar-org .to-dot{width:8px;height:8px;border-radius:50%;background:var(--primary);flex:none} .topbar-org .to-caret{color:var(--text-muted)} .view{flex:1;overflow:auto;padding:20px 28px} /* Slim action bar that replaces the old in-page header (title/desc now live in the topbar). Just the module's primary actions, right-aligned. */ .prt-head-bar, .stk-head-bar, .eng-head-toolbar{margin-bottom:16px;align-items:center} .prt-head-bar{justify-content:flex-end} .prt-head-bar > .prt-head-actions{margin-left:auto} .stk-count{color:var(--text-muted);font-size:13px;font-weight:600;margin:0} /* Switcher dropdown */ .switcher-backdrop{position:fixed;inset:0;background:transparent;z-index:40} .switcher{position:fixed;z-index:50;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);width:300px;max-height:60vh;overflow:auto} .switcher-head{padding:12px 14px;font-weight:800;font-size:12px;letter-spacing:.06em;color:var(--text-muted);border-bottom:1px solid var(--border)} .switcher-list{padding:6px} .sw-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:8px;cursor:pointer} .sw-item:hover{background:var(--surface-sel-2)} .sw-item.current{background:var(--surface-sel)} .sw-item .sw-name{font-weight:700;font-size:14px} .sw-item .sw-role{font-size:11px;color:var(--text-muted)} .sw-check{color:var(--good);font-weight:800} /* View content */ .page-title{font-size:24px;font-weight:800;margin:0 0 4px} .page-sub{color:var(--text-muted);margin:0 0 22px} .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px} .card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);transition:box-shadow .15s ease,transform .15s ease} .card .k{font-size:26px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.01em} .card .l{color:var(--text-muted);font-size:11px;font-weight:600;letter-spacing:.055em;text-transform:uppercase;margin-top:4px} .card.card-primary{border-color:var(--primary);box-shadow:0 2px 14px color-mix(in srgb,var(--primary) 16%,transparent)} .card.card-primary::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:var(--radius) 0 0 var(--radius);background:linear-gradient(var(--primary),var(--primary-soft,var(--primary)))} .card.card-primary .k{color:var(--primary-d,var(--primary))} .card.card-primary{padding-left:22px} .card:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)} /* ── ONE underline module-tab bar (audit I13) ───────────────────────────────── Admin/Team (.admin-tab), Engagement (.eng-tab) and Dashboards (.dbx-toptab) share this single implementation; record pages use the .crm-seg pills. */ .admin-tabs,.eng-tabs,.dbx-tabbar{display:flex;gap:4px;border-bottom:1px solid var(--border);margin:8px 0 16px;flex-wrap:wrap} .admin-tab,.eng-tab,.dbx-toptab{appearance:none;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-muted);font:inherit;font-size:14px;font-weight:600;padding:9px 16px;cursor:pointer;margin-bottom:-1px;border-radius:8px 8px 0 0} .admin-tab:hover,.eng-tab:hover,.dbx-toptab:hover{color:var(--text);background:var(--surface-hover)} .admin-tab.active,.eng-tab.active,.dbx-toptab.active{color:var(--primary);border-bottom-color:var(--primary)} /* Module placeholder / empty-state panel */ .placeholder{background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius);padding:48px 40px;text-align:center;color:var(--text-muted)} .module-empty{max-width:520px;margin:8px auto} .module-empty .me-ico{font-size:40px;line-height:1;margin-bottom:14px;opacity:.85} .module-empty .me-title{font-size:19px;font-weight:800;color:var(--text);margin-bottom:6px} .module-empty .me-desc{font-size:14px;color:var(--text-muted);line-height:1.55;margin-bottom:18px} .module-empty .me-sub{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:4px} .chip-soft{display:inline-block;background:var(--surface-2);border:1px solid var(--border);border-radius:20px;padding:5px 12px;font-size:12.5px;font-weight:600;color:var(--text-muted)} .badge{display:inline-block;background:var(--surface-2);border-radius:20px;padding:3px 9px;font-size:11px;font-weight:700;color:var(--text)} .badge.soon{background:var(--accent-soft);color:var(--accent)} .badge.admin{background:var(--accent-soft);color:var(--accent)} /* ── Toasts (ctx.toast) ───────────────────────────────────────────────────── */ #toast-host{position:fixed;right:18px;bottom:18px;z-index:200;display:flex;flex-direction:column;gap:10px;align-items:flex-end;max-width:92vw;pointer-events:none} .toast{pointer-events:auto;min-width:200px;max-width:420px;padding:12px 15px;border-radius:10px;font-size:13.5px;font-weight:600;box-shadow:var(--shadow-lg);background:var(--surface);color:var(--text);border:1px solid var(--border);opacity:0;transform:translateY(8px);transition:opacity .22s,transform .22s;cursor:pointer} .toast.show{opacity:1;transform:none} .toast-ok{border-left:4px solid var(--good)} .toast-error{border-left:4px solid var(--danger);background:var(--danger-bg);color:var(--danger);border-color:var(--danger-border)} @media (prefers-reduced-motion:reduce){.toast{transition:none}} /* ── Spinner + screen-reader helpers ──────────────────────────────────────── */ .spinner{display:inline-block;width:16px;height:16px;vertical-align:-3px;border:2px solid var(--surface-2);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} @media (prefers-reduced-motion:reduce){.spinner{animation-duration:0s}} /* ── Visible focus ring (keyboard a11y) ───────────────────────────────────── */ :focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px} .btn:focus-visible,.icon-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px} .nav-item:focus-visible{outline:2px solid var(--drawer-text-strong);outline-offset:-2px} .nav-item{outline-offset:-2px} .sw-item:focus-visible,.org-choice:focus-visible{outline:2px solid var(--primary);outline-offset:1px} a:focus-visible{outline:2px solid var(--primary);outline-offset:2px} /* ═══ MOBILE RESPONSIVENESS (staff shell) ═══════════════════════════════════ */ /* Off-canvas drawer + backdrop. Hidden by default on desktop; on small screens the drawer slides off-screen and ☰ (#drawer-toggle) toggles body.drawer-open. */ .drawer-backdrop{position:fixed;inset:0;background:var(--backdrop);z-index:79;display:none} #drawer-toggle{display:none} /* topbar hamburger only shows on mobile */ @media (max-width:900px){ #drawer-toggle{display:inline-flex} .app-shell{position:relative} .drawer{position:fixed;top:0;left:0;height:100vh;z-index:80;transform:translateX(-100%);transition:transform .22s ease;box-shadow:var(--shadow-lg)} body.drawer-open .drawer{transform:none} body.drawer-open .drawer-backdrop{display:block} .main{width:100%} .view{padding:18px 16px} .cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .topbar-org .to-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} } @media (prefers-reduced-motion:reduce){.drawer{transition:none}} /* ═══════════════════════════════════════════════════════════════════════════ 💡 Suggestion box (self-contained module — public/js/suggestion-box.js) Uses the app theme tokens so it re-skins with every theme automatically. ═════════════════════════════════════════════════════════════════════════ */ .sbox-topbtn{font-size:18px} .sbox-fab{position:fixed;right:20px;bottom:20px;z-index:900;display:flex;align-items:center;gap:8px;background:var(--primary);color:var(--on-primary);border:none;border-radius:26px;padding:11px 18px;font-weight:700;font-size:14px;cursor:pointer;box-shadow:var(--shadow-lg)} .sbox-fab:hover{background:var(--primary-hover)} .sbox-fab-ico{font-size:17px} .sbox-overlay{position:fixed;inset:0;z-index:1000;background:var(--backdrop);display:flex;align-items:flex-start;justify-content:center;padding:5vh 16px;overflow:auto} .sbox-panel{background:var(--surface);color:var(--text);width:100%;max-width:640px;border-radius:var(--radius);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;max-height:90vh;overflow:hidden} .sbox-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border)} .sbox-title{font-weight:800;font-size:16px} .sbox-scope{font-weight:600;color:var(--text-muted);font-size:13px} .sbox-x{background:transparent;border:none;font-size:18px;color:var(--text-muted);cursor:pointer;padding:4px 8px;border-radius:8px} .sbox-x:hover{background:var(--surface-2);color:var(--text)} .sbox-tabs{display:flex;gap:4px;padding:8px 12px 0;border-bottom:1px solid var(--border)} .sbox-tab{background:transparent;border:none;border-bottom:2px solid transparent;padding:8px 12px;font-weight:700;font-size:13px;color:var(--text-muted);cursor:pointer} .sbox-tab:hover{color:var(--text)} .sbox-tab.active{color:var(--primary);border-bottom-color:var(--primary)} .sbox-body{padding:16px 18px;overflow:auto} .sbox-form{display:flex;flex-direction:column;gap:10px;margin-bottom:18px} .sbox-typetoggle{display:flex;gap:8px} .sbox-type{flex:1;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:9px;font-weight:700;font-size:13px;color:var(--text-muted);cursor:pointer} .sbox-type.active{background:var(--surface-sel);border-color:var(--primary);color:var(--primary)} .sbox-input,.sbox-textarea{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:9px 11px;font-size:14px;color:var(--text);font-family:inherit} .sbox-input:focus,.sbox-textarea:focus{outline:none;border-color:var(--primary)} .sbox-textarea{min-height:64px;resize:vertical} .sbox-formrow{display:flex;gap:8px;align-items:center} .sbox-formrow .sbox-cat{flex:1} .sbox-btn{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:9px 16px;font-weight:700;font-size:13px;color:var(--text);cursor:pointer;white-space:nowrap} .sbox-btn:hover{background:var(--surface-hover)} .sbox-btn-primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)} .sbox-btn-primary:hover{background:var(--primary-hover)} .sbox-btn-danger{background:var(--danger);border-color:var(--danger);color:#fff} .sbox-btn-sm{padding:6px 11px;font-size:12px} .sbox-listhdr{font-weight:800;font-size:13px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;margin:4px 0 10px} .sbox-filters{display:flex;gap:8px;margin-bottom:14px} .sbox-filter{flex:1} .sbox-list{display:flex;flex-direction:column;gap:10px} .sbox-empty{color:var(--text-muted);text-align:center;padding:22px 8px;font-size:14px} .sbox-empty-sm{padding:10px} .sbox-row{display:flex;gap:12px;border:1px solid var(--border);border-radius:10px;padding:12px} .sbox-vote{display:flex;flex-direction:column;align-items:center;gap:2px;flex:none;width:44px} .sbox-upvote{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;width:38px;height:34px;font-size:14px;color:var(--text-muted);cursor:pointer;line-height:1} .sbox-upvote:hover{border-color:var(--primary);color:var(--primary)} .sbox-upvote.voted{background:var(--primary);border-color:var(--primary);color:var(--on-primary)} .sbox-votecount{font-weight:800;font-size:13px;color:var(--text)} .sbox-rowmain{flex:1;min-width:0} .sbox-rowtitle{font-weight:700;font-size:14px;margin-bottom:6px} .sbox-rowmeta{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:12px;color:var(--text-muted)} .sbox-rowbody{margin-top:8px;font-size:13px;color:var(--text);white-space:pre-wrap} .sbox-by::before{content:"·";margin-right:6px} .sbox-del{background:transparent;border:none;color:var(--danger);font-size:12px;cursor:pointer;padding:0;margin-left:auto;font-weight:600} .sbox-del:hover{text-decoration:underline} .sbox-typebadge{display:inline-block;border-radius:20px;padding:2px 9px;font-size:11px;font-weight:700} .sbox-typebadge.is-feat{background:var(--surface-sel);color:var(--primary)} .sbox-typebadge.is-bug{background:var(--danger-bg);color:var(--danger)} .sbox-catbadge{display:inline-block;background:var(--surface-2);border-radius:20px;padding:2px 9px;font-size:11px;font-weight:600;color:var(--text-muted)} .sbox-statusbadge{display:inline-block;border-radius:20px;padding:2px 9px;font-size:11px;font-weight:700;background:var(--surface-2);color:var(--text)} .sbox-statusbadge.is-open{background:var(--surface-2);color:var(--text-muted)} .sbox-statusbadge.is-review{background:#fdf0dc;color:var(--accent)} .sbox-statusbadge.is-accepted,.sbox-statusbadge.is-progress{background:var(--surface-sel);color:var(--primary)} .sbox-statusbadge.is-done{background:#e4f5ec;color:var(--good)} .sbox-statusbadge.is-declined,.sbox-statusbadge.is-dup{background:var(--danger-bg);color:var(--danger)} .sbox-resp{margin-top:10px;border-left:3px solid var(--primary);background:var(--surface-3);padding:8px 12px;border-radius:0 8px 8px 0;font-size:13px} .sbox-resp strong{display:block;font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:3px} .sbox-admin{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:11px;padding-top:11px;border-top:1px dashed var(--border)} .sbox-statussel,.sbox-lanesel{width:auto;padding:6px 9px;font-size:12px} .sbox-roadmap{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .sbox-lane{background:var(--surface-3);border:1px solid var(--border);border-radius:10px;padding:10px;min-height:80px} .sbox-lane-hdr{font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);margin-bottom:10px;display:flex;align-items:center;gap:6px} .sbox-lane-n{background:var(--surface-2);border-radius:20px;padding:1px 8px;font-size:11px} .sbox-rmcard{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:9px;margin-bottom:8px} .sbox-rmcard-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px} .sbox-votes-ro{font-size:12px;font-weight:800;color:var(--text-muted)} .sbox-rmcard-title{font-size:13px;font-weight:600} .sbox-rmcard-cat{margin-top:5px;font-size:11px;color:var(--text-muted)} .sbox-dialog-overlay{position:fixed;inset:0;z-index:1100;background:var(--backdrop);display:flex;align-items:center;justify-content:center;padding:16px} .sbox-dialog{background:var(--surface);color:var(--text);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:20px;width:100%;max-width:400px} .sbox-dialog-wide{max-width:480px} .sbox-dialog-title{font-weight:800;font-size:15px;margin-bottom:14px} .sbox-dialog-msg{font-size:14px;margin-bottom:18px} .sbox-dialog-lbl{display:block;font-size:12px;font-weight:700;color:var(--text-muted);margin-bottom:12px} .sbox-dialog-lbl .sbox-input,.sbox-dialog-lbl .sbox-textarea{margin-top:5px;font-weight:400;color:var(--text)} .sbox-dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px} @media (max-width:560px){ .sbox-roadmap{grid-template-columns:1fr} .sbox-topbtn{display:none} .sbox-fab{display:flex} } /* ═══ Shared design-system primitives (ctx helpers) ══════════════════════════ */ /* Styled dialog (promise-based confirm/prompt) */ .dlg-backdrop{position:fixed;inset:0;background:var(--backdrop);display:flex;align-items:center;justify-content:center;z-index:200;padding:20px} .dlg{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;max-width:440px;padding:20px 22px;animation:dlg-rise .12s ease-out} @keyframes dlg-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.dlg{animation:none}} .dlg-h{font-size:17px;font-weight:800;color:var(--text);margin-bottom:8px} .dlg-msg{font-size:14px;line-height:1.5;color:var(--text);margin:0 0 16px} .stk-dlg-list{margin:0 0 16px;padding:10px 12px;list-style:none;background:var(--surface-2,rgba(0,0,0,.03));border:1px solid var(--border);border-radius:8px;max-height:190px;overflow:auto;font-size:13px;line-height:1.6;color:var(--text)} .stk-dlg-list li{padding:1px 0} .stk-dlg-list li:last-child{color:var(--text-muted)} .dlg-input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font:inherit;font-size:14px;margin-bottom:16px} .dlg-input:focus{outline:none;border-color:var(--primary)} .dlg-foot{display:flex;justify-content:flex-end;gap:8px} .btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)} .btn-danger:hover{filter:brightness(.94)} /* Status/tone badges — one vocabulary app-wide */ .badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap;line-height:1.4} .badge.good{background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good)} .badge.warn{background:color-mix(in srgb,var(--warn) 20%,transparent);color:var(--warn)} .badge.danger{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger)} .badge.neutral{background:var(--surface-2);color:var(--text-muted)} /* Tinted-initial avatar name cell */ .name-cell{display:inline-flex;align-items:center;gap:9px;min-width:0} .name-av{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800} .name-cell-txt{min-width:0;display:flex;flex-direction:column;line-height:1.25} .name-cell-name{font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .name-cell-sub{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Loading / empty / error state blocks */ .state-block{padding:44px 20px;text-align:center;color:var(--text-muted);font-size:14px;display:flex;flex-direction:column;align-items:center;gap:6px} .state-ico{font-size:34px;opacity:.7} .state-title{font-size:16px;font-weight:800;color:var(--text)} .state-hint{font-size:13px;color:var(--text-muted)} .state-error{color:var(--danger)} /* ─── In-app contextual Help drawer (KB-driven, per page) ───────────────────*/ .help-backdrop{position:fixed;inset:0;z-index:1400;background:rgba(9,15,26,.35)} .help-backdrop.hidden{display:none} .help-panel{position:fixed;top:0;right:0;height:100%;width:400px;max-width:92vw;background:var(--surface); border-left:1px solid var(--border);box-shadow:-16px 0 48px -24px rgba(0,0,0,.4); display:flex;flex-direction:column;transform:translateX(100%);transition:transform .2s ease;overflow:hidden} .help-panel.open{transform:none} .help-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px;border-bottom:1px solid var(--border)} .help-title{font-weight:800;font-size:16px;color:var(--text)} .help-close{color:var(--text-muted)} .help-body{flex:1;overflow-y:auto;padding:16px 18px;font-size:14px;line-height:1.6;color:var(--text)} .help-body p{margin:0 0 10px} .help-body ul{margin:0 0 12px;padding-left:20px} .help-body li{margin:3px 0} .help-body h4,.help-ask-out h4{margin:12px 0 6px;font-size:13.5px;color:var(--text)} .help-body strong{color:var(--text)} .help-body code{background:var(--surface-hover,rgba(127,127,127,.12));padding:1px 5px;border-radius:5px;font-size:12.5px} .help-body a{color:var(--primary)} .help-muted{color:var(--text-muted)} .help-ask{border-top:1px solid var(--border);padding:14px 18px;background:var(--bg)} .help-ask-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--text-muted);margin-bottom:8px} .help-ask-row{display:flex;gap:8px} .help-ask-input{flex:1;border:1px solid var(--border);border-radius:9px;padding:9px 11px;font:inherit;font-size:14px;background:var(--surface);color:var(--text);outline:none} .help-ask-input:focus{border-color:var(--primary)} .help-ask-send{white-space:nowrap} .help-ask-out{margin-top:12px;font-size:13.5px;line-height:1.55;color:var(--text);max-height:34vh;overflow-y:auto} .help-ask-out[hidden]{display:none} .help-ask-out p{margin:0 0 8px} .help-ask-out ul{margin:0 0 8px;padding-left:18px} @media (max-width:520px){ .help-panel{width:100%} } /* Data tables must never clip on narrow screens — a bare table.grid (marketplace keys, admin widgets, etc.) becomes its own horizontal scroller so every column + the row-action buttons (e.g. Revoke) stay reachable on a phone. Harmless on wide screens (a table narrower than its container simply doesn't scroll). */ @media (max-width: 760px) { table.grid { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; max-width: 100%; } table.grid thead, table.grid tbody { display: table; width: 100%; min-width: max-content; } }