/* ============================================================================
   Rubix Vision — design system
   A single source of truth for theme tokens, base elements and the reusable
   component classes (rv-*) the whole console is built from. The look is a
   faithful PAN-OS / Panorama copy (mirroring the Rubix-Firewall webui): charcoal
   #19222e chrome carrying uppercase primary tab tiles, a brand strip beneath it,
   a light-gray tree sidebar, white squared-corner panels with title bands,
   26px-row zebra tables, Lato at 12.5px, and pill buttons. PAN-OS's gold (and
   the firewall's blue) accent is replaced by the Rubix signal mint #5ee6c4.
   Light is the native PAN-OS theme; dark is the same disciplined derivation the
   firewall console ships, anchored on the already-dark chrome.
   ============================================================================ */

@font-face { font-family: Lato; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Lato-Regular.woff2') format('woff2'); }
@font-face { font-family: Lato; font-style: normal; font-weight: 600 700; font-display: swap; src: url('fonts/Lato-Bold.woff2') format('woff2'); }

:root,
[data-theme="light"] {
    /* accent family — mint in place of PAN-OS gold / firewall blue */
    --rv-accent:        #5ee6c4;               /* signal mint — brand strip, active states, bars */
    --rv-accent-fg:     #06231d;               /* text ON a mint fill (mint is light, so dark ink) */
    --rv-accent-hover:  #4bdcb7;
    --rv-accent-active: #3bcda7;
    --rv-accent-strong: #0a7d60;               /* AA mint-teal: links / accent text on light panels */
    --rv-accent-soft:   #ddf5ee;               /* mint chip / wash background */
    --rv-accent-dim:    #a9e6d6;               /* muted mint (progress trails) */
    --rv-accent-2:      #346a88;               /* PAN-OS steel blue — secondary series */
    --rv-violet:        #7d44a0;               /* tertiary series (PAN-OS service purple) */
    --rv-link:          #0a7d60;
    --rv-focus-ring:    #5ee6c4;

    /* canvas + panels — PAN-OS light grays */
    --rv-bg:            #f2f3f4;               /* app canvas */
    --rv-surface:       #ffffff;               /* cards / panels */
    --rv-surface-2:     #edeeee;               /* subtle raised / hover */
    --rv-titlebar:      #dadcde;               /* card title band */
    --rv-sidebar:       #f9f9f9;               /* left tree */
    --rv-sidebar-2:     #f9f9f9;
    --rv-nav-sel:       #dadcde;               /* selected tree row (gray, not accent) */
    --rv-topbar:        #19222e;               /* charcoal chrome — same in both themes */

    --rv-text:          #2a3138;
    --rv-text-body:     #49535b;
    --rv-text-muted:    #6b7580;
    --rv-text-faint:    #999999;
    --rv-text-invert:   #ffffff;

    --rv-border:        #e4e6e8;
    --rv-border-strong: #c8cbce;
    --rv-th-rule:       #a4a9ad;               /* rule under table header band */
    --rv-input-border:  #b6babd;
    --rv-input-bg:      #ffffff;
    --rv-track:         #dadcde;

    /* chrome (charcoal header) — identical in both themes */
    --rv-header-bg:     #19222e;
    --rv-header-fg:     #ffffff;
    --rv-tab-fg:        #a2a9b0;
    --rv-tab-fg-active: #ffffff;
    --rv-tab-hover:     rgba(255, 255, 255, .06);
    --rv-tab-active-bg: #2f3742;

    /* status — PAN-OS greens/ambers/reds (fg variants are AA on light) */
    --rv-success:       #4e7a2e;
    --rv-success-dot:   #6ba243;
    --rv-success-soft:  rgba(164, 196, 81, .18);
    --rv-warning:       #8a6400;
    --rv-warning-dot:   #ffc425;
    --rv-warning-soft:  rgba(255, 196, 37, .20);
    --rv-danger:        #cd383f;
    --rv-danger-hover:  #d95b61;
    --rv-danger-soft:   rgba(205, 56, 63, .10);
    --rv-info:          #006fcc;
    --rv-info-soft:     rgba(0, 111, 204, .10);

    /* zebra — PAN-OS azure banding, mint-tinted */
    --rv-row-alt:       #eef7f4;
    --rv-row-hover:     #e3f2ed;

    --rv-chip-bg:       #edeeee;
    --rv-chip-fg:       #49535b;

    --rv-term-bg:       #131416;               /* terminal/log boxes stay dark in both themes */
    --rv-term-fg:       #dee0e3;

    --rv-scrim:         rgba(0, 0, 0, .35);

    --rv-shadow-sm: 0 0 1px rgba(25, 34, 46, .10), 0 1px 2px rgba(25, 34, 46, .06);
    --rv-shadow:    0 0 1px rgba(25, 34, 46, .10), 0 8px 24px rgba(25, 34, 46, .10);
    --rv-shadow-lg: 0 0 1px rgba(25, 34, 46, .10), 0 12px 48px rgba(25, 34, 46, .16);

    /* PAN-OS corner language: square. r2 chips, r3 cards/inputs, pill buttons. */
    --rv-radius:    3px;
    --rv-radius-sm: 2px;
    --rv-radius-lg: 3px;

    --rv-mono: ui-monospace, 'Cascadia Code', SFMono-Regular, Menlo, Consolas, monospace;

    --rv-sidebar-w: 210px;
    --rv-header-h:  44px;
    --rv-strip-h:   6px;
    --rv-topbar-h:  50px;                      /* legacy alias: header + strip */

    color-scheme: light;
}

[data-theme="dark"] {
    --rv-accent:        #5ee6c4;
    --rv-accent-fg:     #06231d;
    --rv-accent-hover:  #7cebd0;
    --rv-accent-active: #3bcda7;
    --rv-accent-strong: #5ee6c4;               /* mint itself is AA on dark panels */
    --rv-accent-soft:   #12362e;
    --rv-accent-dim:    #2a4f47;
    --rv-accent-2:      #4e88a8;
    --rv-violet:        #a97fc9;
    --rv-link:          #6fe9cb;
    --rv-focus-ring:    #5ee6c4;

    --rv-bg:            #10161d;
    --rv-surface:       #1a222c;
    --rv-surface-2:     #202832;
    --rv-titlebar:      #232b35;
    --rv-sidebar:       #141b23;
    --rv-sidebar-2:     #141b23;
    --rv-nav-sel:       #2a333e;
    --rv-topbar:        #19222e;

    --rv-text:          #d6dade;
    --rv-text-body:     #c3c9cf;
    --rv-text-muted:    #9aa4ad;
    --rv-text-faint:    #6b7580;
    --rv-text-invert:   #ffffff;

    --rv-border:        #232c36;
    --rv-border-strong: #3a444f;
    --rv-th-rule:       #4a545f;
    --rv-input-border:  #3a444f;
    --rv-input-bg:      #121a22;
    --rv-track:         #3a444f;

    --rv-header-bg:     #19222e;
    --rv-header-fg:     #ffffff;
    --rv-tab-fg:        #a2a9b0;
    --rv-tab-fg-active: #ffffff;
    --rv-tab-hover:     rgba(255, 255, 255, .06);
    --rv-tab-active-bg: #2f3742;

    --rv-success:       #a4c451;
    --rv-success-dot:   #8ab55e;
    --rv-success-soft:  rgba(164, 196, 81, .15);
    --rv-warning:       #ffc425;
    --rv-warning-dot:   #ffc425;
    --rv-warning-soft:  rgba(255, 196, 37, .14);
    --rv-danger:        #e05a61;
    --rv-danger-hover:  #ea7d83;
    --rv-danger-soft:   rgba(205, 56, 63, .18);
    --rv-info:          #4fa8e8;
    --rv-info-soft:     rgba(79, 168, 232, .14);

    --rv-row-alt:       #151e1e;
    --rv-row-hover:     #1a332e;

    --rv-chip-bg:       #232b35;
    --rv-chip-fg:       #c3c9cf;

    --rv-term-bg:       #0c1116;
    --rv-term-fg:       #d6dade;

    --rv-scrim:         rgba(0, 0, 0, .6);

    --rv-shadow-sm: 0 0 1px rgba(255, 255, 255, .08), 0 1px 2px rgba(0, 0, 0, .5);
    --rv-shadow:    0 0 1px rgba(255, 255, 255, .08), 0 8px 24px rgba(0, 0, 0, .85);
    --rv-shadow-lg: 0 0 1px rgba(255, 255, 255, .08), 0 12px 48px rgba(0, 0, 0, .9);

    color-scheme: dark;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    font-family: Lato, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12.5px;
    background: var(--rv-bg);
    color: var(--rv-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--rv-link); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { color: var(--rv-text); font-weight: 700; margin: 0 0 .4em; }
h1 { font-size: 1.35rem; }
h1:focus { outline: none; }

code, pre, .rv-mono { font-family: var(--rv-mono); }

:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--rv-focus-ring); }
::placeholder { color: var(--rv-text-faint); opacity: 1; }

/* Thin squared scrollbars — PAN-OS corner language. */
* { scrollbar-width: thin; scrollbar-color: var(--rv-track) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--rv-track); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--rv-text-faint); }
::-webkit-scrollbar-track { background: transparent; }

/* ── Page scaffolding ──────────────────────────────────────────────────── */
.rv-page { padding: 18px 32px 48px; max-width: 1700px; }

.rv-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.rv-page-title { font-size: 1.3rem; font-weight: 700; margin: 0; }
.rv-page-sub { color: var(--rv-text-muted); margin: 3px 0 0; font-size: .95rem; }
.rv-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.rv-breadcrumb { display: flex; gap: 6px; align-items: center; color: var(--rv-text-faint); font-size: .9rem; margin-bottom: 6px; }
.rv-breadcrumb a { color: var(--rv-text-muted); }

/* ── Cards — PAN-OS widget: bordered r3 panel with a gray title band ───── */
.rv-card { background: var(--rv-surface); border: 1px solid var(--rv-border-strong); border-radius: var(--rv-radius); overflow: hidden; min-width: 0; }
.rv-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; background: var(--rv-titlebar); border-bottom: 1px solid var(--rv-border-strong); font-weight: 600; }
.rv-card-title { font-size: 1.05rem; font-weight: 600; margin: 0; color: var(--rv-text); }
.rv-card-body { padding: 14px 16px; }
.rv-card-body--flush { padding: 0; }

/* ── KPI tiles ─────────────────────────────────────────────────────────── */
.rv-kpi { display: flex; flex-direction: column; justify-content: center; gap: 3px; height: 100%; }
.rv-kpi-value { font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rv-kpi-label { color: var(--rv-text-muted); font-size: .88rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.rv-kpi-icon { width: 34px; height: 34px; border-radius: var(--rv-radius); display: grid; place-items: center; background: var(--rv-accent-soft); color: var(--rv-accent-strong); margin-bottom: 5px; }
.rv-kpi-value--accent { color: var(--rv-accent-strong); }

/* ── Buttons — PAN-OS pills: mint primary, bordered panel secondary ────── */
.rv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; height: 28px; font-size: 1rem; font-weight: 600; letter-spacing: .25px; border-radius: 999px; border: 1px solid var(--rv-border-strong); background: var(--rv-surface); color: var(--rv-text-body); cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease; white-space: nowrap; line-height: 1; }
.rv-btn:hover { background: var(--rv-surface-2); text-decoration: none; }
.rv-btn:disabled { opacity: .45; cursor: not-allowed; }
.rv-btn--primary { background: var(--rv-accent); border-color: var(--rv-accent); color: var(--rv-accent-fg); }
.rv-btn--primary:hover:not(:disabled) { background: var(--rv-accent-hover); border-color: var(--rv-accent-hover); }
.rv-btn--primary:active:not(:disabled) { background: var(--rv-accent-active); border-color: var(--rv-accent-active); }
.rv-btn--ghost { background: transparent; border-color: transparent; color: var(--rv-link); }
.rv-btn--ghost:hover { background: var(--rv-surface-2); color: var(--rv-link); }
.rv-btn--danger { background: var(--rv-danger); border-color: var(--rv-danger); color: #fff; }
.rv-btn--danger:hover:not(:disabled) { background: var(--rv-danger-hover); border-color: var(--rv-danger-hover); }
.rv-btn--sm { padding: 0 10px; height: 24px; font-size: .95rem; }
.rv-btn--icon { padding: 0; width: 28px; }
.rv-btn svg { width: 15px; height: 15px; }

/* ── Form controls — bordered fields, mint border on focus, no ring ────── */
.rv-input, .rv-select, .rv-textarea { width: 100%; height: 28px; padding: 0 9px; font-size: 1rem; font-family: inherit; color: var(--rv-text); background: var(--rv-input-bg); border: 1px solid var(--rv-input-border); border-radius: var(--rv-radius); transition: border-color .12s; }
.rv-input:focus, .rv-select:focus, .rv-textarea:focus { outline: none; border-color: var(--rv-accent); box-shadow: none; }
.rv-textarea { resize: vertical; min-height: 90px; height: auto; padding: 6px 9px; }
.rv-label { display: block; font-size: .95rem; font-weight: 600; color: var(--rv-text-muted); margin-bottom: 4px; }
.rv-field { margin-bottom: 12px; }
.rv-search { position: relative; }
.rv-search svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--rv-text-faint); pointer-events: none; }
.rv-search .rv-input { padding-left: 30px; }

/* Selects: themed chevron replaces the OS arrow. */
select.rv-select, .rv-select select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'><path d='M1 1l4 4 4-4' stroke='%236b7580' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px;
}
[data-theme="dark"] select.rv-select, [data-theme="dark"] .rv-select select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'><path d='M1 1l4 4 4-4' stroke='%239aa4ad' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* ── Badges / chips — PAN-OS: square r2, bordered ──────────────────────── */
.rv-badge { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px; font-size: .92rem; font-weight: 600; border-radius: var(--rv-radius-sm); border: 1px solid var(--rv-border-strong); background: var(--rv-chip-bg); color: var(--rv-chip-fg); white-space: nowrap; }
.rv-badge--accent  { background: var(--rv-accent-soft); border-color: transparent; color: var(--rv-accent-strong); }
.rv-badge--success { background: var(--rv-success-soft); border-color: transparent; color: var(--rv-success); }
.rv-badge--warning { background: var(--rv-warning-soft); border-color: transparent; color: var(--rv-warning); }
.rv-badge--danger  { background: var(--rv-danger-soft);  border-color: transparent; color: var(--rv-danger); }
.rv-badge--info    { background: var(--rv-info-soft);    border-color: transparent; color: var(--rv-info); }
.rv-badge--muted   { background: var(--rv-chip-bg); border-color: var(--rv-border-strong); color: var(--rv-text-muted); }
.rv-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }

/* ── Tables — PAN-OS density: 26px rows, banded uppercase header, zebra ── */
.rv-table-wrap { overflow-x: auto; }
.rv-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.rv-table thead th { position: sticky; top: 0; z-index: 1; background: var(--rv-surface-2); text-align: left; height: 26px; font-size: .88rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--rv-text); padding: 0 8px; border-bottom: 1px solid var(--rv-th-rule); white-space: nowrap; user-select: none; }
.rv-table thead th.sortable { cursor: pointer; }
.rv-table thead th.sortable:hover { color: var(--rv-accent-strong); }
.rv-table tbody td { height: 26px; padding: 3px 8px; border-bottom: 1px solid var(--rv-border); vertical-align: middle; color: var(--rv-text-body); }
.rv-table tbody tr { transition: background .12s ease; }
.rv-table tbody tr:nth-child(even of :not(.rv-subrow)) { background: var(--rv-row-alt); }
.rv-table tbody tr:not(.rv-subrow):hover { background: var(--rv-row-hover); }
.rv-table tbody tr.clickable { cursor: pointer; }
.rv-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Tabs — PAN-OS sub-tab pattern: 3px mint underline ─────────────────── */
.rv-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rv-border-strong); margin-bottom: 16px; }
.rv-tab { padding: 6px 12px; font-weight: 600; font-size: 1rem; color: var(--rv-text-body); cursor: pointer; border: none; background: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.rv-tab:hover { color: var(--rv-text); }
.rv-tab.active { color: var(--rv-text); font-weight: 700; border-bottom-color: var(--rv-accent); }

/* ── Dashboard grid (12-col) ───────────────────────────────────────────── */
.rv-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.rv-grid > .rv-card { min-height: 0; }

/* Dashboard widgets are plain PAN-OS cards: title band, flat white body. */
.rv-dash .rv-card { height: 100%; }
.rv-dash .rv-card-title { font-size: 1.05rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--rv-text); }
.rv-dash .rv-stat-card { background: var(--rv-surface); }

/* Status LED: PAN-OS uses flat dots, no glow. */
.rv-led { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; display: inline-block; background: var(--rv-text-faint); }
.rv-led--ok   { background: var(--rv-success-dot); }
.rv-led--bad  { background: var(--rv-danger); }
.rv-led--warn { background: var(--rv-warning-dot); }
.rv-led--info { background: var(--rv-accent); }
.rv-led--idle { background: var(--rv-text-faint); }

/* Edit-mode toolbar floated over each widget. */
.rv-dash-edit { position: absolute; top: 6px; right: 8px; z-index: 5; display: flex; gap: 4px; }
.rv-dash-edit button { border: 1px solid var(--rv-border-strong); background: var(--rv-surface); color: var(--rv-text-muted); border-radius: var(--rv-radius-sm); font-size: .85rem; padding: 2px 7px; cursor: pointer; line-height: 1.4; }
.rv-dash-edit button:hover { color: var(--rv-text); border-color: var(--rv-accent); }
.rv-dash-edit .rv-dash-edit--danger:hover { color: var(--rv-danger); border-color: var(--rv-danger); }

/* ── Definition list (asset summary) ───────────────────────────────────── */
.rv-dl { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: 7px 16px; font-size: 1rem; }
.rv-dl dt { color: var(--rv-text-muted); font-weight: 600; }
.rv-dl dd { margin: 0; color: var(--rv-text-body); word-break: break-word; }

/* ── Misc ──────────────────────────────────────────────────────────────── */
.rv-empty { text-align: center; padding: 48px 20px; color: var(--rv-text-faint); }
.rv-empty svg { width: 46px; height: 46px; opacity: .5; margin-bottom: 12px; }
.rv-spinner { width: 22px; height: 22px; border: 3px solid var(--rv-border-strong); border-top-color: var(--rv-accent); border-radius: 50%; animation: rv-spin .7s linear infinite; }
@keyframes rv-spin { to { transform: rotate(360deg); } }
.rv-progress { height: 8px; border-radius: 4px; background: var(--rv-track); overflow: hidden; }
.rv-progress > span { display: block; height: 100%; background: var(--rv-accent); border-radius: 4px; transition: width .4s ease; }
.rv-muted { color: var(--rv-text-muted); }
.rv-faint { color: var(--rv-text-faint); }
.rv-divider { height: 1px; background: var(--rv-border); border: 0; margin: 14px 0; }
.rv-stack { display: flex; flex-direction: column; gap: 12px; }
.rv-row { display: flex; align-items: center; gap: 8px; }
.rv-wrap { flex-wrap: wrap; }
.rv-spacer { flex: 1 1 auto; }

/* horizontal bar chart used by breakdown widgets / reports */
.rv-bars { display: flex; flex-direction: column; gap: 7px; }
.rv-bar-row { display: grid; grid-template-columns: minmax(90px, 30%) 1fr auto; align-items: center; gap: 10px; font-size: .95rem; }
.rv-bar-track { height: 8px; border-radius: 4px; background: var(--rv-track); overflow: hidden; }
.rv-bar-fill { height: 100%; border-radius: 4px; background: var(--rv-accent); }
.rv-bar-val { font-variant-numeric: tabular-nums; color: var(--rv-text-muted); font-weight: 600; min-width: 36px; text-align: right; }

/* simple donut (conic-gradient) */
.rv-donut { --pct: 0; width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--rv-accent) calc(var(--pct) * 1%), var(--rv-track) 0); }
.rv-donut > div { width: 78px; height: 78px; border-radius: 50%; background: var(--rv-surface); display: grid; place-items: center; font-weight: 700; }

/* toast / inline alert — PAN-OS flat r2 bars */
.rv-alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--rv-radius-sm); font-size: 1rem; border: 1px solid var(--rv-border-strong); background: var(--rv-surface-2); color: var(--rv-text-body); }
.rv-alert--success { background: var(--rv-success-soft); border-color: transparent; color: var(--rv-success); }
.rv-alert--warning { background: var(--rv-warning-soft); border-color: transparent; color: var(--rv-warning); }
.rv-alert--danger  { background: var(--rv-danger-soft);  border-color: transparent; color: var(--rv-danger); }
.rv-alert--info    { background: var(--rv-info-soft);    border-color: transparent; color: var(--rv-info); }

/* pagination */
.rv-pager { display: flex; align-items: center; gap: 6px; justify-content: flex-end; padding: 10px 14px; font-size: .95rem; color: var(--rv-text-muted); }

/* topbar search typeahead (drawn by app.js under the [data-rv-suggest] input) */
.rv-suggest { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 80; background: var(--rv-surface); border: 1px solid var(--rv-border-strong); border-radius: var(--rv-radius); box-shadow: var(--rv-shadow-lg); overflow: hidden; color: var(--rv-text); }
.rv-suggest-item { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 10px; color: var(--rv-text); font-size: 1rem; text-decoration: none; }
.rv-suggest-item:hover { background: var(--rv-row-hover); text-decoration: none; }
.rv-suggest-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-suggest-meta { color: var(--rv-text-faint); font-family: var(--rv-mono); font-size: .88rem; white-space: nowrap; }
.rv-suggest-all { color: var(--rv-link); font-weight: 600; border-top: 1px solid var(--rv-border); }
.rv-suggest-empty { padding: 6px 10px; color: var(--rv-text-faint); font-size: 1rem; }

/* Blazor error UI (kept from template, restyled) */
.blazor-error-boundary { background: var(--rv-danger); padding: 1rem; color: white; border-radius: var(--rv-radius); }
.blazor-error-boundary::after { content: "An error has occurred."; }
#blazor-error-ui { background: var(--rv-surface); color: var(--rv-warning); border-top: 1px solid var(--rv-border-strong); bottom: 0; box-shadow: 0 -8px 24px rgba(0,0,0,.25); display: none; left: 0; padding: 0.6rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.validation-message { color: var(--rv-danger); font-size: .92rem; }

/* ============================================================================
   App shell — PAN-OS chrome: charcoal header with brand + primary tab tiles,
   mint brand strip, light tree sidebar, scrolling content.
   ============================================================================ */
.rv-shell { display: flex; flex-direction: column; min-height: 100vh; }

/* charcoal header row */
.rv-header { height: var(--rv-header-h); flex: 0 0 auto; display: flex; align-items: stretch; gap: 0; padding: 0 12px 0 16px; background: var(--rv-header-bg); color: var(--rv-header-fg); position: sticky; top: 0; z-index: 60; }
.rv-header-brand { display: flex; align-items: center; gap: 9px; margin-right: 20px; white-space: nowrap; }
.rv-header-brand .rv-brand-name { font-size: 14px; font-weight: 700; letter-spacing: .2px; color: #fff; }
.rv-header-brand .rv-brand-name b { color: var(--rv-accent); font-weight: 700; }
.rv-brand-dot { width: 26px; height: 26px; border-radius: var(--rv-radius-sm); background: rgba(255, 255, 255, .06); color: var(--rv-accent); display: grid; place-items: center; flex: 0 0 auto; }
.rv-brand-dot svg { width: 16px; height: 16px; }
.rv-header-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* primary tab tiles — uppercase text on charcoal, lighter tile when active */
.rv-toptabs { display: flex; align-items: stretch; }
.rv-toptab { display: flex; align-items: center; padding: 0 18px; background: transparent; border: 0; height: 100%; color: var(--rv-tab-fg); font-family: inherit; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background .12s ease, color .12s ease; }
.rv-toptab:hover { background: var(--rv-tab-hover); color: #fff; text-decoration: none; }
.rv-toptab.active { background: var(--rv-tab-active-bg); color: var(--rv-tab-fg-active); }

/* mint brand strip under the header */
.rv-brandstrip { height: var(--rv-strip-h); flex: 0 0 auto; background: var(--rv-accent); position: sticky; top: var(--rv-header-h); z-index: 59; }

/* header search — compact dark field on charcoal */
.rv-header .rv-globalsearch { align-self: center; width: 300px; margin-right: 4px; }
.rv-header .rv-input { height: 28px; background: rgba(255, 255, 255, .08); border-color: transparent; color: #fff; border-radius: var(--rv-radius); }
.rv-header .rv-input::placeholder { color: #8a929b; }
.rv-header .rv-input:focus { border-color: var(--rv-accent); background: rgba(255, 255, 255, .12); }
.rv-header .rv-search svg { color: #8a929b; }

/* header icon buttons + badges (charcoal-safe, not theme chips) */
.rv-iconbtn { width: 28px; height: 28px; border-radius: var(--rv-radius-sm); border: none; background: transparent; color: #a2a9b0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .12s, color .12s; padding: 0; }
.rv-iconbtn:hover { background: var(--rv-tab-active-bg); color: #fff; }
.rv-iconbtn svg { width: 17px; height: 17px; }
.rv-header-badge { font-size: .88rem; font-weight: 600; line-height: 16px; background: rgba(255, 255, 255, .10); color: #d0d3d6; padding: 2px 8px; border-radius: var(--rv-radius); max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* theme-toggle icon swap: light shows the moon (click → dark), dark shows the sun */
.rv-theme-sun { display: none; }
[data-theme="dark"] .rv-theme-sun { display: block; }
[data-theme="dark"] .rv-theme-moon { display: none; }

.rv-user { display: flex; align-items: center; gap: 8px; padding: 3px 8px 3px 4px; border-radius: var(--rv-radius-sm); cursor: default; }
.rv-user:hover { background: var(--rv-tab-hover); }
.rv-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--rv-tab-active-bg); border: 1px solid rgba(255, 255, 255, .15); color: var(--rv-accent); display: grid; place-items: center; font-weight: 700; font-size: .85rem; flex: 0 0 auto; }
.rv-user-name { font-size: .95rem; font-weight: 600; line-height: 1.15; color: #fff; }
.rv-user-role { font-size: .82rem; color: #a2a9b0; }

/* body: tree sidebar + content */
.rv-body { display: flex; flex: 1 1 auto; min-height: 0; align-items: stretch; }

.rv-sidebar { width: var(--rv-sidebar-w); flex: 0 0 var(--rv-sidebar-w); background: var(--rv-sidebar); border-right: 1px solid var(--rv-border); display: flex; flex-direction: column; padding: 6px 0; position: sticky; top: calc(var(--rv-header-h) + var(--rv-strip-h)); align-self: flex-start; height: calc(100vh - var(--rv-header-h) - var(--rv-strip-h)); overflow-y: auto; }

.rv-nav { flex: 1 1 auto; overflow-y: auto; padding: 0; }
.rv-nav-section { font-size: .88rem; color: var(--rv-text-muted); font-weight: 700; letter-spacing: .6px; text-transform: uppercase; padding: 12px 12px 5px; }
/* tree-list rows: full-bleed, square, gray (not mint) selection */
.rv-nav-link { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px; margin: 0; border-radius: 0; color: var(--rv-text-body); font-weight: 400; font-size: 1rem; cursor: pointer; transition: background .12s, color .12s; text-decoration: none; user-select: none; }
.rv-nav-link:hover { background: var(--rv-surface-2); color: var(--rv-text); text-decoration: none; }
.rv-nav-link.active { background: var(--rv-nav-sel); color: var(--rv-text); font-weight: 700; box-shadow: none; }
.rv-nav-link svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: .85; }
.rv-nav-foot { padding: 10px 12px; border-top: 1px solid var(--rv-border); font-size: .85rem; color: var(--rv-text-faint); }

.rv-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.rv-content { flex: 1 1 auto; min-height: 0; min-width: 0; overflow-x: auto; }

@media (max-width: 900px) {
    .rv-sidebar { display: none; }
    .rv-user-meta { display: none; }
    .rv-header .rv-globalsearch { width: 180px; }
    .rv-toptab { padding: 0 10px; }
}

/* ── Login — PAN-OS: neutral page, white card, underline inputs ────────── */
.rv-auth { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--rv-bg); }
.rv-auth-card { width: 100%; max-width: 420px; background: var(--rv-surface); border: 1px solid var(--rv-border-strong);
    border-radius: 8px; box-shadow: var(--rv-shadow-lg); padding: 40px 40px 32px; }
.rv-auth-brand { display: flex; justify-content: center; margin-bottom: 24px; }
.rv-auth-logo { display: inline-flex; align-items: center; background: #fff; border-radius: 8px; padding: 12px 18px; }
[data-theme="light"] .rv-auth-logo, :root:not([data-theme="dark"]) .rv-auth-logo { box-shadow: none; }
[data-theme="dark"] .rv-auth-logo { box-shadow: 0 2px 14px rgba(0, 0, 0, .4); }
.rv-auth-logo img { height: 42px; width: auto; display: block; }
.rv-auth-heading { font-size: 1.2rem; font-weight: 700; margin: 0 0 18px; }
.rv-auth .rv-input { border: 0; border-bottom: 1px solid var(--rv-input-border); border-radius: 0; background: transparent; height: 32px; padding: 0 2px; font-size: 1.05rem; }
.rv-auth .rv-input:focus { border-bottom-color: var(--rv-accent); }
.rv-auth-hint { margin: 18px 0 0; font-size: .92rem; color: var(--rv-text-faint); text-align: center; }
.rv-auth-hint code { background: var(--rv-accent-soft); color: var(--rv-accent-strong); padding: 1px 6px; border-radius: var(--rv-radius-sm); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}