/* ============================================================================ NetLens (by Eximia) — design token contract [NL-72] ============================================================================ ALL colors in the UI flow through the CSS custom properties defined below. Other frontend stories build on this layer: never hardcode a hex color in CSS, templates, or JS — reference a token. THEMING MODEL - `` selects the palette. The attribute is always concrete ("dark" or "light"): static/js/theme.js resolves the user preference (light / dark / system, persisted in localStorage under "nl-theme") and keeps the attribute in sync, including live prefers-color-scheme changes while in System mode. A tiny inline script in base.html applies the attribute before first paint. - Dark is the default palette on bare :root (no-JS fallback). - JS that needs a concrete color (canvas, inline SVG) must read it via NLTheme.color('--token') / NLTheme.alpha('--token', a) from theme.js and re-render on the window "nl-themechange" event. TOKENS Backgrounds --bg page background --surface cards, navbar, modals --surface-2 nested panels, table headers, chips --surface-3 hover / expanded emphasis --surface-inset inputs, deep wells, canvas backgrounds Text --text primary text (AA on --bg/--surface) --text-muted secondary text (AA on --bg/--surface) --text-faint placeholders/disabled (decorative only — NOT guaranteed AA; never use for content) Borders --border hairlines, dividers --border-strong emphasized borders, secondary buttons Brand --accent interactive: links, active tabs, focus --accent-strong pressed/borders of accent elements --accent-2 secondary accent (cyan): control-plane, refs --accent-contrast text placed ON accent/gradient fills --brand-gradient Eximia gradient — primary action buttons, wordmark accent. Pair with --accent-contrast. Status --success --warn --danger --pending --neutral (theme-adjusted for AA text contrast; raw Eximia brand values live in the --eximia-* reference tokens) Planes --plane-cp (control plane) --plane-up (user plane) Protocols --proto-sip --proto-rtp --proto-diameter --proto-gtp --proto-ngap --proto-nas --proto-http2 --proto-sctp --proto-dns (chart/tag coloring per protocol family) Misc --shadow elevation shadow for popovers/modals --scrim full-screen modal backdrop wash --font-sans Plus Jakarta Sans stack (self-hosted) --font-mono monospace stack SOFT FILLS — convention for translucent status/accent washes: background: color-mix(in srgb, var(--danger) 12%, transparent); Use 8–20% mixes instead of new rgba() literals. EXIMIA BRAND REFERENCE (verbatim from e-ximia.com): primary #7C3AED · ink #1A1040 · light bg #F4F1FF · border #DDD6FE muted #6B7280 · cyan #06B6D4 · green #10B981 · orange #F97316 gradient linear-gradient(135deg, #7C3AED, #A855F7, #EC4899) ========================================================================= */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../fonts/PlusJakartaSans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../fonts/PlusJakartaSans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* Eximia brand constants (theme-independent references) */ --eximia-primary: #7C3AED; --eximia-ink: #1A1040; --eximia-bg-light: #F4F1FF; --eximia-border: #DDD6FE; --eximia-muted: #6B7280; --eximia-cyan: #06B6D4; --eximia-green: #10B981; --eximia-orange: #F97316; --brand-gradient: linear-gradient(135deg, #7C3AED, #A855F7, #EC4899); --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ---- DARK theme (default): deep-indigo Eximia-ink family ---- */ color-scheme: dark; --bg: #0F0A23; --surface: #191038; --surface-2: #221646; --surface-3: #2A1C55; --surface-inset: #0B071B; --text: #EDEAF8; --text-muted: #ABA4CC; --text-faint: #756D9E; --border: #2C2057; --border-strong: #3F3076; --accent: #A78BFA; --accent-strong: #8B5CF6; --accent-2: #22D3EE; --accent-contrast: #FFFFFF; --success: #10B981; --warn: #FB923C; --danger: #F87171; --pending: #D9B23D; --neutral: #8E88AE; --plane-cp: #22D3EE; --plane-up: #F472B6; --proto-sip: #F472B6; --proto-rtp: #A78BFA; --proto-diameter: #D9B23D; --proto-gtp: #22D3EE; --proto-ngap: #60A5FA; --proto-nas: #C4B5FD; --proto-http2: #34D399; --proto-sctp: #FB923C; --proto-dns: #2DD4BF; --shadow: 0 4px 16px rgba(0, 0, 0, 0.55); --scrim: rgba(5, 3, 15, 0.72); } :root[data-theme="light"] { /* ---- LIGHT theme: Eximia light background + white surfaces ---- */ color-scheme: light; --bg: #F4F1FF; --surface: #FFFFFF; --surface-2: #F4F1FF; --surface-3: #EDE9FE; --surface-inset: #FAF9FF; --text: #1A1040; --text-muted: #5B5773; --text-faint: #9A94B8; --border: #DDD6FE; --border-strong: #C4B5FD; --accent: #7C3AED; --accent-strong: #6D28D9; --accent-2: #0E7490; --accent-contrast: #FFFFFF; --success: #047857; --warn: #C2410C; --danger: #DC2626; --pending: #92700C; --neutral: #6B7280; --plane-cp: #0E7490; --plane-up: #BE185D; --proto-sip: #BE185D; --proto-rtp: #7C3AED; --proto-diameter: #92700C; --proto-gtp: #0E7490; --proto-ngap: #1D4ED8; --proto-nas: #6D28D9; --proto-http2: #047857; --proto-sctp: #C2410C; --proto-dns: #0F766E; --shadow: 0 4px 16px rgba(26, 16, 64, 0.14); --scrim: rgba(26, 16, 64, 0.45); } /* ===== Reset & Base ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 14px; } body { font-family: var(--font-sans); background: var(--bg); color: var(--text); line-height: 1.5; } /* ===== Navbar ===== */ .navbar { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 1.25rem; background: var(--surface); border-bottom: 1px solid var(--border); height: 52px; box-sizing: border-box; } .nav-brand a { color: var(--text); text-decoration: none; font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem; } .nav-logo { flex-shrink: 0; } .nav-brand-text { font-size: 1.15rem; letter-spacing: -0.5px; font-weight: 800; } .nav-brand-lens { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .nav-brand-by { color: var(--text-faint); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.3px; margin-left: 0.35rem; align-self: flex-end; padding-bottom: 2px; } .nav-links { display: flex; align-items: center; gap: 1.25rem; } .nav-links a { color: var(--text-muted); text-decoration: none; } .nav-links a:hover { color: var(--accent); } .nav-user { color: var(--accent); font-weight: 500; font-size: 0.85rem; } .nav-admin { color: var(--pending) !important; font-weight: 600; } .nav-logout { color: var(--danger) !important; } /* Theme switcher (Light / Dark / System cycle button) */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; background: none; border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; } .theme-toggle:hover { color: var(--accent); border-color: var(--border-strong); background: var(--surface-2); } .theme-toggle .theme-icon { display: none; } .theme-toggle[data-mode="light"] .theme-icon-light { display: block; } .theme-toggle[data-mode="dark"] .theme-icon-dark { display: block; } .theme-toggle[data-mode="system"] .theme-icon-system { display: block; } /* NL-77: hamburger toggle — hidden on wide screens, replaces the inline nav links below 768px (state driven by static/js/nav.js). */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 6px; background: none; border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; } .nav-toggle:hover { color: var(--accent); border-color: var(--border-strong); background: var(--surface-2); } .nav-toggle .nav-toggle-x { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggle-bars { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggle-x { display: block; } @media (max-width: 767.98px) { .navbar { position: relative; } .nav-toggle { display: inline-flex; } .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 300; flex-direction: column; align-items: stretch; gap: 0; padding: 0.4rem 0; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); } .nav-links.open { display: flex; } .nav-links a, .nav-links .nav-user { display: block; padding: 0.65rem 1.25rem; } .nav-links a:hover { background: var(--surface-2); } .nav-links .theme-toggle { margin: 0.5rem 1.25rem 0.35rem; } } /* ===== Container ===== */ .container { max-width: 1400px; margin: 0 auto; padding: 1.5rem; } /* ===== Buttons ===== Hierarchy: primary action = brand gradient; secondary = surface + border. */ .btn { display: inline-block; padding: 0.5rem 1.25rem; border: none; border-radius: 6px; cursor: pointer; font-size: 0.9rem; font-weight: 600; text-decoration: none; font-family: var(--font-sans); transition: background 0.2s, filter 0.2s, border-color 0.2s; } .btn-primary { background: var(--brand-gradient); color: var(--accent-contrast); background-size: 130% 130%; background-position: 0 0; } .btn-primary:hover { filter: brightness(1.12); } .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; filter: saturate(0.6); } .btn-secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); padding: calc(0.5rem - 1px) calc(1.25rem - 1px); } .btn-secondary:hover { background: var(--surface-3); } .btn-small { padding: 0.3rem 0.75rem; font-size: 0.8rem; } .btn-small.btn-secondary { padding: calc(0.3rem - 1px) calc(0.75rem - 1px); } .btn-close { background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer; } .btn-remove { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 1.2rem; } /* ===== Upload Page ===== */ .upload-container { max-width: 700px; margin: 3rem auto; text-align: center; } .upload-container h1 { margin-bottom: 0.5rem; color: var(--text); } .subtitle { color: var(--text-muted); margin-bottom: 2rem; } .drop-zone { border: 2px dashed var(--border-strong); border-radius: 12px; padding: 3rem 2rem; background: var(--surface); transition: border-color 0.2s, background 0.2s; cursor: pointer; } .drop-zone:hover, .drop-zone.drag-over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); } .drop-zone-icon { font-size: 3rem; margin-bottom: 1rem; } .drop-zone p { color: var(--text-muted); } .drop-zone-or { margin: 1rem 0; color: var(--text-faint); } .file-list { margin-top: 1.5rem; text-align: left; } .file-list h3 { margin-bottom: 0.5rem; } .file-list ul { list-style: none; margin-bottom: 1rem; } .file-list li { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.75rem; background: var(--surface); border-radius: 6px; margin-bottom: 0.5rem; border: 1px solid var(--border); } .file-size { color: var(--text-muted); margin: 0 1rem; } .progress-section { margin-top: 2rem; } .progress-bar { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; border: 1px solid var(--border); } .progress-fill { height: 100%; background: var(--brand-gradient); border-radius: 4px; transition: width 0.3s; } .progress-fill.error { background: var(--danger); } #progress-text { margin-top: 0.5rem; color: var(--text-muted); } /* NL-39: live parse stages (SSE) on the upload page */ .parse-stages { list-style: none; margin: 0.75rem 0 0; padding: 0; } .parse-stage { padding: 0.25rem 0; color: var(--text-muted); font-size: 0.9rem; } .parse-stage::before { content: "\2713\00a0"; visibility: hidden; } .parse-stage.done { color: var(--success); } .parse-stage.done::before { visibility: visible; } .parse-stage.active { color: var(--text); } .parse-stage.active::before { content: "\25cf\00a0"; visibility: visible; color: var(--accent); } .upload-ready { margin-top: 1rem; } .upload-error { margin-top: 1rem; color: var(--danger); } /* ===== Controls Bar (tabs + filters) ===== */ .controls-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border); } .section-tabs { display: flex; gap: 0; } .section-tab { padding: 0.5rem 1.1rem; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); cursor: pointer; font-size: 0.88rem; font-weight: 500; font-family: var(--font-sans); transition: color 0.15s, border-color 0.15s; } .section-tab:hover { color: var(--text); } .section-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .tab-badge { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); background: var(--surface-2); padding: 0.1rem 0.45rem; border-radius: 10px; margin-left: 0.3rem; font-family: var(--font-mono); } .section-tab.active .tab-badge { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); } .filters-inline { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .filters-inline select { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 0.35rem 0.6rem; font-size: 0.8rem; outline: none; font-family: var(--font-sans); } .filters-inline select:focus { border-color: var(--accent); } /* ===== Dashboard ===== */ .summary-bar { background: var(--surface); border-radius: 8px; padding: 1.25rem; margin-bottom: 1.25rem; border: 1px solid var(--border); } .summary-bar h1 { font-size: 1.3rem; margin-bottom: 0.75rem; } .pcap-filename { color: var(--accent); font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700; } .pcap-filename::after { content: ' \2014 '; color: var(--text-faint); } .stats-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .stat-badge { display: inline-block; padding: 0.3rem 0.75rem; border-radius: 20px; font-size: 0.85rem; font-weight: 500; } .stat-badge.total { background: var(--surface-2); border: 1px solid var(--border); } .stat-badge.cp { background: color-mix(in srgb, var(--plane-cp) 14%, transparent); color: var(--plane-cp); } .stat-badge.up { background: color-mix(in srgb, var(--plane-up) 14%, transparent); color: var(--plane-up); } .stat-badge.sub { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); } .stat-badge.proc { background: color-mix(in srgb, var(--pending) 14%, transparent); color: var(--pending); } .stat-badge.flows { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); } .proto-breakdown { width: 100%; margin-top: 0.5rem; } .proto-tag { display: inline-block; padding: 0.15rem 0.5rem; margin: 0.15rem; background: var(--surface-2); border-radius: 4px; font-size: 0.75rem; color: var(--text-muted); } /* ===== Trace Overview Bar ===== */ .overview-bar { background: var(--surface); border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 1.25rem; border: 1px solid var(--border); border-left: 3px solid var(--accent); } .overview-title { font-size: 0.8rem; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.6rem; } .overview-items { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; } .overview-item { display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.85rem; } .overview-label { color: var(--text-muted); font-weight: 500; font-size: 0.78rem; white-space: nowrap; } .overview-label::after { content: ':'; } .overview-value { color: var(--text); font-family: var(--font-mono); font-size: 0.82rem; } .overview-causes { margin-top: 0.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; } .cause-tag { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 3px; font-size: 0.75rem; font-weight: 500; font-family: var(--font-mono); background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); } .cause-tag.cause-diameter { background: color-mix(in srgb, var(--proto-diameter) 14%, transparent); color: var(--proto-diameter); border-color: color-mix(in srgb, var(--proto-diameter) 30%, transparent); } .cause-tag.cause-gtpv2 { background: color-mix(in srgb, var(--proto-gtp) 14%, transparent); color: var(--proto-gtp); border-color: color-mix(in srgb, var(--proto-gtp) 30%, transparent); } /* ===== Anomaly Alerts ===== */ .anomalies-bar { background: var(--surface); border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 1.25rem; border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border)); border-left: 3px solid var(--danger); } .anom-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } .anom-title { font-size: 0.8rem; font-weight: 600; color: var(--danger); text-transform: uppercase; letter-spacing: 0.5px; } .anom-counts { display: flex; gap: 0.4rem; } .anom-badge { padding: 0.15rem 0.5rem; border-radius: 10px; font-size: 0.7rem; font-weight: 600; } .anom-critical { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); } .anom-warning { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); } .anom-list { display: flex; flex-direction: column; gap: 0.3rem; } .anom-item { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.4rem 0.6rem; border-radius: 4px; font-size: 0.82rem; } .anom-item-critical { background: color-mix(in srgb, var(--danger) 8%, transparent); } .anom-item-warning { background: color-mix(in srgb, var(--warn) 8%, transparent); } .anom-icon { font-size: 1rem; flex-shrink: 0; } .anom-item-critical .anom-icon { color: var(--danger); } .anom-item-warning .anom-icon { color: var(--warn); } .anom-body { flex: 1; min-width: 0; } .anom-item-title { font-weight: 600; color: var(--text); font-size: 0.82rem; } .anom-item-detail { color: var(--text-muted); font-size: 0.75rem; margin-top: 0.1rem; } .anom-frame { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-faint); flex-shrink: 0; } .anom-more { text-align: center; color: var(--text-faint); font-size: 0.75rem; padding: 0.3rem; } /* ===== Service Map ===== */ .service-map-bar { background: var(--surface); border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 1.25rem; border: 1px solid var(--border); } .smap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.5rem; margin-top: 0.5rem; } .smap-card { background: var(--surface-2); border-radius: 6px; padding: 0.6rem 0.75rem; border-left: 3px solid var(--border-strong); } .smap-4gran, .smap-5gran { border-left-color: var(--success); } .smap-4gcore, .smap-5gcore { border-left-color: var(--accent-2); } .smap-policy, .smap-charging { border-left-color: var(--pending); } .smap-ims { border-left-color: var(--accent); } .smap-iot { border-left-color: var(--warn); } .smap-userplane { border-left-color: var(--plane-up); } .smap-legacy { border-left-color: var(--neutral); } .smap-iface { font-size: 0.85rem; font-weight: 700; color: var(--accent-2); font-family: var(--font-mono); } .smap-service { font-size: 0.82rem; color: var(--text); font-weight: 600; } .smap-desc { font-size: 0.72rem; color: var(--text-muted); margin: 0.15rem 0; } .smap-meta { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--text-muted); margin-top: 0.25rem; } .smap-domain { background: var(--surface-3); padding: 0.05rem 0.35rem; border-radius: 3px; } .smap-endpoints { font-size: 0.68rem; color: var(--text-faint); margin-top: 0.2rem; font-family: var(--font-mono); } .filter-tabs { display: flex; gap: 0; } .ftab { padding: 0.35rem 0.7rem; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; font-size: 0.78rem; font-weight: 500; font-family: var(--font-sans); transition: all 0.15s; } .ftab:first-child { border-radius: 6px 0 0 6px; } .ftab:last-child { border-radius: 0 6px 6px 0; } .ftab:hover { background: var(--surface-2); color: var(--text); } .ftab.active { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); } .ftab-success.active { background: color-mix(in srgb, var(--success) 10%, transparent); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); } .ftab-failure.active { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); } .ftab-timeout.active { background: color-mix(in srgb, var(--warn) 10%, transparent); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); } .ftab-incomplete.active { background: color-mix(in srgb, var(--neutral) 10%, transparent); color: var(--neutral); border-color: color-mix(in srgb, var(--neutral) 30%, transparent); } /* ===== Tabs ===== */ .tab-group { display: flex; gap: 0; } .tab { padding: 0.4rem 0.9rem; background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text-muted); cursor: pointer; font-size: 0.85rem; font-family: var(--font-sans); transition: background 0.15s; } .tab:first-child { border-radius: 6px 0 0 6px; } .tab:last-child { border-radius: 0 6px 6px 0; } .tab.active { background: var(--surface-3); color: var(--text); } .tab:hover { background: var(--surface-3); } /* ===== Procedure Cards (Expandable Row Design) ===== */ .section { margin-bottom: 1.5rem; } .section h2 { font-size: 1.1rem; margin-bottom: 0.75rem; color: var(--text); } #procedures-container { display: flex; flex-direction: column; gap: 4px; } .proc-card-wrapper { background: var(--surface); border-radius: 8px; overflow: hidden; border: 1px solid var(--border); transition: border-color 0.2s; } .proc-card-wrapper:has(.proc-card-header.expanded) { border-color: var(--border-strong); } /* -- Card header row -- */ .proc-card-header { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 1rem; cursor: pointer; border-left: 3px solid var(--border-strong); transition: background 0.15s; } .proc-card-header:hover { background: var(--surface-2); } .proc-card-header.expanded { background: var(--surface-2); } .proc-card-header.status-success { border-left-color: var(--success); } .proc-card-header.status-failure { border-left-color: var(--danger); } .proc-card-header.status-in_progress { border-left-color: var(--pending); } .proc-card-header.status-incomplete { border-left-color: var(--neutral); } .proc-card-header.status-timeout { border-left-color: var(--warn); } .proc-card-expand-icon { flex-shrink: 0; color: var(--text-faint); transition: transform 0.2s; } .proc-card-header.expanded .proc-card-expand-icon { transform: rotate(90deg); } .proc-card-header .chevron { display: block; } .proc-card-status-icon { flex-shrink: 0; display: flex; align-items: center; } .proc-card-name { font-weight: 600; font-size: 0.9rem; color: var(--text); white-space: nowrap; min-width: 160px; } .proc-card-badge { font-size: 0.7rem; padding: 0.15rem 0.55rem; border-radius: 10px; text-transform: uppercase; font-weight: 600; letter-spacing: 0.3px; flex-shrink: 0; } .badge-success { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); } .badge-failure { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); } .badge-in_progress { background: color-mix(in srgb, var(--pending) 15%, transparent); color: var(--pending); } .badge-incomplete { background: color-mix(in srgb, var(--neutral) 15%, transparent); color: var(--neutral); } .badge-timeout { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); } .proc-card-meta { display: flex; gap: 0.75rem; flex: 1; min-width: 0; } .proc-meta-item { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; } .proc-meta-protos { overflow: hidden; text-overflow: ellipsis; min-width: 0; } .proc-card-time { font-size: 0.75rem; color: var(--text-faint); white-space: nowrap; } .proc-card-sub { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent-2); white-space: nowrap; } /* -- Card expanded body -- */ .proc-card-body { border-top: 1px solid var(--border); padding: 0; animation: slideDown 0.2s ease-out; } @keyframes slideDown { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 2000px; } } .proc-card-loading { padding: 2rem; text-align: center; color: var(--text-muted); } /* Stats bar inside expanded card */ .proc-detail-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 1rem; background: var(--surface-2); border-bottom: 1px solid var(--border); } .proc-stat-item { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.5rem 0.9rem; background: var(--surface); border-radius: 6px; min-width: 100px; } .proc-stat-item.proc-stat-protos { flex: 1; min-width: 200px; } .proc-stat-label { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .proc-stat-value { font-size: 0.85rem; font-weight: 500; color: var(--text); } .proc-stat-value.badge-success { color: var(--success); background: none; } .proc-stat-value.badge-failure { color: var(--danger); background: none; } .proc-stat-value.badge-in_progress { color: var(--pending); background: none; } .proc-stat-value.badge-incomplete { color: var(--neutral); background: none; } .proc-stat-value.badge-timeout { color: var(--warn); background: none; } .proc-stat-mono { font-family: var(--font-mono); font-size: 0.8rem; } .proc-proto-chip { display: inline-block; padding: 0.1rem 0.4rem; margin: 0.1rem; background: var(--surface-3); border-radius: 3px; font-size: 0.75rem; color: var(--text-muted); } /* Tabs inside expanded card */ .proc-detail-tabs { display: flex; gap: 0; padding: 0 1rem; background: var(--surface-2); border-bottom: 1px solid var(--border); } .proc-detail-tabs .tab { border: none; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 0.5rem 1rem; font-size: 0.85rem; } .proc-detail-tabs .tab.active { color: var(--accent); border-bottom-color: var(--accent); background: none; } .proc-detail-tabs .tab:hover { color: var(--text); } .proc-detail-view { padding: 0; } .proc-detail-table { font-size: 0.78rem; } .proc-detail-table th { background: var(--surface-2); } /* ===== Packet Table ===== */ .packet-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; } .packet-table th { text-align: left; padding: 0.5rem 0.75rem; background: var(--surface); border-bottom: 1px solid var(--border-strong); color: var(--text-muted); font-weight: 500; position: sticky; top: 0; } .packet-table td { padding: 0.35rem 0.75rem; border-bottom: 1px solid var(--border); } .packet-table tr { cursor: pointer; transition: background 0.1s; } .packet-table tbody tr:hover { background: var(--surface-2); } .packet-table tr.plane-control { } .packet-table tr.plane-user { color: var(--plane-up); } .proto-label { display: inline-block; padding: 0.1rem 0.4rem; border-radius: 3px; background: var(--surface-2); font-size: 0.75rem; } .plane-label { display: inline-block; padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.7rem; text-transform: uppercase; } .plane-label.plane-control { background: color-mix(in srgb, var(--plane-cp) 14%, transparent); color: var(--plane-cp); } .plane-label.plane-user { background: color-mix(in srgb, var(--plane-up) 14%, transparent); color: var(--plane-up); } .plane-label.plane-neutral { background: var(--surface-2); color: var(--text-muted); } .muted { color: var(--text-faint); } /* ===== Pagination ===== */ .pagination { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1rem; padding: 0.75rem; } .page-info { color: var(--text-muted); font-size: 0.85rem; } /* ===== Mermaid / Sequence ===== */ .mermaid-container { background: var(--surface-2); border-radius: 8px; padding: 1rem; overflow-x: auto; min-height: 200px; } .mermaid-container svg { max-width: 100%; } .mermaid-src { font-size: 0.8rem; color: var(--text-muted); white-space: pre-wrap; } /* ===== Packet Detail Modal ===== */ .packet-modal { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: center; justify-content: center; z-index: 1000; } .packet-modal-content { background: var(--surface); border-radius: 8px; max-width: 900px; width: 90%; max-height: 80vh; overflow: auto; box-shadow: var(--shadow); } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-strong); } .modal-header h3 { font-size: 1rem; } .packet-detail-json { padding: 1rem 1.25rem; font-size: 0.75rem; font-family: var(--font-mono); white-space: pre-wrap; word-break: break-all; color: var(--text-muted); } /* Section tabs removed — replaced by sidebar */ /* ===== Flow Cards ===== */ #flows-container { display: flex; flex-direction: column; gap: 4px; } .flow-card-wrapper { background: var(--surface); border-radius: 8px; overflow: hidden; border: 1px solid var(--border); transition: border-color 0.2s; } .flow-card-wrapper:has(.flow-card-header.expanded) { border-color: var(--border-strong); } .flow-card-header { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 1rem; cursor: pointer; border-left: 3px solid var(--border-strong); transition: background 0.15s; } .flow-card-header:hover { background: var(--surface-2); } .flow-card-header.expanded { background: var(--surface-2); } .flow-card-header.status-success { border-left-color: var(--success); } .flow-card-header.status-failure { border-left-color: var(--danger); } .flow-card-header.status-partial { border-left-color: var(--pending); } .flow-card-header.status-incomplete { border-left-color: var(--neutral); } .flow-card-header.status-timeout { border-left-color: var(--warn); } .flow-card-header.expanded .proc-card-expand-icon { transform: rotate(90deg); } /* Interface badges in procedure tables */ .interface-badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 3px; background: color-mix(in srgb, var(--plane-cp) 14%, transparent); color: var(--plane-cp); font-size: 0.75rem; font-weight: 600; } /* Status row coloring in flow procedure table */ .status-row-success td:first-child { border-left: 3px solid var(--success); } .status-row-failure td:first-child { border-left: 3px solid var(--danger); } .status-row-timeout td:first-child { border-left: 3px solid var(--warn); } .status-row-incomplete td:first-child { border-left: 3px solid var(--neutral); } /* Flow diagram container */ .flow-diagram { min-height: 300px; } .flow-diagram svg { max-width: none; } /* ===== Flow Drill-Down: Procedure List ===== */ .flow-proc-list { display: flex; flex-direction: column; gap: 2px; padding: 0.5rem; } .flow-proc-item { background: var(--surface-2); border-radius: 6px; overflow: hidden; border: 1px solid var(--border); } .flow-proc-header { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; cursor: pointer; border-left: 3px solid var(--border-strong); transition: background 0.15s; font-size: 0.85rem; } .flow-proc-header:hover { background: var(--surface-3); } .flow-proc-header.expanded { background: var(--surface-3); } .flow-proc-header.expanded .proc-card-expand-icon { transform: rotate(90deg); } .flow-proc-header.status-success { border-left-color: var(--success); } .flow-proc-header.status-failure { border-left-color: var(--danger); } .flow-proc-header.status-timeout { border-left-color: var(--warn); } .flow-proc-header.status-incomplete { border-left-color: var(--neutral); } .flow-proc-idx { color: var(--text-faint); font-size: 0.75rem; min-width: 1.5rem; text-align: center; } .flow-proc-name { color: var(--text); white-space: nowrap; min-width: 140px; } .flow-proc-ne { color: var(--text-muted); font-size: 0.8rem; white-space: nowrap; } .flow-proc-dur { color: var(--text-muted); font-size: 0.8rem; white-space: nowrap; } .flow-proc-msgs { color: var(--text-faint); font-size: 0.75rem; white-space: nowrap; } /* Messages panel inside procedure */ .flow-proc-messages { border-top: 1px solid var(--border); padding: 0.5rem; background: var(--surface-inset); animation: slideDown 0.15s ease-out; } .flow-msg-table { font-size: 0.78rem; } .flow-msg-table th { background: var(--surface-2); } .flow-msg-row { cursor: pointer; } .flow-msg-row:hover { background: var(--surface-3) !important; color: var(--accent); } /* ===== RCA (Root Cause Analysis) ===== */ .rca-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1rem; background: var(--surface-2); border-bottom: 1px solid var(--border); } .rca-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 1rem; border: 1px solid var(--accent-strong); border-radius: 6px; background: color-mix(in srgb, var(--accent-strong) 14%, transparent); color: var(--accent); cursor: pointer; font-size: 0.85rem; font-weight: 500; font-family: var(--font-sans); transition: background 0.2s, border-color 0.2s; } .rca-btn:hover { background: color-mix(in srgb, var(--accent-strong) 24%, transparent); border-color: var(--accent); } .rca-btn:disabled { opacity: 0.7; cursor: wait; } .rca-btn-loading { border-color: var(--accent-strong); } .rca-model-select { background: var(--surface); color: var(--accent); border: 1px solid var(--accent-strong); border-radius: 6px; padding: 0.4rem 0.6rem; font-size: 0.8rem; cursor: pointer; outline: none; font-family: var(--font-sans); } .rca-model-select:focus { border-color: var(--accent); } .rca-model-select optgroup { color: var(--text-muted); background: var(--surface); } .rca-model-select option { color: var(--text); background: var(--surface); } .rca-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--accent-strong); border-top-color: transparent; border-radius: 50%; animation: rcaSpin 0.8s linear infinite; } @keyframes rcaSpin { to { transform: rotate(360deg); } } .rca-panel { margin: 0; padding: 1rem; background: var(--surface-inset); border-bottom: 1px solid var(--border); border-left: 3px solid var(--accent-strong); } .rca-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); } .rca-header-right { display: flex; align-items: center; gap: 0.5rem; } .rca-export-btn { display: inline-block; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.7rem; font-weight: 600; text-decoration: none; background: var(--surface-2); color: var(--accent); border: 1px solid var(--border-strong); transition: background 0.15s; } .rca-export-btn:hover { background: var(--surface-3); } .rca-title { font-weight: 600; font-size: 0.95rem; color: var(--accent); } .rca-powered { font-size: 0.7rem; color: var(--text-faint); } .rca-cached-badge { display: inline-block; padding: 0.1rem 0.4rem; margin-left: 0.5rem; background: var(--surface-2); border-radius: 3px; font-size: 0.7rem; color: var(--text-muted); font-weight: 400; } .rca-loading-msg { color: var(--accent); font-size: 0.85rem; display: flex; align-items: center; gap: 0.5rem; } .rca-loading-msg::before { content: ''; display: inline-block; width: 14px; height: 14px; border: 2px solid var(--accent-strong); border-top-color: transparent; border-radius: 50%; animation: rcaSpin 0.8s linear infinite; } .rca-error { color: var(--danger); font-size: 0.85rem; padding: 0.5rem; background: color-mix(in srgb, var(--danger) 10%, transparent); border-radius: 4px; } /* RCA content (fallback markdown) */ .rca-content { font-size: 0.85rem; line-height: 1.7; color: var(--text); padding: 0.5rem 0; } .rca-content p { margin: 0.5rem 0; } .rca-content strong { color: var(--text); } .rca-inline-code { background: var(--surface-2); padding: 0.1rem 0.35rem; border-radius: 3px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent); } /* === RCA Structured Output Cards === */ /* Parameters card */ .rca-params-card { border-radius: 8px; padding: 1rem; margin-bottom: 0.75rem; background: var(--surface-2); border: 1px solid var(--border-strong); } .rca-params-success { border-left: 4px solid var(--success); } .rca-params-failure { border-left: 4px solid var(--danger); } .rca-params-timeout { border-left: 4px solid var(--warn); } .rca-params-partial { border-left: 4px solid var(--pending); } .rca-params-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.6rem; } .rca-param { display: flex; flex-direction: column; gap: 0.15rem; } .rca-param-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .rca-param-value { font-size: 0.85rem; color: var(--text); font-family: var(--font-mono); word-break: break-all; } .rca-status-success { color: var(--success); font-weight: 700; } .rca-status-failure { color: var(--danger); font-weight: 700; } .rca-status-timeout { color: var(--warn); font-weight: 700; } .rca-status-partial { color: var(--pending); font-weight: 700; } /* Verdict banner */ .rca-verdict { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 0.75rem; font-size: 0.9rem; font-weight: 500; } .rca-verdict-ok { background: color-mix(in srgb, var(--success) 10%, transparent); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); } .rca-verdict-issue { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); } .rca-verdict-icon { font-size: 1.2rem; } /* Story / Analysis section */ .rca-story-section { padding: 1rem; margin-bottom: 0.75rem; background: var(--surface-2); border-radius: 8px; border: 1px solid var(--border); } .rca-section-title { font-size: 0.75rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.75rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); } .rca-story-section p { font-size: 0.88rem; line-height: 1.8; color: var(--text); margin: 0 0 0.75rem; text-align: justify; } .rca-story-section p:last-child { margin-bottom: 0; } .rca-story-section strong { color: var(--text); } /* Highlighted inline elements */ .rca-spec-ref { color: var(--accent-2); font-weight: 500; background: color-mix(in srgb, var(--accent-2) 8%, transparent); padding: 0.05rem 0.3rem; border-radius: 3px; } .rca-cause-highlight { color: var(--warn); font-weight: 500; background: color-mix(in srgb, var(--warn) 10%, transparent); padding: 0.05rem 0.3rem; border-radius: 3px; font-family: var(--font-mono); font-size: 0.82rem; } /* Probable Causes section */ .rca-causes-section { padding: 1rem; margin-bottom: 0.75rem; background: var(--surface-2); border-radius: 8px; border: 1px solid var(--border); } .rca-cause-item { padding: 0.6rem 0; border-bottom: 1px solid var(--border); } .rca-cause-item:last-child { border-bottom: none; } .rca-cause-header { display: flex; align-items: baseline; gap: 0.6rem; } .rca-cause-pct { font-size: 1.1rem; font-weight: 800; min-width: 3rem; font-family: var(--font-mono); } .rca-cause-title { font-size: 0.88rem; font-weight: 600; color: var(--text); } .rca-cause-bar-bg { height: 4px; background: var(--surface-3); border-radius: 2px; margin: 0.3rem 0; overflow: hidden; } .rca-cause-bar { height: 100%; border-radius: 2px; transition: width 0.5s ease; } .rca-cause-reasoning { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; margin-top: 0.15rem; padding-left: 3.6rem; } /* 3GPP Specs section */ .rca-specs-section { padding: 1rem; margin-bottom: 0.75rem; background: var(--surface-2); border-radius: 8px; border: 1px solid var(--border); } .rca-spec-item { display: flex; gap: 0.5rem; align-items: baseline; padding: 0.35rem 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; } .rca-spec-item:last-child { border-bottom: none; } .rca-spec-name { color: var(--accent-2); font-weight: 600; white-space: nowrap; font-family: var(--font-mono); font-size: 0.82rem; } .rca-spec-desc { color: var(--text-muted); } /* Actions section */ .rca-actions-section { padding: 1rem; margin-bottom: 0.5rem; background: var(--surface-2); border-radius: 8px; border: 1px solid var(--border); } .rca-actions-list { display: flex; flex-direction: column; gap: 0.4rem; } .rca-action-item { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.85rem; color: var(--text); padding: 0.4rem 0.5rem; border-radius: 6px; background: var(--surface); } .rca-action-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); font-size: 0.75rem; font-weight: 700; flex-shrink: 0; } /* ===== Auth Pages ===== */ .auth-container { display: flex; justify-content: center; align-items: center; min-height: 60vh; } .auth-card { background: var(--surface); border-radius: 12px; padding: 2.5rem; width: 100%; max-width: 420px; border: 1px solid var(--border); box-shadow: var(--shadow); } .auth-logo { display: flex; align-items: center; gap: 0.6rem; justify-content: center; margin-bottom: 1.25rem; flex-direction: column; } .auth-logo-text { font-size: 1.8rem; font-weight: 800; color: var(--text); letter-spacing: -0.5px; } .auth-logo-lens { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .auth-logo-by { display: block; text-align: center; color: var(--text-faint); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.4px; margin-top: -0.4rem; } .auth-card h1 { font-size: 1.5rem; margin-bottom: 0.25rem; text-align: center; } .auth-subtitle { color: var(--text-muted); margin-bottom: 1.5rem; text-align: center; } .auth-form { display: flex; flex-direction: column; gap: 1rem; } .form-group { display: flex; flex-direction: column; gap: 0.3rem; } .form-group label { font-size: 0.85rem; color: var(--text-muted); font-weight: 500; } .form-group input { background: var(--surface-inset); border: 1px solid var(--border-strong); border-radius: 6px; padding: 0.6rem 0.75rem; color: var(--text); font-size: 0.9rem; font-family: var(--font-sans); outline: none; transition: border-color 0.2s; } .form-group input::placeholder { color: var(--text-faint); } .form-group input:focus { border-color: var(--accent); } .form-group select { background: var(--surface-inset); border: 1px solid var(--border-strong); border-radius: 6px; padding: 0.6rem 0.75rem; color: var(--text); font-size: 0.9rem; font-family: var(--font-sans); outline: none; } .form-group select:focus { border-color: var(--accent); } .btn-full { width: 100%; text-align: center; margin-top: 0.5rem; } .auth-switch { text-align: center; margin-top: 1.5rem; color: var(--text-muted); font-size: 0.85rem; } .auth-switch a { color: var(--accent); text-decoration: none; } .auth-switch a:hover { text-decoration: underline; } /* Generic links */ a { color: var(--accent); } /* Flash messages */ .flash-messages { margin-bottom: 1rem; } .flash { padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.85rem; margin-bottom: 0.5rem; } .flash-error { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); } .flash-success { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); } /* ===== My Sessions Page ===== */ .sessions-container { max-width: 1200px; } .sessions-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; } .sessions-header h1 { font-size: 1.3rem; } .sessions-table td { vertical-align: middle; } .btn-delete { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); } .btn-delete:hover { background: color-mix(in srgb, var(--danger) 20%, transparent); } .session-actions { display: flex; gap: 0.4rem; align-items: center; } .empty-state { text-align: center; padding: 3rem; background: var(--surface); border-radius: 12px; border: 1px solid var(--border); } .empty-state p { margin-bottom: 1rem; } /* ===== Session Diagnosis Panel ===== */ .diagnosis-bar { background: var(--surface); border-radius: 8px; border: 1px solid var(--border); margin-bottom: 1.25rem; overflow: hidden; } .diagnosis-trigger { display: flex; align-items: center; gap: 1rem; padding: 0.85rem 1.25rem; } .diagnose-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 1rem; border-radius: 6px; border: 1px solid var(--pending); background: color-mix(in srgb, var(--pending) 8%, transparent); color: var(--pending); font-size: 0.85rem; font-weight: 600; cursor: pointer; font-family: var(--font-sans); transition: background 0.15s, color 0.15s; } .diagnose-btn:hover { background: color-mix(in srgb, var(--pending) 16%, transparent); } .diagnose-btn:disabled { opacity: 0.6; cursor: not-allowed; } .diagnose-btn-loading { opacity: 0.8; } .diagnose-hint { font-size: 0.8rem; color: var(--text-muted); } .diagnosis-panel { border-top: 1px solid var(--border); padding: 1.25rem; } .diag-loading { color: var(--text-muted); font-size: 0.85rem; text-align: center; padding: 1rem 0; } .diag-error { color: var(--danger); font-size: 0.85rem; padding: 0.5rem; background: color-mix(in srgb, var(--danger) 10%, transparent); border-radius: 6px; } /* Verdict banner */ .diag-verdict { display: flex; align-items: flex-start; gap: 0.85rem; padding: 0.9rem 1.1rem; border-radius: 8px; margin-bottom: 1rem; border-left: 4px solid; } .diag-verdict-correlated { background: color-mix(in srgb, var(--danger) 8%, transparent); border-left-color: var(--danger); } .diag-verdict-mixed { background: color-mix(in srgb, var(--warn) 8%, transparent); border-left-color: var(--warn); } .diag-verdict-independent { background: color-mix(in srgb, var(--accent) 8%, transparent); border-left-color: var(--accent); } .diag-verdict-icon { font-size: 1.3rem; line-height: 1; flex-shrink: 0; margin-top: 0.1rem; } .diag-verdict-label { font-weight: 700; font-size: 0.9rem; color: var(--text); margin-bottom: 0.3rem; } .diag-verdict-summary { font-size: 0.85rem; color: var(--text); line-height: 1.5; } /* Sections */ .diag-section { margin-bottom: 1rem; } .diag-section-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); margin-bottom: 0.6rem; } /* Causes */ .diag-causes { display: flex; flex-direction: column; gap: 0.6rem; } .diag-cause-item { } .diag-cause-row { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.25rem; } .diag-cause-pct { font-weight: 700; font-size: 0.85rem; min-width: 2.5rem; } .diag-cause-title { font-size: 0.85rem; color: var(--text); font-weight: 600; } .diag-cause-bar-bg { height: 4px; background: var(--surface-3); border-radius: 2px; overflow: hidden; margin-bottom: 0.3rem; } .diag-cause-bar { height: 100%; border-radius: 2px; transition: width 0.4s ease; } .diag-cause-desc { font-size: 0.8rem; color: var(--text-muted); line-height: 1.45; } /* Groups */ .diag-groups { display: flex; flex-direction: column; gap: 0.6rem; } .diag-group { background: var(--surface-2); border-radius: 6px; border: 1px solid var(--border); padding: 0.65rem 0.85rem; } .diag-group-title { font-size: 0.82rem; font-weight: 700; color: var(--text); margin-bottom: 0.4rem; } .diag-group-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; } .diag-group-items li { font-size: 0.8rem; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; } .diag-item-name { color: var(--accent); font-weight: 600; } .diag-item-reason { color: var(--text-muted); } /* Specs */ .diag-specs { display: flex; flex-direction: column; gap: 0.4rem; } .diag-spec-item { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.8rem; } .diag-spec-ref { color: var(--accent); font-weight: 600; white-space: nowrap; } .diag-spec-desc { color: var(--text-muted); } /* Actions */ .diag-actions { margin: 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: 0.35rem; } .diag-actions li { font-size: 0.85rem; color: var(--text); line-height: 1.5; } /* Drill-down hint */ .diag-drilldown-hint { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border); font-size: 0.78rem; color: var(--text-faint); text-align: center; } /* ===== Search Bar ===== */ .search-bar-wrap { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .search-input-wrap { position: relative; display: flex; align-items: center; } .search-icon { position: absolute; left: 0.6rem; color: var(--text-faint); pointer-events: none; flex-shrink: 0; } .search-input { background: var(--surface-inset); border: 1px solid var(--border); border-radius: 6px; padding: 0.35rem 2rem 0.35rem 2rem; color: var(--text); font-size: 0.82rem; outline: none; font-family: var(--font-sans); width: 240px; transition: border-color 0.2s, width 0.2s; } .search-input:focus { border-color: var(--accent); width: 300px; } .search-input::placeholder { color: var(--text-faint); } .search-clear { position: absolute; right: 0.5rem; background: none; border: none; color: var(--text-muted); font-size: 1rem; cursor: pointer; line-height: 1; padding: 0; display: flex; align-items: center; transition: color 0.15s; } .search-clear:hover { color: var(--text); } /* ===== Filter Presets ===== */ .preset-group { display: flex; align-items: center; gap: 0.35rem; } .preset-btn { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.6rem; border-radius: 5px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-muted); font-size: 0.75rem; cursor: pointer; font-family: var(--font-sans); transition: background 0.15s, color 0.15s, border-color 0.15s; } .preset-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); } .preset-list { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; } .preset-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.55rem; border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); font-size: 0.73rem; cursor: pointer; transition: background 0.15s; } .preset-chip:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); } .preset-name { color: var(--accent); font-weight: 500; } .preset-del { background: none; border: none; color: var(--text-muted); font-size: 0.75rem; cursor: pointer; padding: 0; line-height: 1; margin-left: 1px; transition: color 0.15s; } .preset-del:hover { color: var(--danger); } /* ===== Filters Row ===== */ .filters-row { margin-bottom: 0.75rem; padding: 0.5rem 0; } /* ===== Anomaly Export Button ===== */ .anom-export-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: 4px; font-size: 0.72rem; font-weight: 600; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border-strong); cursor: pointer; font-family: var(--font-sans); transition: background 0.15s, color 0.15s; } .anom-export-btn:hover { background: var(--surface-3); color: var(--text); } /* ===== Timeline Section ===== */ .tl-wrap { background: var(--surface); border-radius: 8px; border: 1px solid var(--border); overflow: hidden; } .tl-controls { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 1rem; background: var(--surface-2); border-bottom: 1px solid var(--border); flex-wrap: wrap; } .tl-controls-group { display: flex; align-items: center; gap: 0.35rem; } .tl-controls-label { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; } .tl-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.3rem 0.6rem; border-radius: 5px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-muted); font-size: 0.78rem; cursor: pointer; font-family: var(--font-sans); transition: background 0.15s, color 0.15s; white-space: nowrap; } .tl-btn:hover { background: var(--surface-2); color: var(--text); } .tl-btn.active { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); } .tl-info { font-size: 0.75rem; color: var(--text-muted); margin-left: auto; white-space: nowrap; } .tl-canvas-wrap { position: relative; overflow: hidden; width: 100%; } .tl-canvas { display: block; width: 100%; cursor: grab; } .tl-canvas:active { cursor: grabbing; } .tl-loading { padding: 3rem; text-align: center; color: var(--text-faint); font-size: 0.9rem; } /* Timeline floating tooltip */ .tl-tooltip { position: absolute; pointer-events: none; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; padding: 0.65rem 0.85rem; font-size: 0.78rem; min-width: 180px; max-width: 260px; box-shadow: var(--shadow); z-index: 50; display: none; } .tl-tip-title { font-weight: 700; color: var(--text); margin-bottom: 0.4rem; font-size: 0.82rem; word-break: break-word; } .tl-tip-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-bottom: 0.15rem; } .tl-tip-label { color: var(--text-muted); } .tl-tip-val { color: var(--text); font-family: var(--font-mono); font-size: 0.75rem; } .tl-tip-success { color: var(--success) !important; font-weight: 600; } .tl-tip-failure { color: var(--danger) !important; font-weight: 600; } .tl-tip-timeout { color: var(--warn) !important; font-weight: 600; } .tl-tip-in_progress { color: var(--pending) !important; font-weight: 600; } .tl-tip-incomplete { color: var(--neutral) !important; font-weight: 600; } /* ===== Statistics Section ===== */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; } .chart-card { background: var(--surface); border-radius: 8px; border: 1px solid var(--border); padding: 1rem 1.25rem; } .chart-title { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.9rem; } /* Donut chart */ .chart-donut-wrap { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } .chart-donut-wrap svg { flex-shrink: 0; overflow: visible; } .chart-legend { display: flex; flex-direction: column; gap: 0.35rem; flex: 1; min-width: 100px; } .chart-legend-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; } .chart-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .chart-legend-label { color: var(--text); flex: 1; min-width: 0; } .chart-legend-val { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.75rem; white-space: nowrap; } /* Horizontal bar chart */ .chart-bars { display: flex; flex-direction: column; gap: 0.5rem; } .chart-bar-row { display: flex; align-items: center; gap: 0.5rem; } .chart-bar-label { width: 120px; min-width: 80px; max-width: 140px; font-size: 0.78rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; } .chart-bar-track { flex: 1; height: 10px; background: var(--surface-3); border-radius: 5px; overflow: hidden; } .chart-bar-fill { height: 100%; border-radius: 5px; transition: width 0.5s ease; background: var(--accent); } .chart-bar-fill.color-success { background: var(--success); } .chart-bar-fill.color-failure { background: var(--danger); } .chart-bar-fill.color-timeout { background: var(--warn); } .chart-bar-fill.color-accent { background: var(--accent-2); } .chart-bar-fill.color-purple { background: var(--accent); } .chart-bar-fill.color-yellow { background: var(--pending); } .chart-bar-count { font-size: 0.73rem; color: var(--text-muted); font-family: var(--font-mono); min-width: 2.5rem; text-align: right; } /* Empty state for charts */ .chart-empty { color: var(--text-faint); font-size: 0.85rem; text-align: center; padding: 1.5rem 0; } /* ===== Network Architecture Page (moved from inline