/* ═══════════════════════════════════════════════════════════════════════ tater-shared.css — Common design system for TATER ecosystem apps ═══════════════════════════════════════════════════════════════════════ Loaded by: - app.tatersecurity.com/ops.html (TATER Ops) - any future sister app on the swa-tater-app SWA TATER.html still inlines the original styles (it predates this file). Future refactor can have TATER.html migrate to this stylesheet. ── Design tokens ── Layout primitives (.shell, .sidebar, .topbar, .nav-item) ── Components (.btn, .card, .table, .form-input, .pill, .kpi) ── Modal primitives (.modal-backdrop, .modal, .modal-banner) ── Toast / confirm helpers ── Reduced-motion + focus-visible fallback ═══════════════════════════════════════════════════════════════════════ */ :root { /* Surfaces */ --bg: #0d1117; --surface: #161b22; --card: #1a1f28; --raised: #1a1f28; /* Borders */ --border: #30363d; --border2: #444c56; /* Text */ --text: #e6edf3; --sub: #8b949e; --text-muted: #6e7681; /* Brand / status */ --accent: #3b9eff; --accent-bg: rgba(59, 158, 255, .1); --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); --info: #3b9eff; --manual: #d29922; --manual-bg: rgba(210, 153, 34, .12); --predicted-pass: #0d9488; --predicted-fail: #ec4899; /* Priority colors */ --critical: #ef4444; --high: #f59e0b; --normal: #3b9eff; --low: #94a3b8; /* Geometry */ --radius: 8px; --radius-sm: 4px; --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); /* Typography */ --mono: 'IBM Plex Mono', monospace; --font: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --focus-ring: 0 0 0 2px var(--accent); } [data-theme="light"] { --bg: #f8f9fa; --surface: #ffffff; --card: #ffffff; --raised: #f1f5f9; --border: #e2e8f0; --border2: #cbd5e1; --text: #111827; --sub: #6b7280; --text-muted: #9ca3af; --accent: #1d4ed8; --accent-bg: rgba(29, 78, 216, .08); /* #1467: status/priority tokens re-darkened for readable contrast on white (the :root values are tuned for dark bg). Values from tater-app.css. */ --pass: #16803c; --pass-bg: #f0fdf4; --fail: #b91c1c; --fail-bg: #fff1f1; --warn: #92600a; --warn-bg: #fffbeb; --manual: #92600a; --manual-bg: #fffbeb; --info: #1d4ed8; --predicted-pass: #0d9488; --predicted-fail: #be185d; --critical: #b91c1c; --high: #b45309; --normal: #1d4ed8; --low: #475569; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } /* Subtle dark-grey → black gradient gives the default theme a hint of depth without distracting from content. Falls back to flat var(--bg) when a theme override (data-user-theme) sets its own gradient. */ body { font-family: var(--font); background: linear-gradient(180deg, #1a1f28 0%, var(--bg) 50%, #07090d 100%); background-attachment: fixed; color: var(--text); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; } /* Light mode: the dark gradient endpoints above are hardcoded, so in light mode the wash goes dark->light->dark. Give light its own coherent canvas. No !important — tater-themes.css data-user-theme skins must keep winning. */ [data-theme="light"] body { background: linear-gradient(180deg, #ffffff 0%, var(--bg) 50%, #eef1f4 100%); background-attachment: fixed; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } code { font-family: var(--mono); font-size: .85em; background: var(--bg); padding: 1px 5px; border-radius: 3px; } hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; } /* Universal focus ring — accessibility */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* Skip-to-content link — visually hidden until keyboard focus (a11y). First focusable element in ; lets keyboard/SR users jump past the sidebar straight to #main-content. Shared by ops/manage/my/insights (TATER.html and vault.html inline an equivalent since they don't load this). */ .skip-link { position: absolute; left: 8px; top: -48px; z-index: 100000; background: var(--accent); color: #fff; padding: 8px 14px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-size: .82rem; font-weight: 600; text-decoration: none; transition: top .15s var(--ease); } .skip-link:focus { top: 0; outline: 2px solid #fff; outline-offset: 2px; text-decoration: none; } /* Subtle scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--sub); } * { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; } /* Selection */ ::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ═════ Layout — matches TATER Security visual treatment exactly ═════ */ .shell { display: grid; grid-template-columns: 220px 1fr; height: 100vh; } .sidebar { background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: auto; } /* App-switcher — 4 small icon buttons at the very top of the left sidebar. Lets users jump between TATER Security / Ops / Manage / My TATER without leaving the current sidebar context. Active app is highlighted via .active. */ .app-switcher { display: flex; gap: 4px; padding: 8px 8px 0; align-items: center; justify-content: space-around; } .app-switcher .as-btn { flex: 1; height: 34px; display: flex; align-items: center; justify-content: center; background: var(--raised); color: var(--sub); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; transition: all .15s ease; padding: 0; position: relative; } .app-switcher .as-btn:hover { color: var(--text); border-color: var(--accent); background: var(--surface); } .app-switcher .as-btn.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); cursor: default; box-shadow: inset 0 0 0 1px var(--accent); } .app-switcher .as-btn svg { width: 16px; height: 16px; flex-shrink: 0; } .app-switcher .as-btn[title]::after { content: attr(title); position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 2px 6px; border-radius: 3px; font-size: .62rem; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s ease; z-index: 100; } .app-switcher .as-btn:hover[title]::after { opacity: .92; } .brand { padding: 14px 16px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; } .brand img { width: auto; height: 36px; max-width: 36px; flex-shrink: 0; object-fit: contain; } .modal-banner img { width: auto; height: 38px; max-width: 38px; object-fit: contain; } .brand-text { font-family: var(--mono); font-weight: 700; font-size: .92rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text); line-height: 1.1; } .brand-text small { display: block; font-family: var(--mono); font-size: .56rem; font-weight: 500; color: var(--sub); letter-spacing: .12em; text-transform: uppercase; margin-top: 3px; } .nav-group-header { display: flex; align-items: center; gap: 8px; padding: 10px 16px 6px; font-size: .58rem; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); opacity: .85; font-weight: 600; user-select: none; } .nav-item { display: flex; align-items: center; padding: 7px 16px; cursor: pointer; font-size: .8rem; font-weight: 400; color: var(--sub); gap: 8px; transition: color .12s var(--ease), background .12s var(--ease); 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(--accent); border-left-color: var(--accent); font-weight: 500; } .nav-item svg.ni { width: 14px; height: 14px; flex-shrink: 0; opacity: .65; } .nav-item.active svg.ni, .nav-item:hover svg.ni { opacity: 1; } .main { display: flex; flex-direction: column; overflow: hidden; } /* Topbar height + padding match TATER for visual continuity */ .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; } .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; min-width: 0; } .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 on narrow viewports. The user-avatar and the hamburger itself stay visible on the topbar; everything else collapses into a popover container below the hamburger when the user taps it. */ .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; } /* Overflow popover — styled container that JS appends to .topbar-actions and moves icon buttons into when the hamburger is clicked. Hidden by default, revealed via .show-overflow. */ .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 { /* Show button title as adjacent label inside popover */ content: attr(title); font-size: .82rem; color: var(--text); white-space: nowrap; } @media (max-width: 720px) { .topbar-actions > .topbar-hamburger-btn { display: inline-flex; } } /* ═════ Mobile sidebar — off-canvas pattern (ADO #491) ═════ At ≤720px the sidebar collapses to an off-canvas drawer that slides in from the left when the .sidebar-toggle-btn is tapped. Matches the pattern TATER Security uses so all four apps behave identically. */ .sidebar-toggle-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; } .sidebar-toggle-btn:hover { color: var(--accent); border-color: var(--accent); } .sidebar-toggle-btn svg { width: 18px; height: 18px; } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 49; } .sidebar-backdrop.open { display: block; } @media (max-width: 720px) { .shell { grid-template-columns: 1fr !important; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 260px; min-width: 260px; z-index: 50; transform: translateX(-100%); transition: transform .25s ease; box-shadow: none; } .sidebar.open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,.5); } .sidebar-toggle-btn { display: inline-flex; } } /* ═════ Comprehensive mobile optimization (2026-05-09) ═════ Applies across Ops / Manage / My TATER. The TATER Security app has its own inline CSS with parallel rules; the patterns below should match. */ @media (max-width: 720px) { /* Tighter content padding so the small viewport isn't half-margin */ .content { padding: 12px !important; } .page-header { gap: 8px; margin-bottom: 10px; } .page-header h1 { font-size: 1.15rem; } .page-header p { font-size: .76rem; } .topbar { height: 48px; padding: 0 12px; gap: 6px; } .topbar-org-selector { max-width: 130px; padding: 4px 8px; font-size: .76rem; } /* KPI grids — 2-col on mobile instead of 4 */ .kpis, .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } .kpi, .kpi-card { padding: 10px !important; } .kpi-value, .kpi-num, .metric-value, .stat-num { font-size: 1.4rem !important; } .kpi-label, .kpi-lbl, .metric-label { font-size: .6rem !important; } /* Tables → card layout on mobile (each row becomes a stacked card) */ .table { border: none !important; } .table thead { display: none; } .table, .table tbody, .table tr, .table td { display: block; width: 100%; } .table tr { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; padding: 10px 12px; } .table td { padding: 4px 0 !important; border: none !important; font-size: .82rem; } .table td:first-child { font-weight: 600; color: var(--text); padding-top: 0 !important; font-size: .9rem; } .table td::before { content: attr(data-label); display: block; font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sub); margin-bottom: 1px; } /* Modals → full-screen on mobile */ .modal-backdrop { padding: 0 !important; } .modal { max-width: 100% !important; width: 100% !important; height: 100vh; max-height: 100vh; margin: 0 !important; border-radius: 0 !important; display: flex; flex-direction: column; } .modal-banner { padding: 12px 14px; gap: 10px; } .modal-banner h2 { font-size: 1rem; } .modal-body { padding: 12px 14px; flex: 1; overflow-y: auto; } .modal-actions { padding: 10px 14px; flex-wrap: wrap; gap: 6px; position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--border); } .modal-actions .btn { flex: 1 1 auto; min-height: 40px; } /* Forms — stack 2/3-col grids vertically; bigger tap targets */ .form-row, .form-row-2, .form-row-3 { grid-template-columns: 1fr !important; gap: 10px !important; } .form-input, .form-select, input[type="text"]:not(.topbar-org-selector), input[type="email"], input[type="number"], input[type="date"], textarea, select { font-size: 16px !important; min-height: 40px; } textarea { min-height: 80px; } .form-label { font-size: .76rem; } /* Buttons — larger tap targets (Apple HIG ≥44px) */ .btn { min-height: 40px; padding: 8px 14px; font-size: .85rem; } .btn-sm { min-height: 32px; padding: 6px 10px; font-size: .76rem; } .btn-ghost { min-height: 36px; } /* Filter bars — stack vertically, full width */ .filter-bar { flex-direction: column; gap: 8px !important; } .filter-bar .form-input, .filter-bar .form-select, .filter-bar > * { width: 100% !important; } /* Cards — slightly tighter padding */ .card { padding: 12px !important; } /* Brand block in sidebar — shrink slightly */ .brand { padding: 10px 12px 8px; } .brand img { height: 28px; max-width: 28px; } .brand-text { font-size: .82rem; } } /* Tap targets honored on tablet too (no need for huge buttons everywhere) */ @media (max-width: 480px) { .topbar-title { display: none; } /* Hide page title in cramped topbar */ .topbar-org-selector { max-width: 110px; font-size: .7rem; } .kpis, .kpi-grid { grid-template-columns: 1fr !important; } } /* Square 32×32 icon-button — used for refresh, theme, help, etc. */ .topbar-icon-btn { width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 6px; flex-shrink: 0; font-size: 1rem; } /* Org selector — bordered with --info color, matches TATER */ .topbar-org-selector { font-weight: 600; font-size: .82rem; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 2px solid var(--info); padding: 5px 12px; border-radius: 6px; background: var(--surface); color: var(--text); cursor: pointer; flex-shrink: 0; } .content { flex: 1; overflow: auto; padding: 20px; } .page { display: none; } .page.active { display: block; } .page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; } .page-header h1 { margin: 0; font-size: 1.4rem; } .page-header p { margin: 4px 0 0; font-size: .78rem; color: var(--sub); max-width: 720px; } .filter-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } /* ═════ Cards / tables ═════ */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; } .table { width: 100%; border-collapse: collapse; font-size: .8rem; } .table th, .table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); } .table th { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sub); font-weight: 600; background: var(--surface); position: sticky; top: 0; z-index: 1; } .table tbody tr { cursor: pointer; transition: background .1s var(--ease); } .table tbody tr:hover { background: var(--accent-bg); } .table tbody tr.empty-row { cursor: default; } .table tbody tr.empty-row:hover { background: transparent; } /* QA-2 #66: shared `.data-table` styling — used by Ops + Manage + My TATER pages that pre-date the `.table` class. Matches `.table` so tables look consistent across all sister apps. */ .data-table { width: 100%; border-collapse: collapse; font-size: .8rem; } .data-table th, .data-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; } .data-table th { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sub); font-weight: 600; background: var(--surface); } .data-table tbody tr { transition: background .1s var(--ease); } .data-table tbody tr:hover { background: var(--accent-bg); } .data-table tbody tr.empty-row { cursor: default; } .data-table tbody tr.empty-row:hover { background: transparent; } .data-table tbody tr.empty-row td { text-align: center; color: var(--sub); font-style: italic; padding: 18px 10px; } /* `.table-wrap` — drop-in wrapper that lets a wide table scroll horizontally instead of clipping content on narrow viewports. Use on any table that has > 5 columns or unbounded text. */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; margin-bottom: 12px; } .table-wrap > table { min-width: 600px; } /* Fallback responsive behavior for bare tables under cards on narrow viewports — wraps the table itself with horizontal scroll instead of pushing the page wider. Applied at < 1100px so desktop layout is untouched. */ @media (max-width: 1100px) { .card > table, .card > div > table { display: block; overflow-x: auto; max-width: 100%; } } /* Button loading spinner — drop-in by setting `data-loading="1"` on any .btn to show a small spinner before the label. Used by setBtnLoading() helpers in TATER.html / ops.html / manage.html for async Save / Submit / Delete buttons that previously went silent during the round-trip. The `.btn-loading` class is an alias so TATER.html's pre-existing class-based helper (TATER.html line ~24995) gets the same spinner without a code change. */ .btn[data-loading="1"], .btn.btn-loading { position: relative; pointer-events: none; opacity: .75; } .btn[data-loading="1"]::before, .btn.btn-loading::before { content: ''; display: inline-block; width: 10px; height: 10px; border: 1.5px solid currentColor; border-top-color: transparent; border-radius: 50%; vertical-align: middle; margin-right: 6px; animation: tater-btn-spin .7s linear infinite; } @keyframes tater-btn-spin { to { transform: rotate(360deg); } } /* ═════ Buttons ═════ */ .btn { font-family: inherit; cursor: pointer; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 6px 12px; font-size: .8rem; transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease); } .btn:hover { border-color: var(--accent); } .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-primary:hover { filter: brightness(1.1); } .btn-ghost { background: transparent; } .btn-ghost:hover { background: var(--accent-bg); } /* #1234 -- mirrors tater-app.css's .btn-danger so ops/manage/my/insights (which load this file, not tater-app.css) render destructive actions consistently red instead of falling back to the plain unstyled .btn. */ .btn-danger { background: var(--fail-bg); border-color: var(--fail); color: var(--fail); } .btn-danger:hover { background: var(--fail); color: #fff; } .btn-sm { padding: 4px 9px; font-size: .72rem; } .btn[disabled] { opacity: .5; cursor: not-allowed; } .link-btn { background: none; border: none; cursor: pointer; color: var(--accent); padding: 2px 6px; font-size: .72rem; } .link-btn:hover { text-decoration: underline; } /* ═════ Forms ═════ */ .form-input, .form-select, textarea.form-input { font-family: inherit; width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 10px; font-size: .82rem; transition: border-color .15s var(--ease); } .form-input:focus, .form-select:focus { outline: none; border-color: var(--accent); } .form-label { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sub); margin-bottom: 4px; font-weight: 600; } textarea.form-input { resize: vertical; min-height: 60px; font-family: var(--font); } /* #1469 — inline field-error marking (shared setFieldError/clearFieldErrors in tater-a11y.js). Mirrors tater-app.css so ops/my/insights/vault get it too. */ .form-input.has-error, .form-select.has-error, .form-textarea.has-error, textarea.form-input.has-error { border-color: var(--fail) !important; box-shadow: 0 0 0 2px rgba(248, 81, 73, .14); } .field-error { color: var(--fail); font-size: .7rem; margin-top: 3px; display: block; } /* ═════ Pills / badges ═════ */ .pill { display: inline-block; font-size: .62rem; padding: 2px 8px; border-radius: 999px; font-weight: 600; } .pill-critical { background: rgba(239, 68, 68, .18); color: var(--critical); } .pill-high { background: rgba(245, 158, 11, .18); color: var(--high); } .pill-normal { background: rgba(59, 158, 255, .18); color: var(--normal); } .pill-low { background: rgba(148, 163, 184, .18); color: var(--low); } .pill-Open { background: rgba(59, 158, 255, .18); color: var(--info); } /* #1212 — Planned (parked/backlog): muted violet, distinct from Open/OnHold. */ .pill-Planned { background: rgba(139, 122, 220, .18); color: #a99cf0; } .pill-InProgress { background: rgba(245, 158, 11, .18); color: var(--warn); } .pill-OnHold { background: rgba(148, 163, 184, .18); color: var(--low); } .pill-Closed { background: rgba(63, 185, 80, .18); color: var(--pass); } .pill-Cancelled { background: rgba(110, 118, 129, .18); color: var(--text-muted); } .badge { display: inline-block; font-size: .58rem; padding: 1px 6px; border-radius: 3px; border: 1px solid var(--border); background: var(--surface); } .badge-info { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); } /* ═════ KPIs ═════ */ .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; } .kpi { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; } .kpi-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sub); font-weight: 600; } .kpi-value { font-size: 1.5rem; font-weight: 700; margin-top: 4px; } /* ADO #1232 — the value-first tile scheme (.kpi-card/.kpi-num/.kpi-lbl) had NO base rule anywhere: the only definitions were colour overrides for exotic user themes in tater-themes.css, so these tiles rendered completely unstyled (bare divs, body-sized numbers). Mirror the .kpi/.kpi-value/.kpi-label look. .kpi-num precedes its label (unlike .kpi-value), so it takes no top margin. */ .kpi-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; } .kpi-num { font-size: 1.5rem; font-weight: 700; line-height: 1.1; } .kpi-lbl { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sub); font-weight: 600; margin-top: 3px; } .kpi-icon { font-size: 1.1rem; line-height: 1; } /* ═════ Modal — LinkedIn-post-style banner ═════ */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; } .modal { background: var(--card); border: 1px solid var(--border); border-radius: 12px; width: 100%; max-width: 720px; max-height: 90vh; overflow: auto; display: flex; flex-direction: column; } .modal-banner { background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 45%, #2563eb 100%); padding: 28px 80px 28px 26px; color: #fff; display: flex; align-items: center; gap: 16px; position: relative; overflow: hidden; min-height: 96px; } .modal-banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 50%, rgba(255, 255, 255, .08) 0%, transparent 60%); pointer-events: none; } .modal-banner img { width: 48px; height: 48px; padding: 6px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2); border-radius: 8px; flex-shrink: 0; position: relative; z-index: 1; object-fit: contain; } /* Inner text container: flex:1 + min-width:0 lets long titles wrap instead of blowing through the close button on the right edge. */ .modal-banner > div:not(.modal-close) { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; } .modal-banner h2 { margin: 0; font-size: 1.05rem; font-weight: 700; text-shadow: 0 1px 4px rgba(0, 0, 0, .25); line-height: 1.4; overflow-wrap: anywhere; word-break: break-word; } .modal-banner .eyebrow { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; opacity: .9; margin-bottom: 10px; overflow-wrap: anywhere; } .modal-close { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .3); color: #fff; cursor: pointer; font-size: .85rem; display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0; z-index: 2; } .modal-close:hover { background: rgba(255, 255, 255, .26); } .modal-body { padding: 22px 26px; } .modal-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 26px; border-top: 1px solid var(--border); } /* ═════ Modal form controls ═════ The sister apps build modal forms with .form-grid / .form-row / .form-row-2col wrappers and bare input/select/textarea/label children. Without these rules the fields fall back to raw browser defaults (white boxes, inline labels, overflow). Styling them here themes every modal form across Ops / Manage / My / Insights. */ .form-grid { display: flex; flex-direction: column; gap: 14px; } .form-row { display: block; min-width: 0; } /* "2-col" rows render as clean full-width stacked fields. Plain block flow is used deliberately: a flex/grid child of the flex-column .form-grid collapses its tracks to 0 width in this nesting, so block stacking is the robust choice and matches the rest of the form. */ .form-row-2col > div { margin-top: 14px; min-width: 0; } .form-row-2col > div:first-child { margin-top: 0; } .form-grid label, .form-row label, .form-row-2col label { display: block; font-size: .72rem; font-weight: 600; color: var(--sub); margin-bottom: 5px; letter-spacing: .01em; } .modal-body input:not([type="checkbox"]):not([type="radio"]), .modal-body select, .modal-body textarea { width: 100%; box-sizing: border-box; display: block; background: var(--bg); border: 1px solid var(--border2); border-radius: 7px; color: var(--text); font: inherit; font-size: .85rem; padding: 8px 10px; transition: border-color .15s, box-shadow .15s; } .modal-body input:not([type="checkbox"]):not([type="radio"]):focus, .modal-body select:focus, .modal-body textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); } .modal-body textarea { resize: vertical; min-height: 60px; line-height: 1.5; font-family: inherit; } .modal-body input::placeholder, .modal-body textarea::placeholder { color: var(--sub); opacity: .55; } .modal-body select { cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%238896b0' stroke-width='1.5'%3E%3Cpath d='M3 4.5L6 7.5 9 4.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; } .modal-body input[type="checkbox"], .modal-body input[type="radio"] { width: auto; margin-right: 7px; accent-color: var(--accent); transform: translateY(1px); cursor: pointer; } /* A label that wraps a checkbox/radio (e.g. "Consent attested") renders inline + normal-case */ .modal-body label:has(> input[type="checkbox"]), .modal-body label:has(> input[type="radio"]) { display: flex; align-items: center; font-weight: 500; color: var(--text); text-transform: none; margin-bottom: 0; min-height: 38px; font-size: .85rem; } /* ═════ Toast ═════ */ .toast { position: fixed; bottom: 24px; right: 24px; padding: 12px 18px; border-radius: var(--radius); border-left: 3px solid var(--accent); background: var(--card); border: 1px solid var(--border); z-index: 10000; max-width: 360px; font-size: .82rem; box-shadow: 0 4px 16px rgba(0, 0, 0, .3); animation: tater-toast-in .25s var(--ease-out); } .toast.success { border-left-color: var(--pass); } .toast.error { border-left-color: var(--fail); } .toast.warn { border-left-color: var(--warn); } @keyframes tater-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ═════ Loading + empty states ═════ */ .loader { padding: 40px; text-align: center; color: var(--sub); } .empty { padding: 40px; text-align: center; color: var(--sub); border: 1px dashed var(--border); border-radius: var(--radius); } /* .empty-state — richer empty block (optional icon + heading + copy). Promoted from tater-app.css (#1620) so every app renders it identically; keep in sync with tater-app.css until the sister apps drop their local copies. */ .empty-state { text-align: center; padding: 60px 20px; color: var(--sub); } .empty-icon { font-size: 3rem; margin-bottom: 12px; opacity: .4; } .empty-state h3 { font-family: var(--mono); font-size: .85rem; margin-bottom: 8px; color: var(--text); } .empty-state p { font-size: .8rem; max-width: 380px; margin: 0 auto 20px; line-height: 1.6; } [data-theme="light"] .empty-state h3 { color: #2c3a4a; } [data-theme="light"] .empty-state p { color: #5e6e82; } @media (max-width: 768px) { .empty-state { padding: 40px 16px; } .empty-icon { font-size: 2rem; } .empty-state h3 { font-size: .8rem; } } /* ═════ Section header divider ═════ */ .section-hdr { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); opacity: .85; font-weight: 600; margin: 18px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } /* ═════ Linked entity chip ═════ */ .linked-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .66rem; background: var(--accent-bg); color: var(--accent); padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(59, 158, 255, .3); cursor: pointer; } .linked-chip:hover { filter: brightness(1.15); } /* ═════ Theme toggle button — matches topbar-icon-btn dimensions ═════ */ .theme-toggle-btn { background: transparent; border: 1px solid var(--border); border-radius: 6px; width: 32px; height: 32px; min-width: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text); padding: 0; flex-shrink: 0; } .theme-toggle-btn:hover { border-color: var(--accent); } .theme-toggle-btn .icon-moon { display: block; } .theme-toggle-btn .icon-sun { display: none; } [data-theme="light"] .theme-toggle-btn .icon-moon { display: none; } [data-theme="light"] .theme-toggle-btn .icon-sun { display: block; } /* User avatar (right-most topbar position) */ .user-avatar { width: 32px; height: 32px; min-width: 32px; border-radius: 50%; overflow: hidden; background: var(--accent-bg); border: 1.5px solid var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .72rem; color: var(--accent); flex-shrink: 0; cursor: pointer; } /* ═══════════════════════════════════════════════════════════════════════ V2 NAVIGATION — Icon rail + module-scoped secondary nav + topbar-spans-both Activated by adding [data-nav-v2] attribute to or . ═══════════════════════════════════════════════════════════════════════ */ /* Shell becomes a 2-row, 3-column grid; topbar spans all three cols */ [data-nav-v2] .shell { display: grid; grid-template-columns: 64px 220px 1fr; grid-template-rows: 52px 1fr; grid-template-areas: "topbar topbar topbar" "rail modnav main"; height: 100vh; overflow: hidden; } [data-nav-v2] .shell > .topbar { grid-area: topbar; border-bottom: 1px solid var(--border); } /* Icon rail — left column, 64px wide, lists all top-level modules */ [data-nav-v2] .icon-rail { grid-area: rail; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 4px; overflow-y: auto; overflow-x: visible; } [data-nav-v2] .icon-rail-btn { width: 44px; height: 44px; border-radius: 8px; background: transparent; border: none; color: var(--sub); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; transition: background .15s var(--ease), color .15s var(--ease); flex-shrink: 0; } [data-nav-v2] .icon-rail-btn:hover { background: var(--raised); color: var(--text); } [data-nav-v2] .icon-rail-btn.active { background: var(--accent-bg); color: var(--accent); } [data-nav-v2] .icon-rail-btn.active::before { content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); } [data-nav-v2] .icon-rail-btn svg { width: 20px; height: 20px; } /* Hover tooltip */ [data-nav-v2] .icon-rail-btn[data-label]:hover::after { content: attr(data-label); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: var(--text); color: var(--bg); padding: 5px 10px; border-radius: 5px; font-size: .72rem; font-family: var(--mono); font-weight: 600; letter-spacing: .04em; white-space: nowrap; z-index: 9999; pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,.3); } [data-nav-v2] .icon-rail-divider { width: 32px; height: 1px; background: var(--border); margin: 6px 0; } /* Module-scoped secondary nav */ [data-nav-v2] .module-nav { grid-area: modnav; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; } [data-nav-v2] .module-nav-header { padding: 16px 16px 12px; font-family: var(--mono); font-size: .68rem; 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; } [data-nav-v2] .module-nav-header svg { width: 14px; height: 14px; flex-shrink: 0; } [data-nav-v2] .module-nav .nav-item { padding: 8px 14px; font-size: .8rem; border-left: 2px solid transparent; } [data-nav-v2] .module-nav .nav-item.active { background: var(--raised); color: var(--accent); border-left-color: var(--accent); font-weight: 500; } /* Main content area */ [data-nav-v2] main { grid-area: main; overflow: auto; background: var(--bg); } /* Topbar in v2: brand block on left, search in middle, actions on right */ [data-nav-v2] .topbar-brand { display: flex; align-items: center; gap: 10px; padding-right: 16px; border-right: 1px solid var(--border); margin-right: 14px; height: 100%; flex-shrink: 0; } [data-nav-v2] .topbar-brand img { width: 28px; height: 28px; flex-shrink: 0; } [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); } [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; } /* Topbar search — between brand and actions */ [data-nav-v2] .topbar-search { 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; } [data-nav-v2] .topbar-search:focus-within { border-color: var(--accent); } [data-nav-v2] .topbar-search input { flex: 1; background: transparent; border: none; color: var(--text); font-size: .82rem; outline: none; font-family: inherit; } [data-nav-v2] .topbar-search svg { width: 14px; height: 14px; color: var(--sub); flex-shrink: 0; } /* Hide legacy sidebar brand block when in v2 (we relocate it to topbar) */ [data-nav-v2] .sidebar > .brand { display: none; } /* Mobile collapse: stack vertically, hide icon rail behind hamburger */ @media (max-width: 900px) { [data-nav-v2] .shell { grid-template-columns: 1fr; grid-template-rows: 52px auto 1fr; grid-template-areas: "topbar" "modnav" "main"; } [data-nav-v2] .icon-rail { display: none; } [data-nav-v2] .icon-rail.open { display: flex; position: fixed; top: 52px; left: 0; bottom: 0; width: 64px; z-index: 50; } [data-nav-v2] .module-nav { border-right: none; border-bottom: 1px solid var(--border); max-height: 200px; } } /* ═════ Module dashboard — card grid that lists module items ═════ */ .mod-dashboard { padding: 20px; max-width: 1400px; margin: 0 auto; } .mod-dashboard-header { margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .mod-dashboard-header h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 6px 0; font-family: var(--mono); letter-spacing: -.02em; } .mod-dashboard-header p { margin: 0; color: var(--sub); font-size: .88rem; line-height: 1.5; max-width: 720px; } .mod-dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .mod-dash-card { background: var(--card, var(--surface)); border: 1px solid var(--border); border-radius: 10px; padding: 18px; cursor: pointer; transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; } .mod-dash-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.15); } .mod-dash-card-icon { width: 24px; height: 24px; color: var(--accent); margin-bottom: 4px; } .mod-dash-card-title { font-size: .95rem; font-weight: 600; color: var(--text); } .mod-dash-card-desc { color: var(--sub); font-size: .78rem; line-height: 1.45; } .mod-dash-card-meta { margin-top: auto; padding-top: 8px; font-family: var(--mono); font-size: .65rem; color: var(--sub); letter-spacing: .04em; text-transform: uppercase; } /* Suite overview tiles — used on simplified primary dashboard */ .suite-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; padding: 20px; max-width: 1400px; margin: 0 auto; } .suite-tile { background: var(--card, var(--surface)); border: 1px solid var(--border); border-radius: 12px; padding: 20px; cursor: pointer; transition: border-color .25s var(--ease), transform .25s var(--ease); display: flex; flex-direction: column; gap: 10px; } .suite-tile:hover { border-color: var(--accent); transform: translateY(-2px); } .suite-tile-header { display: flex; align-items: center; gap: 10px; } .suite-tile-header svg { width: 22px; height: 22px; color: var(--accent); } .suite-tile-header h3 { margin: 0; font-size: 1rem; font-weight: 600; } .suite-tile-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 4px; } .suite-tile-kpi { background: var(--raised); border-radius: 6px; padding: 8px 10px; } .suite-tile-kpi-label { font-size: .58rem; color: var(--sub); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; } .suite-tile-kpi-value { font-size: 1.15rem; font-weight: 700; margin-top: 2px; } .suite-tile-link { font-family: var(--mono); font-size: .68rem; color: var(--accent); margin-top: auto; letter-spacing: .04em; } /* ═══════════════════════════════════════════════════════════════════════ v3 SIDEBAR SCHEMA — Sidebar contains all of: Row 1 (2 cols): TATER logo + app name Row 2 (2 cols): Org logo + org name Row 3 (2 cols): Application shortcuts (4 sister apps) Row 4 (2 cols): Menu search box Row 5 (2 cols split): icon rail | module-scoped panel Activated by data-nav-v3 attribute on .shell. ═══════════════════════════════════════════════════════════════════════ */ [data-nav-v3].shell { display: flex; height: 100vh; overflow: hidden; } [data-nav-v3] .sidebar { width: 264px; min-width: 264px; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0; } [data-nav-v3] .sb-row { border-bottom: 1px solid var(--border); padding: 8px 10px; flex-shrink: 0; } [data-nav-v3] .sb-brand-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; } [data-nav-v3] .sb-brand-row img { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; cursor: pointer; } [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); } [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; } [data-nav-v3] .sb-org-row { display: flex; align-items: center; gap: 8px; min-height: 38px; } [data-nav-v3] .sb-org-logo { width: 24px; height: 24px; border-radius: 4px; object-fit: contain; flex-shrink: 0; background: var(--raised); padding: 2px; } [data-nav-v3] .sb-org-name { font-size: .78rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); flex: 1; min-width: 0; } [data-nav-v3] .sb-org-row select { flex: 1; min-width: 0; padding: 4px 8px; font-size: .76rem; background: var(--raised); border: 1px solid var(--border); border-radius: 5px; color: var(--text); } [data-nav-v3] .sb-apps-row { display: flex; gap: 4px; padding: 6px 10px; } [data-nav-v3] .sb-app-btn { flex: 1; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 6px; 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) */ } [data-nav-v3] .sb-app-btn svg { width: 16px; height: 16px; } [data-nav-v3] .sb-app-btn:hover { color: var(--text); border-color: var(--accent); background: var(--surface); } [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); } [data-nav-v3] .sb-search-row { padding: 6px 10px 8px; } [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: 6px; transition: border-color .15s; } [data-nav-v3] .sb-search:focus-within { border-color: var(--accent); } [data-nav-v3] .sb-search svg { width: 13px; height: 13px; color: var(--sub); flex-shrink: 0; } [data-nav-v3] .sb-search input { flex: 1; background: transparent; border: none; color: var(--text); font-size: .78rem; outline: none; font-family: inherit; min-width: 0; } [data-nav-v3] .sb-body { flex: 1; display: flex; overflow: hidden; min-height: 0; } [data-nav-v3] .nav-rail { width: 50px; min-width: 50px; border-right: 1px solid var(--border); background: var(--bg); display: flex; flex-direction: column; align-items: center; padding: 8px 0; gap: 2px; overflow-y: auto; flex-shrink: 0; } [data-nav-v3] .nav-rail::-webkit-scrollbar { width: 0; } [data-nav-v3] .nav-rail-item { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 6px; cursor: pointer; color: var(--sub); transition: background .12s, color .12s; flex-shrink: 0; position: relative; } [data-nav-v3] .nav-rail-item svg { width: 18px; height: 18px; } [data-nav-v3] .nav-rail-item:hover { background: var(--raised); color: var(--text); } [data-nav-v3] .nav-rail-item.active { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); } [data-nav-v3] .nav-rail-item.fav { color: var(--manual, #f0a500); } [data-nav-v3] .nav-rail-divider { width: 26px; height: 1px; background: var(--border); margin: 4px 0; flex-shrink: 0; } /* Rich rail tooltip: name on line 1, description (if data-desc set) on line 2. Uses pre-line whitespace + "\A" newline literal in the content string so a single ::after pseudo-element can render multi-line text. */ [data-nav-v3] .nav-rail-item[data-tip]:hover::after { content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: var(--text); color: var(--bg); padding: 6px 10px; border-radius: 6px; font-size: .72rem; font-family: var(--mono); font-weight: 600; letter-spacing: .04em; white-space: nowrap; z-index: 9999; pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,.3); max-width: 260px; } [data-nav-v3] .nav-rail-item[data-tip][data-desc]:hover::after { content: attr(data-tip) "\A" attr(data-desc); white-space: pre-line; letter-spacing: 0; line-height: 1.4; font-family: var(--mono); font-size: .68rem; } [data-nav-v3] .nav-rail-item[data-tip][data-desc]:hover::after::first-line { font-weight: 700; letter-spacing: .04em; font-size: .72rem; } [data-nav-v3] .nav-panel { flex: 1; overflow-y: auto; min-width: 0; } [data-nav-v3] .nav-panel .module-nav-header { padding: 12px 14px 8px; font-family: var(--mono); font-size: .65rem; 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; } [data-nav-v3] .nav-panel .module-nav-header svg { width: 14px; height: 14px; flex-shrink: 0; } [data-nav-v3] .nav-panel .nav-item { padding: 7px 14px; font-size: .8rem; border-left: 2px solid transparent; display: flex; align-items: center; gap: 8px; color: var(--sub); cursor: pointer; transition: color .12s, background .12s; } [data-nav-v3] .nav-panel .nav-item:hover { background: var(--raised); color: var(--text); } [data-nav-v3] .nav-panel .nav-item.active { background: var(--raised); color: var(--accent); border-left-color: var(--accent); font-weight: 500; } [data-nav-v3] .nav-panel .nav-item svg.ni { width: 14px; height: 14px; opacity: .65; flex-shrink: 0; } [data-nav-v3] .nav-panel .nav-item:hover svg.ni, [data-nav-v3] .nav-panel .nav-item.active svg.ni { opacity: 1; } /* Topbar (now lives inside main, doesn't span sidebar) */ [data-nav-v3] .main, [data-nav-v3] main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; } [data-nav-v3] .topbar { height: 52px; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 16px; gap: 8px; flex-shrink: 0; } [data-nav-v3] .content { flex: 1; overflow: auto; padding: 16px; min-height: 0; } /* Mobile: sidebar collapses; hamburger toggles */ [data-nav-v3] .sb-mobile-toggle { display: none; width: 36px; height: 36px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--text); cursor: pointer; padding: 0; flex-shrink: 0; } [data-nav-v3] .sb-mobile-toggle svg { width: 18px; height: 18px; } [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) { [data-nav-v3] .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 282px; transform: translateX(-100%); transition: transform .25s ease; z-index: 100; box-shadow: 4px 0 24px rgba(0,0,0,.3); } [data-nav-v3] .sidebar.open { transform: translateX(0); } [data-nav-v3] .sb-mobile-toggle { display: inline-flex; } [data-nav-v3] .sb-mobile-backdrop.open { display: block; } } /* ── Shared skeleton loaders (ADO #666) — extracted from TATER.html so every sister app gets shimmer placeholders via window.renderSkeletonRows(). ── */ .skeleton { background: linear-gradient(90deg, var(--raised) 25%, var(--border) 50%, var(--raised) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.4s ease-in-out infinite; border-radius: 4px; } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton-row td { padding: 10px 12px; } .skeleton-cell { height: 14px; border-radius: 3px; } /* ── Command palette (ADO #659) — Ctrl/Cmd+K across every app ── */ .cmdp-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,.45); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; backdrop-filter: blur(2px); } .cmdp-box { width: min(620px, 92vw); background: var(--surface); border: 1px solid var(--border2); border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.5); overflow: hidden; } .cmdp-input { width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); font-size: .95rem; padding: 15px 18px; outline: none; } .cmdp-input::placeholder { color: var(--sub); } .cmdp-list { max-height: 52vh; overflow-y: auto; padding: 6px; } .cmdp-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 7px; cursor: pointer; font-size: .82rem; color: var(--text); } .cmdp-item.sel { background: var(--accent); color: #fff; } .cmdp-item.sel .cmdp-hint { color: rgba(255,255,255,.8); } .cmdp-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cmdp-hint { color: var(--sub); font-size: .7rem; flex-shrink: 0; } .cmdp-empty { padding: 22px; text-align: center; color: var(--sub); font-size: .82rem; } /* ── Tab bar / tab button (ADO #780) ─────────────────────────────────────── ops/manage/my/insights use .tab-bar/.tab-btn but the rules lived only in TATER.html (§12bi), so the sister apps rendered tabs with raw browser defaults (white pills in dark mode). Ported here (the shared stylesheet all four load) with fallbacks for the tokens TATER.html has but this file lacks (--sans→--font, --radius-pill, --info-bg, --t-fast). ── */ .tab-bar { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border); padding-bottom: 0; } .tab-btn { font-family: var(--font); font-size: .78rem; font-weight: 500; background: transparent; border: 1px solid transparent; color: var(--sub); padding: 7px 14px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; cursor: pointer; transition: color var(--t-fast, .15s) var(--ease), background var(--t-fast, .15s) var(--ease), border-color var(--t-fast, .15s) var(--ease); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin-bottom: -1px; } .tab-btn:hover { color: var(--text); background: var(--raised); } .tab-btn.active { color: var(--accent); border-color: var(--border); border-bottom-color: var(--surface); background: var(--surface); font-weight: 600; } .tab-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Standalone (non-tab-bar) usage — e.g. config-doc tag chips: render as pills. */ *:not(.tab-bar) > .tab-btn { border-radius: var(--radius-pill, 999px); border: 1px solid var(--border); margin-bottom: 0; font-family: var(--mono); font-size: .68rem; text-transform: lowercase; letter-spacing: .04em; padding: 4px 11px; } *:not(.tab-bar) > .tab-btn.active { background: var(--info-bg, rgba(59,158,255,.12)); border-color: var(--info); color: var(--info); } /* ── #81: responsive content-grid collapse (ops/manage/insights) ──────────── These apps set grid-template-columns INLINE (which beats class rules), so their dense multi-column page/detail grids overflow on phones/tablets while only the sidebar drawer had a breakpoint. Collapse fixed-track inline grids to a single column under 768px (auto-fit/auto-fill/minmax grids already reflow, so they are intentionally NOT matched). Mirrors my.html's approach. */ @media (max-width: 768px) { [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"], [style*="grid-template-columns:1.2fr 1fr"], [style*="grid-template-columns:2fr 1fr"], [style*="grid-template-columns:1fr 2fr"], [style*="grid-template-columns:1fr 1fr 1fr"], [style*="grid-template-columns:repeat(2,"], [style*="grid-template-columns:repeat(3,"], [style*="grid-template-columns:repeat(4,"], [style*="grid-template-columns:280px 1fr"], [style*="grid-template-columns:260px 1fr"], [style*="grid-template-columns:240px 1fr"], [style*="grid-template-columns:220px 1fr"], [style*="grid-template-columns:200px 1fr"], [style*="grid-template-columns:180px 1fr"], [style*="grid-template-columns:160px 1fr"], [style*="grid-template-columns:140px 1fr"] { grid-template-columns: 1fr !important; } /* Let flexed filter/search inputs shrink fully so toolbars never overflow. */ [style*="min-width:200px"], [style*="min-width:220px"], [style*="min-width:240px"], [style*="min-width:260px"] { min-width: 0 !important; } }