:root {
    --bg: #020617;
    --bg-elevated: #0f172a;
    --bg-soft: #111827;
    --panel: #0f172a;
    --panel-2: #111827;
    --line: #1e293b;
    --line-soft: rgba(148, 163, 184, 0.16);
    --ink: #e2e8f0;
    --muted: #94a3b8;
    --muted-2: #64748b;
    --accent: #06b6d4;
    --accent-strong: #22d3ee;
    --danger: #ef4444;
    --warning: #f59e0b;
    --success: #22c55e;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--bg);
}

a {
    color: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 2px solid rgba(34, 211, 238, 0.85);
    outline-offset: 2px;
}

.skip-link {
    position: fixed;
    top: 0.6rem;
    left: 0.75rem;
    z-index: 200;
    transform: translateY(-140%);
    background: #083344;
    color: #ecfeff;
    border: 1px solid rgba(34, 211, 238, 0.6);
    border-radius: 0.45rem;
    padding: 0.45rem 0.6rem;
    text-decoration: none;
    font-size: 0.76rem;
    font-weight: 600;
    transition: transform 120ms ease;
}

.skip-link:focus-visible {
    transform: translateY(0);
}

.app-body {
    background:
        radial-gradient(circle at top left, rgba(6, 182, 212, 0.08), transparent 28%),
        radial-gradient(circle at bottom right, rgba(37, 99, 235, 0.08), transparent 24%),
        var(--bg);
}

.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 248px;
    background: rgba(2, 6, 23, 0.96);
    border-right: 1px solid var(--line);
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--muted) 55%, #0a1324) transparent;
}

.sidebar::-webkit-scrollbar {
    width: 10px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--muted) 55%, #0a1324);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--muted) 72%, #0a1324);
}

.sidebar-brand,
.auth-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.sidebar-brand {
    justify-content: center;
    width: 100%;
    overflow: visible;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.95rem;
    box-shadow: none;
    padding: 0.28rem 0;
}

.brand-mark {
    width: 2rem;
    height: 2rem;
    border-radius: 0.75rem;
    background: var(--accent);
    color: #04111c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    box-shadow: 0 0 28px rgba(34, 211, 238, 0.24);
}

.brand-logo {
    display: block;
    width: min(100%, 16rem);
    height: auto;
    max-height: none;
    border-radius: 0;
    flex-shrink: 0;
    opacity: 0.95;
    filter: saturate(0.96) brightness(0.99);
}

.brand-logo-auth {
    width: min(100%, 18rem);
    height: 5.2rem;
    object-fit: cover;
    object-position: 50% 50%;
    border-radius: 0.9rem;
    background: transparent;
    box-shadow: none;
    opacity: 0.92;
    filter: saturate(0.94) brightness(0.97);
}

.brand-mark.large {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 1rem;
    font-size: 1.15rem;
}

.brand {
    display: inline-block;
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
}

.tag,
.eyebrow,
.sidebar-label {
    color: var(--muted);
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nav-group {
    display: grid;
    gap: 0.22rem;
    padding: 0.34rem 0.3rem;
    border: 1px solid rgba(148, 163, 184, 0.11);
    border-radius: 0.8rem;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.5), rgba(15, 23, 42, 0.3));
}

/* The group title is a disclosure button that toggles the body. Styles
   inherit the previous lightweight label look; only hover/focus and the
   caret are new. */
.nav-group-title {
    margin: 0.08rem 0 0.28rem;
    padding: 0.18rem 0.45rem;
    font-size: 0.63rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #a7b6ca;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    text-align: left;
    width: 100%;
    transition: background 140ms ease, color 140ms ease;
}

.nav-group-title:hover {
    background: rgba(148, 163, 184, 0.06);
    color: #cbd5e1;
}

.nav-group-title:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.4);
}

.nav-group-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

/* Disclosure chevron. Down when expanded, rotated -90° (points right) when
   the group is collapsed. */
.nav-group-caret {
    flex-shrink: 0;
    opacity: 0.6;
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-group--collapsed > .nav-group-title .nav-group-caret {
    transform: rotate(-90deg);
}

.nav-group-title:hover .nav-group-caret {
    opacity: 0.9;
}

/* Collapsible body. The wrapper animates grid-template-rows from 1fr → 0fr;
   the inner items div hides overflow so links clip cleanly. */
.nav-group-body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-group--collapsed > .nav-group-body {
    grid-template-rows: 0fr;
}

.nav-group-items {
    display: grid;
    gap: 0.22rem;
    overflow: hidden;
    min-height: 0;
}

/* ——— Featured nav group (Data Pipeline / Data Sources) ———
   A subtle cyan accent treatment that signals "this is the foundation". */
.nav-group--featured {
    border: 1px solid rgba(34, 211, 238, 0.28);
    background:
        radial-gradient(110% 80% at 0% 0%, rgba(34, 211, 238, 0.12), transparent 60%),
        linear-gradient(180deg, rgba(8, 51, 68, 0.55), rgba(8, 51, 68, 0.32));
    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.04) inset,
                0 6px 16px -10px rgba(34, 211, 238, 0.5);
}

.nav-group--featured .nav-group-title {
    color: var(--accent-strong);
}

.nav-group-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0.08rem 0.4rem;
    border-radius: 999px;
    font-size: 0.54rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-strong);
    background: rgba(34, 211, 238, 0.14);
    border: 1px solid rgba(34, 211, 238, 0.35);
    line-height: 1;
}

/* Optional nav groups: shown or hidden per-browser on the Features settings
   page. The base rule hides them; the reveal script in base.html adds
   .nav-group--feature-on for every group that resolves to visible (its stored
   preference, or its data-default-on when no preference is set). */
.nav-group--optional {
    display: none;
}

.nav-group--optional.nav-group--feature-on {
    display: grid;
}

.nav-link--featured {
    background: rgba(2, 6, 23, 0.45);
    border-color: rgba(34, 211, 238, 0.18);
}

.nav-link--featured .nav-icon {
    color: var(--accent-strong);
    border-color: rgba(34, 211, 238, 0.32);
    background: rgba(6, 182, 212, 0.12);
}

.nav-link--featured:hover,
.nav-link--featured.active {
    background: rgba(6, 182, 212, 0.16);
    border-color: rgba(34, 211, 238, 0.42);
}

.nav-link {
    text-decoration: none;
    padding: 0.8rem 0.9rem;
    border-radius: 0.8rem;
    color: var(--muted);
    border: 1px solid transparent;
    font-weight: 500;
    transition: 160ms ease;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.nav-icon {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 0.42rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border: 1px solid var(--line-soft);
    color: var(--muted);
    background: rgba(15, 23, 42, 0.55);
}

.nav-link:hover,
.nav-link.active {
    background: rgba(6, 182, 212, 0.1);
    border-color: rgba(6, 182, 212, 0.2);
    color: var(--accent-strong);
}

.nav-link:hover .nav-icon,
.nav-link.active .nav-icon {
    border-color: rgba(34, 211, 238, 0.28);
    color: var(--accent-strong);
}

.sidebar-card {
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sidebar-card strong {
    font-size: 0.92rem;
}

.sidebar-card span {
    color: var(--muted-2);
    font-size: 0.78rem;
}

.admin-badge {
    display: inline-flex;
    align-items: center;
    margin-top: 0.35rem;
    width: fit-content;
    padding: 0.17rem 0.45rem;
    border-radius: 999px;
    border: 1px solid rgba(34, 211, 238, 0.3);
    color: var(--accent-strong) !important;
    background: rgba(6, 182, 212, 0.12);
    font-size: 0.67rem !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.workspace-switcher-form {
    display: grid;
    gap: 0.3rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid rgba(148, 163, 184, 0.13);
    border-radius: 0.6rem;
    background: rgba(15, 23, 42, 0.5);
}

.workspace-switcher-label {
    font-size: 0.68rem;
    letter-spacing: 0.01em;
    color: rgba(148, 163, 184, 0.9);
}

.workspace-switcher-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.4rem;
    align-items: center;
    min-width: 0;
}

.workspace-switcher-select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    font-size: 0.72rem;
    padding: 0.28rem 0.42rem;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.55);
    color: rgba(226, 232, 240, 0.96);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.workspace-switcher-button {
    font-size: 0.69rem;
    padding: 0.24rem 0.55rem !important;
    border-color: rgba(148, 163, 184, 0.24) !important;
    color: rgba(203, 213, 225, 0.95);
    background: rgba(15, 23, 42, 0.35);
}

.workspace-switcher-button:hover {
    border-color: rgba(34, 211, 238, 0.34) !important;
    color: var(--accent-strong);
    background: rgba(6, 182, 212, 0.12);
}

/* Create-a-workspace, folded away under the switcher until asked for: it is a
   rare action next to a frequent one, so it gets a disclosure rather than a
   permanent second form competing with the selector. */
/* --- workspace management page ------------------------------------------ */

.ws-banner {
    margin: 0 0 0.8rem;
    padding: 0.55rem 0.8rem;
    border-radius: 0.5rem;
    font-size: 0.82rem;
}

.ws-banner--ok {
    border: 1px solid rgba(16, 185, 129, 0.35);
    background: rgba(16, 185, 129, 0.1);
}

.ws-banner--bad {
    border: 1px solid rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.1);
}

.ws-list { display: grid; gap: 0.7rem; }

.ws-card {
    display: grid;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line, rgba(148, 163, 184, 0.18));
    border-radius: 0.6rem;
}

/* Archived reads as set aside, not as broken — it is a reversible state. */
.ws-card.is-archived { opacity: 0.72; }

.ws-card-name { margin: 0; font-size: 0.98rem; }

.ws-card-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.25rem; }

.ws-tag {
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.16);
    font-size: 0.66rem;
    letter-spacing: 0.01em;
}

.ws-tag--active { background: rgba(34, 211, 238, 0.2); color: var(--accent-strong); }
.ws-tag--archived { background: rgba(234, 179, 8, 0.2); }
/* Someone else's tenant, listed because you can support it. Deliberately not
   the same colour as a role you actually hold. */
.ws-tag--support { background: rgba(234, 179, 8, 0.18); color: rgb(180, 120, 8); }

.ws-card-contents { display: flex; flex-wrap: wrap; gap: 0.3rem 0.85rem; font-size: 0.76rem; }
.ws-count { color: var(--muted, rgba(148, 163, 184, 0.9)); }
.ws-count strong { color: inherit; font-variant-numeric: tabular-nums; }
.ws-count--empty, .ws-count--more { opacity: 0.7; font-style: italic; }

.ws-card-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.ws-card-actions form { margin: 0; }

.ws-rename { display: flex; gap: 0.35rem; align-items: center; }

.ws-rename input {
    padding: 0.26rem 0.45rem;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.4);
    color: inherit;
    font: inherit;
    font-size: 0.78rem;
    min-width: 15rem;
}

.ws-card-note { margin: 0; font-size: 0.76rem; opacity: 0.75; }

.ws-members { border-top: 1px solid rgba(148, 163, 184, 0.16); padding-top: 0.5rem; }
.ws-members-summary { cursor: pointer; font-size: 0.78rem; letter-spacing: 0.01em; }
.ws-members-count {
    margin-left: 0.3rem;
    padding: 0.02rem 0.35rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.16);
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
}

.ws-member-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.3rem; }

.ws-member {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    padding: 0.28rem 0.4rem;
    border-radius: 6px;
    background: rgba(148, 163, 184, 0.07);
}
.ws-member form { margin: 0; }
/* Capped rather than greedy: the role control that follows has to sit NEXT to
   the person, not at the far right of whatever width the card happens to have. */
.ws-member-id {
    display: flex;
    flex-direction: column;
    flex: 0 1 17rem;
    min-width: 0;
}
.ws-member-name { font-size: 0.8rem; }
.ws-member-email { font-size: 0.7rem; opacity: 0.7; }
.ws-member-name, .ws-member-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-member-platform { flex-shrink: 0; }
/* The one control pushed to the edge. Destructive, and not what you came for. */
.ws-member-remove-form { margin-left: auto !important; }

.ws-member select,
.ws-member-add select,
.ws-member-add input {
    padding: 0.24rem 0.4rem;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.4);
    color: inherit;
    font: inherit;
    font-size: 0.76rem;
}

.ws-member-remove {
    padding: 0.2rem 0.45rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    color: var(--muted, rgba(148, 163, 184, 0.9));
    font: inherit;
    font-size: 0.72rem;
    cursor: pointer;
}
.ws-member-remove:hover { border-color: rgba(248, 113, 113, 0.4); color: rgb(248, 113, 113); }

/* Two panels side by side where there is room, stacked where there is not.
   "Add someone who is already here" and "mint an account" are different acts,
   and one form doing both read as neither. */
.ws-member-forms {
    margin-top: 0.6rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 0.5rem;
    align-items: start;
}

.ws-member-panel {
    padding: 0.5rem 0.6rem 0.6rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    background: rgba(148, 163, 184, 0.04);
}

.ws-member-panel-title {
    margin: 0 0 0.45rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    opacity: 0.85;
}

.ws-member-add {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.4rem;
}

.ws-member-field { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 10rem; min-width: 0; }
.ws-member-field label { font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.6; }
.ws-member-field--role { flex: 0 0 7.5rem; }
.ws-member-field input, .ws-member-field select { width: 100%; box-sizing: border-box; }
.ws-member-panel-note { flex: 1 1 100%; margin-top: 0.1rem; }

/* What each role means, once per card rather than only in a select's tooltip:
   the list above is the answer to "who is what", and it is unreadable without
   knowing what the words grant. */
.ws-role-legend {
    margin: 0.6rem 0 0;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    display: grid;
    gap: 0.15rem;
    font-size: 0.7rem;
}
.ws-role-legend-row { display: flex; gap: 0.45rem; align-items: baseline; }
.ws-role-legend dt {
    flex: 0 0 4.5rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.ws-role-legend dd { margin: 0; opacity: 0.72; }

.ws-delete-label { display: block; margin: 0.6rem 0 0.3rem; font-size: 0.8rem; }

#ws-delete-confirm {
    width: 100%;
    box-sizing: border-box;
    padding: 0.35rem 0.5rem;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.4);
    color: inherit;
    font: inherit;
}

.ws-dialog-actions { display: flex; justify-content: flex-end; gap: 0.4rem; margin-top: 0.8rem; }

/* Manage link at the foot of the switcher menu. */
.workspace-menu-link {
    display: block;
    padding: 0.32rem 0.4rem;
    border-radius: 0.4rem;
    color: rgba(148, 163, 184, 0.95);
    font-size: 0.72rem;
    text-decoration: none;
}

.workspace-menu-link:hover { background: rgba(148, 163, 184, 0.14); color: var(--accent-strong); }

/* Always-visible "you are here" chip under the account card. Quiet by
   default — it is a status line, not an action — but it is a button, because
   the next thing you want after noticing the wrong workspace is to change it. */
.workspace-active {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.3rem 0.45rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 0.5rem;
    background: rgba(15, 23, 42, 0.42);
    color: rgba(226, 232, 240, 0.92);
    font: inherit;
    font-size: 0.72rem;
    cursor: pointer;
    text-align: left;
}

.workspace-active:hover {
    border-color: rgba(34, 211, 238, 0.34);
    color: var(--accent-strong);
}

.workspace-active-caret {
    flex: 0 0 auto;
    opacity: 0.6;
    transition: transform 140ms ease;
}

.workspace-switch[aria-hidden] .workspace-active-caret,
.workspace-active[aria-expanded="true"] .workspace-active-caret {
    transform: rotate(180deg);
}

/* Anonymized mirror marker, directly above the workspace switcher.
   Amber rather than red: this is a state to be aware of, not an error, and a
   red bar across the sidebar of every demo screenshot reads as "something is
   broken" to whoever you are showing it to. Sized and placed to sit inside the
   sidebar so it can be cropped out of a screenshot without cropping the app. */
.demo-data-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.25rem 0.45rem;
    border: 1px solid rgba(234, 179, 8, 0.42);
    border-radius: 0.5rem;
    background: rgba(234, 179, 8, 0.14);
    color: rgb(234, 179, 8);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    line-height: 1;
    cursor: default;
}

.demo-data-badge svg {
    flex: 0 0 auto;
}

/* The card behind this is white in light mode, not dark as the sidebar shell
   is, so the mid-amber that reads well on navy is thin on white. Darken the
   text and keep the pale amber fill: measured 6.68:1 in light and 8.66:1 in
   dark, both well past the 4.5:1 this text size needs. The #id prefix
   is required because dark-mode.css forces `color: inherit` on everything
   inside a .panel at a specificity no class-only selector can outrank. */
html[data-theme="light"] #sidebar .demo-data-badge,
html[data-theme="light"] .demo-data-badge {
    color: rgb(124, 72, 13);
    border-color: rgba(161, 98, 7, 0.42);
    background: rgba(234, 179, 8, 0.18);
}

/* Mid-switch the control is inert and says so — the page is being replaced. */
.workspace-switch.is-switching .workspace-active {
    opacity: 0.7;
    pointer-events: none;
}

/* The menu floats (position: fixed, JS-placed) so the sidebar's own scrolling
   and overflow can never clip it. */
.workspace-menu {
    position: fixed;
    z-index: 1200;
    min-width: 232px;
    max-width: 320px;
    padding: 0.35rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 0.6rem;
    background: rgba(15, 23, 42, 0.97);
    box-shadow: 0 12px 32px rgba(2, 6, 23, 0.55);
}

.workspace-menu-title {
    margin: 0.15rem 0.35rem 0.3rem;
    font-size: 0.64rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.85);
}

.workspace-menu-form { margin: 0; }

#topology-explorer-view .workspace-menu-item,
.workspace-menu-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.32rem 0.4rem;
    border: 0;
    border-radius: 0.4rem;
    background: none;
    color: rgba(226, 232, 240, 0.92);
    font: inherit;
    font-size: 0.74rem;
    text-align: left;
    cursor: pointer;
}

.workspace-menu-item:hover:not(:disabled) {
    background: rgba(148, 163, 184, 0.14);
}

.workspace-menu-item:disabled {
    opacity: 0.45;
    cursor: default;
}

.workspace-menu-item.is-active {
    color: var(--accent-strong);
    font-weight: 600;
}

.workspace-menu-check {
    flex: 0 0 auto;
    width: 0.8rem;
    font-size: 0.72rem;
}

.workspace-menu-name {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A workspace you are in without being a member of it. Quiet on purpose: it
   qualifies the name, it is not a warning. */
.workspace-menu-tag {
    flex: 0 0 auto;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    padding: 0.05rem 0.32rem;
    border-radius: 0.28rem;
    border: 1px solid var(--border, rgba(128, 128, 128, 0.35));
    color: var(--text-muted, #8a8a8a);
    text-transform: lowercase;
}

/* Only the row you picked spins, so the feedback names the choice. */
.workspace-menu-spinner {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    display: none;
}

.workspace-menu-item.is-loading .workspace-menu-spinner {
    display: block;
    border: 2px solid rgba(148, 163, 184, 0.3);
    border-top-color: var(--accent-strong);
    border-radius: 50%;
    animation: workspaceSpin 700ms linear infinite;
}

@keyframes workspaceSpin {
    to { transform: rotate(360deg); }
}

.workspace-menu-sep {
    height: 1px;
    margin: 0.3rem 0.2rem;
    background: rgba(148, 163, 184, 0.16);
}

.workspace-active-icon {
    flex: 0 0 auto;
    opacity: 0.75;
}

.workspace-active-label {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* How many workspaces are reachable — the cue that switching is possible. */
.workspace-active-count {
    flex: 0 0 auto;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
    color: rgba(203, 213, 225, 0.9);
    font-size: 0.64rem;
    font-variant-numeric: tabular-nums;
}

.workspace-create {
    display: grid;
    gap: 0.3rem;
    margin-top: 0.35rem;
}

.workspace-create-toggle {
    justify-self: start;
    border: 0;
    background: none;
    padding: 0.12rem 0.1rem;
    font: inherit;
    font-size: 0.7rem;
    color: rgba(148, 163, 184, 0.95);
    cursor: pointer;
}

.workspace-create-toggle:hover {
    color: var(--accent-strong);
}

.workspace-create-form {
    display: grid;
    gap: 0.3rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid rgba(148, 163, 184, 0.13);
    border-radius: 0.6rem;
    background: rgba(15, 23, 42, 0.5);
}

.workspace-create-hint {
    margin: 0;
    font-size: 0.64rem;
    color: rgba(148, 163, 184, 0.75);
}

.inventory-tabs-panel {
    padding: 0.65rem 1rem;
}

.inventory-compact-panel {
    padding: 0.75rem 1rem;
}

.inventory-compact-grid {
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    gap: 0.75rem;
}

.inventory-compact-item {
    border: 1px solid var(--line);
    border-radius: 0.8rem;
    background: rgba(15, 23, 42, 0.58);
    padding: 0.6rem 0.75rem;
    display: grid;
    gap: 0.4rem;
}

.inventory-compact-item h3 {
    margin: 0;
    font-size: 0.82rem;
    color: var(--muted);
    letter-spacing: 0.02em;
}

.inventory-compact-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.inventory-tabs {
    display: inline-flex;
    gap: 0.4rem;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    padding: 0.3rem;
    background: rgba(15, 23, 42, 0.55);
}

.inventory-tab {
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    padding: 0.45rem 0.8rem;
    border-radius: 0.6rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.82rem;
}

.inventory-tab.is-active {
    color: var(--accent-strong);
    border-color: rgba(34, 211, 238, 0.35);
    background: rgba(6, 182, 212, 0.12);
}

.inventory-device-form {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    flex-wrap: wrap;
}

.inventory-device-form select,
.inventory-device-form input[type="text"] {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: var(--ink);
    border-radius: 0.5rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.78rem;
}

.inventory-device-form select {
    min-width: 8.8rem;
}

.inventory-device-form input[type="text"] {
    min-width: 8.2rem;
}

.inventory-inline-select {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: var(--ink);
    border-radius: 0.5rem;
    padding: 0.34rem 0.5rem;
    font-size: 0.76rem;
    min-width: 8.2rem;
    max-width: 16.5rem;
}

.inventory-inline-form {
    display: none;
}

.inventory-tag-list {
    margin-top: 0.35rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.inventory-tag-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.13rem 0.48rem;
    font-size: 0.66rem;
    color: #bfdbfe;
    border: 1px solid rgba(59, 130, 246, 0.38);
    background: rgba(37, 99, 235, 0.2);
}

.dlp-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid rgba(148, 163, 184, 0.26);
    color: #cbd5e1;
    background: rgba(30, 41, 59, 0.7);
    white-space: nowrap;
}

.dlp-public {
    border-color: rgba(34, 197, 94, 0.45);
    color: #bbf7d0;
    background: rgba(21, 128, 61, 0.22);
}

.dlp-internal {
    border-color: rgba(59, 130, 246, 0.45);
    color: #bfdbfe;
    background: rgba(30, 64, 175, 0.22);
}

.dlp-confidential {
    border-color: rgba(245, 158, 11, 0.45);
    color: #fde68a;
    background: rgba(180, 83, 9, 0.24);
}

.dlp-restricted {
    border-color: rgba(239, 68, 68, 0.5);
    color: #fecaca;
    background: rgba(153, 27, 27, 0.24);
}

.file-type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    padding: 0.22rem 0.36rem;
    border-radius: 0.45rem;
    border: 1px solid var(--line-soft);
    background: rgba(15, 23, 42, 0.72);
    color: #cbd5e1;
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    font-weight: 700;
}

.file-type-glyph {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    border: 1px solid var(--line-soft);
    background: rgba(15, 23, 42, 0.72);
    color: #cbd5e1;
    border-radius: 0.48rem;
    padding: 0.18rem 0.34rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.file-type-glyph svg {
    width: 0.86rem;
    height: 0.86rem;
    display: block;
    opacity: 0.9;
}

@media (max-width: 1080px) {
    .inventory-compact-grid {
        grid-template-columns: 1fr;
    }
}

.main-shell {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.page-topbar {
    min-height: 4rem;
    padding: 0.5rem 1.5rem;
    border-bottom: 1px solid var(--line);
    background: rgba(2, 6, 23, 0.82);
    backdrop-filter: blur(12px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 20;
}

.page-topbar h1,
.hero-banner h2,
.auth-aside h1,
.auth-panel h2,
.panel h2,
.security-panel h2 {
    margin: 0;
}

.page-topbar p,
.hero-banner p,
.panel-heading p,
.auth-aside p,
.auth-panel p,
.security-panel p {
    margin: 0.2rem 0 0;
    color: var(--muted);
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.status-chip,
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.38rem 0.62rem;
    border-radius: 999px;
    border: 1px solid var(--line-soft);
    background: rgba(15, 23, 42, 0.84);
    color: var(--muted);
    font-size: 0.74rem;
}

.status-chip-cyan,
.pill {
    color: var(--accent-strong);
    border-color: rgba(34, 211, 238, 0.22);
}

.status-chip-alert {
    color: #fecaca;
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(127, 29, 29, 0.28);
}

.hero-banner,
.panel,
.stat-card,
.login-card,
.security-panel {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.9));
    border: 1px solid var(--line);
    border-radius: 1rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}

.hero-banner {
    margin: 1.5rem 1.75rem 1rem;
    padding: 1.6rem;
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: flex-start;
    background:
        radial-gradient(circle at top left, rgba(6, 182, 212, 0.12), transparent 30%),
        linear-gradient(180deg, rgba(15, 23, 42, 1), rgba(15, 23, 42, 0.94));
}

.hero-copy {
    max-width: 56rem;
}

.hero-copy h2 {
    font-size: clamp(1.55rem, 2vw, 2.1rem);
    line-height: 1.15;
    margin-top: 0.35rem;
}

.hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: flex-end;
}

.stats-grid,
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin: 0 1.75rem 1rem;
}

.dashboard-grid-main {
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
}

.bolt-stats {
    margin: 0 1.75rem 1rem;
}

.stat-card {
    padding: 1.2rem 1.25rem;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.06);
}

.stat-card span {
    display: block;
    color: var(--muted);
    margin-bottom: 0.3rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.stat-ico {
    width: 2rem;
    height: 2rem;
    border-radius: 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 0.65rem;
    color: var(--ink);
    border: 1px solid var(--line);
    background: rgba(2, 6, 23, 0.5);
}

.stat-card strong {
    font-size: 2.4rem;
    line-height: 1;
}

.stat-card small {
    display: block;
    color: var(--muted-2);
    margin-top: 0.4rem;
}

.accent-cyan::before {
    background: var(--accent);
}

.accent-red::before {
    background: var(--danger);
}

.accent-blue::before {
    background: #3b82f6;
}

.accent-amber::before {
    background: var(--warning);
}

.panel {
    padding: 1rem;
}

.panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
}

.panel h2 {
    font-size: 1rem;
}

.chart-panel,
.gauge-panel {
    min-height: 15rem;
}

.severity-stack {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.severity-row {
    display: grid;
    grid-template-columns: 110px 1fr 40px;
    gap: 0.9rem;
    align-items: center;
}

.severity-row span,
.mini-metrics span,
.topology-toolbar span,
.topology-legend,
.list-panel li,
.form-footnote,
.auth-feature-list li {
    color: var(--muted);
}

.severity-bar {
    height: 0.58rem;
    border-radius: 999px;
    background: #1e293b;
    overflow: hidden;
}

.severity-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.severity-fill-red {
    background: linear-gradient(90deg, #ef4444, #f97316);
}

.severity-fill-blue {
    background: linear-gradient(90deg, #0891b2, #3b82f6);
}

.gauge-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.gauge-ring {
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--accent) 0 70%, #1e293b 70% 100%);
    padding: 0.75rem;
}

.gauge-core {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--bg);
    display: grid;
    place-items: center;
    font-size: 2rem;
    font-weight: 700;
}

.mini-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    margin-top: 1.25rem;
}

.mini-metrics div {
    background: rgba(2, 6, 23, 0.6);
    border: 1px solid var(--line);
    border-radius: 0.8rem;
    padding: 0.9rem;
}

.mini-metrics strong {
    display: block;
    margin-top: 0.25rem;
    font-size: 1.2rem;
}

.list-panel {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.8rem;
}

.api-panel pre,
pre {
    background: #020617;
    color: #cbd5e1;
    padding: 1rem;
    border-radius: 0.95rem;
    overflow: auto;
    border: 1px solid var(--line);
}

.topology-panel {
    min-height: 70vh;
}

.topology-frame {
    margin: 1.25rem 1.75rem 1.75rem;
    padding: 0;
    overflow: hidden;
}

.topology-toolbar {
    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 1rem;
    gap: 0.6rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
    background: rgba(2, 6, 23, 0.65);
}

.legend-dot {
    width: 0.6rem;
    height: 0.6rem;
    display: inline-block;
    border-radius: 50%;
    margin: 0 0.35rem 0 0.85rem;
}

.legend-dot:first-child {
    margin-left: 0.5rem;
}

.legend-dot-cyan {
    background: var(--accent);
}

.legend-dot-red {
    background: #f97316;
}

.legend-dot-green {
    background: #22c55e;
}

.topology-canvas-frame {
    min-height: 72vh;
}

.topology-subtoolbar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border-bottom: 1px solid rgba(30, 41, 59, 0.75);
    background: rgba(3, 10, 24, 0.58);
    flex-wrap: wrap;
}

.topology-controls {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    min-width: 0;
}

.topology-search {
    min-height: 2rem;
    min-width: 13rem;
    border-radius: 0.5rem;
    border: 1px solid var(--line);
    background: rgba(15, 23, 42, 0.75);
    color: var(--ink);
    padding: 0.35rem 0.6rem;
    font-size: 0.76rem;
}

.topology-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--muted);
    font-size: 0.74rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.28rem 0.58rem;
    background: rgba(15, 23, 42, 0.78);
}

.topology-toggle input {
    margin: 0;
}

.topology-filter {
    border-radius: 0.5rem;
    padding: 0.38rem 0.62rem;
    font-size: 0.72rem;
    line-height: 1;
    border: 1px solid var(--line);
    background: rgba(15, 23, 42, 0.75);
    color: var(--muted);
    cursor: pointer;
    transition: transform 90ms ease, border-color 120ms ease,
                background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

/* Hover: neutral "you can click this" hint — slate-grey border, a small
   upward lift, and brighter text. Deliberately NOT cyan so it can't be
   confused with the selected/active state. */
.topology-filter:hover {
    border-color: rgba(148, 163, 184, 0.7);
    background: rgba(148, 163, 184, 0.16);
    color: var(--ink);
    transform: translateY(-1px);
}

/* Active: clicked / selected — full cyan glow with a soft outer ring.
   Listed last so it wins over both the resting and :hover rules when
   present, and the explicit .active:hover rule pins the lift away too
   (active filters don't bob on hover). */
.topology-filter.active,
.topology-filter.active:hover {
    border-color: rgba(34, 211, 238, 0.55);
    color: var(--accent-strong);
    background: rgba(6, 182, 212, 0.16);
    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.22),
                0 0 10px rgba(34, 211, 238, 0.18);
    transform: none;
}

.topology-canvas {
    width: 100%;
    min-height: calc(70vh - 3rem);
    padding: 1rem;
    overflow: hidden;
    touch-action: none;
    background: linear-gradient(rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
    cursor: grab;
}

.topology-canvas.is-panning {
    cursor: grabbing;
    user-select: none;
}

.topology-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    min-height: calc(74vh - 3rem);
}

.topology-details {
    border-left: 1px solid var(--line);
    background: rgba(2, 6, 23, 0.65);
    padding: 1rem;
    overflow: auto;
}

.topology-details h3 {
    margin: 0;
    font-size: 1rem;
}

.topology-details h4 {
    margin: 1rem 0 0.5rem;
    font-size: 0.84rem;
    color: #cbd5e1;
}

.topology-details-sub {
    margin: 0.25rem 0 0.9rem;
    font-size: 0.75rem;
    color: var(--muted);
}

.topology-details dl {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 0.6rem;
}

.topology-details dt {
    color: var(--muted);
    font-size: 0.73rem;
}

.topology-details dd {
    margin: 0;
    color: #dbe7ff;
    font-size: 0.78rem;
}

.topology-details ul {
    margin: 0;
    padding-left: 1rem;
    display: grid;
    gap: 0.22rem;
    color: var(--muted-2);
    font-size: 0.76rem;
}

.topology-map {
    min-width: 980px;
    width: 100%;
    height: auto;
    display: block;
    background: rgba(3, 10, 24, 0.58);
    border: 1px solid rgba(100, 116, 139, 0.28);
    border-radius: 12px;
}

.lane-bg {
    fill: rgba(10, 22, 44, 0.5);
    stroke: rgba(125, 211, 252, 0.24);
    stroke-width: 1;
}

.lane-title {
    fill: #bfdbfe;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
}

.subnet-label {
    fill: #94a3b8;
    font-size: 9.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
}

.subnet-box {
    fill: rgba(14, 116, 144, 0.08);
    stroke: rgba(125, 211, 252, 0.44);
    stroke-width: 1;
    stroke-dasharray: 4 3;
}

.edge-path {
    fill: none;
    stroke: rgba(203, 213, 225, 0.62);
    stroke-width: 1.15;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.edge-path-attack {
    stroke: rgba(248, 113, 113, 0.9);
    stroke-width: 1.6;
}

.node-card {
    stroke-width: 1.2;
}

.node-card.node-asset.node-networks,
.node-card.node-segment.node-networks {
    fill: rgba(239, 246, 255, 0.92);
    stroke: rgba(59, 130, 246, 0.84);
}

.node-card.node-asset.node-servers {
    fill: rgba(239, 246, 255, 0.9);
    stroke: rgba(37, 99, 235, 0.8);
}

.node-card.node-asset.node-endpoints {
    fill: rgba(236, 254, 255, 0.9);
    stroke: rgba(8, 145, 178, 0.82);
}

.node-card.node-asset.node-applications,
.node-card.node-application {
    fill: rgba(253, 242, 248, 0.92);
    stroke: rgba(219, 39, 119, 0.82);
}

.node-card.node-asset.node-identities,
.node-card.node-identity {
    fill: rgba(254, 249, 195, 0.92);
    stroke: rgba(202, 138, 4, 0.82);
}

.node-card.node-asset.node-data_stores {
    fill: rgba(250, 245, 255, 0.92);
    stroke: rgba(147, 51, 234, 0.82);
}

.node-card.node-other {
    fill: rgba(240, 253, 250, 0.88);
    stroke: rgba(20, 184, 166, 0.8);
}

/* Provider provenance badges along the node footer. Icons render in their
 * natural shape directly on the card fill — no background disc, so brand
 * glyphs with internal whitespace keep their intended silhouette. Hover
 * tooltips are driven by JS (see initProviderTooltip in topology.html);
 * the badge <g> carries data-provider with the provider key. */
.node-provider-badge image {
    pointer-events: auto;
}
.node-provider-badge {
    cursor: pointer;
}

/* JS-driven floating tooltip used by provider badges. Hidden by default;
 * showProviderTooltip()/hideProviderTooltip() in topology.html toggle
 * display and position it near the cursor in viewport coordinates. */
/* Generic floating tooltip used across the app. Activate by adding
   data-tooltip="..." to any element. The global handler in base.html
   positions the shared #app-tooltip element near the cursor. */
.app-tooltip {
    position: fixed;
    display: none;
    z-index: 100;
    pointer-events: none;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 500;
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #f1f5f9;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.node-provider-more {
    font-size: 9px;
    font-weight: 600;
    fill: rgba(71, 85, 105, 0.85);
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
    .node-provider-more {
        fill: rgba(203, 213, 225, 0.85);
    }
}

.node-card.node-gateway {
    fill: rgba(224, 242, 254, 0.96);
    stroke: rgba(14, 116, 144, 0.9);
}

.node-card.overlay-critical {
    fill: rgba(127, 29, 29, 0.35);
    stroke: rgba(248, 113, 113, 0.95);
}

.node-card.overlay-high {
    fill: rgba(124, 45, 18, 0.3);
    stroke: rgba(251, 146, 60, 0.9);
}

.node-card.overlay-medium {
    fill: rgba(92, 54, 8, 0.28);
    stroke: rgba(250, 204, 21, 0.88);
}

.node-card.overlay-low {
    fill: rgba(8, 47, 73, 0.3);
    stroke: rgba(125, 211, 252, 0.88);
}

.node-card.overlay-none {
    fill-opacity: 0.5;
}

.node-selected {
    stroke-width: 1.9;
    filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.33));
}

.node-icon {
    fill: rgba(219, 234, 254, 0.95);
    stroke: rgba(30, 64, 175, 0.42);
    stroke-width: 0.7;
}

.node-icon-text {
    fill: #dbeafe;
    font-size: 8px;
    font-weight: 700;
}

.node-icon-glyph {
    stroke: #1d4ed8;
    fill: none;
    stroke-width: 1.15;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.node-icon-glyph .icon-dot {
    fill: #1d4ed8;
    stroke: none;
}

.node-icon-glyph .icon-line {
    stroke: #1d4ed8;
    fill: none;
}

.node-name {
    fill: #0f172a;
    font-size: 10px;
    font-weight: 600;
}

.node-detail {
    fill: #475569;
    font-size: 9px;
}

.node-hit {
    fill: transparent;
    cursor: pointer;
}

.segment-lane {
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: rgba(2, 6, 23, 0.55);
    padding: 0.9rem;
}

.segment-lane header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.segment-lane h3 {
    margin: 0;
    font-size: 0.95rem;
}

.segment-lane p,
.segment-lane span {
    margin: 0.2rem 0 0;
    color: var(--muted-2);
    font-size: 0.75rem;
}

.segment-host-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.host-card {
    border: 1px solid var(--line);
    border-radius: 0.8rem;
    padding: 0.72rem;
    background: rgba(15, 23, 42, 0.86);
}

.host-card.sev-critical {
    border-color: rgba(239, 68, 68, 0.6);
}

.host-card.sev-high {
    border-color: rgba(249, 115, 22, 0.5);
}

.host-card.sev-low {
    border-color: rgba(34, 197, 94, 0.4);
}

.host-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.65rem;
}

.host-head strong {
    font-size: 0.82rem;
}

.host-head em {
    font-style: normal;
    color: var(--muted);
    font-size: 0.69rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.host-card p {
    margin: 0.42rem 0;
    color: var(--muted-2);
    font-size: 0.72rem;
}

.host-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.host-metrics span {
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    padding: 0.2rem 0.45rem;
    font-size: 0.68rem;
    color: var(--muted);
}

.table-panel {
    margin: 1rem 1.5rem 1.5rem;
}

.settings-collapsible > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.84rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.9rem;
    border: 1px solid var(--line-soft);
    border-radius: 0.65rem;
    padding: 0.55rem 0.72rem;
    background: rgba(15, 23, 42, 0.38);
}

.settings-collapsible[open] > summary {
    color: var(--accent-strong);
    border-color: rgba(34, 211, 238, 0.28);
    background: rgba(6, 182, 212, 0.08);
}

.settings-collapsible > summary::-webkit-details-marker {
    display: none;
}

.settings-collapsible > summary::before {
    content: '\25B8';
    font-size: 0.72rem;
    color: var(--muted-2);
    transition: transform 140ms ease, color 140ms ease;
}

.settings-collapsible[open] > summary::before {
    transform: rotate(90deg);
    color: var(--accent-strong);
}

.table-wrap {
    overflow: auto;
    border-radius: 0.9rem;
    border: 1px solid var(--line);
    background: rgba(2, 6, 23, 0.58);
}

.table-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 0.65rem;
    align-items: center;
}

.table-controls input:not([type="checkbox"]),
.table-controls select {
    min-height: 2.1rem;
    border-radius: 0.62rem;
    border: 1px solid var(--line);
    background: rgba(15, 23, 42, 0.85);
    color: var(--ink);
    padding: 0.38rem 0.62rem;
    font-size: 0.76rem;
}

.table-controls button {
    min-height: 2.1rem;
}

.connector-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 0.8rem;
    margin-bottom: 1.25rem;
}

.connector-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.connector-form-grid input,
.connector-form-grid select {
    min-height: 2.35rem;
    border-radius: 0.62rem;
    border: 1px solid var(--line);
    background: rgba(15, 23, 42, 0.85);
    color: var(--ink);
    padding: 0.45rem 0.7rem;
}

.connector-form-grid select[multiple] {
    min-height: 7.2rem;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

.full-span {
    grid-column: 1 / -1;
}

.connector-actions {
    display: flex;
    justify-content: flex-end;
}

.btn-danger-sm {
    background: transparent;
    border: 1px solid var(--danger);
    color: var(--danger);
    border-radius: 4px;
    padding: 0.25rem 0.65rem;
    font-size: 0.78rem;
    cursor: pointer;
    white-space: nowrap;
}
.btn-danger-sm:hover {
    background: var(--danger);
    color: #fff;
}

.table-controls input:not([type="checkbox"]) {
    flex: 1;
    min-width: 220px;
}

.table-controls input[type="checkbox"] {
    width: 0.95rem;
    height: 0.95rem;
    min-height: 0;
    min-width: 0;
    padding: 0;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--accent-strong);
}

.table-controls select {
    min-width: 180px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 980px;
}

.sla-overdue-row {
    box-shadow: inset 3px 0 0 rgba(239, 68, 68, 0.85);
    background: rgba(127, 29, 29, 0.14);
}

.sla-overdue-row td {
    background: transparent;
}

.sync-runs-chart {
    display: grid;
    gap: 0.45rem;
    margin: 0 0 0.85rem;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: rgba(2, 6, 23, 0.45);
}

.sync-runs-bar-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 0.6rem;
}

.sync-runs-label {
    color: var(--muted);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sync-runs-bar {
    display: inline-block;
    height: 0.48rem;
    border-radius: 999px;
}

.sync-runs-bar-completed {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.9), rgba(74, 222, 128, 0.8));
}

.sync-runs-bar-failed {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.9), rgba(248, 113, 113, 0.86));
}

.sync-runs-bar-skipped {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.9), rgba(251, 191, 36, 0.82));
}

.sync-runs-count {
    color: #e2e8f0;
    font-size: 0.8rem;
    text-align: right;
}

.stub-example {
    margin: 0.35rem 0 0;
    padding: 0.62rem 0.72rem;
    border-radius: 0.62rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(2, 6, 23, 0.55);
    color: #cbd5e1;
    font-size: 0.74rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.correlation-kpi-grid {
    padding: 0 20px 20px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.correlation-kpi-card {
    border-color: rgba(56, 189, 248, 0.22);
    background: linear-gradient(165deg, rgba(15, 23, 42, 0.95), rgba(10, 24, 44, 0.86));
}

.correlation-bars {
    display: grid;
    gap: 0.55rem;
    padding: 0 20px 20px;
}

.correlation-bar-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 0.65rem;
}

.correlation-bar-label {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.73rem;
}

.correlation-bar-track {
    height: 0.6rem;
    border-radius: 999px;
    background: rgba(30, 41, 59, 0.78);
    overflow: hidden;
}

.correlation-bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.95), rgba(16, 185, 129, 0.85));
}

.correlation-bar-value {
    color: #e2e8f0;
    font-size: 0.8rem;
    text-align: right;
}

.data-table thead th {
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 600;
    background: rgba(15, 23, 42, 0.92);
    border-bottom: 1px solid var(--line);
    padding: 0.62rem 0.78rem;
}

.data-table code {
    display: inline-block;
    max-width: 34rem;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.74rem;
    color: #cbd5e1;
    background: rgba(2, 6, 23, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 0.45rem;
    padding: 0.16rem 0.36rem;
}

.data-table tbody td {
    padding: 0.68rem 0.78rem;
    border-bottom: 1px solid rgba(30, 41, 59, 0.7);
    color: #cbd5e1;
    font-size: 0.82rem;
    vertical-align: middle;
}

.data-table tbody tr:hover {
    background: rgba(30, 41, 59, 0.55);
}

.muted-cell {
    display: block;
    margin-top: 0.2rem;
    color: var(--muted-2);
    font-size: 0.72rem;
}

.asset-full-value {
    margin-top: 0.25rem;
    color: var(--muted);
    font-size: 0.72rem;
}

.asset-full-value summary {
    cursor: pointer;
}

.asset-full-value code {
    display: inline-block;
    margin-top: 0.2rem;
}

.pill-cell {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    padding: 0.2rem 0.45rem;
    font-size: 0.72rem;
    color: var(--ink);
    background: rgba(148, 163, 184, 0.12);
    font-weight: 600;
}

.type-inline-meta {
    display: inline-flex;
    align-items: center;
    margin-left: 0.45rem;
    color: var(--muted-2);
    font-size: 0.72rem;
    vertical-align: middle;
}

.severity-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.22rem 0.52rem;
    font-size: 0.72rem;
    border: 1px solid var(--line-soft);
    text-transform: capitalize;
}

.severity-critical,
.severity-completed,
.severity-high {
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.12);
}

.severity-medium,
.severity-manual_review,
.severity-degraded,
.severity-skipped,
.severity-mitigating {
    color: #fdba74;
    border-color: rgba(249, 115, 22, 0.35);
    background: rgba(249, 115, 22, 0.12);
}

.severity-low,
.severity-open,
.severity-active,
.severity-accepted {
    color: #67e8f9;
    border-color: rgba(34, 211, 238, 0.35);
    background: rgba(34, 211, 238, 0.12);
}

.severity-resolved {
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.12);
}

.severity-disabled,
.severity-failed {
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.12);
}

.severity-healthy,
.severity-success {
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.12);
}

/* --- Connector status tooltip --------------------------------------------- */
.status-tooltip-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Reserve a min-width on the status pill itself so every row's pill renders
   at the width of the widest status word ("Misconfigured"). The table cell
   then auto-sizes to fit, with no extra gap on the right — and the column
   stays stable when one row's status changes (e.g. "Healthy" → "Auth Failed"
   after a Sync Now). */
.connector-status-col .severity-pill {
    min-width: 5.7rem;
    justify-content: center;
}

.status-tooltip {
    position: absolute;
    z-index: 50;
    top: calc(100% + 0.45rem);
    left: 0;
    min-width: 16rem;
    max-width: 24rem;
    padding: 0.6rem 0.75rem;
    background: rgba(15, 23, 42, 0.97);
    color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 0.45rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    font-size: 0.82rem;
    line-height: 1.35;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 120ms ease, transform 120ms ease;
}

.status-tooltip-wrap:hover .status-tooltip,
.status-tooltip-wrap:focus-within .status-tooltip {
    opacity: 1;
    transform: translateY(0);
}

.status-tooltip-summary {
    display: block;
}

.status-tooltip-detail {
    display: block;
    margin-top: 0.45rem;
    padding-top: 0.45rem;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    color: #cbd5e1;
    font-family: "SF Mono", "Menlo", monospace;
    font-size: 0.74rem;
    word-break: break-word;
}

.connector-health-light {
    display: inline-block;
    width: 0.58rem;
    height: 0.58rem;
    border-radius: 999px;
    margin-right: 0.42rem;
    vertical-align: middle;
    box-shadow: 0 0 0 0 rgba(148, 163, 184, 0.22);
}

.connector-health-healthy,
.connector-health-success {
    background: #22c55e;
    animation: connectorPulseGreen 1.4s ease-out infinite;
}

.connector-health-degraded,
.connector-health-failed,
.connector-health-disabled {
    background: #ef4444;
    animation: connectorPulseRed 1.4s ease-out infinite;
}

/* --- Sortable table headers ----------------------------------------------- */
th.sortable-th {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 1.15rem;
}

th.sortable-th:hover {
    background: rgba(148, 163, 184, 0.08);
}

th.sortable-th:focus-visible {
    outline: 2px solid rgba(34, 211, 238, 0.55);
    outline-offset: -2px;
}

th.sortable-th::after {
    content: "";
    position: absolute;
    right: 0.4rem;
    top: 50%;
    width: 0;
    height: 0;
    transform: translateY(-50%);
    border-left: 0.32rem solid transparent;
    border-right: 0.32rem solid transparent;
    border-bottom: 0.36rem solid rgba(148, 163, 184, 0.4);
    border-top: 0.36rem solid rgba(148, 163, 184, 0.4);
    opacity: 0;
    transition: opacity 100ms ease;
}

th.sortable-th:hover::after {
    opacity: 0.5;
    /* both arrows visible when unsorted-but-hovered, hinting at the affordance */
    border-bottom-color: rgba(148, 163, 184, 0.6);
    border-top-color: transparent;
}

th.sortable-th.sort-asc::after {
    opacity: 1;
    border-bottom-color: #67e8f9;
    border-top-color: transparent;
}

th.sortable-th.sort-desc::after {
    opacity: 1;
    border-top-color: #67e8f9;
    border-bottom-color: transparent;
}

/* Syncing state: pressed Sync Now, waiting for the backend response. */
.connector-health-syncing {
    background: transparent !important;
    border: 2px solid rgba(148, 163, 184, 0.3);
    border-top-color: #67e8f9;
    box-shadow: none !important;
    animation: connectorSpin 0.8s linear infinite;
}

@keyframes connectorSpin {
    to {
        transform: rotate(360deg);
    }
}

.connector-health-unknown,
.connector-health-manual {
    background: #94a3b8;
}

/* —— Topology merge mode (multi-select + merge nodes) ———————————————— */
.topology-merge-mode-active .node-card {
    cursor: crosshair;
}

/* Top banner — strong color so the mode is obvious. Scoped to :not([hidden])
   so the HTML5 `hidden` attribute's `display: none` keeps it offscreen until
   merge mode is enabled. */
.merge-mode-banner:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0.6rem 0 0;
    padding: 0.6rem 1rem;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.18), rgba(34, 211, 238, 0.12));
    border: 1px solid rgba(45, 212, 191, 0.55);
    border-radius: 0.55rem;
    color: var(--ink);
    font-size: 0.88rem;
}

.merge-mode-banner-icon {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(45, 212, 191, 0.25);
    color: #5eead4;
    font-size: 1.1rem;
    font-weight: 700;
}

.merge-mode-banner strong {
    display: block;
    color: #5eead4;
    margin-bottom: 0.15rem;
}

.merge-mode-banner-hint {
    color: var(--muted);
    font-size: 0.8rem;
}

.merge-mode-banner .merge-mode-exit {
    margin-left: auto;
    padding: 0.32rem 0.75rem;
    font-size: 0.78rem;
    border-radius: 4px;
}

/* Selection halo on regular nodes while in merge mode. Forced with !important
   because the per-category fill rules (.node-card.node-asset.node-networks
   etc.) use 3 classes and would otherwise beat this selector on specificity. */
.node-card.node-merge-selected {
    fill: #94a3b8 !important;  /* slate-400 */
    stroke: #5eead4 !important;
    stroke-width: 2.5 !important;
    stroke-dasharray: 4 3 !important;
}

/* Merge node visual — maximum contrast: a DARK slate body (every category
   card is pale, so an inverted dark card is unmistakable) + a bright teal
   dashed outline + a teal glow halo. The dark fill forces the label text
   to flip to light (see .node-wrap-merge rules below). The glow is a CSS
   drop-shadow on the SVG rect (no <filter> def needed); blur radius is in
   user-space units so it scales with zoom. Only user-created merge nodes
   carry this, so the render cost is bounded. */
.node-card.node-merge {
    /* !important is required: the per-category fill/stroke rules
       (.node-card.node-asset.node-networks etc.) use 3 classes and would
       otherwise win on specificity over this 2-class selector, repainting
       the merge card with its category colour. Same workaround the
       .node-card.node-merge-selected rule above uses. */
    /* Subtle neutral-grey body: among the tinted (blue/pink/yellow)
       category cards, a desaturated grey card is the odd one out and
       reads as distinct without being heavy. Light enough to keep the
       default dark label text legible; the slate dashed border +
       collection icon + member count complete the "this is a merge"
       identity. */
    fill: #cbd5e1 !important;   /* slate-300 */
    stroke: #475569 !important; /* slate-600 — defines the dashed edge */
    stroke-width: 2.5 !important;
    stroke-dasharray: 6 3 !important;
}

.node-card.node-merge.node-selected {
    stroke: #1e293b !important; /* slate-800 */
    stroke-width: 3.5 !important;
}

/* Merge-node colour system, all derived from the default node tile so the
   relationship is consistent:
     default tile  = #eff6ff = rgb(239, 246, 255)
     merge node    = #cbd5e1 = rgb(203, 213, 225)  → diff (−36, −33, −30)
     expanded member = default + 50% of that diff
                     = rgb(221, 230, 240) = #dde6f0
   So a member is exactly half-way between a normal tile and the merge
   grey: more pronounced than a plain node, but clearly less than the
   merge node itself (which stays the prominent one).
   Only the fill is overridden (!important to beat the 3-class category
   fill); the category-coloured stroke is left intact. */
.node-card.node-merge-member {
    fill: #dde6f0 !important;  /* default + 50% of the merge colour diff */
}

/* Stacked-cards collection glyph left of the member count. Each rect is
   filled with the card body colour so the front card occludes the ones
   behind it, with a dark stroke for the outline on the light grey body. */
.node-merge-collection-icon rect {
    fill: #cbd5e1;     /* matches .node-card.node-merge body */
    stroke: #334155;   /* slate-700 outline reads on the grey body */
    stroke-width: 1.1;
}

/* Explicit expand/collapse toggle icon on merge nodes. */
.node-merge-toggle {
    cursor: pointer;
}

/* Minimal circular toggle: hollow circle outline, no fill, dark glyph —
   reads cleanly on the light-grey merge body. A faint slate tint appears
   only on hover. ``pointer-events: all`` is required because fill:none
   otherwise lets clicks fall through the hollow interior to the node card
   behind it (which selects the node instead of toggling expand/collapse). */
.node-merge-toggle-bg {
    fill: none;
    stroke: #334155;  /* slate-700 outline on the light grey body */
    stroke-width: 1.2;
    pointer-events: all;
}

.node-merge-toggle:hover .node-merge-toggle-bg {
    fill: rgba(51, 65, 85, 0.12);
}

.node-merge-toggle-glyph {
    fill: #334155;  /* slate-700 — reads on the light grey body */
    font-size: 12px;
    font-weight: 700;
    font-family: ui-monospace, monospace;
    pointer-events: none;
}

/* Member-count label rendered to the left of the +/− toggle on merge
   nodes — surfaces how many members will be revealed on expand. */
.node-merge-toggle-count {
    fill: #134e4a;
    font-size: 10px;
    font-weight: 700;
    font-family: ui-monospace, monospace;
    pointer-events: none;
}

/* Side panel: selection list when merge mode is active. */
.merge-selection-list {
    list-style: none;
    padding: 0;
    margin: 0.4rem 0 0.9rem;
    max-height: 18rem;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 0.45rem;
    background: rgba(15, 23, 42, 0.4);
}

.merge-selection-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.55rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    font-size: 0.82rem;
}

.merge-selection-item:last-child {
    border-bottom: 0;
}

.merge-selection-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.merge-selection-remove {
    background: transparent;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    padding: 0.15rem 0.4rem;
    font-size: 0.85rem;
    border-radius: 4px;
    flex-shrink: 0;
}

.merge-selection-remove:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

.merge-selection-empty {
    padding: 0.65rem 0.65rem;
    color: var(--muted);
    font-size: 0.78rem;
    list-style: none;
}

.merge-mode-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.merge-mode-actions .ghost {
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 4px;
}

.merge-mode-actions .primary-button {
    flex: 1 1 auto;
    background: linear-gradient(135deg, #14b8a6, #06b6d4);
    color: #04111c;
    border: 1px solid #2dd4bf;
    padding: 0.45rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
}

.merge-mode-actions .primary-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--bg-soft);
    color: var(--muted);
    border-color: var(--line);
}

/* Merge mode trigger lives at the right edge of the topology subtoolbar
   with a red-bordered pop so it's discoverable next to the breadcrumb hints. */
.merge-mode-trigger {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.85rem;
    background: rgba(239, 68, 68, 0.08);
    color: var(--ink);
    border: 1.5px solid rgba(239, 68, 68, 0.7);
    border-radius: 0.45rem;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: 120ms ease;
}

.merge-mode-trigger:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.9);
}

.merge-mode-trigger-glyph {
    font-size: 1rem;
    line-height: 1;
    color: #fca5a5;
}

.merge-mode-trigger.active {
    background: rgba(239, 68, 68, 0.22);
    border-color: #f87171;
    color: #fca5a5;
}

.merge-mode-trigger.active .merge-mode-trigger-glyph {
    color: #fca5a5;
}

/* Inline create-merge form: lives in the side panel below the
   "Merge N nodes" button after the user clicks it. */
.merge-create-form {
    margin-top: 0.8rem;
    padding: 0.7rem 0.75rem 0.6rem;
    border: 1px solid rgba(94, 234, 212, 0.4);
    border-radius: 0.55rem;
    background: rgba(13, 30, 36, 0.45);
}

.merge-create-form-title {
    margin: 0 0 0.55rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5eead4;
}

.merge-create-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.55rem;
    font-size: 0.8rem;
}

.merge-create-field > span:first-child {
    color: var(--muted);
}

.merge-create-field .muted-cell {
    font-size: 0.7rem;
    margin-left: 0.3em;
}

.merge-create-field input,
.merge-create-field select {
    min-height: 2rem;
    border-radius: 0.4rem;
    padding: 0.28rem 0.5rem;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    color: var(--ink);
    font-size: 0.82rem;
}

.merge-create-error {
    color: #fca5a5;
    margin: 0.2rem 0 0.55rem;
}

.merge-create-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.merge-create-actions .ghost,
.merge-create-actions .primary-button {
    flex: 1 1 auto;
    padding: 0.38rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 4px;
}

/* Sidebar merge details: tiny pill next to the title + action buttons row. */
.merge-badge {
    display: inline-block;
    margin-left: 0.5em;
    padding: 0.1rem 0.45rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #042f2e;
    background: #5eead4;
    border-radius: 999px;
}

.merge-details-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.6rem 0 0.9rem;
}

.merge-details-actions .ghost,
.merge-details-actions .btn-danger-sm {
    padding: 0.32rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 500;
    border-radius: 4px;
}

.merge-details-actions .ghost.active {
    background: rgba(94, 234, 212, 0.18);
    border-color: rgba(94, 234, 212, 0.6);
    color: #5eead4;
}

/* Edit (not yet editing) — red boundary, matches the destructive
   visual weight of Unmerge so the user understands the mode it gates. */
.merge-edit-btn {
    background: transparent;
    border: 1px solid var(--danger);
    color: var(--danger);
    border-radius: 4px;
    padding: 0.32rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
}

.merge-edit-btn:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}

/* Done editing — teal, signals "exit the destructive mode". */
.merge-done-btn {
    background: rgba(94, 234, 212, 0.15);
    border: 1px solid rgba(94, 234, 212, 0.7);
    color: #5eead4;
    border-radius: 4px;
    padding: 0.32rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
}

.merge-done-btn:hover {
    background: rgba(94, 234, 212, 0.28);
    border-color: #5eead4;
}

.merge-member-list {
    list-style: none;
    padding: 0;
    margin: 0.4rem 0 0;
}

.merge-member-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    font-size: 0.82rem;
}

.merge-member-row:last-child { border-bottom: 0; }

.merge-member-text {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

.merge-member-remove {
    background: transparent;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    padding: 0.15rem 0.4rem;
    font-size: 0.85rem;
    border-radius: 4px;
    flex-shrink: 0;
}

.merge-member-remove:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
}

.merge-member-remove:disabled { opacity: 0.4; cursor: not-allowed; }

/* —— In-page confirmation dialog (HTML5 <dialog>) ———————————————— */
.confirm-dialog {
    border: 1px solid var(--line);
    border-radius: 0.7rem;
    background: var(--panel);
    color: var(--ink);
    padding: 1.4rem 1.6rem;
    max-width: 28rem;
    width: 90vw;
}

.confirm-dialog::backdrop {
    background: rgba(8, 15, 30, 0.65);
}

.confirm-dialog-title {
    margin: 0 0 0.6rem;
    font-size: 1.05rem;
}

.confirm-dialog-body {
    margin: 0 0 0.7rem;
    font-size: 0.9rem;
}

.confirm-dialog-counts {
    margin: 0 0 0.7rem;
    padding-left: 1.2rem;
    font-size: 0.85rem;
    list-style: disc;
}

.confirm-dialog-counts span {
    font-weight: 600;
    color: var(--accent-strong);
}

.confirm-dialog-count-button {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--accent-strong);
    font: inherit;
    text-decoration: underline;
}

.confirm-dialog-count-button:hover,
.confirm-dialog-count-button:focus-visible {
    color: var(--ink);
    outline: none;
}

.confirm-dialog-asset-panel {
    margin: 0 0 0.8rem;
    border: 1px solid var(--line);
    border-radius: 0.45rem;
    background: rgba(15, 23, 42, 0.4);
    padding: 0.55rem 0.7rem;
}

.confirm-dialog-asset-meta {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
}

.confirm-dialog-asset-scroll {
    max-height: 16rem;
    overflow-y: auto;
}

.confirm-dialog-asset-scroll .data-table {
    font-size: 0.78rem;
    width: 100%;
}

.confirm-dialog-asset-scroll .data-table th,
.confirm-dialog-asset-scroll .data-table td {
    padding: 0.25rem 0.45rem;
}

.confirm-dialog-asset-scroll .muted-cell {
    font-size: 0.7rem;
}

/* Widen the dialog when the asset drill-down is open so the table breathes. */
.confirm-dialog:has(.confirm-dialog-asset-panel:not([hidden])) {
    max-width: 42rem;
}

.confirm-dialog-note {
    font-size: 0.78rem;
    margin: 0 0 1rem;
}

.confirm-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

/* Inline edit mode for asset rows. */
.inline-row-editing > td {
    background: rgba(56, 189, 248, 0.06);
}

.row-edit-input {
    box-sizing: border-box;
    width: 100%;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid var(--line);
    border-radius: 0.3rem;
    color: var(--ink);
    padding: 0.25rem 0.4rem;
    font: inherit;
    font-size: 0.82rem;
}

.row-edit-input:focus-visible {
    outline: 1px solid var(--accent-strong);
    outline-offset: 0;
}

.row-edit-stack {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.inline-row-editing .row-edit-controls {
    display: inline-flex;
    gap: 0.25rem;
}

.row-edit-btn {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--line);
    border-radius: 0.3rem;
    color: var(--ink);
    padding: 0.15rem 0.45rem;
    font-size: 0.85rem;
    cursor: pointer;
    line-height: 1;
}

.row-edit-btn:hover,
.row-edit-btn:focus-visible {
    border-color: var(--accent-strong);
    outline: none;
}

.row-edit-save {
    color: var(--success, #22c55e);
}

.row-edit-cancel {
    color: var(--color-danger, #c0392b);
}

.row-edit-error {
    color: var(--color-danger, #c0392b);
    font-size: 0.7rem;
    margin-top: 0.25rem;
    max-width: 14rem;
    text-align: right;
}

.confirm-dialog-actions > button {
    padding: 0.35rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 4px;
}

/* —— Row actions: kebab toggle + dropdown menu ———————————————— */
.row-actions-col { width: 2.4rem; }

.row-actions-cell {
    text-align: right;
    white-space: nowrap;
}

.row-actions {
    position: relative;
    display: inline-block;
}

.inline-row-editing .row-actions {
    display: none;
}

.row-actions-toggle {
    background: transparent;
    color: var(--ink);
    border: 1px solid transparent;
    border-radius: 0.45rem;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: 120ms ease;
}

.row-actions-toggle:hover,
.row-actions-toggle[aria-expanded="true"] {
    background: rgba(148, 163, 184, 0.12);
    border-color: var(--line);
    color: var(--ink);
}

.row-actions-menu {
    position: absolute;
    top: calc(100% + 0.3rem);
    right: 0;
    min-width: 11rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 0.55rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    padding: 0.3rem 0;
    z-index: 60;
}
/* When opened, inline-edit.js lifts the menu to position: fixed with
   computed viewport coordinates so it never gets clipped by an
   ancestor's overflow (table-wrap, panel, etc.) and flips upward when
   the toggle is too close to the viewport bottom. The class-based flip
   that used to live here is gone — JS sets top/bottom/right inline. */

.row-actions-menu form { display: block; }

.row-actions-menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.55rem;
    width: 100%;
    text-align: left;
    background: transparent;
    color: var(--ink);
    border: 0;
    padding: 0.45rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 0;
}

.row-actions-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    flex-shrink: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1;
}

.row-actions-menu-item:hover:not(:disabled) .row-actions-menu-icon,
.row-actions-menu-item:focus-visible:not(:disabled) .row-actions-menu-icon {
    color: inherit;
}

.row-actions-menu-item--danger .row-actions-menu-icon {
    color: inherit;
}

.row-actions-menu-item:hover:not(:disabled),
.row-actions-menu-item:focus-visible:not(:disabled) {
    background: rgba(34, 211, 238, 0.12);
    color: var(--accent-strong);
    outline: none;
}

.row-actions-menu-item:disabled,
.row-actions-menu-item[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
}

.row-actions-menu-item--danger { color: #fca5a5; }

.row-actions-menu-item--danger:hover:not(:disabled),
.row-actions-menu-item--danger:focus-visible:not(:disabled) {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}

.row-actions-menu-divider {
    height: 1px;
    background: var(--line);
    margin: 0.25rem 0;
}

.connector-name-rename:not([hidden]) {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
}

.connector-name-rename input {
    max-width: 14rem;
    min-height: 2rem;
}

.connector-name-rename .secondary-button {
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 500;
    border-radius: 4px;
}

/* —— Loading state for buttons performing async work ———————————————— */
.btn-importing {
    pointer-events: none;
    opacity: 0.85;
    display: inline-flex !important;
    align-items: center;
    gap: 0.5em;
}

.btn-importing::after {
    content: "";
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btnImportingSpin 0.7s linear infinite;
}

@keyframes btnImportingSpin {
    to { transform: rotate(360deg); }
}

.severity-manual,
.severity-unknown {
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.35);
    background: rgba(148, 163, 184, 0.12);
}

@keyframes connectorPulseGreen {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
    }
    100% {
        box-shadow: 0 0 0 0.6rem rgba(34, 197, 94, 0);
    }
}

@keyframes connectorPulseRed {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45);
    }
    100% {
        box-shadow: 0 0 0 0.6rem rgba(239, 68, 68, 0);
    }
}

.json-cell {
    max-width: 380px;
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.72rem;
}

.empty-cell {
    text-align: center;
    color: var(--muted);
    padding: 2rem 1rem;
}

.button-link,
button,
.secondary-button,
.ghost-link,
.ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 999px;
    padding: 0.72rem 1rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: 160ms ease;
}

.button-link,
button,
.secondary-button {
    background: var(--accent);
    color: #04111c;
}

.ghost-link,
.ghost {
    background: rgba(15, 23, 42, 0.78);
    color: var(--muted);
    border-color: var(--line);
}

.secondary-button {
    background: var(--bg-soft);
    color: var(--ink);
    border-color: var(--line);
}

.inline-form {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.inline-form input,
.inline-form select,
.inline-form textarea {
    min-height: 2.25rem;
    border-radius: 0.7rem;
    border: 1px solid #334155;
    background: #0b1220;
    color: var(--ink);
    padding: 0.58rem 0.78rem;
}

.inline-form-dark input {
    flex: 1;
}

.inline-form-dark select,
.inline-form-dark textarea {
    flex: 1;
}

.inline-form-dark select {
    min-height: 2.5rem;
    border-radius: 0.7rem;
    border: 1px solid #334155;
    background: #0b1220;
    color: var(--ink);
    padding: 0.62rem 0.8rem;
}

select,
textarea {
    border: 1px solid #334155;
    background: #0b1220;
    color: var(--ink);
}

select option {
    background: #0b1220;
    color: var(--ink);
}

input {
    width: 100%;
    padding: 0.78rem 0.95rem;
    border-radius: 0.7rem;
    border: 1px solid #334155;
    background: #0b1220;
    color: var(--ink);
}

input::placeholder {
    color: var(--muted-2);
}

input:focus {
    outline: none;
    border-color: rgba(34, 211, 238, 0.5);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.08);
}

input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    min-width: 1.05rem;
    min-height: 1.05rem;
    padding: 0;
    border: 1px solid #475569;
    border-radius: 0.28rem;
    background: #0b1220;
    appearance: none;
    -webkit-appearance: none;
    display: inline-grid;
    place-content: center;
    cursor: pointer;
}

input[type="checkbox"]::before {
    content: "";
    width: 0.58rem;
    height: 0.58rem;
    transform: scale(0);
    transition: transform 140ms ease;
    box-shadow: inset 1em 1em #04111c;
    clip-path: polygon(14% 50%, 0 66%, 41% 100%, 100% 20%, 84% 7%, 40% 71%);
}

input[type="checkbox"]:checked {
    border-color: rgba(34, 211, 238, 0.62);
    background: var(--accent-strong);
}

input[type="checkbox"]:checked::before {
    transform: scale(1);
}

input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.16);
}

.user-checkbox-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.user-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.user-create-form .user-form-select,
.group-member-select {
    width: 100%;
    border: 1px solid var(--line, #334155);
    border-radius: 0.7rem;
    background: var(--surface-2, var(--bg-elevated, #0b1220));
    color: var(--ink);
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--muted) 55%, transparent) transparent;
}

.group-member-select {
    min-height: 6rem;
    padding: 0.4rem;
}

.group-member-select option,
.user-create-form .user-form-select option {
    background: var(--surface-2, var(--bg-elevated, #0b1220));
    color: var(--ink);
}

label {
    display: block;
    font-weight: 600;
    color: var(--muted);
    font-size: 0.84rem;
}

.login-page {
    min-height: 100vh;
}

.auth-shell {
    min-height: 100vh;
    display: flex;
    background: var(--bg);
    align-items: stretch;
}

.auth-aside,
.auth-panel {
    padding: 3rem;
}

.auth-aside {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.3rem;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 35% 30%, rgba(6, 182, 212, 0.12), transparent 20%),
        radial-gradient(circle at 75% 70%, rgba(59, 130, 246, 0.1), transparent 18%),
        linear-gradient(180deg, #020617, #0b1120);
}

.auth-aside::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
    background-size: 42px 42px;
    pointer-events: none;
}

.auth-aside > * {
    position: relative;
    z-index: 1;
}

.auth-aside h1 {
    font-size: clamp(2rem, 3vw, 3rem);
    max-width: 12ch;
    line-height: 1.05;
}

.auth-aside p {
    max-width: 36rem;
}

.auth-feature-list {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.75rem;
}

.auth-panel {
    width: min(440px, 100%);
    background: var(--bg);
    border-left: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: -18px 0 48px rgba(0, 0, 0, 0.16);
}

.auth-panel-header {
    margin-bottom: 1.5rem;
}

.auth-sso {
    width: 100%;
    margin-bottom: 1rem;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--muted-2);
    font-size: 0.78rem;
    margin-bottom: 1rem;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--line);
}

.error-banner {
    padding: 0.8rem 1rem;
    border-radius: 0.75rem;
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.2);
    margin-bottom: 1rem;
}

.success-banner {
    padding: 0.8rem 1rem;
    border-radius: 0.75rem;
    background: rgba(34, 197, 94, 0.12);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.24);
    margin-bottom: 1rem;
}

.context-banner {
    margin-bottom: 0.8rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    background: rgba(15, 23, 42, 0.62);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    font-size: 0.8rem;
    flex-wrap: wrap;
}

.context-banner a {
    color: var(--accent-strong);
    text-decoration: none;
}

.context-banner a:hover {
    text-decoration: underline;
}

.data-table code {
    color: #cbd5e1;
    font-size: 0.72rem;
    white-space: pre-wrap;
}

.vuln-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    padding: 0;
}

.vuln-open:hover strong {
    color: var(--accent-strong);
}

.vuln-tabs {
    display: inline-flex;
    gap: 0.45rem;
    margin-bottom: 0.9rem;
}

.vuln-priority-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 0.8rem;
    margin-bottom: 0.9rem;
}

.vuln-priority-card {
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: rgba(15, 23, 42, 0.65);
    padding: 0.7rem;
}

.vuln-priority-card h3 {
    margin: 0 0 0.55rem;
    font-size: 0.82rem;
    color: #cbd5e1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.vuln-priority-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.45rem;
}

.vuln-priority-card li {
    display: flex;
    justify-content: space-between;
    gap: 0.7rem;
    align-items: flex-start;
}

.vuln-priority-card li em {
    font-style: normal;
    color: var(--muted);
    font-size: 0.72rem;
}

.vuln-pane {
    display: none;
}

.vuln-pane.active {
    display: block;
}

.asset-open {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    padding: 0;
}

.asset-open:hover strong {
    color: var(--accent-strong);
}

.asset-modal-open,
.asset-total-open {
    border: 0;
    background: transparent;
    color: var(--accent-strong);
    font: inherit;
    cursor: pointer;
    padding: 0;
}

.asset-modal-open:hover strong,
.asset-total-open:hover {
    text-decoration: underline;
}

.asset-severity-open {
    border: 0;
    background: transparent;
    color: var(--accent-strong);
    font: inherit;
    cursor: pointer;
    padding: 0;
}

.asset-severity-open:hover {
    text-decoration: underline;
}

.asset-vuln-link {
    color: var(--accent-strong);
    text-decoration: none;
}

.asset-vuln-link:hover {
    text-decoration: underline;
}

/* Fixed-layout widths for #assets-table.
 *
 * All-percent now (was mixed %+rem). Mixing units in a fixed-layout
 * table left ~15% of unallocated space that browsers distributed
 * unpredictably — usually into the last column, producing a visible
 * gap between Owner and Actions. With percentages summing to exactly
 * 100% there's nothing for the browser to misplace; Owner gets the
 * room the gap was eating.
 *
 * Checkbox + Actions are intentionally narrow but still %-based so
 * the table reflows responsively. The 11px checkbox fits comfortably
 * inside 1.5% (~21px on a 1400px viewport); the kebab toggle fits
 * inside 3%. */
.assets-fixed-layout { table-layout: fixed; }
.assets-fixed-layout .acol-checkbox    { width: 1.5%; }
.assets-fixed-layout .acol-hostname    { width: 23.19%; }
.assets-fixed-layout .acol-ip          { width: 11.88%; }
.assets-fixed-layout .acol-type        { width: 9%; }
.assets-fixed-layout .acol-os          { width: 13%; }
.assets-fixed-layout .acol-cloud       { width: 8.4%; }
.assets-fixed-layout .acol-env         { width: 7%; }
.assets-fixed-layout .acol-criticality { width: 11.88%; }
.assets-fixed-layout .acol-owner       { width: 11.15%; }
.assets-fixed-layout .acol-actions     { width: 3%; }
/* The narrow checkbox column (1.5% ≈ 21px on a 1400px viewport) is
 * just barely wide enough for the default 14px checkbox + cell
 * padding. Shrink the checkbox to 11px and drop the label's horizontal
 * padding so it centers in the cell without clipping into Hostname.
 * Width is declared above via .acol-checkbox; this block only handles
 * padding and the inner checkbox sizing. */
.assets-fixed-layout th.tms-col,
.assets-fixed-layout td.tms-cell {
    padding: 0;
}
.assets-fixed-layout .tms-cell-label {
    padding: 0.5rem 0;
}
.assets-fixed-layout .tms-row-checkbox,
.assets-fixed-layout .tms-select-all {
    width: 11px;
    height: 11px;
}

/* Long values in any narrow column would overflow without truncation
 * once table-layout is fixed. Apply ellipsis to every <td> by default,
 * then opt the hostname column out (it has its own <details> "Show
 * full value" disclosure and word-wrap for the overflow case). The
 * 1st (checkbox) and last (actions) tds use <input>/<button> so
 * ellipsis is a no-op for them. */
.assets-fixed-layout td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Hostname cell hosts a wrapping link + ref + <details>. Use
 * `overflow-wrap: anywhere` so long unbreakable strings (the kind
 * without spaces — e.g. hashed refs, FQDNs) wrap mid-string when they
 * would otherwise overflow, instead of bleeding into the IP column.
 * `word-break: break-word` is an older fallback for browsers that
 * don't support overflow-wrap: anywhere yet. */
.assets-fixed-layout td:nth-child(2) {
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.assets-fixed-layout td:nth-child(2) .asset-vuln-link strong,
.assets-fixed-layout td:nth-child(2) .muted-cell {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.finding-timeline-open {
    margin-left: 0.5rem;
    border: 1px solid var(--line);
    background: rgba(15, 23, 42, 0.8);
    color: var(--accent-strong);
    border-radius: 999px;
    padding: 0.2rem 0.5rem;
    font-size: 0.66rem;
}

.finding-action-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-left: 0.4rem;
}

.finding-workflow-open {
    border: 1px solid var(--line);
    background: rgba(15, 23, 42, 0.8);
    color: #cbd5e1;
    border-radius: 999px;
    padding: 0.2rem 0.48rem;
    font-size: 0.66rem;
}

.finding-workflow-open:hover,
.finding-timeline-open:hover {
    border-color: rgba(34, 211, 238, 0.34);
    color: var(--accent-strong);
}

.finding-timeline-list {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.7rem;
}

.finding-timeline-item {
    border: 1px solid var(--line);
    border-radius: 0.55rem;
    background: rgba(15, 23, 42, 0.7);
    padding: 0.55rem;
}

.finding-timeline-item header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
}

.finding-timeline-item header span {
    color: var(--muted);
    font-size: 0.72rem;
}

.finding-timeline-item p {
    margin: 0.4rem 0;
    color: var(--muted);
    font-size: 0.76rem;
}

.finding-timeline-item pre {
    margin: 0;
    border: 1px solid var(--line-soft);
    border-radius: 0.45rem;
    background: rgba(2, 6, 23, 0.65);
    padding: 0.45rem;
    font-size: 0.68rem;
    color: #cbd5e1;
    overflow: auto;
}

.sources-sync-widget {
    background: rgba(8, 15, 30, 0.82);
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.sources-sync-widget strong {
    font-size: 0.96rem;
}

.sources-sync-widget span {
    color: var(--muted-2);
    font-size: 0.82rem;
}

.row-focus {
    animation: rowPulse 1.6s ease;
}

@keyframes rowPulse {
    0% {
        background: rgba(6, 182, 212, 0.28);
    }
    100% {
        background: transparent;
    }
}

.vuln-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 90;
}

.vuln-modal.open {
    display: block;
}

.vuln-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.72);
}

.vuln-modal-panel {
    position: relative;
    margin: 9vh auto 0;
    width: min(760px, calc(100% - 2rem));
    max-height: 80vh;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: rgba(8, 15, 30, 0.98);
    padding: 1rem;
}

.vuln-modal-panel header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.vuln-modal-panel h3 {
    margin: 0;
    font-size: 1rem;
}

.vuln-asset-list {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.45rem;
}

.vuln-asset-list li {
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: rgba(15, 23, 42, 0.75);
    color: var(--ink);
    padding: 0.45rem 0.6rem;
    font-size: 0.78rem;
}

.vuln-asset-list a {
    color: var(--accent-strong);
    text-decoration: none;
}

.vuln-asset-list a:hover {
    text-decoration: underline;
}

.form-footnote {
    margin: 1rem 0 0;
    color: var(--muted);
}

.form-footnote a {
    color: var(--accent-strong);
    font-weight: 600;
}

/* Accepted-formats line on the upload form: one item per format group,
   separated by a dot so the groups stay legible when the row wraps. */
.upload-accepts-item + .upload-accepts-item::before {
    content: "·";
    margin: 0 0.45rem 0 0.2rem;
    opacity: 0.6;
}

/* Marks a format that goes through the review queue instead of straight to
   ingest — amber because it is a "this needs your eyes" signal, not an error. */
.upload-ai-badge {
    display: inline-block;
    padding: 0 4px;
    border-radius: 4px;
    font-size: 0.58rem;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: 1px;
    color: var(--warning);
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.narrow {
    max-width: 720px;
}

.security-panel {
    margin: 1.5rem 1.75rem;
}

.compact-form {
    max-width: 26rem;
}

.stack,
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

@media (max-width: 1080px) {
    .page-topbar {
        height: auto;
        align-items: flex-start;
        gap: 0.85rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .topbar-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .auth-shell {
        flex-direction: column;
    }

    .auth-panel {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--line);
        box-shadow: none;
    }

    .auth-aside h1 {
        max-width: 16ch;
    }
}

@media (max-width: 720px) {
    .app-shell {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        height: auto;
        position: static;
        overflow-y: visible;
    }

    .page-topbar,
    .hero-banner,
    .dashboard-grid,
    .bolt-stats,
    .topology-frame,
    .security-panel,
    .table-panel {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .page-topbar {
        height: auto;
        padding: 1rem;
        align-items: flex-start;
    }

    .page-topbar h1 {
        font-size: 1.45rem;
    }

    .topbar-actions {
        width: 100%;
        gap: 0.5rem;
    }

    .status-chip {
        max-width: 100%;
    }

    .panel-heading {
        gap: 0.6rem;
    }

    .hero-banner,
    .page-topbar,
    .topology-toolbar,
    .topbar-actions,
    .mini-metrics,
    .auth-shell,
    .segment-lane header {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-grid-main {
        grid-template-columns: 1fr;
    }

    .topology-workspace {
        grid-template-columns: 1fr;
    }

    .topology-subtoolbar {
        padding: 0.55rem 0.75rem;
    }

    .topology-toolbar {
        padding: 0.65rem 0.75rem;
    }

    .topology-controls {
        width: 100%;
    }

    .topology-toggle,
    .topology-filter {
        min-height: 2.2rem;
    }

    .toolbar-sep {
        display: none;
    }

    .topology-dropdown {
        width: 100%;
    }

    .topology-dropdown > .topology-filter {
        width: 100%;
        justify-content: center;
    }

    .topology-dropdown-menu {
        left: 0;
        right: 0;
        min-width: 0;
    }

    .zoom-group {
        width: 100%;
    }

    .zoom-group .topology-filter {
        flex: 1;
    }

    .topology-details {
        border-left: none;
        border-top: 1px solid var(--line);
        max-height: 38vh;
    }

    .topology-search {
        min-width: 0;
        width: 100%;
    }

    .severity-row {
        grid-template-columns: 1fr;
    }

    .severity-pct {
        text-align: left;
    }

    .auth-panel,
    .auth-aside {
        width: 100%;
        padding: 1.5rem;
    }

    .auth-aside {
        min-height: 40vh;
    }

    .auth-aside h1 {
        font-size: 1.9rem;
    }

    .brand-logo-auth {
        width: 12rem;
        height: 3.95rem;
        object-position: 50% 50%;
    }

    .data-table {
        min-width: 760px;
    }

    .table-controls input,
    .table-controls select {
        width: 100%;
        min-width: 0;
    }

    .table-controls button {
        width: 100%;
    }

    .connector-form-grid {
        grid-template-columns: 1fr;
    }

    .connector-actions {
        justify-content: flex-start;
    }

    .context-banner {
        align-items: flex-start;
    }

    .vuln-priority-grid {
        grid-template-columns: 1fr;
    }

    .welcome-actions {
        width: 100%;
    }

    .welcome-action-link {
        width: 100%;
        justify-content: center;
    }

    .pw-show-toggle {
        right: 0.4rem;
    }

    .sidebar-toggle { display: none; }
}

/* —— Clickable stat cards —— */
a.stat-card {
    display: block;
    text-decoration: none;
    cursor: pointer;
}
a.stat-card:hover {
    border-color: rgba(6, 182, 212, 0.36);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.08), 0 24px 60px rgba(0, 0, 0, 0.22);
    transform: translateY(-2px);
    transition: transform 160ms ease, border-color 160ms ease;
}

/* —— Severity bar percentage label —— */
.severity-pct {
    font-style: normal;
    font-size: 0.68rem;
    color: var(--muted-2);
    font-weight: 400;
    min-width: 2.4rem;
    text-align: right;
}

.severity-row {
    grid-template-columns: 110px 1fr 36px 2.4rem;
}

/* —— Gauge legend —— */
.gauge-legend {
    font-size: 0.69rem;
    color: var(--muted-2);
    text-align: center;
    margin-top: 0.35rem;
    line-height: 1.6;
}

/* —— Welcome strip quick-action links —— */
.welcome-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.welcome-action-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(34, 211, 238, 0.22);
    color: var(--accent-strong);
    font-size: 0.76rem;
    font-weight: 500;
    text-decoration: none;
    background: rgba(6, 182, 212, 0.07);
    transition: 150ms ease;
}

.welcome-action-link:hover {
    background: rgba(6, 182, 212, 0.14);
    border-color: rgba(34, 211, 238, 0.4);
}

/* —— Recommendation / risk list icons —— */
.action-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.65rem;
}

.action-list li {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

.action-list-icon {
    flex-shrink: 0;
    margin-top: 0.1rem;
    opacity: 0.65;
}

/* —— Search / NLQ placeholder —— */
.search-placeholder {
    color: var(--muted-2);
    font-size: 0.82rem;
    margin: 0.5rem 0 0;
    font-style: italic;
}

/* —— Vuln tabs underline style —— */
.vuln-tabs {
    border-bottom: 1px solid var(--line);
    margin-bottom: 0.85rem;
    gap: 0;
}

.vuln-tabs .topology-filter {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    padding: 0.55rem 1rem;
    font-size: 0.86rem;
    font-weight: 600;
    margin-bottom: -1px;
}

.vuln-tabs .topology-filter:hover {
    color: var(--ink);
    background: transparent;
    border-color: transparent;
    border-bottom-color: var(--line);
}

.vuln-tabs .topology-filter.active {
    color: var(--accent-strong);
    border-bottom-color: var(--accent);
    background: transparent;
}

/* —— Priority card discrete badges —— */
.priority-item-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
}

.priority-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}

.priority-badge {
    display: inline-flex;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    padding: 0.18rem 0.5rem;
    font-size: 0.68rem;
    color: var(--muted);
}

/* —— Workflow actions visible in title cell —— */
.finding-action-group--title {
    margin-top: 0.35rem;
    margin-left: 0;
}

.finding-action-group--row {
    margin-top: 0.45rem;
    justify-content: flex-start;
}

/* —— Topology toolbar separator —— */
.toolbar-sep {
    width: 1px;
    height: 1.3rem;
    background: var(--line);
    flex-shrink: 0;
    margin: 0 0.2rem;
    align-self: center;
}

/* —— Export dropdown —— */
.topology-dropdown {
    position: relative;
    display: inline-flex;
}

.topology-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 9rem;
    background: rgba(8, 15, 30, 0.98);
    border: 1px solid var(--line);
    border-radius: 0.65rem;
    padding: 0.3rem;
    z-index: 40;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.topology-dropdown.open .topology-dropdown-menu {
    display: flex;
}

.topology-dropdown-menu button {
    border-radius: 0.4rem;
    padding: 0.45rem 0.75rem;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 0.78rem;
    cursor: pointer;
    width: 100%;
    font-family: inherit;
    transition: 120ms ease;
}

.topology-dropdown-menu button:hover {
    background: rgba(6, 182, 212, 0.1);
    color: var(--accent-strong);
}

/* —— Connector form section labels —— */
.form-section-label {
    grid-column: 1 / -1;
    color: var(--muted-2);
    font-size: 0.69rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--line);
    margin-top: 0.4rem;
    font-weight: 600;
}

/* —— Password strength bar —— */
.pw-field-wrap {
    position: relative;
    width: 100%;
}

.pw-field-wrap input {
    padding-right: 2.6rem;
}

.pw-show-toggle {
    position: absolute;
    right: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--muted-2);
    padding: 0.25rem;
    cursor: pointer;
    line-height: 1;
    border-radius: 0.3rem;
    font-size: 0.78rem;
}

.pw-show-toggle:hover {
    color: var(--accent-strong);
}

.pw-strength-bar {
    height: 3px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
    margin-top: 0.3rem;
}

.pw-strength-fill {
    height: 100%;
    border-radius: inherit;
    transition: width 200ms ease, background-color 200ms ease;
    width: 0%;
}

.pw-strength-label {
    font-size: 0.7rem;
    color: var(--muted-2);
    margin-top: 0.18rem;
    display: block;
}

/* —— MFA status banner —— */
.mfa-status-banner {
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #86efac;
    margin-bottom: 1.2rem;
    font-size: 0.88rem;
}

/* —— Zoom button group —— */
.zoom-group {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    overflow: hidden;
}

.zoom-group .topology-filter {
    border: none;
    border-radius: 0;
    border-right: 1px solid var(--line);
    padding: 0.38rem 0.55rem;
    min-width: 2rem;
    text-align: center;
}

.zoom-group .topology-filter:last-child {
    border-right: none;
}

/* ——— Accessibility ——— */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ——— Back to top ——— */
.back-to-top {
    position: fixed;
    bottom: 1.5rem;
    right: 5rem;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--accent);
    color: #04111c;
    border: none;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
    transform: translateY(8px);
    z-index: 80;
    padding: 0;
    cursor: pointer;
}

.back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.chat-fab {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid rgba(34, 211, 238, 0.45);
    background: linear-gradient(180deg, #155e75, #0f172a);
    color: #dff9ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 90;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(2, 6, 23, 0.45);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.chat-fab:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(2, 6, 23, 0.5);
}

.chat-fab.is-open {
    border-color: rgba(34, 211, 238, 0.75);
}

.chat-fab svg {
    width: 1.25rem;
    height: 1.25rem;
}

.chat-float-panel {
    position: fixed;
    right: 1.5rem;
    bottom: 5.1rem;
    width: min(24rem, calc(100vw - 2rem));
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: rgba(2, 6, 23, 0.96);
    box-shadow: 0 22px 40px rgba(2, 6, 23, 0.55);
    z-index: 90;
    display: grid;
    gap: 0.55rem;
    padding: 0.75rem;
    max-height: min(36rem, calc(100vh - 8rem));
    overflow: hidden;
}

.chat-float-panel[hidden] {
    display: none;
}

.chat-float-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.chat-float-header h3 {
    margin: 0;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.chat-float-thread {
    min-height: 8rem;
    max-height: 18rem;
    overflow: auto;
    display: grid;
    gap: 0.5rem;
    padding-right: 0.1rem;
}

.chat-float-prompts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.chat-float-prompt-btn {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.22rem 0.5rem;
    background: rgba(15, 23, 42, 0.75);
    color: var(--muted);
    font-size: 0.7rem;
    cursor: pointer;
}

.chat-float-prompt-btn:hover {
    color: var(--accent-strong);
    border-color: rgba(34, 211, 238, 0.35);
}

.chat-float-composer {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.4rem;
}

.chat-float-composer input {
    min-height: 2.2rem;
    padding: 0.42rem 0.52rem;
    border-radius: 0.5rem;
}

.chat-float-composer button {
    min-height: 2.2rem;
    padding: 0.42rem 0.7rem;
}

/* ——— Sidebar collapse ——— */
.sidebar-toggle {
    width: 100%;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    color: var(--muted);
    padding: 0.38rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 150ms ease;
    flex-shrink: 0;
}

.sidebar-toggle:hover {
    border-color: rgba(34, 211, 238, 0.3);
    color: var(--accent-strong);
    background: rgba(6, 182, 212, 0.08);
}

.sidebar--collapsed {
    width: 64px;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
}

.sidebar--collapsed .brand-logo {
    display: none;
}

.sidebar--collapsed .sidebar-brand {
    justify-content: center;
}

.sidebar--collapsed .nav-label {
    display: none;
}

.sidebar--collapsed .nav-link {
    justify-content: center;
    padding: 0.8rem;
}

.sidebar--collapsed .nav-group {
    border-color: transparent;
    background: transparent;
    padding: 0;
}

.sidebar--collapsed .nav-group-title {
    display: none;
}

/* When the sidebar is collapsed to icons, the title button is hidden so
   the user can't toggle a section. Force-expand the body so all icons stay
   reachable regardless of stored collapse preference. */
.sidebar--collapsed .nav-group-body {
    grid-template-rows: 1fr !important;
}

/* Collapsed sidebar: user card shrinks to a centered avatar pill. */
.sidebar--collapsed .user-card-id,
.sidebar--collapsed .user-card-caret,
.sidebar--collapsed .user-card-panel {
    display: none !important;
}

.sidebar--collapsed .user-card-trigger {
    grid-template-columns: auto;
    justify-content: center;
    padding: 0.55rem;
}

.sidebar--collapsed .user-card {
    border-radius: 0.75rem;
}

/* Collapsed sidebar: theme segmented control becomes vertical stack with
   icon-only buttons, the badge in the featured group hides, etc. */
.sidebar--collapsed .theme-segmented {
    grid-template-columns: 1fr;
    border-radius: 0.75rem;
    padding: 0.15rem;
}

.sidebar--collapsed .theme-segmented-btn span:not([class]) {
    display: none;
}

.sidebar--collapsed .theme-segmented-btn {
    padding: 0.4rem;
    border-radius: 0.5rem;
}

.sidebar--collapsed .theme-segmented-indicator {
    top: 0.15rem;
    left: 0.15rem;
    right: 0.15rem;
    width: calc(100% - 0.3rem);
    height: calc(50% - 0.15rem);
    border-radius: 0.5rem;
}

.sidebar--collapsed .theme-segmented[data-theme="dark"] .theme-segmented-indicator {
    transform: translateY(100%);
}

.sidebar--collapsed .nav-group-badge {
    display: none;
}

.sidebar--collapsed .nav-group--featured {
    border-color: rgba(34, 211, 238, 0.18);
    background: transparent;
    box-shadow: none;
}

@media (max-width: 1080px) {
    .nav-group {
        padding: 0.3rem 0.26rem;
    }

    .nav-link {
        padding: 0.72rem 0.8rem;
    }
}

/* ——— Distinct severity bar fills ——— */
.severity-fill-orange {
    background: linear-gradient(90deg, #f97316, #fb923c);
}

.severity-fill-amber {
    background: linear-gradient(90deg, #d97706, #fbbf24);
}

/* ——— Empty state ——— */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--muted);
    padding: 2rem 1rem;
}

.empty-state p {
    margin: 0 0 0.6rem;
}

.empty-state a {
    color: var(--accent-strong);
    text-decoration: none;
    font-size: 0.84rem;
}

.empty-state a:hover {
    text-decoration: underline;
}

/* ——— Welcome strip ——— */
.welcome-strip {
    margin: 1rem 1.75rem 0.25rem;
    padding: 0.7rem 1.25rem;
    background: rgba(15, 23, 42, 0.82);
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.welcome-strip p {
    margin: 0;
    color: var(--muted);
    font-size: 0.84rem;
}

.global-search-shell {
    margin: 1rem 1.75rem 0;
    padding: 0.8rem 0.95rem;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: rgba(2, 6, 23, 0.74);
    position: relative;
}

/* ——— Sidebar user card (under the SCRYER logo) ———
   Note: no `overflow: hidden` here — combined with the flex column in the
   sidebar it triggers the well-known min-height: auto collapse and the card
   shrinks to its border height. Border-radius alone clips the corners. */
.user-card {
    position: relative;
    flex: 0 0 auto;
    margin-top: 0.15rem;
    border-radius: 0.85rem;
    background:
        radial-gradient(140% 70% at 0% 0%, rgba(34, 211, 238, 0.12), transparent 65%),
        linear-gradient(180deg, #1a2236 0%, #131c2f 100%);
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.user-card-panel[hidden] {
    display: none !important;
}

.user-card:hover {
    border-color: rgba(34, 211, 238, 0.36);
    box-shadow: 0 6px 18px -8px rgba(34, 211, 238, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.user-card--open {
    border-color: rgba(34, 211, 238, 0.48);
    box-shadow: 0 10px 28px -10px rgba(34, 211, 238, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.user-card-trigger {
    position: relative;
    width: 100%;
    min-height: 3rem;
    background: transparent;
    border: none;
    padding: 0.55rem 0.6rem 0.55rem 0.55rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.6rem;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
    font: inherit;
    font-family: inherit;
    border-radius: 0.85rem;
    transition: background 160ms ease;
}

.user-card-trigger:hover {
    background: rgba(34, 211, 238, 0.05);
}

.user-card-trigger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.5);
}

.user-card-trigger:active {
    transform: scale(0.995);
}

.user-card-avatar {
    position: relative;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #22d3ee 0%, #0e7490 100%);
    color: #04111c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.45) inset,
                0 4px 12px -6px rgba(34, 211, 238, 0.65);
}

.user-card-avatar-text {
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

.user-card-status {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 2px rgba(2, 6, 23, 0.96);
}

.user-card-id {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.user-card-id-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.user-card-name {
    font-size: 0.84rem;
    font-weight: 600;
    color: rgba(241, 245, 249, 0.96);
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

.user-card-chip {
    flex-shrink: 0;
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.12rem 0.38rem;
    border-radius: 999px;
    color: var(--accent-strong);
    background: rgba(6, 182, 212, 0.14);
    border: 1px solid rgba(34, 211, 238, 0.32);
    line-height: 1;
}

/* The platform chip has to read as a different KIND of thing from the role
   chip beside it — one is where you are, the other is what you are. */
.user-card-chip--platform {
    color: rgb(234, 179, 8);
    background: rgba(234, 179, 8, 0.14);
    border-color: rgba(234, 179, 8, 0.34);
}

/* Which customer you are, above which of their tenants you are in. Quieter
   than the email: it changes far less often, and it is context rather than
   identity. */
.user-card-org {
    display: block;
    font-size: 0.66rem;
    letter-spacing: 0.01em;
    color: rgba(148, 163, 184, 0.7);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* An organisation's owner. Distinct from a role chip because it is not a role:
   it applies in every workspace they own, including ones they never joined. */
.user-card-chip--owner {
    color: rgb(129, 140, 248);
    background: rgba(129, 140, 248, 0.14);
    border-color: rgba(129, 140, 248, 0.34);
}

.user-card-email {
    font-size: 0.7rem;
    color: rgba(148, 163, 184, 0.86);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-card-caret {
    color: rgba(148, 163, 184, 0.72);
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), color 160ms ease;
    flex-shrink: 0;
}

.user-card--open .user-card-caret {
    transform: rotate(180deg);
    color: var(--accent-strong);
}

/* Panel is a floating overlay — its position is set in JS based on the
   trigger's bounding rect. Stays out of the document flow so opening it
   does not shift the nav. */
.user-card-panel {
    position: fixed;
    z-index: 50;
    display: grid;
    gap: 0.55rem;
    width: 16rem;
    padding: 0.55rem 0.6rem 0.7rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 0.85rem;
    background: linear-gradient(180deg, #1a2236 0%, #131c2f 100%);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45),
                0 4px 8px rgba(0, 0, 0, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.04);
    animation: user-card-reveal 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes user-card-reveal {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ——— Dropdown menu items (Profile, Security, …, Sign out) ——— */
.user-card-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.1rem;
}

.user-card-menu-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.5rem 0.55rem;
    border-radius: 0.55rem;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(203, 213, 225, 0.92);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    text-align: left;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 120ms ease;
    line-height: 1.1;
}

.user-card-menu-item:hover,
.user-card-menu-item:focus-visible {
    background: rgba(6, 182, 212, 0.1);
    color: var(--accent-strong);
    outline: none;
}

.user-card-menu-item:focus-visible {
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.45);
}

.user-card-menu-item:active {
    transform: scale(0.99);
}

.user-card-menu-icon {
    flex-shrink: 0;
    opacity: 0.78;
}

.user-card-menu-item:hover .user-card-menu-icon,
.user-card-menu-item:focus-visible .user-card-menu-icon {
    opacity: 1;
}

.user-card-menu-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-card-divider {
    border: 0;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    margin: 0.25rem 0 0.05rem;
}

.user-card-signout {
    display: block;
    width: 100%;
}

.user-card-menu-item--signout {
    color: rgba(248, 180, 180, 0.92);
}

.user-card-menu-item--signout:hover,
.user-card-menu-item--signout:focus-visible {
    background: rgba(248, 113, 113, 0.1);
    color: #fca5a5;
}

.user-card-menu-item--signout:focus-visible {
    box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.45);
}

/* ——— Segmented theme toggle (sidebar, below logo). Intentionally muted —
   it should read as a small affordance, not a primary CTA. ——— */
.theme-segmented {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    padding: 0.15rem;
    border-radius: 0.6rem;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.1);
    isolation: isolate;
}

.theme-segmented-indicator {
    position: absolute;
    top: 0.15rem;
    bottom: 0.15rem;
    left: 0.15rem;
    width: calc(50% - 0.15rem);
    border-radius: 0.45rem;
    background: rgba(148, 163, 184, 0.12);
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
    pointer-events: none;
}

.theme-segmented[data-theme="dark"] .theme-segmented-indicator {
    transform: translateX(100%);
}

.theme-segmented-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.3rem 0.4rem;
    min-height: 1.7rem;
    border: none;
    background: transparent;
    color: rgba(148, 163, 184, 0.7);
    font: inherit;
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    border-radius: 0.45rem;
    transition: color 160ms ease, transform 120ms ease;
    line-height: 1;
}

.theme-segmented-btn:hover {
    color: rgba(226, 232, 240, 0.9);
}

.theme-segmented-btn.is-active {
    color: rgba(226, 232, 240, 0.96);
}

.theme-segmented-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.5);
}

.theme-segmented-btn:active {
    transform: scale(0.97);
}

.theme-segmented-btn svg {
    flex-shrink: 0;
    opacity: 0.8;
}

/* Feature toggle list (Features settings page). Rows pair a label with an
   on/off switch. Colors use theme variables so it reads in light and dark. */
.feature-toggle-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    /* Cap the width so the switch sits close to its label instead of drifting
       to the far edge of a full-width panel. */
    max-width: 34rem;
}

.feature-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 0.15rem;
    border-top: 1px solid var(--line-soft);
}

.feature-toggle-row:first-child {
    border-top: none;
}

.feature-toggle-copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.feature-toggle-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
}

.feature-toggle-desc {
    font-size: 0.78rem;
    color: var(--muted);
}

/* On/off switch (role="switch"). */
.switch {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.switch-track {
    position: relative;
    display: block;
    width: 2.6rem;
    height: 1.5rem;
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.55);
    border: 1px solid rgba(100, 116, 139, 0.65);
    transition: background 160ms ease, border-color 160ms ease;
}

.switch-thumb {
    position: absolute;
    top: 50%;
    left: 0.17rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: #f8fafc;
    transform: translateY(-50%);
    transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(2, 6, 23, 0.35);
}

.switch.is-on .switch-track {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.35);
}

.switch.is-on .switch-thumb {
    transform: translate(1.1rem, -50%);
}

.switch:focus-visible {
    outline: none;
}

.switch:focus-visible .switch-track {
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.5);
}

.global-search-label {
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.45rem;
}

.global-search-input {
    width: 100%;
    min-height: 2.5rem;
}

.global-search-results {
    position: absolute;
    top: calc(100% - 0.25rem);
    left: 0.95rem;
    right: 0.95rem;
    z-index: 30;
    border: 1px solid var(--line);
    border-radius: 0.8rem;
    background: #020617;
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.35);
    max-height: 17rem;
    overflow: auto;
}

.global-search-item {
    display: grid;
    gap: 0.12rem;
    padding: 0.65rem 0.8rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(30, 41, 59, 0.7);
}

.global-search-item:last-child {
    border-bottom: none;
}

.global-search-item:hover {
    background: rgba(6, 182, 212, 0.09);
}

.global-search-kind {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--muted-2);
    letter-spacing: 0.08em;
}

.global-search-title {
    font-size: 0.84rem;
    color: #dbeafe;
}

.global-search-subtitle,
.global-search-empty {
    font-size: 0.74rem;
    color: var(--muted);
}

.global-search-empty {
    padding: 0.75rem 0.8rem;
}

.chat-shell {
    margin: 1rem 1.75rem 1.75rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 1rem;
}

.chat-thread {
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: rgba(2, 6, 23, 0.55);
    padding: 1rem;
    min-height: 26rem;
    max-height: 62vh;
    overflow: auto;
    display: grid;
    gap: 0.8rem;
}

.chat-message {
    border: 1px solid var(--line-soft);
    border-radius: 0.8rem;
    padding: 0.75rem;
    background: rgba(15, 23, 42, 0.7);
}

.chat-message-user {
    border-color: rgba(34, 211, 238, 0.25);
    background: rgba(6, 182, 212, 0.1);
}

.chat-message h4 {
    margin: 0 0 0.4rem;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.chat-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.45rem;
}

.chat-links a {
    font-size: 0.74rem;
    color: var(--accent-strong);
    text-decoration: none;
    border: 1px solid rgba(34, 211, 238, 0.3);
    border-radius: 999px;
    padding: 0.22rem 0.52rem;
}

.chat-composer {
    margin-top: 0.8rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.55rem;
}

.chat-composer button[disabled] {
    opacity: 0.7;
    cursor: wait;
}

.chat-side-panel {
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: rgba(15, 23, 42, 0.7);
    padding: 0.95rem;
    display: grid;
    gap: 0.55rem;
    align-content: start;
}

.chat-prompt-btn {
    width: 100%;
    justify-content: flex-start;
    border-radius: 0.65rem;
    background: rgba(15, 23, 42, 0.85);
    color: var(--muted);
    border: 1px solid var(--line);
    padding: 0.6rem 0.7rem;
    font-size: 0.76rem;
}

.chat-prompt-btn:hover {
    color: var(--accent-strong);
    border-color: rgba(34, 211, 238, 0.35);
}

.connector-example {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.72rem;
}

.approval-actions {
    display: grid;
    gap: 0.45rem;
    min-width: 17rem;
}

.approval-inline {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.approval-inline input {
    min-height: 2rem;
    padding: 0.42rem 0.58rem;
    font-size: 0.74rem;
}

.approval-inline button {
    min-height: 2rem;
    padding: 0.45rem 0.7rem;
    font-size: 0.72rem;
}

.review-stream {
    margin-top: 0.35rem;
    display: grid;
    gap: 0.3rem;
}

.review-stream li {
    color: var(--muted);
    font-size: 0.74rem;
}

@media (max-width: 1080px) {
    .chat-shell {
        grid-template-columns: 1fr;
    }

    .chat-side-panel {
        order: -1;
    }
}

@media (max-width: 720px) {
    .global-search-shell {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .chat-shell {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .chat-composer {
        grid-template-columns: 1fr;
    }

    .approval-actions {
        min-width: 0;
    }

    .approval-inline {
        flex-direction: column;
        align-items: stretch;
    }

    .approval-inline button,
    .approval-inline input {
        width: 100%;
    }

    .chat-fab {
        right: 1rem;
        bottom: 1rem;
    }

    .chat-float-panel {
        right: 1rem;
        left: 1rem;
        width: auto;
        bottom: 4.9rem;
    }

    .back-to-top {
        right: 4.4rem;
        bottom: 1.05rem;
    }
}

.welcome-strip strong {
    color: var(--ink);
}

/* ── Identity page ─────────────────────────────────────────────────────────── */

.identity-tabs {
    display: flex;
    gap: 0.25rem;
    margin: 0 1.75rem 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0;
}

.identity-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 1rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 0;
    transition: color 140ms ease, border-color 140ms ease;
    margin-bottom: -1px;
}

.identity-tab-btn:hover {
    color: var(--ink);
}

.identity-tab-btn.active {
    color: var(--accent-strong);
    border-bottom-color: var(--accent-strong);
}

.identity-tab-panel {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.identity-tab-panel.hidden {
    display: none;
}

.inline-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--muted);
    font-size: 0.78rem;
}

.inline-toggle input[type="checkbox"] {
    accent-color: var(--accent-strong);
}

/* At-risk account row highlight */
.id-row--at-risk td:first-child::after {
    content: "at risk";
    display: inline-block;
    margin-left: 0.45rem;
    padding: 0.1rem 0.38rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 600;
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fca5a5;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Identity status badges */
.identity-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.52rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 500;
    border: 1px solid var(--line-soft);
}

.identity-badge--mfa {
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.1);
}

.identity-badge--no-mfa {
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.1);
}

.identity-badge--sso {
    color: #67e8f9;
    border-color: rgba(34, 211, 238, 0.35);
    background: rgba(34, 211, 238, 0.08);
}

.identity-badge--local {
    color: var(--muted);
    border-color: var(--line-soft);
    background: transparent;
}

/* IdP cards on the Providers tab */
.idp-card {
    border-top: 1px solid var(--line-soft);
    padding: 1.25rem 1.5rem 1.5rem;
}

.idp-card:first-of-type {
    border-top: none;
}

.idp-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.idp-card-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.idp-sparkline {
    width: 74px;
    height: 20px;
    margin-left: 0.35rem;
}

.idp-sparkline polyline {
    fill: none;
    stroke: #60a5fa;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.9;
}

.idp-card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* IdP type badge */
.idp-type-badge {
    display: inline-flex;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid var(--line-soft);
    background: rgba(15, 23, 42, 0.5);
    color: var(--muted);
}

.idp-type-okta { color: #fb923c; border-color: rgba(251, 146, 60, 0.35); background: rgba(251, 146, 60, 0.08); }
.idp-type-azure-ad { color: #60a5fa; border-color: rgba(96, 165, 250, 0.35); background: rgba(96, 165, 250, 0.08); }
.idp-type-google-workspace { color: #4ade80; border-color: rgba(74, 222, 128, 0.35); background: rgba(74, 222, 128, 0.08); }
.idp-type-onelogin { color: #e879f9; border-color: rgba(232, 121, 249, 0.35); background: rgba(232, 121, 249, 0.08); }

.idp-apps-wrap {
    margin-top: 0.5rem;
}

.idp-apps-table {
    font-size: 0.82rem;
}

.protocol-pill {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.idp-no-apps {
    color: var(--muted);
    font-size: 0.82rem;
    margin: 0.5rem 0;
}

@media (max-width: 720px) {
    .identity-tabs {
        margin: 0 1rem;
        overflow-x: auto;
        white-space: nowrap;
    }
    .idp-card {
        padding: 1rem;
    }
}

/* ── Secrets page ──────────────────────────────────────────────────────────── */

/* Tab bar — mirrors identity-tabs pattern */
.sec-tabs {
    display: flex;
    gap: 0.25rem;
    margin: 0 1.75rem 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0;
}

.sec-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 1rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 0;
    transition: color 140ms ease, border-color 140ms ease;
    margin-bottom: -1px;
}

.sec-tab-btn:hover { color: var(--ink); }

.sec-tab-btn.active {
    color: var(--accent-strong);
    border-bottom-color: var(--accent-strong);
}

.sec-tab-panel {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.sec-tab-panel.hidden { display: none; }

/* Secret provider card — mirrors idp-card pattern */
.secret-provider-card {
    border: 1px solid var(--line);
    border-radius: 10px;
    margin: 0 1.75rem 1.25rem;
    overflow: hidden;
}

.secret-provider-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.25rem;
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}

.secret-provider-title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.92rem;
}

.secret-provider-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.secret-provider-table-wrap {
    margin: 0;
    border: none;
    border-radius: 0;
}

.sticky-provider-summary {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    gap: 0.45rem;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid var(--line);
    background: rgba(10, 15, 25, 0.92);
    backdrop-filter: blur(2px);
}

.secret-provider-table {
    border-top: none;
}

/* Source-system type badge */
.sec-src-type-badge {
    display: inline-flex;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid var(--line-soft);
    background: rgba(15,23,42,0.5);
    color: var(--muted);
    white-space: nowrap;
}

.sec-src-type-cloud    { color: #67e8f9; border-color: rgba(34,211,238,0.35); background: rgba(34,211,238,0.07); }
.sec-src-type-identity { color: #a5b4fc; border-color: rgba(139,92,246,0.35); background: rgba(139,92,246,0.07); }
.sec-src-type-scm      { color: #86efac; border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.07); }
.sec-src-type-vault    { color: #fde68a; border-color: rgba(251,191,36,0.35); background: rgba(251,191,36,0.07); }
.sec-src-type-idp      { color: #fb923c; border-color: rgba(251,146,60,0.35); background: rgba(251,146,60,0.07); }
.sec-src-type-saas     { color: #f9a8d4; border-color: rgba(244,114,182,0.35); background: rgba(244,114,182,0.07); }
.sec-src-type-other    { color: var(--muted); border-color: var(--line-soft); }

/* Redacted value displayed inline in value column */
.secret-redacted-value {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.72rem;
    color: #cbd5e1;
    letter-spacing: 0.04em;
}

/* Used-by cell — slightly smaller, wrap allowed */
.secret-used-by {
    font-size: 0.8rem;
    color: var(--muted);
    max-width: 240px;
}

/* Secret type badge */
.secret-type-badge {
    display: inline-flex;
    padding: 0.2rem 0.52rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: capitalize;
    border: 1px solid var(--line-soft);
    background: rgba(15,23,42,0.5);
    color: var(--muted);
    white-space: nowrap;
}

.secret-type-api_key        { color: #67e8f9; border-color: rgba(34,211,238,0.35); background: rgba(34,211,238,0.07); }
.secret-type-oauth_token    { color: #a5b4fc; border-color: rgba(139,92,246,0.35); background: rgba(139,92,246,0.07); }
.secret-type-service_account_key { color: #fb923c; border-color: rgba(251,146,60,0.35); background: rgba(251,146,60,0.07); }
.secret-type-password       { color: #f9a8d4; border-color: rgba(244,114,182,0.35); background: rgba(244,114,182,0.07); }
.secret-type-ssh_key        { color: #86efac; border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.07); }
.secret-type-certificate    { color: #fde68a; border-color: rgba(251,191,36,0.35); background: rgba(251,191,36,0.07); }
.secret-type-webhook_secret { color: #94a3b8; border-color: rgba(148,163,184,0.25); background: rgba(148,163,184,0.05); }

/* Permission badge */
.secret-perm-badge {
    display: inline-flex;
    padding: 0.2rem 0.52rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: capitalize;
    border: 1px solid var(--line-soft);
    white-space: nowrap;
}

.secret-perm-read       { color: #86efac; border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.08); }
.secret-perm-write      { color: #fca5a5; border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.08); }
.secret-perm-read_write { color: #fdba74; border-color: rgba(249,115,22,0.35); background: rgba(249,115,22,0.08); }
.secret-perm-deploy     { color: #67e8f9; border-color: rgba(34,211,238,0.35); background: rgba(34,211,238,0.08); }
.secret-perm-admin      { color: #fde68a; border-color: rgba(251,191,36,0.35); background: rgba(251,191,36,0.08); }
.secret-perm-rotate     { color: #a5b4fc; border-color: rgba(139,92,246,0.35); background: rgba(139,92,246,0.08); }
.secret-perm-unknown    { color: var(--muted); border-color: var(--line-soft); }

/* Expiry cell */
.secret-expiry {
    font-size: 0.82rem;
    color: var(--muted);
}

.secret-expiry--expired {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #fecaca;
    font-weight: 600;
}

.secret-expiry--soon {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #fef08a;
    font-weight: 500;
}

.rotation-age-chip {
    display: inline-flex;
    margin-left: 0.35rem;
    padding: 0.08rem 0.34rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: #cbd5e1;
    background: rgba(148, 163, 184, 0.08);
    font-size: 0.64rem;
    font-weight: 600;
}

.rotation-age-chip--warn {
    color: #fde68a;
    border-color: rgba(251, 191, 36, 0.35);
    background: rgba(251, 191, 36, 0.08);
}

.rotation-age-chip--stale {
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.08);
}

/* Row highlight for expired / rotation_due */
.sec-row--critical td {
    background: rgba(239,68,68,0.04);
}

.sec-row--warn td {
    background: rgba(251,191,36,0.035);
}

@media (max-width: 720px) {
    .secret-used-by { max-width: 160px; }
    .secret-redacted-value { font-size: 0.68rem; }
}

/* ── Applications page ────────────────────────────────────────────────────── */

.app-tabs {
    display: flex;
    gap: 0.25rem;
    margin: 0 1.75rem 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0;
}

.app-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 1rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 0;
    transition: color 140ms ease, border-color 140ms ease;
    margin-bottom: -1px;
}

.app-tab-btn:hover { color: var(--ink); }
.app-tab-btn.active { color: var(--accent-strong); border-bottom-color: var(--accent-strong); }

.app-tab-panel { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.app-tab-panel.hidden { display: none; }

.app-type-badge {
    display: inline-flex;
    padding: 0.2rem 0.52rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: capitalize;
    border: 1px solid var(--line-soft);
    background: rgba(15,23,42,0.5);
    color: var(--muted);
    white-space: nowrap;
}

.app-type-saas          { color: #a5b4fc; border-color: rgba(139,92,246,0.35); background: rgba(139,92,246,0.07); }
.app-type-on_premise    { color: #fb923c; border-color: rgba(251,146,60,0.35); background: rgba(251,146,60,0.07); }
.app-type-website       { color: #67e8f9; border-color: rgba(34,211,238,0.35); background: rgba(34,211,238,0.07); }
.app-type-api           { color: #86efac; border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.07); }
.app-type-cloud_service { color: #fde68a; border-color: rgba(251,191,36,0.35); background: rgba(251,191,36,0.07); }
.app-type-mobile        { color: #f9a8d4; border-color: rgba(244,114,182,0.35); background: rgba(244,114,182,0.07); }
.app-type-chat_assistant  { color: #a5b4fc; border-color: rgba(129,140,248,0.35); background: rgba(129,140,248,0.08); }
.app-type-coding_assistant { color: #67e8f9; border-color: rgba(34,211,238,0.35); background: rgba(34,211,238,0.08); }
.app-type-model_platform  { color: #c4b5fd; border-color: rgba(167,139,250,0.35); background: rgba(167,139,250,0.08); }
.app-type-inference_service { color: #86efac; border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.08); }
.app-type-self_hosted_model { color: #fb923c; border-color: rgba(251,146,60,0.35); background: rgba(251,146,60,0.08); }
.app-type-mlops_pipeline { color: #fde68a; border-color: rgba(251,191,36,0.35); background: rgba(251,191,36,0.08); }

.app-provider-pill {
    display: inline-flex;
    padding: 0.2rem 0.52rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid var(--line-soft);
    background: rgba(255,255,255,0.04);
    color: var(--muted);
    white-space: nowrap;
}

.app-provider-aws        { color: #fde68a; border-color: rgba(251,191,36,0.3); background: rgba(251,191,36,0.06); }
.app-provider-azure      { color: #67e8f9; border-color: rgba(34,211,238,0.3); background: rgba(34,211,238,0.06); }
.app-provider-gcp        { color: #86efac; border-color: rgba(34,197,94,0.3); background: rgba(34,197,94,0.06); }
.app-provider-cloudflare { color: #fb923c; border-color: rgba(251,146,60,0.3); background: rgba(251,146,60,0.06); }
.app-provider-on-premise { color: #94a3b8; border-color: rgba(148,163,184,0.25); background: rgba(148,163,184,0.05); }
.app-provider-salesforce { color: #7dd3fc; border-color: rgba(14,165,233,0.3); background: rgba(14,165,233,0.06); }
.app-provider-github     { color: #d1d5db; border-color: rgba(156,163,175,0.25); background: rgba(156,163,175,0.05); }
.app-provider-atlassian  { color: #a5b4fc; border-color: rgba(99,102,241,0.3); background: rgba(99,102,241,0.06); }
.app-provider-slack      { color: #f9a8d4; border-color: rgba(244,114,182,0.3); background: rgba(244,114,182,0.06); }
.app-provider-datadog    { color: #c4b5fd; border-color: rgba(167,139,250,0.3); background: rgba(167,139,250,0.06); }
.app-provider-pagerduty  { color: #fca5a5; border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.06); }
.app-provider-microsoft  { color: #7dd3fc; border-color: rgba(14,165,233,0.3); background: rgba(14,165,233,0.06); }
.app-provider-openai     { color: #86efac; border-color: rgba(34,197,94,0.3); background: rgba(34,197,94,0.06); }
.app-provider-anthropic  { color: #fdba74; border-color: rgba(249,115,22,0.3); background: rgba(249,115,22,0.06); }
.app-provider-hugging-face { color: #fde68a; border-color: rgba(251,191,36,0.3); background: rgba(251,191,36,0.06); }

.vuln-mini-counts { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }

.vuln-mini {
    display: inline-flex;
    padding: 0.15rem 0.42rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid var(--line-soft);
}

.vuln-mini--critical { color: #fca5a5; border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.12); }
.vuln-mini--high     { color: #fdba74; border-color: rgba(249,115,22,0.35); background: rgba(249,115,22,0.1); }
.vuln-mini--medium   { color: #fde68a; border-color: rgba(251,191,36,0.35); background: rgba(251,191,36,0.09); }
.vuln-mini--low      { color: #86efac; border-color: rgba(34,197,94,0.3); background: rgba(34,197,94,0.07); }

.security-score-cell { display: flex; align-items: center; gap: 0.55rem; min-width: 100px; }

.score-bar-wrap {
    flex: 1;
    height: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
    min-width: 50px;
}

.score-bar { height: 100%; border-radius: 999px; }
.score-bar--good   { background: #22c55e; }
.score-bar--medium { background: #f59e0b; }
.score-bar--poor   { background: #ef4444; }

.score-value { font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 2.2ch; }
.score-good   { color: #86efac; }
.score-medium { color: #fde68a; }
.score-poor   { color: #fca5a5; }

.score-delta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4ch;
    padding: 0.1rem 0.34rem;
    border-radius: 999px;
    border: 1px solid var(--line-soft);
    background: rgba(148,163,184,0.07);
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 700;
}

.score-delta--up {
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.08);
}

.score-delta--down {
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.08);
}

.col-score { min-width: 160px; }
.col-recs { min-width: 180px; }
.col-status { min-width: 112px; }
.col-provider { min-width: 132px; }

.col-vendor-narrow {
    max-width: 90px;
    width: 90px;
}
.col-vendor-narrow .app-provider-pill {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}
/* Override shared .data-table min-width so the table can shrink. */
#software-table.data-table {
    min-width: 0;
    width: auto;
}

.col-username-narrow {
    max-width: 140px;
    width: 140px;
}
.col-username-narrow strong,
.col-username-narrow .muted-cell {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.col-pw-wide { min-width: 150px; }
.col-sso-wide { min-width: 160px; }

.col-value-narrow {
    max-width: 140px;
    width: 140px;
}
.col-value-narrow .secret-redacted-value {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.col-last-rotated-wide { min-width: 160px; }

.col-title-narrow {
    max-width: 360px;
}
.col-title-narrow .vuln-open {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.col-severity-wide { min-width: 110px; }
.col-status-wide { min-width: 130px; }

.recs-details { font-size: 0.8rem; }

.recs-summary {
    cursor: pointer;
    color: var(--accent-strong);
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
    list-style: none;
    user-select: none;
}

.recs-open-btn {
    padding: 0.22rem 0.5rem;
    border-radius: 8px;
    border: 1px solid rgba(96,165,250,0.35);
    background: rgba(37,99,235,0.12);
    color: #93c5fd;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
}

.recs-open-btn:hover {
    border-color: rgba(96,165,250,0.55);
    color: #bfdbfe;
}

.recs-summary::-webkit-details-marker { display: none; }
.recs-summary::before { content: '\25B6  '; font-size: 0.6rem; vertical-align: middle; }
details[open] .recs-summary::before { content: '\25BC  '; }

.recs-list {
    margin: 0.5rem 0 0 1rem;
    padding: 0;
    list-style: disc;
    color: var(--muted);
    font-size: 0.77rem;
    line-height: 1.55;
    max-width: 320px;
}

.recs-list li + li { margin-top: 0.25rem; }

.recs-list-toggle {
    list-style: none;
    margin-top: 0.25rem !important;
}

.recs-show-more-btn {
    background: none;
    border: none;
    color: #60a5fa;
    cursor: pointer;
    font-size: 0.77rem;
    padding: 0.2rem 0;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: color 200ms ease;
    font-weight: 500;
}

.recs-show-more-btn:hover {
    color: #93c5fd;
    text-decoration: underline;
}

.recs-toggle-icon {
    display: inline-block;
    font-size: 0.6rem;
    vertical-align: middle;
    transition: transform 200ms ease;
}

.recs-show-more-btn.expanded .recs-toggle-icon {
    transform: rotate(0deg);
}

.recs-hidden {
    display: none;
}

.recs-hidden[style*="display: list-item"] {
    display: list-item;
}

.app-description {
    display: block;
    margin-top: 0.18rem;
    font-size: 0.75rem;
    color: var(--muted-2);
    max-width: 280px;
    white-space: normal;
    line-height: 1.4;
}

.app-owner {
    display: block;
    margin-top: 0.12rem;
    font-size: 0.72rem;
    color: var(--muted);
    font-style: italic;
}

.app-row--critical td { background: rgba(239,68,68,0.04); }
.app-row--warn td     { background: rgba(251,191,36,0.035); }
.app-row--muted td    { opacity: 0.65; }

.app-row--critical td:first-child,
.app-row--warn td:first-child,
.app-row--muted td:first-child {
    position: relative;
}

.app-row--critical td:first-child::before,
.app-row--warn td:first-child::before,
.app-row--muted td:first-child::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
}

.app-row--critical td:first-child::before { background: #ef4444; }
.app-row--warn td:first-child::before { background: #f59e0b; }
.app-row--muted td:first-child::before { background: #64748b; }

.app-compare-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.app-compare-card {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.75rem;
    background: rgba(255,255,255,0.02);
}

.app-compare-card h4 {
    margin: 0 0 0.45rem;
    font-size: 0.86rem;
}

.app-compare-card p {
    margin: 0.22rem 0;
    color: var(--muted);
    font-size: 0.77rem;
}

.app-provider-card {
    border: 1px solid var(--line);
    border-radius: 10px;
    margin: 0 1.75rem 1.25rem;
    overflow: hidden;
}

.app-provider-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.25rem;
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}

.app-provider-title { display: flex; align-items: center; gap: 0.65rem; font-size: 0.92rem; }
.app-provider-meta  { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.app-provider-table-wrap { margin: 0; border: none; border-radius: 0; }
.app-provider-table { border-top: none; }

.app-prov-type-badge {
    display: inline-flex;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid var(--line-soft);
    background: rgba(15,23,42,0.5);
    color: var(--muted);
    white-space: nowrap;
}

.app-prov-type-cloud      { color: #67e8f9; border-color: rgba(34,211,238,0.35); background: rgba(34,211,238,0.07); }
.app-prov-type-saas       { color: #a5b4fc; border-color: rgba(139,92,246,0.35); background: rgba(139,92,246,0.07); }
.app-prov-type-cdn        { color: #fb923c; border-color: rgba(251,146,60,0.35); background: rgba(251,146,60,0.07); }
.app-prov-type-on-premise { color: #94a3b8; border-color: rgba(148,163,184,0.25); background: rgba(148,163,184,0.05); }
.app-prov-type-foundation-model { color: #86efac; border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.07); }
.app-prov-type-platform { color: #67e8f9; border-color: rgba(34,211,238,0.35); background: rgba(34,211,238,0.07); }
.app-prov-type-model-hub { color: #fde68a; border-color: rgba(251,191,36,0.35); background: rgba(251,191,36,0.07); }
.app-prov-type-self-hosted { color: #fb923c; border-color: rgba(251,146,60,0.35); background: rgba(251,146,60,0.07); }
.app-prov-type-other      { color: var(--muted); border-color: var(--line-soft); }

.ai-score-breakdown-btn {
    margin-left: 0.25rem;
    padding: 0.2rem 0.42rem;
    border-radius: 8px;
    border: 1px solid rgba(96,165,250,0.35);
    background: rgba(37,99,235,0.12);
    color: #93c5fd;
    font-size: 0.66rem;
    font-weight: 600;
    cursor: pointer;
}

.ai-score-breakdown-btn:hover {
    border-color: rgba(96,165,250,0.55);
    color: #bfdbfe;
}

.ai-score-modal-panel {
    width: min(520px, calc(100vw - 2rem));
}

.ai-score-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: 0.95rem;
}

.ai-score-item {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.2rem 0.5rem;
    align-items: center;
    background: rgba(255,255,255,0.02);
    font-size: 0.78rem;
}

.ai-score-item small {
    grid-column: 1 / 2;
    font-size: 0.66rem;
}

.code-repo-meta {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    color: var(--muted);
}

.code-provider-stack {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    align-items: center;
}

.code-inline-metrics {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 0.78rem;
}

.code-inline-metrics strong {
    font-size: 0.92rem;
}

.code-meta-text {
    display: block;
    margin-top: 0.16rem;
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.45;
}

.code-activity-state,
.code-sbom-pill {
    display: inline-flex;
    align-items: center;
    margin-top: 0.22rem;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--line-soft);
    font-size: 0.67rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.code-activity-state--active {
    color: #86efac;
    border-color: rgba(34,197,94,0.35);
    background: rgba(34,197,94,0.08);
}

.code-activity-state--stale {
    color: #fca5a5;
    border-color: rgba(239,68,68,0.35);
    background: rgba(239,68,68,0.08);
}

.code-sbom-pill--complete {
    color: #67e8f9;
    border-color: rgba(34,211,238,0.35);
    background: rgba(34,211,238,0.08);
}

.code-sbom-pill--partial {
    color: #fde68a;
    border-color: rgba(245,158,11,0.35);
    background: rgba(245,158,11,0.08);
}

.code-sbom-pill--missing {
    color: #fca5a5;
    border-color: rgba(239,68,68,0.35);
    background: rgba(239,68,68,0.08);
}

.app-type-vpn { color: #93c5fd; border-color: rgba(96,165,250,0.35); background: rgba(59,130,246,0.08); }
.app-type-datacenter { color: #a7f3d0; border-color: rgba(16,185,129,0.35); background: rgba(16,185,129,0.08); }
.app-type-hub { color: #fcd34d; border-color: rgba(245,158,11,0.35); background: rgba(245,158,11,0.08); }
.app-type-operations { color: #c4b5fd; border-color: rgba(139,92,246,0.35); background: rgba(139,92,246,0.08); }
.app-type-trunk { color: #fdba74; border-color: rgba(249,115,22,0.35); background: rgba(249,115,22,0.08); }
.app-type-staging { color: #67e8f9; border-color: rgba(6,182,212,0.35); background: rgba(6,182,212,0.08); }

.fw-pill {
    display: inline-flex;
    align-items: center;
    margin: 0.12rem 0.2rem 0.12rem 0;
    padding: 0.16rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--line-soft);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fw-pill--on,
.fw-pill--prevention,
.fw-pill--blocking {
    color: #86efac;
    border-color: rgba(34,197,94,0.35);
    background: rgba(34,197,94,0.08);
}

.fw-pill--alert,
.fw-pill--monitoring {
    color: #fde68a;
    border-color: rgba(245,158,11,0.35);
    background: rgba(245,158,11,0.08);
}

.fw-pill--off {
    color: #fca5a5;
    border-color: rgba(239,68,68,0.35);
    background: rgba(239,68,68,0.08);
}

.code-details-btn {
    margin-top: 0.45rem;
    padding: 0.2rem 0.46rem;
    border-radius: 8px;
    border: 1px solid rgba(148,163,184,0.3);
    background: rgba(15,23,42,0.55);
    color: #cbd5e1;
    font-size: 0.67rem;
    font-weight: 600;
    cursor: pointer;
}

.code-details-btn:hover {
    border-color: rgba(96,165,250,0.45);
    color: #dbeafe;
}

.code-details-modal-panel {
    width: min(920px, calc(100vw - 2rem));
}

.code-details-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0.9rem;
    margin-top: 0.85rem;
}

.code-details-section h4 {
    margin: 0 0 0.65rem;
    font-size: 0.84rem;
}

.code-details-list {
    max-width: none;
    margin-left: 1.1rem;
}

.code-detail-kv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
    font-size: 0.76rem;
}

.code-detail-kv + .code-detail-kv {
    margin-top: 0.45rem;
}

.code-detail-kv span {
    color: var(--muted);
}

.code-detail-kv strong {
    color: var(--text);
    font-size: 0.79rem;
}

.fw-policy-open {
    width: 100%;
    justify-content: space-between;
    border-radius: 8px;
    border-color: var(--line);
    background: rgba(255,255,255,0.02);
    color: var(--text);
    padding: 0.45rem 0.55rem;
}

.fw-policy-open span {
    color: var(--muted);
}

.fw-policy-open strong {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fw-policy-open:hover {
    border-color: rgba(96,165,250,0.4);
    background: rgba(37,99,235,0.08);
}

.fw-policy-open--allow strong {
    color: #86efac;
}

.fw-policy-open--deny strong {
    color: #fca5a5;
}

.fw-rules-open {
    border: 0;
    background: transparent;
    padding: 0;
    color: #93c5fd;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.fw-rules-open:hover .code-inline-metrics strong,
.fw-rules-open:focus-visible .code-inline-metrics strong {
    text-decoration: underline;
}

.sortable-th {
    cursor: pointer;
    user-select: none;
    position: relative;
}

.sortable-th::after {
    content: " ↕";
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.affected-assets-count {
    border: 0;
    background: transparent;
    color: #60a5fa;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.affected-assets-count:hover,
.affected-assets-count:focus-visible {
    color: #93c5fd;
}

.compliance-evidence-list {
    margin: 0;
    padding-left: 1.05rem;
    display: grid;
    gap: 0.32rem;
}

.compliance-evidence-list li {
    margin: 0;
}

.compliance-evidence-list a {
    color: #bfdbfe;
    text-decoration: none;
    font-weight: 600;
}

.compliance-evidence-list a:hover {
    color: #dbeafe;
    text-decoration: underline;
}

.compliance-status {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.52rem;
    border-radius: 999px;
    border: 1px solid var(--line-soft);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.compliance-status--good {
    color: #86efac;
    border-color: rgba(34,197,94,0.35);
    background: rgba(34,197,94,0.08);
}

.compliance-status--warn {
    color: #fde68a;
    border-color: rgba(245,158,11,0.35);
    background: rgba(245,158,11,0.08);
}

.compliance-status--critical {
    color: #fca5a5;
    border-color: rgba(239,68,68,0.35);
    background: rgba(239,68,68,0.08);
}

.compliance-owner-form {
    display: grid;
    gap: 0.38rem;
}

.compliance-owner-form label {
    display: grid;
    gap: 0.2rem;
}

.compliance-owner-form input {
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(15, 23, 42, 0.55);
    color: var(--text);
    padding: 0.33rem 0.45rem;
    font-size: 0.74rem;
}

.compliance-owner-form .code-details-btn {
    margin-top: 0.12rem;
}

.code-deploy-status {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.48rem;
    border-radius: 999px;
    border: 1px solid var(--line-soft);
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.code-deploy-status--healthy {
    color: #86efac;
    border-color: rgba(34,197,94,0.35);
    background: rgba(34,197,94,0.08);
}

.code-deploy-status--degraded,
.code-deploy-status--failed,
.code-deploy-status--unknown {
    color: #fca5a5;
    border-color: rgba(239,68,68,0.35);
    background: rgba(239,68,68,0.08);
}

@media (max-width: 820px) {
    .code-details-grid {
        grid-template-columns: 1fr;
    }
}

.ai-score-item strong {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
}

.ai-score-item strong {
    font-size: 0.95rem;
    color: #bfdbfe;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
    .app-description { max-width: 180px; }
    .recs-list { max-width: 200px; }
    .score-bar-wrap { min-width: 30px; }
    .ai-score-grid { grid-template-columns: 1fr; }
}

/* Density mode for operational workflows */
.table-density-compact .data-table th,
.table-density-compact .data-table td {
    padding-top: 0.38rem;
    padding-bottom: 0.38rem;
}

.table-density-compact .table-controls {
    gap: 0.35rem;
}

.table-density-compact .app-description,
.table-density-compact .secret-used-by,
.table-density-compact .app-owner {
    font-size: 0.68rem;
}

.page-topbar--compact {
    padding-bottom: 0.9rem;
}

.page-topbar--compact h1 {
    margin-bottom: 0.2rem;
}

.page-topbar--compact p {
    margin: 0;
}

.panel-heading--tight {
    padding-bottom: 0;
}

.correlation-overview-panel {
    padding-bottom: 1rem;
}

.correlation-overview-grid,
.correlation-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.correlation-kpi-grid--compact {
    padding: 0 20px 8px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.correlation-bars--compact {
    padding: 0 20px 8px;
}

.sources-summary-grid {
    gap: 0.45rem;
}

.connector-form-grid--compact {
    margin-bottom: 0.85rem;
}

/* Inline variant of .connector-form-grid: lays the form's labels out
   side-by-side on a single baseline rather than the default 2-column
   grid. Used by the User Upload form and the Add Connector form so both
   share the same compact horizontal look. Children with .full-span
   still break to their own row (handled by the flex-basis rule below). */
.connector-form-grid--inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem 3.25rem;
}

.connector-form-grid--inline > label {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
}

.connector-form-grid--inline > label > input,
.connector-form-grid--inline > label > select {
    flex: 0 0 auto;
    /* Cap width so a select whose options include long provider names
       (e.g., "Microsoft Entra ID / Azure AD") doesn't visually dominate
       the row. Long option text is truncated with ellipsis when shown.
       Tuned to roughly match the User Upload form's natural width. */
    max-width: 14rem;
}

.connector-form-grid--inline > label > select {
    text-overflow: ellipsis;
}

.connector-form-grid--inline > .full-span {
    flex-basis: 100%;
}

/* File-upload label that includes a small footer hint underneath the
   file input (e.g., "Max size 50 MB"). Stacks the label / input / hint
   vertically inside the inline form's row, so the size hint reads as a
   caption directly under the Choose File button. */
.file-upload-label {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.3rem !important;
}

.file-upload-size-hint {
    color: rgba(148, 163, 184, 0.85);
    font-size: 0.72rem;
}

/* Widths were keyed on label position, but a hidden "Custom provider name"
   label sits between Provider and Import label — so rule 3 sized the hidden
   field and Import label got none. Keyed on the controls themselves now. */
#user-upload-form #user-upload-source { width: 12rem; }

/* Drop zone: the file is the point of this form, so it leads. The input is
   nested and visually hidden rather than display:none, which would take it
   out of the tab order and break required-field validation messaging. */
/* Scoped past `.connector-form-grid--inline > label`, which lays labels out
   as nowrap rows — the zone stacks its two lines instead. */
.connector-form-grid--inline > .upload-dropzone,
.upload-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 1.15rem 1rem;
    margin-bottom: 0.35rem;
    border: 1px dashed var(--line);
    border-radius: 10px;
    background: var(--panel-2, rgba(148, 163, 184, 0.05));
    cursor: pointer;
    text-align: center;
    white-space: normal;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.upload-dropzone:hover,
.upload-dropzone:focus-within {
    border-color: var(--accent);
    background: rgba(6, 182, 212, 0.06);
}

/* Applied while a file is dragged over the zone. */
.upload-dropzone.is-dragover {
    border-color: var(--accent);
    border-style: solid;
    background: rgba(6, 182, 212, 0.12);
}

/* Once a file is chosen the zone reports it rather than repeating the prompt. */
.upload-dropzone.has-file {
    border-style: solid;
    border-color: rgba(34, 197, 94, 0.45);
    background: rgba(34, 197, 94, 0.06);
}

.upload-dropzone-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.upload-dropzone-primary {
    font-weight: 600;
    font-size: 0.92rem;
}

.upload-dropzone-secondary {
    color: var(--muted);
    font-size: 0.76rem;
}

#user-upload-form .connector-actions {
    flex: 0 0 auto;
    margin-left: auto;
}

#user-upload-form .full-span {
    flex-basis: 100%;
}

#user-upload-form .form-footnote {
    font-size: 0.78rem;
    line-height: 1.3;
    margin: 0;
}

.vulnerability-page-panel .vuln-priority-grid {
    margin-bottom: 0.9rem;
}

.pagination-toolbar,
.pagination-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.8rem;
}

.pagination-nav {
    margin-top: 0.8rem;
    margin-bottom: 0;
}

.pagination-chip-group {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pagination-controls--jump input[type="number"] {
    width: 6rem;
    min-height: 2rem;
    border-radius: 0.62rem;
    border: 1px solid var(--line);
    background: rgba(15, 23, 42, 0.85);
    color: var(--ink);
    padding: 0.35rem 0.6rem;
}

.pagination-controls label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--muted);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pagination-controls select {
    min-width: 88px;
    min-height: 2rem;
    border-radius: 0.62rem;
    border: 1px solid var(--line);
    background: rgba(15, 23, 42, 0.85);
    color: var(--ink);
    padding: 0.35rem 0.6rem;
}

.pagination-summary {
    color: var(--muted);
    font-size: 0.78rem;
}

.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.panel-controls-compact {
    padding: 0;
}

.panel-cards-compact {
    padding: 0;
}

.panel-note-compact {
    padding: 0 0 0.75rem;
}

.panel-list-compact {
    margin: 0;
    padding: 0 0 0 1.25rem;
}

.stats-grid--flush {
    margin: 0;
}

.utility-space-top-sm {
    margin-top: 0.8rem;
}

.utility-space-top-md {
    margin-top: 1rem;
}

.inline-meta {
    margin-top: 0.35rem;
    color: var(--muted);
    font-size: 0.8rem;
}

.form-min-width-md {
    min-width: 420px;
}

.panel-cta-row {
    padding: 0;
}

.ciso-exception-form > * {
    flex: 1 1 11rem;
}

.ciso-exception-form button,
.ciso-inline-action button {
    min-height: 2.25rem;
}

.ciso-inline-action select {
    min-width: 8.5rem;
}

@media (max-width: 980px) {
    .correlation-overview-grid,
    .correlation-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* Activity log details collapsible UI */
.activity-details-toggle {
    cursor: pointer;
    user-select: none;
}

.activity-summary {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    background: rgba(96, 165, 250, 0.1);
    color: #60a5fa;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid rgba(96, 165, 250, 0.25);
    transition: all 0.2s ease;
}

.activity-details-toggle[open] > .activity-summary {
    background: rgba(96, 165, 250, 0.2);
    border-color: rgba(96, 165, 250, 0.5);
}

.activity-summary:hover {
    background: rgba(96, 165, 250, 0.2);
    border-color: rgba(96, 165, 250, 0.4);
}

.activity-details-panel {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 0.375rem;
    font-size: 0.8rem;
    max-width: 600px;
}

.activity-details-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1rem;
    margin: 0;
}

.activity-details-list dt {
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
}

.activity-details-list dd {
    margin: 0;
    color: #e2e8f0;
    word-break: break-word;
}

.activity-details-list code {
    background: rgba(30, 41, 59, 0.6);
    padding: 0.15rem 0.4rem;
    border-radius: 0.2rem;
    font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
    font-size: 0.75em;
    color: #a1d8ff;
    word-break: break-word;
}

.tag-success {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border-radius: 0.2rem;
    font-size: 0.75em;
    font-weight: 500;
}

.tag-default {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    background: rgba(148, 163, 184, 0.15);
    color: #cbd5e1;
    border-radius: 0.2rem;
    font-size: 0.75em;
    font-weight: 500;
}

/* ── Asset detail page (/assets/{ref}) ─────────────────────────────────── */
.asset-crumbs {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.78rem; color: var(--muted); margin-bottom: 0.3rem;
}
.asset-crumbs a { color: var(--muted); text-decoration: none; }
.asset-crumbs a:hover { color: var(--accent-strong); text-decoration: underline; }
.asset-subhead { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.asset-type-chip {
    font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em;
    font-weight: 700; color: var(--accent-strong);
    border: 1px solid var(--line); border-radius: 999px; padding: 0.16rem 0.5rem;
}
.asset-ref { font-size: 0.76rem; color: var(--muted); word-break: break-all; }

/* Main column plus a narrower sidebar. Collapses to one column below the
   breakpoint the rest of the app uses, so the sidebar's short lists fall under
   the detail block rather than being squeezed to a few characters wide. */
.asset-detail-grid {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1rem; align-items: start;
}
.asset-detail-main, .asset-detail-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
@media (max-width: 1100px) {
    .asset-detail-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Two columns of label/value pairs; one column in the sidebar. */
.asset-props {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.5rem 1.5rem; margin: 0; padding: 0 20px 16px;
}
.asset-props--stack { grid-template-columns: minmax(0, 1fr); }
.asset-prop { display: flex; justify-content: space-between; gap: 1rem; min-width: 0; }
.asset-prop dt { font-size: 0.78rem; color: var(--muted); flex: 0 0 auto; }
.asset-prop dd {
    margin: 0; font-size: 0.82rem; color: var(--ink); text-align: right;
    min-width: 0; overflow-wrap: anywhere;
}

.asset-rel-list { list-style: none; margin: 0; padding: 0 20px 16px; }
.asset-rel-list li {
    display: flex; align-items: baseline; gap: 0.6rem;
    padding: 0.38rem 0; border-bottom: 1px solid var(--line); min-width: 0;
}
.asset-rel-list li:last-child { border-bottom: 0; }
.asset-rel-list a { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.asset-rel-list a:hover { color: var(--accent-strong); text-decoration: underline; }
.asset-rel-verb {
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--muted-2); flex: 0 0 auto;
    display: inline-flex; align-items: baseline; gap: 0.3rem;
    /* A fixed width keeps the neighbour names in one column, so the list scans
       vertically instead of stair-stepping with each verb's length. */
    min-width: 8.5rem;
}
.asset-rel-arrow { font-size: 0.85rem; line-height: 1; color: var(--accent-strong); }
.asset-rel-type { font-size: 0.7rem; color: var(--muted); margin-left: auto; flex: 0 0 auto; }
.asset-empty-note { padding: 0 20px 16px; font-size: 0.8rem; color: var(--muted); margin: 0; }

/* [hidden] must beat class-level display rules. */
[hidden] { display: none !important; }