/* tater-app.css — TATER Security app styles, extracted from TATER.html (#772 monolith modularization). Loaded by TATER.html before tater-themes.css; keep that order. */ :root { --bg: #0e1117; --surface: #161b25; --raised: #1e2535; --border: #2a3347; --border2: #374159; --text: #f5f8ff; --sub: #aabdd0; /* ADO #1915 — the SEMANTIC STATUS RAMP is canonical in tater-shared.css and mirrored here. Owner decision: sync the status ramp only; full palette convergence is a separate design project, so the chrome tokens above/below deliberately stay per-app. Dark mode used to disagree — a Pass badge was #2dcc71 in Security and #3fb950 in Ops, which is the one difference a user can actually perceive, side by side. Direction (shared wins) was decided on a functional point rather than taste: this file set --warn and --manual to the SAME #f0a500, so the flagship could not visually distinguish "needs attention" from "verify by hand". Adopting these values the other way would have erased that distinction across five apps. Light mode already agreed exactly and is untouched. Guarded by tools/check-status-ramp.js. */ --pass: #3fb950; --pass-bg: rgba(63, 185, 80, .12); --fail: #f85149; --fail-bg: rgba(248, 81, 73, .12); --warn: #f0883e; --warn-bg: rgba(240, 136, 62, .12); /* #1890: alias for --warn. tater-app.css:1805 and TATER.html (plan badge, directory-search-unavailable notice) consume var(--warning), which was defined nowhere and silently fell back to inherited colour. Must track --warn. */ --warning: #f0883e; --manual: #d29922; --manual-bg: rgba(210, 153, 34, .12); --info: #3b9eff; --info-bg: #0d1e35; --accent: #3b9eff; --menu-highlight: #3b9eff; --risk: #b060e0; --risk-bg: #1e0d2b; --predicted-pass: #0d9488; --predicted-pass-bg: #0a2b29; --predicted-fail: #ec4899; --predicted-fail-bg: #2b0d1a; --detail-bg:#0a0d14; --danger: #e84040; --danger-bg: #2b0d0d; --success: #2dcc71; --success-bg:#0d2b1c; --card: #161b25; --hover: rgba(255,255,255,.06); --bg2: #121720; --mono: 'IBM Plex Mono', monospace; --sans: 'IBM Plex Sans', sans-serif; /* #1681: tokens the shared primitives below depend on. Values copied verbatim from tater-shared.css (:52 --radius, :31 --text-muted, :47-50 priority colors) so the ported .pill/.empty rules resolve exactly as they do in ops/manage/my/insights. --radius was already referenced by the ported .kpi family (:1218-1219) with nothing defining it. */ --radius: 8px; --text-muted: #6e7681; --critical: #ef4444; --high: #f59e0b; --normal: #3b9eff; --low: #94a3b8; /* Modern design tokens (v2026.04.25b) */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; --radius-pill: 999px; --shadow-xs: 0 1px 2px rgba(0,0,0,.18); --shadow-sm: 0 2px 4px rgba(0,0,0,.22), 0 1px 2px rgba(0,0,0,.14); --shadow-md: 0 4px 12px rgba(0,0,0,.28), 0 2px 4px rgba(0,0,0,.16); --shadow-lg: 0 12px 32px rgba(0,0,0,.36), 0 4px 8px rgba(0,0,0,.20); --shadow-xl: 0 24px 60px rgba(0,0,0,.45), 0 8px 16px rgba(0,0,0,.24); --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --t-fast: 120ms; --t-base: 180ms; --t-slow: 280ms; --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px color-mix(in srgb, var(--accent) 70%, transparent); } /* Light mode */ [data-theme="light"] { --bg: #f8f9fa; --surface: #ffffff; --raised: #f1f3f5; --border: #e2e8f0; --border2: #cbd5e1; --text: #111827; --sub: #6b7280; --detail-bg:#f9fafb; --pass: #16803c; --pass-bg: #f0fdf4; --fail: #b91c1c; --fail-bg: #fff1f1; --warn: #92600a; --warn-bg: #fffbeb; --warning: #92600a; /* #1890: light-mode counterpart of the --warn alias */ --manual: #92600a; --manual-bg: #fffbeb; --info: #1d4ed8; --info-bg: #eff6ff; --accent: #1d4ed8; /* #1681: light-mode counterparts, from tater-shared.css:71 / :87-90. */ --text-muted: #9ca3af; --critical: #b91c1c; --high: #b45309; --normal: #1d4ed8; --low: #475569; --risk: #6d28d9; --risk-bg: #f5f3ff; --predicted-pass: #0d9488; --predicted-pass-bg: #f0fdfa; --predicted-fail: #be185d; --predicted-fail-bg: #fdf2f8; --danger: #b91c1c; --danger-bg: #fff1f1; --success: #16803c; --success-bg:#f0fdf4; --card: #ffffff; --hover: rgba(0,0,0,.04); --bg2: #f1f3f5; /* Dark sidebar in light mode */ --sidebar-bg: #1e2a3a; --sidebar-surface: #263348; --sidebar-border: #334466; --sidebar-text: #c8d0e0; --sidebar-sub: #7a8aa0; --sidebar-active: #3b9eff; --sidebar-hover: #2a3a52; --menu-highlight: #3b9eff; } [data-theme="light"] .badge-pass { border-color: #a8d4b8; } [data-theme="light"] .badge-fail { border-color: #e8b0b0; } [data-theme="light"] .badge-manual { border-color: #e0cc90; } [data-theme="light"] .badge-override { border-color: #a0c4e8; } [data-theme="light"] .badge-risk { border-color: #c8b0e0; } [data-theme="light"] .badge-pass-partial { border-color: #a8d4b8; } [data-theme="light"] .badge-predicted-pass { border-color: #7accc8; } [data-theme="light"] .badge-predicted-fail { border-color: #e8a0c0; } [data-theme="light"] tr:hover td { background: rgba(0,0,0,.03); } [data-theme="light"] .detail-inner { background: var(--detail-bg); } [data-theme="light"] .modal-backdrop, [data-theme="light"] .modal-overlay { background: rgba(0,0,0,.55); } [data-theme="light"] .toast { background: var(--surface); box-shadow: 0 2px 12px rgba(0,0,0,.12); } /* Light mode: dark sidebar + brand */ [data-theme="light"] .sidebar { background: var(--sidebar-bg); border-right-color: var(--sidebar-border); } [data-theme="light"] .brand { color: var(--sidebar-sub); border-bottom-color: var(--sidebar-border); } [data-theme="light"] .brand strong { color: var(--sidebar-active); } [data-theme="light"] .nav-item { color: var(--sidebar-sub); } [data-theme="light"] .nav-item:hover { background: var(--sidebar-hover); color: var(--sidebar-text); } [data-theme="light"] .nav-item.active { background: var(--sidebar-hover); color: var(--menu-highlight); border-left-color: var(--menu-highlight); } [data-theme="light"] .nav-badge { background: var(--sidebar-border); color: var(--sidebar-sub); } [data-theme="light"] .sidebar-footer { color: var(--sidebar-sub); border-top-color: var(--sidebar-border); } /* Light mode: topbar contrast */ [data-theme="light"] .topbar { background: #fff; border-bottom: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,.06); } [data-theme="light"] .topbar .btn-ghost { color: #374151; } [data-theme="light"] .topbar .btn-ghost:hover { background: rgba(0,0,0,.06); color: #111827; } [data-theme="light"] #theme-toggle { color: #374151 !important; } [data-theme="light"] .topbar-title { color: #111827; } [data-theme="light"] #user-avatar { background: var(--accent); color: #fff; } /* Light mode: nav group headers - handled by nav-rail CSS block below */ [data-theme="light"] .nav-group-header { color: var(--sidebar-sub); } /* Light mode: filter/input fields */ [data-theme="light"] .input, [data-theme="light"] input[type="text"], [data-theme="light"] input[type="search"], [data-theme="light"] select, [data-theme="light"] textarea { background: #fff; border-color: var(--border2); color: var(--text); } [data-theme="light"] .msel-display, [data-theme="light"] .msel-dropdown { background: #fff; border-color: var(--border2); } [data-theme="light"] .msel-opt:hover { background: #f1f5f9; } [data-theme="light"] .msel-opt.msel-sel { background: rgba(29,78,216,.06); } /* Light mode: metric cards */ [data-theme="light"] .metric-card { background: #fff; border-color: var(--border); box-shadow: 0 1px 3px rgba(0,0,0,.06); } [data-theme="light"] .metric-card::before { background: linear-gradient(135deg, rgba(0,0,0,.015) 0%, transparent 60%); } /* Light mode: topbar tasks badge visibility */ [data-theme="light"] #topbar-tasks-badge { background: var(--fail); } /* Light mode: content cards with subtle shadow */ [data-theme="light"] .settings-card { box-shadow: 0 1px 3px rgba(0,0,0,.06); } [data-theme="light"] .stat-card { box-shadow: 0 1px 3px rgba(0,0,0,.06); } [data-theme="light"] .trend-card { box-shadow: 0 1px 3px rgba(0,0,0,.06); } [data-theme="light"] .ctrl-table-wrap { box-shadow: 0 1px 3px rgba(0,0,0,.06); } /* Light mode: login screen */ [data-theme="light"] .login-screen { background: radial-gradient(ellipse at 30% 20%, rgba(29,78,216,.05) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(22,128,60,.04) 0%, transparent 50%), var(--bg); } [data-theme="light"] .login-card { box-shadow: 0 8px 32px rgba(0,0,0,.1), 0 0 0 1px rgba(43,108,176,.08); } /* Light mode: tables */ [data-theme="light"] .ctrl-table-wrap { background: #fff; } [data-theme="light"] .rpt-table th { color: var(--sub); } [data-theme="light"] tbody tr:nth-child(even) td { background: rgba(0,0,0,.02); } [data-theme="light"] tr:hover td { background: rgba(0,0,0,.04); } /* Light mode: override cards, filter bar */ [data-theme="light"] .override-card { box-shadow: 0 1px 3px rgba(0,0,0,.06); border-color: var(--border); } [data-theme="light"] .filter-bar { background: #fff; border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,.04); } /* Light mode: stronger dropdown contrast */ [data-theme="light"] .topbar-dropdown { background: #fff; border-color: #e2e8f0; box-shadow: 0 8px 24px rgba(0,0,0,.14); } [data-theme="light"] .tools-menu-item { color: #111827; } /* Light mode: table headers with stronger bg */ [data-theme="light"] table th { background: #f1f5f9 !important; color: #374151 !important; border-bottom-color: #cbd5e1; } [data-theme="light"] .data-table th { background: #f1f5f9; color: #374151; } /* Light mode: section headers */ [data-theme="light"] .section-hdr h2, [data-theme="light"] h3 { color: #111827; } /* Light mode: page titles and labels stronger */ [data-theme="light"] .detail-label { color: #3a4a60; } [data-theme="light"] .badge { border-width: 1px; } /* Light mode: theme toggle button - always visible */ [data-theme="light"] #theme-toggle { background: #f0f4fa; border-color: #9aa5b5 !important; color: #1e2a3a !important; } [data-theme="light"] #theme-toggle:hover { background: #e0e8f4; } /* Light mode: raised surfaces need stronger shadow for depth */ [data-theme="light"] .modal-inner, [data-theme="light"] .modal-content { box-shadow: 0 8px 32px rgba(0,0,0,.14); border: 1px solid var(--border2); } /* Light mode: empty state text */ [data-theme="light"] .empty-state h3 { color: #2c3a4a; } [data-theme="light"] .empty-state p { color: #5e6e82; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { height: 100%; background: var(--bg); } /* Subtle dark-grey → black gradient on body for default theme depth. Theme overrides (data-user-theme) set their own backgrounds and win. */ body { min-height: 100%; background: linear-gradient(180deg, #1a1f28 0%, #0f1115 50%, #07090d 100%); background-attachment: fixed; color: var(--text); font-family: var(--sans); font-size: 16.8px; } /* Light mode needs its own canvas — the dark gradient above has no var() to invert. No !important: tater-themes.css data-user-theme skins load later and must keep winning via cascade order. */ [data-theme="light"] body { background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 50%, #eef1f4 100%); background-attachment: fixed; } /* Layout */ .shell { display: flex; height: 100vh; overflow: hidden; } .sidebar { width: 220px; min-width: 220px; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; } .main { flex: 1; display: flex; flex-direction: column; overflow: visible; } .topbar { height: 52px; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 20px; gap: 8px; flex-shrink: 0; overflow: visible; position: relative; z-index: 100; } .content { flex: 1; overflow-y: auto; padding: 24px; min-height: 0; } /* Sidebar */ .brand { padding: 14px 16px 12px; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sub); } .nav { padding: 8px 0; flex: 1; overflow-y: auto; } .nav-item { display: flex; align-items: center; padding: 7px 16px; cursor: pointer; font-size: .8rem; font-weight: 400; color: var(--sub); transition: color .12s, background .12s; border-left: 2px solid transparent; user-select: none; } .nav-item:hover { background: var(--raised); color: var(--text); } .nav-item.active { background: var(--raised); color: var(--menu-highlight); border-left-color: var(--menu-highlight); font-weight: 500; } .ni { width:14px;height:14px;flex-shrink:0;margin-right:7px;opacity:.65; } .nav-item:hover .ni, .nav-item.active .ni { opacity:1; } .nav-icon { display: none; } .nav-badge { margin-left: auto; font-family: var(--mono); font-size: .68rem; background: var(--border2); color: var(--sub); padding: 1px 6px; border-radius: 10px; } .sidebar-footer { padding: 12px 16px; border-top: 1px solid var(--border); font-family: var(--mono); font-size: .65rem; color: var(--sub); line-height: 1.7; } .sidebar-footer span { display: block; } /* ── Nav Rail ─────────────────────────────────────────────────────────────── */ .sidebar { flex-direction: row !important; width: 244px; min-width: 244px; } /* ADO #1911 — the rail hid its own overflow. It had `scrollbar-width: none` plus a display:none webkit scrollbar, so when the content did not fit there was NO indication that anything sat below the fold — and the bottom-pinned Settings and Administration icons were the ones cut off, i.e. unreachable rather than merely hidden. MEASURED: the rail carries 22 entries (13 modules plus Favorites, Dashboard, AI Analyst, My Tasks, Audit, MSP, Community, Settings, Administration). At the old 36px pitch that is ~841px of content, against roughly 548px of usable height on a 1366x768 laptop once browser chrome and the topbar are subtracted. BE HONEST ABOUT WHAT THIS FIXES: 22 entries cannot all fit at that height at any icon size a person can still click — 548/22 is 24px, smaller than the icon itself. So this does two things and claims only those: it tightens the pitch (36->32px, gap 1->0) to cut the overflow by roughly a third, and it makes whatever remains VISIBLE so the user knows to scroll instead of concluding Settings does not exist. Adding a 14th rail module would undo the gain — which is one reason #1913 was decided as rename-in-place. */ .nav-rail { width: 52px; min-width: 52px; display: flex; flex-direction: column; align-items: center; background: var(--bg); border-right: 1px solid var(--border); padding: 6px 0 8px; gap: 0; flex-shrink: 0; overflow-y: auto; overflow-x: visible; scrollbar-width: thin; scrollbar-color: var(--border2) transparent; } .nav-rail::-webkit-scrollbar { width: 4px; } .nav-rail::-webkit-scrollbar-track { background: transparent; } .nav-rail::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; } .nav-rail:hover::-webkit-scrollbar-thumb { background: var(--sub); } .nav-rail-brand { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; margin-bottom: 2px; flex-shrink: 0; } .nav-rail-logo { height: 28px; width: auto; max-width: 28px; object-fit: contain; border-radius: 6px; } .nav-rail-divider { width: 28px; height: 1px; background: var(--border); margin: 3px 0; flex-shrink: 0; } .nav-rail-spacer { flex: 1; min-height: 8px; } /* #1911 — 36 -> 32px. 22 entries x 4px saved, plus the 21 removed 1px gaps, is ~109px less overflow. The icon itself stays 18px so the hit target shrinks but the glyph does not get harder to read. */ .nav-rail-item { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer; color: var(--sub); transition: background .12s, color .12s; flex-shrink: 0; position: relative; } .nav-rail-item svg { width: 18px; height: 18px; } .nav-rail-item:hover { background: var(--raised); color: var(--text); } .nav-rail-item.active { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); } /* Rail tooltips are JS-driven (fixed-pos div) - ::after can't escape overflow:auto scroll container */ .nav-rail-tip { position: fixed; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; font-size: .72rem; white-space: nowrap; color: var(--text); pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 9000; box-shadow: 0 4px 12px rgba(0,0,0,.28); transform: translateY(-50%); } .rail-badge { position: absolute; top: 1px; right: 1px; min-width: 14px; height: 14px; border-radius: 7px; background: var(--fail); color: #fff; font-size: .58rem; font-family: var(--mono); display: flex; align-items: center; justify-content: center; padding: 0 3px; line-height: 1; pointer-events: none; } /* ── Nav Panel ─────────────────────────────────────────────────────────────── */ .nav-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; } .nav-panel .nav { flex: 1; overflow-y: auto; } .nav-panel .nav-group-items .nav-item .ni { display: none !important; } .nav-panel .nav-group-items .nav-item { padding-left: 22px; } /* ── Group headers: icon + text + chevron ─────────────────────────────────── */ .ng-icon { width: 15px; height: 15px; flex-shrink: 0; opacity: .7; } .nav-group-chevron { width: 11px; height: 11px; margin-left: auto; flex-shrink: 0; opacity: .4; transition: transform .2s ease, opacity .15s; } .nav-group.open .nav-group-chevron, .nav-group.active .nav-group-chevron { transform: rotate(90deg); opacity: .8; } .nav-group.open .nav-group-header, .nav-group.active .nav-group-header { color: var(--text); } .nav-group:hover .ng-icon, .nav-group.open .ng-icon, .nav-group.active .ng-icon { opacity: 1; } /* Light mode rail */ [data-theme="light"] .nav-rail { background: color-mix(in srgb, var(--sidebar-bg) 95%, black); border-right-color: var(--sidebar-border); } [data-theme="light"] .nav-rail-item { color: var(--sidebar-sub); } [data-theme="light"] .nav-rail-item:hover { background: var(--sidebar-hover); color: var(--sidebar-text); } [data-theme="light"] .nav-rail-item.active { background: color-mix(in srgb, var(--sidebar-active) 20%, transparent); color: var(--sidebar-active); } [data-theme="light"] .nav-rail-item::after { background: var(--sidebar-bg); border-color: var(--sidebar-border); color: var(--sidebar-text); } [data-theme="light"] .nav-panel { background: var(--sidebar-bg); } [data-theme="light"] .nav-group-header { color: var(--sidebar-sub); } [data-theme="light"] .nav-group.open .nav-group-header, [data-theme="light"] .nav-group.active .nav-group-header { color: var(--sidebar-text); } /* Mobile: show full sidebar */ @media (max-width: 768px) { .sidebar { width: 280px !important; min-width: 280px !important; } } /* ═════════════════════════════════════════════════════════════════════ v3 SIDEBAR SCHEMA - 4 stacked rows + 2-column body. Replaces v2 grid. ═════════════════════════════════════════════════════════════════════ */ .shell[data-nav-v3] { display: flex !important; flex-direction: row !important; height: 100vh; overflow: hidden; } .shell[data-nav-v3] .sidebar { display: flex !important; flex-direction: column !important; width: 264px !important; min-width: 264px !important; background: var(--surface); border-right: 1px solid var(--border); overflow: hidden; flex-shrink: 0; } .shell[data-nav-v3] .sb-row { border-bottom: 1px solid var(--border); padding: 8px 12px; flex-shrink: 0; } .shell[data-nav-v3] .sb-brand-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; } .shell[data-nav-v3] .sb-brand-row img { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; cursor: pointer; border-radius: 4px; } .shell[data-nav-v3] .sb-brand-name { font-family: var(--mono); font-weight: 700; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1.05; color: var(--text); } .shell[data-nav-v3] .sb-brand-name small { display: block; font-size: .55rem; font-weight: 500; color: var(--sub); letter-spacing: .12em; text-transform: uppercase; margin-top: 2px; } .shell[data-nav-v3] .sb-org-row { display: flex; align-items: center; gap: 8px; min-height: 38px; } .shell[data-nav-v3] .sb-org-logo { width: 22px; height: 22px; border-radius: 4px; object-fit: contain; flex-shrink: 0; background: var(--raised); padding: 2px; } .shell[data-nav-v3] .sb-org-name { font-size: .76rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); flex: 1; min-width: 0; } .shell[data-nav-v3] .sb-apps-row { display: flex; gap: 4px; padding: 6px 12px; } .shell[data-nav-v3] .sb-app-btn { flex: 1; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 5px; cursor: pointer; padding: 0; background: var(--raised); color: var(--sub); border: 1px solid var(--border); transition: color .15s, border-color .15s, background .15s; text-decoration: none; /* app-switcher entries are anchors (current-tab default + middle/right-click) */ } .shell[data-nav-v3] .sb-app-btn svg { width: 15px; height: 15px; } .shell[data-nav-v3] .sb-app-btn:hover { color: var(--text); border-color: var(--accent); background: var(--surface); } .shell[data-nav-v3] .sb-app-btn.active { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); border-color: var(--accent); cursor: default; box-shadow: inset 0 0 0 1px var(--accent); } .shell[data-nav-v3] .sb-search-row { padding: 6px 12px 8px; } .shell[data-nav-v3] .sb-search { display: flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--raised); border: 1px solid var(--border); border-radius: 5px; } .shell[data-nav-v3] .sb-search:focus-within { border-color: var(--accent); } .shell[data-nav-v3] .sb-search svg { width: 13px; height: 13px; color: var(--sub); flex-shrink: 0; } .shell[data-nav-v3] .sb-search input { flex: 1; background: transparent; border: none; color: var(--text); font-size: .76rem; outline: none; font-family: inherit; min-width: 0; } .shell[data-nav-v3] .sb-body { flex: 1; display: flex; overflow: hidden; min-height: 0; } .shell[data-nav-v3] .nav-rail { flex-direction: column !important; flex-shrink: 0; } .shell[data-nav-v3] .nav-rail-item.fav { color: var(--manual, #f0a500); } .shell[data-nav-v3] .nav-panel { flex: 1; overflow-y: auto; min-width: 0; } /* Module pane shows only the active group. Group headers are hidden - the rail icon serves as the module identity. Direct items (Overview, My Dashboard, Calendar) above the groups always remain visible. */ .shell[data-nav-v3] .nav-panel .nav-group-header { display: none; } .shell[data-nav-v3] .nav-panel .nav-group:not(.open):not(.active) > .nav-group-items { display: none; } .shell[data-nav-v3] .nav-panel .nav-group.open > .nav-group-items, .shell[data-nav-v3] .nav-panel .nav-group.active > .nav-group-items { display: block; } .shell[data-nav-v3] .nav-panel .nav-group-items .nav-item { padding-left: 14px; } .shell[data-nav-v3] .nav-panel .nav-group-items .nav-item .ni { display: inline-block !important; } .shell[data-nav-v3] .main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; } /* Mobile: slide-in sidebar */ .shell[data-nav-v3] .sb-mobile-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 90; } @media (max-width: 768px) { .shell[data-nav-v3] .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 282px !important; min-width: 282px !important; transform: translateX(-100%); transition: transform .25s ease; z-index: 100; box-shadow: 4px 0 24px rgba(0,0,0,.3); } .shell[data-nav-v3] .sidebar.open { transform: translateX(0); } .shell[data-nav-v3] .sb-mobile-backdrop.open { display: block; } } /* ═════════════════════════════════════════════════════════════════════ V2 NAV: Topbar spans both columns. Rail + module-scoped panel below. Only the active module's items show in the panel (no group headers). ═════════════════════════════════════════════════════════════════════ */ .shell[data-nav-v2] { display: grid; grid-template-columns: 52px 192px 1fr; grid-template-rows: 52px 1fr; grid-template-areas: "topbar topbar topbar" "rail panel main"; height: 100vh; overflow: hidden; } /* Sidebar wrapper becomes transparent - rail and panel are direct grid children */ .shell[data-nav-v2] .sidebar { display: contents; } .shell[data-nav-v2] .nav-rail { grid-area: rail; width: 52px; min-width: 52px; border-right: 1px solid var(--border); } .shell[data-nav-v2] .nav-panel { grid-area: panel; border-right: 1px solid var(--border); background: var(--surface); } .shell[data-nav-v2] .topbar { grid-area: topbar; border-bottom: 1px solid var(--border); padding: 0 16px 0 12px; } .shell[data-nav-v2] .main { grid-area: main; overflow: hidden; display: flex; flex-direction: column; } /* In v2, the app-switcher + brand + search live in the topbar (not in nav-panel). */ .shell[data-nav-v2] .nav-panel .app-switcher, .shell[data-nav-v2] .nav-panel .brand, .shell[data-nav-v2] .nav-panel #sidebar-search-wrap { display: none !important; } /* Module pane shows only the active group. Group headers are hidden - the rail icon serves as the module identity. Direct items (Overview, My Dashboard, Calendar) above the groups always remain visible. */ .shell[data-nav-v2] .nav-panel .nav-group-header { display: none; } .shell[data-nav-v2] .nav-panel .nav-group:not(.open):not(.active) > .nav-group-items { display: none; } .shell[data-nav-v2] .nav-panel .nav-group.open > .nav-group-items, .shell[data-nav-v2] .nav-panel .nav-group.active > .nav-group-items { display: block; } /* Slim padding adjustments inside the panel since the group container vanishes */ .shell[data-nav-v2] .nav-panel .nav-group-items .nav-item { padding-left: 14px; } .shell[data-nav-v2] .nav-panel .nav-group-items .nav-item .ni { display: inline-block !important; } /* Module name banner at top of panel (rendered by JS into #v2-module-banner) */ .v2-module-banner { padding: 14px 14px 10px; font-family: var(--mono); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; } .v2-module-banner svg { width: 14px; height: 14px; flex-shrink: 0; } /* Topbar v2 additions: brand block + app-switcher + search field */ .shell[data-nav-v2] .topbar-brand { display: flex; align-items: center; gap: 10px; padding-right: 14px; margin-right: 10px; border-right: 1px solid var(--border); height: 100%; flex-shrink: 0; } .shell[data-nav-v2] .topbar-brand img { width: 28px; height: 28px; flex-shrink: 0; cursor: pointer; } .shell[data-nav-v2] .topbar-brand-text { font-family: var(--mono); font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text); line-height: 1.05; } .shell[data-nav-v2] .topbar-brand-text small { display: block; font-size: .55rem; font-weight: 500; color: var(--sub); letter-spacing: .12em; text-transform: uppercase; margin-top: 2px; } .shell[data-nav-v2] .topbar-search-v2 { flex: 1; max-width: 460px; display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 32px; background: var(--raised); border: 1px solid var(--border); border-radius: 8px; flex-shrink: 1; min-width: 100px; } .shell[data-nav-v2] .topbar-search-v2:focus-within { border-color: var(--accent); } .shell[data-nav-v2] .topbar-search-v2 input { flex: 1; background: transparent; border: none; color: var(--text); font-size: .82rem; outline: none; font-family: inherit; } .shell[data-nav-v2] .topbar-search-v2 svg { width: 14px; height: 14px; color: var(--sub); flex-shrink: 0; } /* App-switcher in topbar - re-style from the panel version */ .shell[data-nav-v2] .topbar .app-switcher { display: flex; gap: 4px; flex-shrink: 0; align-items: center; padding: 0; border: none; margin-right: 10px; } .shell[data-nav-v2] .topbar .app-switcher .as-btn { width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 6px; cursor: pointer; flex-shrink: 0; background: var(--raised); color: var(--sub); border: 1px solid var(--border); transition: color .15s, border-color .15s, background .15s; } .shell[data-nav-v2] .topbar .app-switcher .as-btn svg { width: 16px; height: 16px; } .shell[data-nav-v2] .topbar .app-switcher .as-btn:hover { color: var(--text); border-color: var(--accent); background: var(--surface); } .shell[data-nav-v2] .topbar .app-switcher .as-btn.active { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); border-color: var(--accent); cursor: default; box-shadow: inset 0 0 0 1px var(--accent); } /* Hide legacy hamburger + mobile-nav overlay when v2 (rail handles mobile) */ @media (min-width: 769px) { .shell[data-nav-v2] .hamburger { display: none; } } @media (max-width: 768px) { .shell[data-nav-v2] { grid-template-columns: 52px 0 1fr; grid-template-rows: 52px 1fr; } .shell[data-nav-v2] .nav-panel { position: fixed; top: 52px; left: 52px; bottom: 0; width: 240px; z-index: 50; transform: translateX(-110%); transition: transform .25s ease; } .shell[data-nav-v2] .nav-panel.open { transform: translateX(0); box-shadow: 4px 0 16px rgba(0,0,0,.25); } .shell[data-nav-v2] .topbar-brand { padding-right: 8px; margin-right: 6px; } .shell[data-nav-v2] .topbar-brand small { display: none; } .shell[data-nav-v2] .topbar-search-v2 { max-width: 180px; } } /* v3 Phase 4: collapse the legacy verbose dashboard widgets behind a toggle. */ .dash-collapsed-v3 { display: none !important; } /* Collapsible module-grouped sections inside the detailed view. */ .dash-section { margin-bottom: 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); overflow: hidden; } .dash-section > summary { cursor: pointer; list-style: none; padding: 10px 14px; display: flex; align-items: center; gap: 10px; user-select: none; transition: background .15s; } .dash-section > summary::-webkit-details-marker { display: none; } .dash-section > summary::before { content: '▸'; font-size: .6rem; color: var(--sub); transition: transform .15s; display: inline-block; flex-shrink: 0; } .dash-section[open] > summary::before { transform: rotate(90deg); } .dash-section > summary:hover { background: var(--raised); } .dash-section[open] > summary { background: var(--raised); border-bottom: 1px solid var(--border); } .dash-section-title { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--text); } .dash-section-meta { margin-left: auto; font-family: var(--mono); font-size: .62rem; color: var(--sub); } .dash-section-body { padding: 14px; } /* ═════ Module dashboards ═════ */ .mod-dash { padding: 0; max-width: 1400px; } .mod-dash-hdr { margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .mod-dash-hdr h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 4px; font-family: var(--mono); letter-spacing: -.01em; display:flex; align-items:center; gap:10px; } .mod-dash-hdr h1 svg { width: 22px; height: 22px; color: var(--accent); } .mod-dash-hdr p { margin: 0; color: var(--sub); font-size: .88rem; line-height: 1.5; max-width: 760px; } .mod-dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 18px; } .mod-dash-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; cursor: pointer; transition: border-color .15s, transform .15s; } .mod-dash-kpi:hover { border-color: var(--accent); transform: translateY(-1px); } .mod-dash-kpi-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sub); font-weight: 600; } .mod-dash-kpi-value { font-size: 1.45rem; font-weight: 700; margin-top: 4px; color: var(--text); } .mod-dash-kpi.fail .mod-dash-kpi-value { color: var(--fail); } .mod-dash-kpi.pass .mod-dash-kpi-value { color: var(--pass); } .mod-dash-kpi.warn .mod-dash-kpi-value { color: var(--manual); } .mod-dash-section-title { font-family: var(--mono); font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sub); margin: 0 0 10px; } /* #2432 - CONDENSED module index. The grid was 240px cards with a full description each, so a 20-item module filled the viewport and nothing else could sit on the page. It is now a denser menu: narrower columns, tighter padding, and the description clamped to one line. The rows still navigate, so nothing is lost - what is gained is vertical room on the module dashboard for per-module charts. */ .mod-dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; } .mod-dash-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; cursor: pointer; transition: border-color .15s, box-shadow .15s; display: flex; flex-direction: column; gap: 2px; } .mod-dash-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.14); } .mod-dash-card-icon { width: 26px; height: 26px; color: var(--accent); margin-bottom: 2px; } .mod-dash-card-title { font-size: .92rem; font-weight: 600; color: var(--text); } /* #2432 — wrapper for the per-section content indicator that tater-module-items.js stamps into each card title. Empty until then, so it must not reserve space or disturb the title's baseline when a section has no registered counter. */ .mod-dash-card-ind { display: inline; margin-left: 0; font-weight: 400; } .mod-dash-card-desc { color: var(--sub); font-size: .72rem; line-height: 1.35; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mod-dash-card-meta { margin-top: 4px; font-family: var(--mono); font-size: .62rem; color: var(--accent); letter-spacing: .04em; text-transform: uppercase; } .mod-dash-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-top: 18px; } @media (max-width: 900px) { .mod-dash-cols { grid-template-columns: 1fr; } } .mod-dash-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; } .mod-dash-panel h3 { margin: 0 0 10px; font-size: .92rem; font-weight: 600; display: flex; align-items: center; gap: 8px; } .mod-dash-recent { list-style: none; padding: 0; margin: 0; } .mod-dash-recent li { padding: 8px 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; cursor: pointer; transition: color .15s; } .mod-dash-recent li:last-child { border-bottom: none; } .mod-dash-recent li:hover { color: var(--accent); } .mod-dash-recent .rt { flex: 1; font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mod-dash-recent .rs { font-size: .68rem; color: var(--sub); } .mod-dash-empty { padding: 20px; text-align: center; color: var(--sub); font-size: .82rem; } /* Pagination */ .pagination-bar { display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 0; font-family:var(--mono); font-size:.72rem; color:var(--sub); } .pagination-bar button { padding:4px 10px; border-radius:4px; } .pagination-bar .pg-current { color:var(--info); font-weight:600; } /* Bulk action bar */ .bulk-action-bar { display:flex; align-items:center; gap:12px; padding:8px 16px; background:var(--info-bg); border:1px solid var(--info); border-radius:6px; margin-bottom:8px; font-size:.78rem; } .bulk-action-bar .bulk-count { font-weight:600; color:var(--info); } .bulk-action-bar .btn { font-size:.72rem; padding:4px 12px; } /* Archived row styling */ tr.archived-row td { opacity:.5; } tr.archived-row td:first-child { opacity:1; } .badge-archived { font-size:.6rem; background:var(--raised); color:var(--sub); border:1px solid var(--border); padding:1px 6px; border-radius:3px; margin-left:6px; } /* MSP Onboarding Wizard Steps */ .msp-step { flex:1; text-align:center; padding:8px 4px; font-size:.72rem; color:var(--sub); background:var(--raised); border-radius:4px; font-weight:500; } .msp-step.active { background:var(--info-bg); color:var(--info); border:1px solid var(--info); } .msp-step.done { background:var(--pass-bg); color:var(--pass); } .msp-step span { display:inline-block; width:18px; height:18px; line-height:18px; border-radius:50%; background:var(--border); color:var(--text); font-size:.65rem; font-weight:700; text-align:center; margin-right:4px; } .msp-step.active span { background:var(--info); color:#fff; } .msp-step.done span { background:var(--pass); color:#fff; } /* Integration cards */ .intg-card { background:var(--surface); border:1px solid var(--border); border-radius:3px; padding:16px; cursor:pointer; transition:border-color .2s; } .intg-card:hover { border-color:var(--info); } .intg-card-icon { font-size:1.6rem; width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:var(--raised); border-radius:4px; } .intg-card-status { font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:10px; } .intg-card-status.connected { background:var(--pass-bg); color:var(--pass); border:1px solid var(--pass); } .intg-card-status.available { background:var(--raised); color:var(--sub); border:1px solid var(--border); } /* Azure resource health badges */ .azr-healthy { color:var(--pass); } .azr-unhealthy { color:var(--fail); } /* SuperAdmin-only elements */ body:not(.is-super-admin) .sa-only { display: none !important; } .badge-custom { background:var(--info); color:#fff; font-size:.58rem; padding:1px 6px; border-radius:var(--radius-sm); text-transform:uppercase; letter-spacing:.05em; margin-left:6px; } /* Topbar */ .topbar-logo { height: 28px; width: auto; object-fit: contain; display: none; } .topbar-title { font-family: var(--mono); font-size: .72rem; color: var(--sub); font-weight: 500; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; flex-shrink: 2; min-width: 0; } .topbar-meta { font-family: var(--mono); font-size: .68rem; color: var(--sub); margin-left: 4px; } .topbar-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; overflow: visible; position: relative; } /* Topbar hamburger overflow (injected by tater-themes.js) - hidden on desktop, shown ≤720px */ .topbar-hamburger-btn { display: none; background: transparent; border: 1px solid var(--border); color: var(--sub); width: 32px; height: 32px; border-radius: 6px; cursor: pointer; align-items: center; justify-content: center; flex-shrink: 0; transition: color .15s ease, border-color .15s ease; } .topbar-hamburger-btn:hover { color: var(--accent); border-color: var(--accent); } .topbar-hamburger-btn svg { width: 16px; height: 16px; } .topbar-overflow-popover { display: none; position: absolute; top: calc(100% + 8px); right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.4); z-index: 200; flex-direction: column; gap: 6px; min-width: 180px; } .topbar-actions.show-overflow .topbar-overflow-popover { display: flex; } .topbar-overflow-popover .topbar-icon-btn, .topbar-overflow-popover .theme-toggle-btn, .topbar-overflow-popover .tater-theme-picker-btn { width: 100% !important; height: 36px !important; justify-content: flex-start !important; padding: 0 12px !important; gap: 10px; } .topbar-overflow-popover .topbar-icon-btn::after, .topbar-overflow-popover .theme-toggle-btn::after, .topbar-overflow-popover .tater-theme-picker-btn::after { content: attr(title); font-size: .82rem; color: var(--text); white-space: nowrap; } /* Buttons */ .btn { font-family: var(--sans); font-size: .75rem; font-weight: 500; padding: .3rem .8rem; border-radius: var(--radius-md); cursor: pointer; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); border: 1px solid; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .btn-ghost { background: transparent; border-color: var(--border2); color: var(--sub); } .btn-ghost:hover { border-color: var(--info); color: var(--info); background: var(--info-bg); } .btn-primary { background: var(--info-bg); border-color: var(--info); color: var(--info); } .btn-primary:hover { background: var(--info); color: #fff; } .btn-danger { background: var(--fail-bg); border-color: var(--fail); color: var(--fail); } .btn-danger:hover { background: var(--fail); color: #fff; } /* Badges */ .badge { font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .06em; padding: .15rem .45rem; border-radius: var(--radius-sm); text-transform: uppercase; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; } .badge-pass { background: var(--pass-bg); color: var(--pass); border: 1px solid #1a5c35; } .badge-fail { background: var(--fail-bg); color: var(--fail); border: 1px solid #5c1a1a; } .badge-manual { background: var(--manual-bg); color: var(--manual); border: 1px solid #5c3a00; } .badge-override { background: var(--info-bg); color: var(--info); border: 1px solid #1a3d5c; } .badge-risk { background: var(--risk-bg); color: var(--risk); border: 1px solid #3d1a5c; } .badge-pass-partial { background: color-mix(in srgb, var(--pass) 20%, var(--manual-bg)); color: var(--pass); border: 1px solid #2a5c35; } .badge-skip { background: var(--raised); color: var(--sub); border: 1px solid var(--border2); } .badge-predicted-pass { background: var(--predicted-pass-bg); color: var(--predicted-pass); border: 1px solid #0a4a44; } .badge-predicted-fail { background: var(--predicted-fail-bg); color: var(--predicted-fail); border: 1px solid #5c0d30; } /* #1325: licensing-aware Not Applicable — out-of-scope, dashed neutral badge. */ .badge-not-applicable { background: var(--raised); color: var(--sub); border: 1px dashed var(--border2); } /* Drift Alerts (#98) */ .drift-alert-banner { background:var(--fail-bg); border:1px solid var(--fail); border-radius:8px; padding:10px 16px; margin-bottom:14px; } .drift-alert-banner summary { cursor:pointer; font-weight:600; font-size:.78rem; color:var(--fail); } .drift-alert-row { display:flex; gap:12px; align-items:center; padding:4px 0; font-size:.74rem; border-bottom:1px solid rgba(232,64,64,.15); } .drift-alert-row:last-child { border-bottom:none; } .drift-badge-count { background:var(--fail); color:#fff; font-size:.6rem; font-weight:700; padding:1px 6px; border-radius:10px; margin-left:4px; } /* Risk Score (#103) */ .risk-score-badge { display:inline-block; font-family:var(--mono); font-size:.68rem; font-weight:700; padding:.1rem .4rem; border-radius:var(--radius-sm); min-width:28px; text-align:center; } .risk-score-green { background:rgba(45,204,113,.15); color:var(--pass); border:1px solid var(--pass); } .risk-score-yellow { background:rgba(240,165,0,.15); color:var(--manual); border:1px solid var(--manual); } .risk-score-red { background:rgba(232,64,64,.15); color:var(--fail); border:1px solid var(--fail); } /* SLA Tracking (#102) */ .sla-badge { font-family:var(--mono); font-size:.6rem; font-weight:600; padding:1px 6px; border-radius:var(--radius-sm); white-space:nowrap; } .sla-within { background:var(--pass-bg); color:var(--pass); border:1px solid #1a5c35; } .sla-warning { background:var(--warn-bg); color:var(--warn); border:1px solid #5c3a00; } .sla-breach { background:var(--fail-bg); color:var(--fail); border:1px solid #5c1a1a; } /* Compliance Widget (#97) */ .widget-mode .shell { display:flex; justify-content:center; align-items:center; height:100vh; background:var(--bg); } .widget-mode .sidebar, .widget-mode .topbar { display:none !important; } .widget-container { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:24px; max-width:420px; width:100%; text-align:center; } .widget-score-ring { position:relative; width:120px; height:120px; margin:0 auto 16px; } .widget-fw-bar { display:flex; align-items:center; gap:8px; margin:4px 0; font-size:.74rem; } .widget-fw-bar .bar-track { flex:1; height:6px; } /* MITRE badges (#100) */ .mitre-chip { display:inline-block; font-size:.62rem; font-weight:600; padding:1px 6px; border-radius:var(--radius-sm); background:var(--info-bg); color:var(--info); border:1px solid var(--info); margin:1px 2px; white-space:nowrap; cursor:help; } /* EPSS badge (#101) */ .epss-badge { display:inline-block; font-family:var(--mono); font-size:.64rem; font-weight:600; padding:1px 6px; border-radius:3px; white-space:nowrap; margin-left:4px; } .epss-green { background:rgba(45,204,113,.15); color:var(--pass); border:1px solid var(--pass); } .epss-yellow { background:rgba(250,204,21,.15); color:#fde047; border:1px solid #fde04788; } .epss-orange { background:rgba(240,165,0,.15); color:var(--warn); border:1px solid var(--warn); } .epss-red { background:rgba(232,64,64,.15); color:var(--fail); border:1px solid var(--fail); } .epss-bar { display:inline-block; height:6px; border-radius:3px; vertical-align:middle; margin-left:4px; } .epss-pct-tip { font-size:.6rem; color:var(--sub); margin-left:2px; } /* Stat cards */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; } .stat-card { background: var(--surface); border: 1px solid var(--border); border-top: 2px solid var(--border); border-radius: var(--radius-md); padding: 16px; position: relative; overflow: hidden; box-shadow: var(--shadow-xs); transition: box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .stat-card:hover { box-shadow: var(--shadow-sm); } .stat-card.pass { border-top-color: var(--pass); } .stat-card.fail { border-top-color: var(--fail); } .stat-card.manual { border-top-color: var(--manual); } .stat-card.not-scanned { border-top-color: var(--sub); } .stat-card.total { border-top-color: var(--info); } .stat-card.risk { border-top-color: var(--risk); } .stat-card.predicted-pass { border-top-color: var(--predicted-pass); } .stat-card.predicted-fail { border-top-color: var(--predicted-fail); } .stat-num { font-family: var(--mono); font-size: 1.5rem; font-weight: 600; line-height: 1; margin-bottom: 4px; } .stat-card.pass .stat-num { color: var(--pass); } .stat-card.fail .stat-num { color: var(--fail); } .stat-card.manual .stat-num { color: var(--manual); } .stat-card.not-scanned .stat-num { color: var(--sub); } .stat-card.total .stat-num { color: var(--info); } .stat-card.risk .stat-num { color: var(--risk); } .stat-card.predicted-pass .stat-num { color: var(--predicted-pass); } .stat-card.predicted-fail .stat-num { color: var(--predicted-fail); } .stat-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--sub); font-weight: 600; } .stat-sub { font-family: var(--mono); font-size: .68rem; color: var(--sub); margin-top: 4px; } /* Section headers */ .section-hdr { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .section-hdr h2 { font-family: var(--mono); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--text); white-space: nowrap; } .section-hdr .line { flex: 1; height: 1px; background: var(--border); } /* Trend chart */ .trend-card { background: var(--surface); border: 1px solid var(--border); border-radius: 3px; padding: 16px; margin-bottom: 24px; } .trend-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; } .trend-title { font-family: var(--mono); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--sub); } .trend-legend { display: flex; gap: 16px; } .trend-legend-item { display: flex; align-items: center; gap: 5px; font-size: .7rem; color: var(--sub); } .trend-legend-dot { width: 8px; height: 8px; border-radius: 50%; } #trendChart, #priorityTrendChart { width: 100%; height: 220px; display: block; cursor: crosshair; } #trendChartTooltip, #priorityTrendChartTooltip { position:absolute;display:none;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:8px 12px;font-size:.72rem;font-family:var(--mono);pointer-events:none;z-index:100;box-shadow:0 4px 12px rgba(0,0,0,.3);white-space:nowrap; } /* App bars */ .app-bars { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; margin-bottom: 24px; } .app-bar-card { background: var(--surface); border: 1px solid var(--border); border-radius: 3px; padding: 12px; } .app-bar-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .app-bar-name { font-size: .78rem; font-weight: 600; } .app-bar-counts { font-family: var(--mono); font-size: .7rem; color: var(--sub); } .bar-track { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; display: flex; } .bar-seg { height: 100%; transition: width .4s ease; } .bar-pass { background: var(--pass); } .bar-fail { background: var(--fail); } .bar-manual { background: var(--manual); } .bar-not-scanned { background: var(--sub); opacity: .4; } .bar-predicted-pass { background: var(--predicted-pass); opacity: .75; } .bar-predicted-fail { background: var(--predicted-fail); opacity: .75; } /* ── Community & Gamification ──────────────────────────────────────────── */ .xp-bar-wrap { background: var(--border); border-radius: 9999px; height: 8px; overflow: hidden; } .xp-bar-fill { height: 100%; border-radius: 9999px; background: linear-gradient(90deg, var(--accent), #7c3aed); transition: width .4s; } .level-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 9999px; font-size: .72rem; font-weight: 700; background: var(--accent); color: #fff; } .ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; } .ach-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; transition: border-color .15s; } .ach-card.earned { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent)22; } .ach-card.secret:not(.earned) { opacity: .45; filter: grayscale(1); } .ach-icon { font-size: 2rem; line-height: 1; } .ach-name { font-size: .78rem; font-weight: 600; } .ach-desc { font-size: .7rem; color: var(--sub); } .ach-xp { font-size: .68rem; color: var(--accent); font-weight: 700; } .ach-earned-at { font-size: .65rem; color: var(--pass); margin-top: 2px; } .ach-progress { width: 100%; margin-top: 4px; } .lb-podium { display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin: 16px 0; } .lb-podium-item { display: flex; flex-direction: column; align-items: center; gap: 4px; } .lb-podium-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--card); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; overflow: hidden; } .lb-podium-avatar img { width: 100%; height: 100%; object-fit: cover; } .lb-podium-pedestal { width: 70px; background: var(--border); border-radius: 4px 4px 0 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; color: var(--sub); } .lb-podium-item:nth-child(1) .lb-podium-pedestal { height: 54px; background: #fbbf2455; color: #d97706; } .lb-podium-item:nth-child(2) .lb-podium-pedestal { height: 40px; background: #9ca3af44; color: #6b7280; } .lb-podium-item:nth-child(3) .lb-podium-pedestal { height: 30px; background: #cd7f3244; color: #92400e; } .lb-entry { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; transition: background .1s; } .lb-entry:hover { background: var(--hover); } .lb-entry.is-me { background: var(--accent)11; border: 1px solid var(--accent)33; } .lb-rank { font-size: .8rem; font-weight: 700; color: var(--sub); width: 24px; text-align: center; } .lb-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: .9rem; overflow: hidden; flex-shrink: 0; } .lb-avatar img { width: 100%; height: 100%; object-fit: cover; } .lb-name { flex: 1; font-size: .85rem; } .lb-xp-tag { font-size: .75rem; color: var(--accent); font-weight: 600; } .profile-avatar-lg { width: 80px; height: 80px; border-radius: 50%; border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; overflow: hidden; cursor: pointer; position: relative; background: var(--card); } .profile-avatar-lg:hover::after { content: '✎'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #00000088; color: #fff; font-size: 1.5rem; } .profile-avatar-lg img { width: 100%; height: 100%; object-fit: cover; } .toast-achievement { position: fixed; bottom: 24px; right: 24px; z-index: 9999; background: var(--card); border: 1px solid var(--accent); border-radius: 12px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; box-shadow: 0 8px 24px #0004; min-width: 240px; animation: toast-in .3s ease; } @keyframes toast-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } } .toast-ach-icon { font-size: 2rem; } .color-swatch-row { display: flex; gap: 6px; flex-wrap: wrap; } .color-swatch { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: border-color .15s; } .color-swatch.selected { border-color: var(--text); } /* Controls table */ .filter-bar { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; } .filter-bar input, .filter-bar select { background: var(--surface); border: 1px solid var(--border2); color: var(--text); padding: .35rem .6rem; border-radius: 4px; font-size: .78rem; font-family: var(--sans); outline: none; transition: border-color .15s; } .filter-bar input:focus, .filter-bar select:focus { border-color: var(--info); } .filter-bar input { flex: 1; min-width: 180px; } .filter-bar select option { background: var(--surface); } .filter-count { font-family: var(--mono); font-size: .7rem; color: var(--sub); white-space: nowrap; } .ctrl-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 3px; } /* ADO #1892 — `.table-wrap` is canonical in tater-shared.css:400-401. TATER.html is the one app that does not link that file (see the .pill note at :909 below), so its four wrappers — #gm-table, #aigov-inv-table, #aw-eng-table, and the governance-meeting occurrence history inside the detail modal — resolved to nothing and their tables pushed the page sideways instead of scrolling inside their box. COPIED, NEVER MOVED. Same precedent as .pill (#1681) and .empty-state (#1620): moving it out of tater-shared.css would strip it from ops/manage/my/insights, which do link that file. Keep the two copies in sync. `.data-table-wrap` gets the rule for hygiene only — all four of its uses already carry the same declaration inline, and those inline styles are deliberately left in place. */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; margin-bottom: 12px; } .table-wrap > table { min-width: 600px; } .data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } /* ADO #1892 — the same safety net tater-shared.css:405-407 gives the other apps. This, not the rule above, is what reaches the AI-Governance inventory: that table renders through tater-views.js into `
`, so the clip happens one level deeper than .table-wrap and widening the outer wrapper cannot fix it. */ @media (max-width: 1100px) { .card > table, .card > div > table { display: block; overflow-x: auto; max-width: 100%; } } table { width: 100%; border-collapse: collapse; font-size: .8rem; } thead tr { background: var(--raised); } th { text-align: left; padding: 8px 10px; font-family: var(--mono); font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--sub); border-bottom: 1px solid var(--border); white-space: nowrap; cursor: pointer; user-select: none; } th:hover { color: var(--text); } th.sorted { color: var(--info); } td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; } tbody tr:last-child td { border-bottom: none; } tbody tr:nth-child(even) td { background: rgba(255,255,255,.025); } tr:hover td { background: rgba(255,255,255,.06); } /* Role badges */ .role-badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:.7rem; font-weight:600; } .role-badge-superadmin { background:var(--fail-bg, rgba(220,38,38,.12)); color:var(--fail); } .role-badge-orgadmin { background:var(--info-bg, rgba(59,130,246,.12)); color:var(--info); } .role-badge-admin { background:var(--info-bg, rgba(59,130,246,.12)); color:var(--info); } .role-badge-auditor { background:var(--warn-bg, rgba(234,179,8,.12)); color:var(--warn); } .role-badge-viewer { background:var(--raised); color:var(--sub); } .role-badge-member { background:var(--raised); color:var(--sub); } tr.row-fail > td:first-child { border-left: 3px solid var(--fail); } tr.row-pass > td:first-child { border-left: 3px solid transparent; } tr.row-manual > td:first-child { border-left: 3px solid transparent; } tr.row-override > td:first-child { border-left: 3px solid var(--info); } tr.row-risk > td:first-child { border-left: 3px solid var(--risk); } .td-ctrl { font-family: var(--mono); font-size: .75rem; white-space: nowrap; color: var(--info); cursor: pointer; } .td-ctrl:hover { text-decoration: underline; } .td-title { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .td-title:hover { color: var(--info); } .td-fw { font-size: .7rem; color: var(--sub); white-space: nowrap; } .app-tag { display: inline-block; font-size: .68rem; font-weight: 600; padding: .1rem .35rem; border-radius: 3px; background: var(--raised); color: var(--sub); white-space: nowrap; } .link-btn { font-size: .68rem; padding: .12rem .38rem; border-radius: 3px; text-decoration: none; border: 1px solid var(--border2); color: var(--sub); cursor: pointer; background: transparent; font-family: var(--sans); transition: all .12s; display: inline-block; margin-right: 3px; } .link-btn:hover { border-color: var(--info); color: var(--info); background: var(--info-bg); } .link-btn.doc { border-color: #2a4a38; color: #3a8c5a; } .link-btn.doc:hover { background: #0d2b1a; border-color: var(--pass); color: var(--pass); } /* Detail row */ .detail-row td { padding: 0; border-bottom: 1px solid var(--border); } .detail-inner { padding: 16px 20px; background: var(--detail-bg); display: grid; grid-template-columns: 1fr 1fr; gap: 20px; font-size: .78rem; } @media (max-width: 800px) { .detail-inner { grid-template-columns: 1fr; } } .detail-label { font-family: var(--mono); font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; color: var(--sub); margin-bottom: 4px; } .detail-value { color: var(--text); line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .detail-value.code { font-family: var(--mono); font-size: .72rem; background: var(--bg); padding: 8px; border-radius: 4px; border: 1px solid var(--border); max-height: 160px; overflow-y: auto; } .detail-section { margin-bottom: 14px; } .history-timeline { display: flex; flex-direction: column; gap: 6px; } .hist-item { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .7rem; color: var(--sub); } .hist-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .hist-dot.pass { background: var(--pass); } /* Item detail page + comments */ .itemdetail-header { margin-bottom:24px; } .itemdetail-header h2 { font-size:1.4rem; margin:0 0 4px; } .itemdetail-header .subtitle { color:var(--sub); font-size:.82rem; font-family:var(--mono); } .itemdetail-back { display:inline-flex; align-items:center; gap:4px; color:var(--accent); font-size:.78rem; cursor:pointer; background:none; border:none; padding:4px 0; margin-bottom:12px; } .itemdetail-back:hover { text-decoration:underline; } .itemdetail-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; } .itemdetail-tag { display:inline-block; padding:2px 8px; border-radius:4px; font-size:.68rem; font-weight:600; background:var(--raised); border:1px solid var(--border); color:var(--sub); } .itemdetail-tag.clickable { cursor:pointer; } .itemdetail-tag.clickable:hover { border-color:var(--accent); color:var(--accent); } .comments-section { margin-top:32px; border-top:1px solid var(--border); padding-top:24px; } .comments-header { font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--sub); margin-bottom:16px; } .comment-card { background:var(--raised); border:1px solid var(--border); border-radius:3px; padding:14px 16px; margin-bottom:10px; } .comment-meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; } .comment-avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; flex-shrink:0; } .comment-avatar-initials { width:28px; height:28px; border-radius:50%; background:var(--info-bg); border:1.5px solid var(--info); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.65rem; color:var(--info); flex-shrink:0; } .comment-author { font-weight:600; font-size:.78rem; color:var(--text); } .comment-time { font-size:.68rem; color:var(--sub); margin-left:8px; } .comment-edited { font-size:.62rem; color:var(--sub); font-style:italic; } .comment-body { font-size:.82rem; color:var(--text); line-height:1.55; white-space:pre-wrap; word-break:break-word; } .comment-actions { display:flex; gap:6px; } .comment-actions button { background:none; border:none; font-size:.68rem; color:var(--sub); cursor:pointer; padding:2px 4px; } .comment-actions button:hover { color:var(--accent); } .comment-reply-btn { font-size:.68rem; color:var(--sub); cursor:pointer; background:none; border:none; padding:2px 6px; } .comment-reply-btn:hover { color:var(--info); } .comment-replies { margin-left:28px; border-left:2px solid var(--border); padding-left:12px; } .comment-replies .comment-card { background:var(--surface, var(--raised)); padding:10px 12px; margin-bottom:6px; } .inline-reply-form { margin-left:28px; margin-top:6px; margin-bottom:10px; padding-left:12px; border-left:2px solid var(--border); } .comment-form { margin-top:16px; } .comment-form textarea { width:100%; min-height:72px; padding:10px 12px; border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--text); font-family:inherit; font-size:.82rem; resize:vertical; } .comment-form textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 2px rgba(59,158,255,.15); } .comment-form-actions { display:flex; justify-content:flex-end; margin-top:8px; gap:8px; } .comment-empty { color:var(--sub); font-size:.82rem; font-style:italic; margin-bottom:16px; } .hist-dot.fail { background: var(--fail); } .hist-dot.manual { background: var(--manual); } .hist-dot.override { background: var(--info); } .hist-label-scan { color: var(--text); } .hist-label-ov { color: var(--info); } /* Scans view */ .scan-list { display: flex; flex-direction: column; gap: 8px; } .scan-card { background: var(--surface); border: 1px solid var(--border); border-radius: 3px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .scan-card.latest { border-color: var(--info); } .scan-ts { font-family: var(--mono); font-size: .78rem; color: var(--info); min-width: 150px; } .scan-meta { flex: 1; font-size: .78rem; color: var(--sub); min-width: 180px; } .scan-meta strong { color: var(--text); } .scan-stats { display: flex; gap: 12px; font-family: var(--mono); font-size: .72rem; } .ss-pass { color: var(--pass); } .ss-fail { color: var(--fail); } .ss-manual { color: var(--manual); } /* Upload zone */ .upload-zone { border: 2px dashed var(--border2); border-radius: 4px; padding: 32px; text-align: center; cursor: pointer; transition: all .2s; margin-bottom: 20px; } .upload-zone:hover, .upload-zone.drag { border-color: var(--info); background: var(--info-bg); } .upload-icon { font-size: 2rem; margin-bottom: 8px; } .upload-text { font-size: .82rem; color: var(--sub); line-height: 1.6; } .upload-text strong { color: var(--info); } #fileInput { display: none; } /* Overrides view */ .override-list { display: flex; flex-direction: column; gap: 8px; } .override-card { background: var(--surface); border: 1px solid var(--border); border-radius: 3px; padding: 12px 14px; display: grid; grid-template-columns: 160px 1fr auto; gap: 12px; align-items: start; } .override-card.risk { border-color: rgba(176,96,224,.35); } .override-ctrl { font-family: var(--mono); font-size: .75rem; color: var(--info); word-break: break-all; } .override-sub { font-family: var(--mono); font-size: .68rem; color: var(--sub); margin-top: 2px; } .override-title { font-size: .8rem; color: var(--text); } .override-note { font-size: .75rem; color: var(--sub); margin-top: 3px; } .override-meta { font-family: var(--mono); font-size: .68rem; color: var(--sub); text-align: right; line-height: 1.8; } /* Modal */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.82); z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .2s; } .modal-backdrop.open { opacity: 1; pointer-events: all; } .modal { background: var(--surface); border: 1px solid var(--border2); border-radius: 4px; padding: 24px; width: 520px; max-width: calc(100vw - 40px); max-height: calc(100vh - 60px); overflow-y: auto; transform: translateY(10px); transition: transform .2s; } .modal-backdrop.open .modal { transform: none; } .modal-title { font-family: var(--mono); font-size: .85rem; font-weight: 600; color: var(--text); margin-bottom: 4px; } .modal-sub { font-size: .75rem; color: var(--sub); margin-bottom: 18px; } /* .modal-box/.modal-header/.modal-body: an older header+body+footer modal layout (30+ call sites — vendor/contract/rating/RFP modals, remediation guidance, and others) that never got styling when the CSS was extracted out of TATER.html's inline