/* ============================================================================ ARGUS — Application stylesheet · Elytra Security design language ---------------------------------------------------------------------------- Consolidated, drop-in replacement for the previous web/static/argus.css. Every class name referenced by Go templates or HTMX attributes is preserved; only visual properties change. The Elytra brand (onyx · copper · parchment) is expressed through semantic CSS custom properties so the whole console re-themes from a single attribute: (default) or . Theme preference is client-side only. Fonts are loaded locally from /static/fonts (air-gap safe). If the font files are absent the stacks fall back to system fonts with no layout break. ============================================================================ */ @font-face { font-family:'Inter Tight'; font-style:normal; font-weight:400; font-display:swap; src:local('Inter Tight'), url('/static/fonts/inter-tight-400.woff2') format('woff2'); } @font-face { font-family:'Inter Tight'; font-style:normal; font-weight:500; font-display:swap; src:local('Inter Tight Medium'), url('/static/fonts/inter-tight-500.woff2') format('woff2'); } @font-face { font-family:'Inter Tight'; font-style:normal; font-weight:600; font-display:swap; src:local('Inter Tight SemiBold'), url('/static/fonts/inter-tight-600.woff2') format('woff2'); } @font-face { font-family:'Inter Tight'; font-style:normal; font-weight:700; font-display:swap; src:local('Inter Tight Bold'), url('/static/fonts/inter-tight-700.woff2') format('woff2'); } @font-face { font-family:'Source Serif 4'; font-style:normal; font-weight:400; font-display:swap; src:local('Source Serif 4'), url('/static/fonts/source-serif-4-400.woff2') format('woff2'); } @font-face { font-family:'Source Serif 4'; font-style:normal; font-weight:600; font-display:swap; src:local('Source Serif 4 SemiBold'), url('/static/fonts/source-serif-4-600.woff2') format('woff2'); } @font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:local('JetBrains Mono'), url('/static/fonts/jetbrains-mono-400.woff2') format('woff2'); } @font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:600; font-display:swap; src:local('JetBrains Mono SemiBold'), url('/static/fonts/jetbrains-mono-600.woff2') format('woff2'); } /* ============================================================================ TOKENS ============================================================================ */ :root { /* brand source palette */ --onyx:#0E1116; --graphite:#1A1F27; --slate:#2A313D; --steel:#5A6373; --mist:#B8BFCB; --parchment:#F4EFE6; --bone:#E8E1D3; --ink:#11151B; --copper:#C97B3F; --copper-bright:#E0954F; --copper-deep:#8E5224; --amber:#D9A86C; --trust:#4A7B8C; --sans:'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --serif:'Source Serif 4',Georgia,serif; --mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace; --radius:2px; --radius-lg:4px; --radius-pill:100px; --sidebar-width:236px; /* semantic — LIGHT (default) */ --app-bg:#F3F1EB; --surface:#FFFFFF; --surface-2:#FBF9F4; --surface-sunken:#EEEAE0; --border:#E2DCCF; --border-strong:#CBC3B2; --divider:#ECE7DC; --text:#1B1F26; --text-2:#5A6373; --text-3:#8C8576; --text-inv:#F4EFE6; --accent:#BC6F36; --accent-hover:#A85E29; --accent-soft:#F6EADE; --accent-text:#8E5224; --info:#3C6E80; --info-soft:#E4EDF0; --nav-bg:#FFFFFF; --nav-text:#3A414E; --nav-text-active:#8E5224; --nav-active-bg:#F6EADE; --footer-bg:#11151B; --footer-text:#B8BFCB; --shadow-sm:0 1px 2px rgba(17,21,27,0.04); --shadow:0 1px 3px rgba(17,21,27,0.06),0 1px 2px rgba(17,21,27,0.04); --shadow-pop:0 8px 28px rgba(17,21,27,0.14); --risk-crit-bg:#F3D9D4; --risk-crit-tx:#7A2417; --risk-crit-line:#C7493A; --risk-high-bg:#F9E0D0; --risk-high-tx:#8A3D17; --risk-high-line:#C2410C; --risk-med-bg:#F6EACF; --risk-med-tx:#7A571A; --risk-med-line:#D9A24A; --risk-low-bg:#E2EAD7; --risk-low-tx:#45602F; --risk-low-line:#6E8C5A; --ok-bg:#DCEBDD; --ok-tx:#2E5B36; --ok-line:#3F8A4E; --neutral-bg:#ECE7DC; --neutral-tx:#5A6373; --neutral-line:#9A917F; --trust-bg:#E4EDF0; --trust-tx:#2C5563; --trust-line:#4A7B8C; --violet-bg:#EADCF3; --violet-tx:#6B3E8F; } html[data-theme="dark"] { --app-bg:#0E1116; --surface:#161B22; --surface-2:#1A1F27; --surface-sunken:#0B0E12; --border:#272E39; --border-strong:#36404E; --divider:#232A34; --text:#ECE7DC; --text-2:#9AA3B2; --text-3:#6B7484; --text-inv:#11151B; --accent:#E0954F; --accent-hover:#EDA864; --accent-soft:#2A2118; --accent-text:#E0954F; --info:#6FA3B5; --info-soft:#16242A; --nav-bg:#14181F; --nav-text:#B8BFCB; --nav-text-active:#E0954F; --nav-active-bg:#211A12; --footer-bg:#0A0D11; --footer-text:#8C95A4; --shadow-sm:0 1px 2px rgba(0,0,0,0.4); --shadow:0 1px 3px rgba(0,0,0,0.5); --shadow-pop:0 10px 34px rgba(0,0,0,0.6); --risk-crit-bg:#33150F; --risk-crit-tx:#F0A99C; --risk-crit-line:#C7493A; --risk-high-bg:#2E1B10; --risk-high-tx:#ECA678; --risk-high-line:#D98A5A; --risk-med-bg:#2A2310; --risk-med-tx:#E0C27A; --risk-med-line:#D9A24A; --risk-low-bg:#18230F; --risk-low-tx:#A6C488; --risk-low-line:#6E8C5A; --ok-bg:#10251A; --ok-tx:#86D6A0; --ok-line:#3F8A4E; --neutral-bg:#1E242E; --neutral-tx:#9AA3B2; --neutral-line:#3A4350; --trust-bg:#13242B; --trust-tx:#8FC0CF; --trust-line:#4A7B8C; --violet-bg:#241830; --violet-tx:#C79BE0; } /* ============================================================================ GLOBAL LAYOUT ============================================================================ */ .argus-body { margin:0; padding:0; background:var(--app-bg); color:var(--text); font-family:var(--sans); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; } *, *::before, *::after { box-sizing:border-box; } .argus-shell { min-height:100vh; display:flex; flex-direction:column; align-items:center; } /* legacy top header / brand / nav (non-sidebar templates: login, console) */ .argus-header { width:100%; max-width:1100px; display:flex; align-items:center; justify-content:space-between; padding:24px 16px 8px; box-sizing:border-box; } .argus-brand { display:flex; align-items:center; gap:16px; } .argus-logo { height:64px; width:auto; } .argus-title-block { display:flex; flex-direction:column; } .argus-title { font-size:1.05rem; font-weight:600; color:var(--text); } .argus-subtitle { font-size:0.85rem; color:var(--text-2); } .argus-nav { display:flex; align-items:center; gap:8px; } .argus-nav-item { font-size:0.9rem; padding:6px 12px; border-radius:var(--radius); text-decoration:none; color:var(--nav-text); border:1px solid transparent; transition:background .15s, color .15s, border-color .15s; } .argus-nav-item:hover { background:var(--surface-2); border-color:var(--border); } .argus-nav-item-active { background:var(--accent-soft); border-color:transparent; color:var(--accent-text); } .argus-logout-form { margin:0; } .argus-logout-button { padding:6px 16px; border-radius:var(--radius); border:1px solid var(--border-strong); background:var(--surface); color:var(--text); font-size:0.9rem; font-weight:600; cursor:pointer; transition:all .15s; } .argus-logout-button:hover { border-color:var(--accent); color:var(--accent-text); background:var(--accent-soft); } .argus-logout-button:active { transform:translateY(1px); } /* main content */ .argus-main { width:100%; max-width:1040px; box-sizing:border-box; padding:24px 28px 40px; display:flex; justify-content:center; } .argus-panel { width:100%; max-width:920px; background:transparent; border-radius:0; padding:0; box-shadow:none; border:none; } .argus-panel-title { margin:0 0 18px; font-family:var(--sans); font-size:1.7rem; font-weight:600; letter-spacing:-0.015em; color:var(--text); line-height:1.05; } /* ============================================================================ TOPBAR (new in redesign) ============================================================================ */ .argus-topbar { position:sticky; top:0; z-index:30; width:100%; display:flex; align-items:center; gap:16px; padding:0 28px; min-height:58px; background:var(--surface); border-bottom:1px solid var(--border); } .argus-topbar::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:linear-gradient(90deg,var(--copper) 0%,var(--amber) 32%,transparent 64%); } .argus-topbar-nav { display:none; background:none; border:none; color:var(--text-2); font-size:1.2rem; cursor:pointer; padding:4px 8px; border-radius:var(--radius); } .argus-topbar-nav:hover { background:var(--surface-2); color:var(--text); } .argus-topbar-title { font-size:0.95rem; font-weight:600; letter-spacing:0.01em; color:var(--text); } .argus-topbar-spacer { flex:1; } .argus-topbar-appliance { display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11.5px; color:var(--text-3); } .argus-topbar-appliance-dot { width:7px; height:7px; border-radius:50%; background:var(--ok-line); } .argus-theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:36px; height:32px; background:transparent; border:1px solid var(--border-strong); border-radius:var(--radius); color:var(--text-2); cursor:pointer; transition:all .15s; } .argus-theme-toggle:hover { border-color:var(--accent); color:var(--accent-text); background:var(--accent-soft); } .argus-theme-ico { width:16px; height:16px; } .argus-ico-sun { display:none; } .argus-ico-moon { display:inline-flex; } html[data-theme="dark"] .argus-ico-sun { display:inline-flex; } html[data-theme="dark"] .argus-ico-moon { display:none; } /* license banners (moved off inline styles → classed; behaviour unchanged) */ .argus-license-banner { display:flex; align-items:center; gap:8px; width:100%; box-sizing:border-box; padding:9px 28px; font-size:0.85rem; border-bottom:1px solid var(--border); } .argus-license-banner a { font-weight:600; text-decoration:underline; } .argus-license-banner-expired { background:var(--risk-crit-bg); color:var(--risk-crit-tx); border-color:var(--risk-crit-line); } .argus-license-banner-expired a { color:var(--risk-crit-tx); } .argus-license-banner-warn { background:var(--risk-med-bg); color:var(--risk-med-tx); border-color:var(--risk-med-line); } .argus-license-banner-warn a { color:var(--risk-med-tx); } /* ============================================================================ FORMS / CONTROLS ============================================================================ */ .argus-form-group { margin-bottom:16px; display:flex; flex-direction:column; gap:6px; } .argus-label { font-size:0.9rem; color:var(--text-2); font-weight:600; } .argus-textarea { resize:vertical; min-height:80px; padding:10px 12px; border-radius:var(--radius); border:1px solid var(--border-strong); background:var(--surface); color:var(--text); font-size:0.9rem; font-family:inherit; } .argus-textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .argus-button-row { display:flex; justify-content:flex-start; gap:10px; margin-top:8px; } .argus-primary-button { padding:9px 18px; border-radius:var(--radius); border:1px solid var(--accent); background:var(--accent); color:#fff; font-size:0.9rem; font-weight:600; cursor:pointer; transition:all .15s; } .argus-primary-button:hover { background:var(--accent-hover); border-color:var(--accent-hover); } .argus-primary-button:active { transform:translateY(1px); } .argus-run-preview-block { margin-top:10px; padding:12px 15px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--border-strong); font-size:0.85rem; color:var(--text-2); } .argus-run-preview-list { margin:6px 0 0 22px; padding:0; } .argus-kv-grid { margin-top:12px; display:grid; grid-template-columns:minmax(0,1fr); row-gap:8px; } .argus-kv-row { display:flex; flex-wrap:wrap; gap:8px; font-size:0.92rem; } .argus-kv-key { min-width:120px; max-width:160px; font-weight:600; color:var(--text-2); } .argus-kv-value { flex:1; color:var(--text); word-break:break-all; } /* ============================================================================ FOOTER ============================================================================ */ .argus-footer { width:100%; box-sizing:border-box; margin-top:auto; background:var(--footer-bg); color:var(--footer-text); border-top:2px solid var(--copper-deep); padding:16px 28px; font-size:0.78rem; letter-spacing:0.02em; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; font-family:var(--mono); } .argus-footer-note { color:var(--footer-text); opacity:0.7; } /* wide layout */ .argus-header-wide, .argus-main-wide { max-width:1500px; } /* ============================================================================ STAT CARDS (hairline-joined, copper tick) ============================================================================ */ .argus-stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:24px; } .argus-stat-card { background:var(--surface); border:none; border-radius:0; padding:17px 18px; display:flex; flex-direction:column; gap:0; position:relative; } .argus-stat-card::before { content:""; position:absolute; top:0; left:0; width:26px; height:2px; background:var(--copper); } .argus-stat-label { font-size:10px; color:var(--text-2); text-transform:uppercase; letter-spacing:0.12em; font-weight:700; margin-bottom:11px; } .argus-stat-value { font-size:1.95rem; font-weight:600; color:var(--text); line-height:1; letter-spacing:-0.01em; font-variant-numeric:tabular-nums; } .argus-stat-value-warn { color:var(--risk-high-line); } .argus-stat-value-danger { color:var(--risk-crit-line); } .argus-stat-value-ok { color:var(--ok-line); } /* ============================================================================ SECTION HEADINGS ============================================================================ */ .argus-section-title { font-size:11px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:0.13em; margin:28px 0 13px; padding-bottom:0; border-bottom:none; } /* ============================================================================ DATA TABLES ============================================================================ */ .argus-table-wrap { overflow:visible; border-radius:var(--radius-lg); border:1px solid var(--border); background:var(--surface); } .argus-table { width:100%; border-collapse:collapse; font-size:12.5px; } .argus-table th { background:var(--surface-2); color:var(--text-2); font-weight:700; text-align:left; padding:10px 14px; font-size:10px; text-transform:uppercase; letter-spacing:0.09em; white-space:nowrap; border-bottom:1px solid var(--border-strong); } .argus-table td { padding:11px 14px; border-bottom:1px solid var(--divider); color:var(--text); vertical-align:middle; } .argus-table tr:last-child td { border-bottom:none; } .argus-table tr:hover td { background:var(--surface-2); } /* KEV highlight row */ .argus-table tr.kev-row td { background:var(--risk-crit-bg); border-left:3px solid var(--risk-crit-line); } .argus-table tr.kev-row:first-child td:first-child { border-top-left-radius:0; } /* inline detail panel (findings drilldown) */ .argus-detail-cell { padding:0; border-left:3px solid var(--accent); background:var(--surface-sunken); } .argus-detail-cell:empty { padding:0; border:none; } .argus-detail-panel { position:relative; padding:16px 18px 14px; font-size:0.84rem; color:var(--text-2); } .argus-detail-close { position:absolute; top:10px; right:12px; background:none; border:none; color:var(--text-3); font-size:1.1rem; cursor:pointer; line-height:1; padding:2px 6px; border-radius:var(--radius); transition:color .1s, background .1s; } .argus-detail-close:hover { color:var(--text); background:var(--surface-2); } .argus-detail-header { display:flex; align-items:center; gap:12px; margin-bottom:8px; flex-wrap:wrap; } .argus-detail-cve { font-family:var(--mono); font-size:0.9rem; font-weight:600; color:var(--text); } .argus-detail-meta { font-size:0.8rem; color:var(--text-3); } .argus-detail-kev-badge { font-size:0.75rem; font-weight:700; background:var(--risk-crit-bg); color:var(--risk-crit-tx); border:1px solid var(--risk-crit-line); padding:3px 10px; border-radius:var(--radius-pill); } .argus-detail-epss { margin-bottom:12px; font-size:0.82rem; color:var(--text-2); } .argus-detail-table { width:100%; border-collapse:collapse; font-size:0.8rem; margin-bottom:10px; } .argus-detail-table th { background:var(--surface-2); color:var(--text-3); font-weight:700; text-align:left; padding:6px 10px; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; border-bottom:1px solid var(--border-strong); } .argus-detail-table td { padding:5px 10px; border-bottom:1px solid var(--divider); color:var(--text-2); vertical-align:middle; } .argus-detail-table tr:last-child td { border-bottom:none; } .argus-detail-total-row td { border-top:1px solid var(--border-strong); padding-top:7px; color:var(--text); } .argus-detail-action { font-size:0.82rem; color:var(--accent-text); padding:6px 0 0; } .argus-detail-footer { display:flex; justify-content:flex-end; padding-top:12px; } .argus-detail-close-btn { background:var(--surface); border:1px solid var(--border-strong); color:var(--text-2); font-size:0.78rem; cursor:pointer; padding:5px 14px; border-radius:var(--radius); transition:all .1s; } .argus-detail-close-btn:hover { color:var(--accent-text); border-color:var(--accent); background:var(--accent-soft); } /* radar wrap */ .argus-radar-wrap { display:flex; justify-content:center; margin:8px 0 20px; padding:18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); } /* ============================================================================ BADGES ============================================================================ */ .argus-badge { display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:var(--radius-pill); font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; white-space:nowrap; border:1px solid transparent; } .argus-badge-immediate { background:var(--risk-crit-bg); color:var(--risk-crit-tx); } .argus-badge-emergency { background:var(--risk-high-bg); color:var(--risk-high-tx); } .argus-badge-accelerated { background:var(--risk-med-bg); color:var(--risk-med-tx); } .argus-badge-planned { background:var(--risk-low-bg); color:var(--risk-low-tx); } .argus-badge-debt { background:var(--neutral-bg); color:var(--neutral-tx); } .argus-badge-kev { background:var(--risk-crit-bg); color:var(--risk-crit-tx); border-color:var(--risk-crit-line); } .argus-badge-high { background:var(--risk-high-bg); color:var(--risk-high-tx); } .argus-badge-medium { background:var(--risk-med-bg); color:var(--risk-med-tx); } .argus-badge-low { background:var(--neutral-bg); color:var(--neutral-tx); } .argus-badge-critical { background:var(--risk-crit-bg); color:var(--risk-crit-tx); } .argus-badge-info { background:var(--trust-bg); color:var(--trust-tx); } .argus-badge-ok { background:var(--ok-bg); color:var(--ok-tx); } /* ============================================================================ FILTER CONTROLS ============================================================================ */ .argus-filter-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px; } .argus-filter-select { padding:7px 10px; border-radius:var(--radius); border:1px solid var(--border-strong); background:var(--surface); color:var(--text); font-size:0.85rem; font-family:inherit; cursor:pointer; } .argus-filter-select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .argus-filter-label { display:flex; align-items:center; gap:6px; font-size:0.85rem; color:var(--text-2); cursor:pointer; } .argus-filter-check { width:14px; height:14px; accent-color:var(--accent); } /* ============================================================================ SCAN STATUS BLOCK ============================================================================ */ .argus-status-block { display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--border); margin-bottom:20px; font-size:0.875rem; } .argus-status-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; } .argus-status-dot-idle { background:var(--ok-line); } .argus-status-dot-running { background:var(--copper); box-shadow:0 0 0 0 rgba(201,123,63,.5); animation:argus-pulse 1.6s infinite; } @keyframes argus-pulse { 0%{box-shadow:0 0 0 0 rgba(201,123,63,.5);} 70%{box-shadow:0 0 0 6px rgba(201,123,63,0);} 100%{box-shadow:0 0 0 0 rgba(201,123,63,0);} } .argus-status-meta { color:var(--text-3); font-size:0.8rem; } /* ============================================================================ CONFIG FORM SECTIONS ============================================================================ */ .argus-config-section { margin-bottom:28px; padding:20px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); } .argus-config-section-title { font-size:11px; font-weight:700; color:var(--text-3); margin:0 0 16px; text-transform:uppercase; letter-spacing:0.12em; } .argus-input { padding:9px 12px; border-radius:var(--radius); border:1px solid var(--border-strong); background:var(--surface); color:var(--text); font-size:0.9rem; font-family:inherit; width:100%; box-sizing:border-box; } .argus-input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .argus-input[readonly] { color:var(--text-3); cursor:not-allowed; background:var(--surface-sunken); } .argus-inline-group { display:flex; gap:8px; align-items:flex-end; } .argus-inline-group .argus-input { flex:1; } /* ============================================================================ FLASH MESSAGES ============================================================================ */ .argus-flash { padding:11px 15px; border-radius:var(--radius); font-size:0.875rem; margin-bottom:16px; } .argus-flash-success { background:var(--ok-bg); border:1px solid var(--ok-line); color:var(--ok-tx); } .argus-flash-error { background:var(--risk-crit-bg); border:1px solid var(--risk-crit-line); color:var(--risk-crit-tx); } /* ============================================================================ BUTTONS / MISC ============================================================================ */ .argus-secondary-button { padding:9px 18px; border-radius:var(--radius); border:1px solid var(--border-strong); background:var(--surface); color:var(--text); font-size:0.9rem; font-weight:600; cursor:pointer; transition:all .15s; } .argus-secondary-button:hover { border-color:var(--accent); color:var(--accent-text); background:var(--accent-soft); } .argus-spinner { display:inline-block; width:12px; height:12px; border:2px solid var(--border-strong); border-top-color:var(--accent); border-radius:50%; animation:argus-spin .8s linear infinite; } @keyframes argus-spin { to { transform:rotate(360deg); } } .argus-action-link { color:var(--accent-text); text-decoration:none; font-size:0.82rem; font-weight:600; } .argus-action-link:hover { text-decoration:underline; } .argus-scan-notify { width:100%; max-width:1500px; padding:12px 28px 0; box-sizing:border-box; } .argus-scan-notify:empty { display:none; } .argus-splash-img { display:block; max-width:100%; height:auto; margin:0 auto 20px; opacity:0.9; } /* ============================================================================ UTILITY CLASSES ============================================================================ */ .argus-mono-sm { font-family:var(--mono); font-size:0.82rem; } .argus-mono { font-family:var(--mono); } .argus-fw-semibold { font-weight:600; } .argus-muted { color:var(--text-3); } .argus-muted-sm { font-size:0.8rem; color:var(--text-3); } .argus-row-clickable { cursor:pointer; } .argus-empty-row td { text-align:center; color:var(--text-3); padding:24px; } .argus-right { text-align:right; } .argus-score-total { text-align:right; font-weight:700; font-size:1.05em; } .argus-detail-label-cell { font-weight:600; } /* ============================================================================ LEFT SIDEBAR ============================================================================ */ .argus-shell-with-sidebar { margin-left:var(--sidebar-width); transition:margin-left .2s ease; width:auto; align-items:stretch; } .argus-shell-with-sidebar > .argus-main { align-self:center; } .argus-sidebar { position:fixed; top:0; left:0; width:var(--sidebar-width); height:100vh; background:var(--nav-bg); border-right:1px solid var(--border); display:flex; flex-direction:column; z-index:100; transition:transform .2s ease; } .sidebar-header { display:flex; align-items:center; gap:11px; padding:18px 18px 16px; border-bottom:1px solid var(--border); flex-shrink:0; min-height:64px; } .sidebar-brand { display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; min-width:0; } .sidebar-mark { flex-shrink:0; color:var(--text); display:inline-flex; } .sidebar-logo { width:34px; height:34px; object-fit:contain; } .sidebar-brand-text { display:flex; flex-direction:column; line-height:1.05; min-width:0; } .sidebar-product { font-size:1.02rem; font-weight:700; color:var(--text); letter-spacing:-0.01em; } .sidebar-version { font-family:var(--mono); font-size:10px; color:var(--text-3); letter-spacing:0.04em; margin-top:3px; } .sidebar-toggle { background:none; border:none; color:var(--text-2); font-size:1.1rem; cursor:pointer; padding:0.25rem 0.5rem; display:none; border-radius:var(--radius); margin-left:auto; } .sidebar-toggle:hover { background:var(--surface-2); color:var(--text); } .sidebar-nav { flex:1; padding:10px 0 14px; overflow-y:auto; scrollbar-width:thin; } .sidebar-nav::-webkit-scrollbar { width:6px; } .sidebar-nav::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:3px; } .sidebar-section-label { font-size:10px; font-weight:700; letter-spacing:0.14em; color:var(--text-3); padding:14px 20px 6px; text-transform:uppercase; } .sidebar-item { display:flex; align-items:center; gap:11px; padding:8px 18px; margin:1px 10px; font-size:13.5px; font-weight:500; color:var(--nav-text); text-decoration:none; border-radius:var(--radius); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; position:relative; transition:background .13s, color .13s; } .sidebar-item:hover { background:var(--surface-2); color:var(--text); } html[data-theme="dark"] .sidebar-item:hover { background:rgba(255,255,255,0.04); } .sidebar-item.active { background:var(--nav-active-bg); color:var(--nav-text-active); font-weight:600; } .sidebar-item.active::before { content:""; position:absolute; left:0; top:6px; bottom:6px; width:2px; background:var(--accent); border-radius:2px; } .sidebar-ico { width:17px; height:17px; flex-shrink:0; opacity:0.9; } .sidebar-item.active .sidebar-ico { opacity:1; } .sidebar-item-text { flex:1; overflow:hidden; text-overflow:ellipsis; } .sidebar-item-with-badge { display:flex; align-items:center; justify-content:space-between; gap:0.4rem; } .sidebar-item-label { display:flex; align-items:center; gap:11px; min-width:0; overflow:hidden; } .sidebar-critical-dot { width:8px; height:8px; border-radius:50%; background:var(--risk-crit-line); flex-shrink:0; } .sidebar-footer { padding:12px 14px 14px; border-top:1px solid var(--border); flex-shrink:0; display:flex; flex-direction:column; gap:8px; } .sidebar-scan-form, .sidebar-logout-form { margin:0; } .sidebar-btn-ico { width:15px; height:15px; flex-shrink:0; } .sidebar-scan-btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:9px 1rem; background:var(--accent); color:#fff; border:1px solid var(--accent); border-radius:var(--radius); font-size:0.82rem; font-weight:600; cursor:pointer; text-decoration:none; transition:background .15s; font-family:inherit; } .sidebar-scan-btn:hover { background:var(--accent-hover); border-color:var(--accent-hover); } .sidebar-scan-btn-disabled { background:var(--surface-sunken); color:var(--text-3); border-color:var(--border); cursor:not-allowed; } .sidebar-scan-btn-disabled:hover { background:var(--surface-sunken); } .sidebar-logout-btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:8px 1rem; background:transparent; color:var(--text-2); border:1px solid var(--border-strong); border-radius:var(--radius); font-size:0.8rem; font-weight:600; cursor:pointer; transition:all .15s; font-family:inherit; } .sidebar-logout-btn:hover { background:var(--surface-2); color:var(--accent-text); border-color:var(--accent); } .sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(14,17,22,0.5); z-index:99; } .sidebar-overlay.open { display:block; } /* ============================================================================ HELP PANELS ============================================================================ */ .argus-help-panel { background:var(--accent-soft); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--radius); padding:0.7rem 1rem; margin-bottom:1.25rem; display:flex; align-items:flex-start; gap:0.75rem; } .argus-help-body { display:flex; align-items:baseline; gap:1rem; flex:1; flex-wrap:wrap; } .argus-help-text { font-size:0.84rem; color:var(--text-2); line-height:1.5; margin:0; flex:1; min-width:200px; } .argus-help-dismiss { background:transparent; border:1px solid var(--accent); color:var(--accent-text); font-size:0.75rem; font-weight:600; padding:0.2rem 0.7rem; border-radius:var(--radius); cursor:pointer; white-space:nowrap; flex-shrink:0; transition:background .15s; } .argus-help-dismiss:hover { background:var(--surface); } .argus-help-reopen { display:none; background:transparent; border:1px solid var(--border); color:var(--text-3); font-size:0.7rem; font-weight:600; padding:0.15rem 0.6rem; border-radius:var(--radius); cursor:pointer; margin-bottom:0.75rem; transition:color .15s; } .argus-help-reopen:hover { color:var(--text-2); border-color:var(--border-strong); } /* ============================================================================ DATA SOURCES — expandable connector rows ============================================================================ */ .ds-connector-row { border:1px solid var(--border); border-radius:var(--radius-lg); margin-bottom:0.5rem; overflow:hidden; background:var(--surface); } .ds-connector-header { display:flex; align-items:center; gap:1rem; padding:0.7rem 1rem; cursor:pointer; user-select:none; } .ds-connector-header:hover { background:var(--surface-2); } .ds-connector-name { font-weight:600; min-width:120px; color:var(--text); } .ds-connector-meta { color:var(--text-2); font-size:0.8rem; flex:1; } .ds-connector-events { color:var(--text-2); font-size:0.8rem; font-family:var(--mono); } .ds-connector-chevron { color:var(--text-3); margin-left:auto; } .ds-connector-form { padding:1rem; border-top:1px solid var(--border); } .ds-restart-hint { color:var(--text-3); font-size:0.8rem; margin-left:10px; vertical-align:middle; } table[data-sortable="true"] th { white-space:nowrap; } /* ============================================================================ CSS-ONLY TOOLTIPS ============================================================================ */ .tooltip { position:relative; display:inline-flex; align-items:center; cursor:help; } th.tooltip, td.tooltip { display:table-cell; } .tooltip::after { content:attr(data-tooltip); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:var(--surface-inv,#1B1F26); color:var(--text-inv); font-size:11px; font-weight:400; text-transform:none; letter-spacing:0; line-height:1.5; max-width:280px; width:max-content; padding:6px 10px; border-radius:var(--radius); pointer-events:none; opacity:0; white-space:normal; z-index:9999; box-shadow:var(--shadow-pop); border:1px solid var(--border-strong); transition:opacity .15s; } html[data-theme="dark"] .tooltip::after { background:#2A313D; } .tooltip::before { content:''; position:absolute; bottom:calc(100% + 3px); left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--border-strong); pointer-events:none; opacity:0; z-index:201; transition:opacity .15s; } .tooltip:hover::after, .tooltip:hover::before { opacity:1; } .tooltip-start::after { left:0; transform:none; } .tooltip-start::before { left:10px; transform:none; } .tooltip-end::after { left:auto; right:0; transform:none; } .tooltip-end::before { left:auto; right:10px; transform:none; } /* ============================================================================ DASHBOARD — no-license CTA, live indicator, tabs ============================================================================ */ .argus-needs-license { display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:var(--radius); margin-bottom:12px; font-size:0.88rem; background:var(--risk-med-bg); color:var(--risk-med-tx); border:1px solid var(--risk-med-line); } .argus-needs-license-icon { font-size:1.1rem; } .argus-needs-license a { color:var(--risk-med-tx); text-decoration:underline; font-weight:600; } .argus-live { display:inline-flex; align-items:center; gap:6px; font-size:0.8rem; margin-bottom:12px; cursor:pointer; } .argus-live-dot { width:8px; height:8px; border-radius:50%; background:var(--ok-line); display:inline-block; } .argus-live-status { color:var(--ok-line); font-weight:700; letter-spacing:0.06em; } .argus-live-meta { color:var(--text-3); margin-left:4px; } .argus-tab-bar { display:flex; gap:2px; border-bottom:1px solid var(--border); margin:16px 0 0; position:sticky; top:58px; z-index:10; background:var(--app-bg); padding-top:2px; } .argus-tab-btn { padding:11px 18px; background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; font-family:var(--sans); font-size:0.88rem; font-weight:600; color:var(--text-2); letter-spacing:0.01em; white-space:nowrap; margin-bottom:-1px; display:inline-flex; align-items:center; gap:8px; } .argus-tab-btn:hover { color:var(--text); } .argus-tab-btn.argus-tab-active { color:var(--accent-text); border-bottom-color:var(--accent); } .argus-tab-count { background:var(--risk-crit-line); color:#fff; border-radius:var(--radius-pill); padding:1px 7px; font-size:0.72rem; font-weight:700; } .argus-tab-count-warn { background:var(--risk-med-line); color:#3a2a08; } .argus-tab-panel { padding-top:16px; } .argus-tab-panel--hidden { display:none; } /* ============================================================================ DASHBOARD — hero grid (RRS gauge + Attacker Next Steps), cards ============================================================================ */ .argus-hero-grid { display:grid; grid-template-columns:1.05fr 1.35fr; gap:18px; align-items:stretch; margin:18px 0 26px; } @media (max-width:1080px){ .argus-hero-grid { grid-template-columns:1fr; } } .argus-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:20px 22px; } .argus-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; } .argus-card-title { font-family:var(--sans); font-weight:600; font-size:1.02rem; color:var(--text); margin:0; display:inline-flex; align-items:baseline; gap:9px; } .argus-card-tag { font-family:var(--mono); font-size:0.72rem; color:var(--accent-text); font-weight:600; } .argus-card-sub { color:var(--text-2); font-size:0.82rem; margin:0 0 14px; } .argus-well { background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--border-strong); border-radius:var(--radius); padding:12px 15px; color:var(--text-2); font-size:0.86rem; margin-bottom:4px; } .argus-well strong { color:var(--text); } /* RRS gauge */ .argus-rrs { --band:var(--risk-med-line); } .rrs-band-vlow { --band:var(--risk-crit-line); } .rrs-band-low { --band:var(--risk-high-line); } .rrs-band-moderate { --band:var(--risk-med-line); } .rrs-band-strong { --band:var(--ok-line); } .rrs-band-vstrong { --band:var(--ok-line); } .argus-rrs-top { display:flex; gap:22px; align-items:center; } @media (max-width:520px){ .argus-rrs-top { flex-direction:column; align-items:flex-start; } } .rrs-gauge { width:168px; height:168px; flex-shrink:0; border-radius:50%; position:relative; display:flex; align-items:center; justify-content:center; background:conic-gradient(var(--band) calc(var(--rrs-score,0)*3.6deg), var(--surface-sunken) 0deg); } .rrs-gauge::after { content:""; position:absolute; inset:13px; border-radius:50%; background:var(--surface); } .rrs-gauge-inner { position:relative; z-index:1; text-align:center; } .rrs-gauge-num { font-size:3rem; font-weight:700; line-height:1; letter-spacing:-0.02em; color:var(--band); font-variant-numeric:tabular-nums; } .rrs-gauge-band { font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--band); margin-top:4px; } .rrs-gauge-cap { font-size:9.5px; color:var(--text-3); letter-spacing:0.08em; text-transform:uppercase; margin-top:6px; } .argus-rrs-bars { flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; } .argus-rrs-trend { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:var(--radius-pill); letter-spacing:0.02em; align-self:flex-start; } .argus-rrs-trend.up { background:var(--ok-bg); color:var(--ok-tx); } .argus-rrs-trend.down { background:var(--risk-crit-bg); color:var(--risk-crit-tx); } .argus-rrs-trend.stable { background:var(--neutral-bg); color:var(--neutral-tx); } .argus-rrs-bar-head { display:flex; justify-content:space-between; font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-2); font-weight:700; margin-bottom:5px; } .argus-rrs-bar-head .v { font-family:var(--mono); color:var(--text-3); letter-spacing:0; } .argus-rrs-bar-track { height:7px; background:var(--surface-sunken); border-radius:var(--radius-pill); overflow:hidden; } .argus-rrs-bar-fill { display:block; height:100%; border-radius:var(--radius-pill); } .argus-rrs-bar-fill.exposure { background:var(--risk-crit-line); } .argus-rrs-bar-fill.signal { background:var(--risk-med-line); } .argus-rrs-bar-fill.coverage { background:var(--trust-line); } .argus-rrs-bar-fill.credit { background:var(--ok-line); } .argus-rrs-factors { margin-top:16px; padding-top:15px; border-top:1px solid var(--divider); } .argus-rrs-factor { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; font-size:12.5px; padding:5px 0; color:var(--text); } .argus-rrs-pen { font-family:var(--mono); font-weight:700; color:var(--risk-crit-line); } .argus-rrs-add { font-family:var(--mono); font-weight:700; color:var(--ok-line); } .argus-rrs-cat { font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:var(--radius); text-transform:uppercase; letter-spacing:0.04em; } .argus-rrs-cat.exposure { background:var(--risk-crit-bg); color:var(--risk-crit-tx); } .argus-rrs-cat.signal { background:var(--risk-med-bg); color:var(--risk-med-tx); } .argus-rrs-cat.coverage { background:var(--trust-bg); color:var(--trust-tx); } .argus-rrs-cat.gain { background:var(--ok-bg); color:var(--ok-tx); } .argus-rrs-weights { font-size:10.5px; color:var(--text-3); margin-top:12px; font-family:var(--mono); } /* Attacker Next Steps */ .argus-ans { display:flex; flex-direction:column; gap:11px; } .argus-ans-card { border:1px solid var(--border); border-left:3px solid var(--border-strong); border-radius:var(--radius); background:var(--surface-2); padding:13px 15px; } .argus-ans-card.hi { border-left-color:var(--risk-crit-line); } .argus-ans-card.mid { border-left-color:var(--risk-med-line); } .argus-ans-top { display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:center; margin-bottom:8px; } .argus-ans-num { width:22px; height:22px; border-radius:50%; border:1px solid var(--border-strong); display:inline-flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11px; font-weight:700; color:var(--text-2); } .argus-ans-title { font-weight:600; font-size:13.5px; color:var(--text); } .argus-ans-conf { font-family:var(--mono); font-size:11px; font-weight:700; padding:2px 8px; border-radius:var(--radius-pill); background:var(--neutral-bg); color:var(--neutral-tx); } .argus-ans-conf.hi { background:var(--risk-crit-bg); color:var(--risk-crit-tx); } .argus-ans-conf.mid { background:var(--risk-med-bg); color:var(--risk-med-tx); } .argus-ans-path { font-size:12px; color:var(--text-2); margin-bottom:5px; } .argus-ans-path .tgt { color:var(--text); font-weight:600; } .argus-ans-path .arr { color:var(--text-3); margin:0 6px; } .argus-ans-impact { font-size:12.5px; color:var(--text-2); line-height:1.5; margin-bottom:9px; } .argus-ans-meta { display:flex; flex-wrap:wrap; align-items:center; gap:7px; } .argus-ans-chip { font-family:var(--mono); font-size:10.5px; padding:2px 8px; border-radius:var(--radius); background:var(--surface-sunken); color:var(--text-2); border:1px solid var(--border); text-decoration:none; } .argus-ans-block { background:var(--ok-bg); color:var(--ok-tx); border-color:transparent; } .argus-ans-block:hover { filter:brightness(0.97); } .argus-ans-chip-muted { font-size:10.5px; color:var(--text-3); letter-spacing:0.02em; } .argus-ans-evidence { margin-top:10px; padding:10px 12px; background:var(--surface-sunken); border:1px solid var(--border); border-radius:var(--radius); font-size:12px; color:var(--text-2); line-height:1.6; } .argus-ans-evidence-list { margin:0 0 8px 18px; padding:0; } .argus-ans-evidence-none { color:var(--text-3); margin-bottom:8px; } /* ============================================================================ DASHBOARD — sections, deltas, tables helpers ============================================================================ */ .argus-subsection { margin-top:12px; } .argus-subsection-label { font-size:0.72rem; font-weight:700; color:var(--text-3); margin:0 0 8px; text-transform:uppercase; letter-spacing:0.1em; } .argus-section-title--row { display:flex; align-items:center; justify-content:space-between; gap:12px; } .argus-section-title--spaced { margin-top:26px; } .argus-section-actions { display:flex; align-items:center; gap:12px; } .argus-stat-grid--delta { grid-template-columns:repeat(4,minmax(0,1fr)); } .argus-stat-sub { font-size:0.72rem; color:var(--text-3); margin-top:4px; font-family:var(--mono); } .argus-stat-card-link { cursor:pointer; } .argus-stat-link { color:inherit; text-decoration:none; } .argus-details { margin-bottom:16px; } .argus-escalated { color:var(--risk-high-line); } .argus-rule-name { font-size:0.85rem; font-weight:500; color:var(--text); } .argus-nowrap { white-space:nowrap; } .argus-cell-wrap { max-width:320px; word-break:break-word; } .argus-cell-wrap-lg { max-width:360px; word-break:break-word; } .argus-cell-wrap-sm { max-width:240px; word-break:break-word; } .argus-cell-wrap-xs { max-width:170px; word-break:break-word; } .argus-mb-md { margin-bottom:16px; } .argus-fs-sm { font-size:0.8rem; } .argus-muted-xs { color:var(--text-3); font-size:0.75rem; } .argus-badge-inline { margin-right:4px; } /* row severity accent (data-driven via class, not inline style) */ .argus-table tr.argus-row-crit td:first-child { box-shadow:inset 3px 0 0 0 var(--risk-crit-line); } .argus-table tr.argus-row-warn td:first-child { box-shadow:inset 3px 0 0 0 var(--risk-med-line); } /* correlation / connectors */ .argus-attck-tag { background:var(--trust-bg); color:var(--trust-tx); padding:2px 6px; border-radius:var(--radius); font-size:0.72rem; font-weight:600; text-decoration:none; display:inline-block; margin:1px; font-family:var(--mono); } .argus-attck-tag:hover { filter:brightness(0.97); } .argus-ack-btn { background:var(--risk-med-bg); color:var(--risk-med-tx); border:1px solid var(--risk-med-line); padding:3px 9px; border-radius:var(--radius); cursor:pointer; font-size:0.75rem; font-weight:600; font-family:var(--sans); } .argus-ack-btn:hover { filter:brightness(0.97); } .argus-inline-form-tight { display:inline; margin:0; } .argus-source-tag { padding:2px 7px; border-radius:var(--radius); font-size:0.75rem; font-weight:600; font-family:var(--mono); background:var(--trust-bg); color:var(--trust-tx); } .argus-source-tag--aws { background:var(--trust-bg); color:var(--trust-tx); } .argus-source-tag--gcp { background:var(--ok-bg); color:var(--ok-tx); } .argus-risky-banner { display:flex; align-items:center; gap:8px; background:var(--risk-med-bg); color:var(--risk-med-tx); border:1px solid var(--risk-med-line); border-radius:var(--radius); padding:10px 14px; margin-bottom:12px; font-weight:600; font-size:0.86rem; } .argus-risky-banner-icon { font-size:1.1rem; } /* AD surface cards */ .argus-ad-grid { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:16px; } .argus-ad-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:14px 18px; min-width:220px; flex:1; } .argus-ad-card--info { border-left:3px solid var(--trust-line); } .argus-ad-card--danger { border-left:3px solid var(--risk-crit-line); } .argus-ad-card-title { font-weight:600; font-size:0.85rem; margin-bottom:6px; color:var(--text-2); } .argus-ad-card-title--info { color:var(--trust-tx); } .argus-ad-card-title--danger { color:var(--risk-crit-tx); } .argus-ad-card-body { color:var(--text); font-size:0.82rem; line-height:1.45; } .argus-ad-card-note { color:var(--text-3); font-size:0.78rem; margin-top:4px; } .argus-perimeter-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; } /* ============================================================================ ACTION COMMAND CENTER (moved from action_center.html