/* 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; --pass: #2dcc71; --pass-bg: #0d2b1c; --fail: #e84040; --fail-bg: #2b0d0d; --warn: #f0a500; --warn-bg: #2b2000; --manual: #f0a500; --manual-bg: #2b2000; --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; --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; } .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: 1px; flex-shrink: 0; overflow-y: auto; overflow-x: visible; scrollbar-width: none; } .nav-rail::-webkit-scrollbar { display: none; } .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; } .nav-rail-item { width: 36px; height: 36px; 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; } .mod-dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .mod-dash-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; display: flex; flex-direction: column; gap: 6px; } .mod-dash-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.18); } .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); } .mod-dash-card-desc { color: var(--sub); font-size: .78rem; line-height: 1.45; flex: 1; } .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; } 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