/* Vulnerabilities page — migrated from Vulnerabilities.razor.css; scoped under .page-vulnerabilities. */
.page-vulnerabilities { display: flex; flex-direction: column; gap: 34px; }

/* ─── Load animations (skeleton + count-up) ───────────────────── */

.page-vulnerabilities .loading .vt-tile > *,
.page-vulnerabilities .loading .vuln-toolbar > *,
.page-vulnerabilities .loading .panel > * { visibility: hidden; }

.page-vulnerabilities .loading .vt-tile,
.page-vulnerabilities .loading .vuln-toolbar,
.page-vulnerabilities .loading .panel { position: relative; }

.page-vulnerabilities .loading .vuln-toolbar::after { border: 1px solid var(--line); }

/* keep the (default-selected) tile neutral until the skeleton clears */
.page-vulnerabilities .loading .vt-tile.is-active {
    border-color: var(--line);
    background: var(--surface);
}

.page-vulnerabilities .loading .vt-tile::after,
.page-vulnerabilities .loading .vuln-toolbar::after,
.page-vulnerabilities .loading .panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
    background-color: var(--surface-2);
    background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.06) 50%, transparent 70%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: skel-shimmer 1.4s linear infinite;
}

/* ─── Metric tiles (Defender-style; act as filters) ───────────── */

.page-vulnerabilities .vt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 14px;
}

.page-vulnerabilities .vt-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 14px 16px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: var(--text);
    overflow: hidden;
    transition: border-color .2s ease, background .2s ease;
}

/* hover + selected states mirror the Incidents / Environment stat tiles:
   a border + background shift only — no glow, accent bar, or dimming */
.page-vulnerabilities .vt-tile:hover {
    border-color: rgba(255, 255, 255, 0.20);
    background: var(--surface-2);
}

.page-vulnerabilities .vt-tile.is-active {
    border-color: color-mix(in srgb, var(--c) 55%, transparent);
    background: color-mix(in srgb, var(--c) 10%, var(--surface));
}

.page-vulnerabilities .vt-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--muted);
    line-height: 1.35;
}

.page-vulnerabilities .vt-value {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--c);
}

/* ─── Toolbar ─────────────────────────────────────────────────── */

.page-vulnerabilities .vuln-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-soft);
}

/* count reads as "<scope> <n> of <total>" — the scope chip names the active tile filter */
.page-vulnerabilities .tb-count { display: inline-flex; align-items: center; gap: 8px; }
.page-vulnerabilities .tb-count strong { color: var(--text); font-weight: 700; }
.page-vulnerabilities .tb-count-sub { color: var(--faint); }
.page-vulnerabilities .tb-scope {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--c);
    border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
    background: color-mix(in srgb, var(--c) 12%, transparent);
    border-radius: 999px;
}

/* ─── Popover menus (Filter · Customize columns) ──────────────── */

.page-vulnerabilities .section.menus-open { position: relative; z-index: 50; }

/* active filter chips (removable) */
.page-vulnerabilities .vl-filterbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ─── Vulnerability table ─────────────────────────────────────── */

/* grid-template-columns is set inline (column customisation) */
.page-vulnerabilities .vl-head,
.page-vulnerabilities .vl-row {
    display: grid;
    gap: 14px;
    align-items: center;
}

.page-vulnerabilities .vl-head {
    padding: 12px 22px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line-soft);
}

.page-vulnerabilities .vl-head span,
.page-vulnerabilities .vl-th {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--faint);
}

/* sortable header — a bare label that behaves like a button, so the header row still reads as a header
   rather than a toolbar. The caret is the only affordance: dim on hover, solid on the sorted column. */
.page-vulnerabilities .vl-th {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: color .15s ease;
}
.page-vulnerabilities .vl-th:hover { color: var(--text); }
.page-vulnerabilities .vl-th.is-sorted { color: var(--accent); }
.page-vulnerabilities .vl-th:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

.page-vulnerabilities .vl-th svg {
    width: 11px;
    height: 11px;
    flex: none;
    opacity: 0;
    transition: opacity .15s ease, transform .15s ease;
}
.page-vulnerabilities .vl-th:hover svg { opacity: .5; }
.page-vulnerabilities .vl-th.is-sorted svg { opacity: 1; }
/* the caret points down (descending) by default and flips for ascending */
.page-vulnerabilities .vl-th.is-asc svg { transform: rotate(180deg); }

.page-vulnerabilities .vl-row {
    padding: 14px 22px;
    border-bottom: 1px solid var(--line-soft);
    cursor: pointer;
    transition: background .18s ease;
}
.page-vulnerabilities .vl-row:hover { background: rgba(255, 255, 255, 0.035); }
.page-vulnerabilities .vl-row.is-sel { background: rgba(45, 212, 191, 0.06); box-shadow: inset 2px 0 0 0 var(--accent); }
.page-vulnerabilities .vl-row:last-of-type { border-bottom: 0; }

.page-vulnerabilities .vl-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.page-vulnerabilities .vl-name strong {
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

/* The row's "UAV" badge is gone: it drew the report's Critical-plus-public-exploit heuristic under the
   name of a decision SecOps had not made. Urgency is now a published UAV, and the row's Urgent action
   column carries its reference (see .vl-ticket in urgent-vulnerabilities.css). */

.page-vulnerabilities .vl-sev {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
    min-width: 0;
}

.page-vulnerabilities .vl-blocks { display: inline-flex; gap: 2px; flex: none; }
.page-vulnerabilities .vl-blocks i { width: 7px; height: 9px; display: inline-block; }

.page-vulnerabilities .vl-sq { width: 10px; height: 10px; flex: none; display: inline-block; }

.page-vulnerabilities .vl-cvss { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }

.page-vulnerabilities .vl-soft {
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-vulnerabilities .vl-age { font-size: 13px; color: var(--faint); white-space: nowrap; }

.page-vulnerabilities .vl-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border: 1px solid currentColor;
    background: transparent;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

/* The assignee cell and its avatar puck are gone with the remediation ticket that owned them: a CVE has
   no owner on this list any more, because there is nothing on a CVE row for the customer to set. The
   people who appear in this feature now appear on a UAV's thread, which uses the shared .id-avatar. */

.page-vulnerabilities .vl-time { display: grid; gap: 2px; min-width: 0; }
.page-vulnerabilities .vl-time > span:first-child { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.page-vulnerabilities .vl-time-abs { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }

.page-vulnerabilities .vl-empty {
    display: grid;
    gap: 6px;
    justify-items: center;
    padding: 44px 22px;
    text-align: center;
}
.page-vulnerabilities .vl-empty strong { font-size: 14px; color: var(--muted); }
.page-vulnerabilities .vl-empty span { font-size: 13px; color: var(--faint); }

/* The vulnerability list carries its range/urgent line above the header row instead of in the footer —
   at 100 rows a page the footer is a scroll away. */
.page-vulnerabilities .vl-topinfo {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 11px 22px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--faint);
    font-size: 12.5px;
}
.page-vulnerabilities .vl-topinfo strong { color: var(--muted); font-variant-numeric: tabular-nums; }

.page-vulnerabilities .vl-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 13px 22px;
    border-top: 1px solid var(--line-soft);
    color: var(--faint);
    font-size: 12.5px;
}
.page-vulnerabilities .vl-foot strong { color: var(--muted); font-variant-numeric: tabular-nums; }
.page-vulnerabilities .vl-foot-info { display: inline-flex; align-items: center; gap: 18px; flex-wrap: wrap; }
/* Nothing left of the pager on the vulnerability list, so space-between would pull it to the left edge —
   keep it where it has always been. The remediation-queue footer still has its info line beside it. */
.page-vulnerabilities .vl-foot > .pager:only-child { margin-left: auto; }

/* ─── Pagination (in the list footer; mirrors the Environment device table) ─────── */

.page-vulnerabilities .pager { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.page-vulnerabilities .pager-size { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--faint); }
.page-vulnerabilities .pager-size select {
    padding: 5px 8px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font: 500 12.5px var(--font-body);
    cursor: pointer;
    color-scheme: dark;
}

.page-vulnerabilities .pager-nav { display: inline-flex; align-items: center; gap: 10px; }
.page-vulnerabilities .pager-page { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.page-vulnerabilities .pager-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    font: 500 12.5px var(--font-body);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.page-vulnerabilities .pager-btn:hover:not(:disabled) { color: var(--text); border-color: rgba(255, 255, 255, 0.2); }
.page-vulnerabilities .pager-btn:disabled { opacity: 0.4; cursor: default; }
.page-vulnerabilities .pager-btn svg { width: 13px; height: 13px; flex: none; }
/* The detail flyout used to live here. It is shared with the remediation ticket page now,
   so its rules moved to vulnerability-flyout.css under the pane's own .cve-fly scope. */

/* ─── Responsive ──────────────────────────────────────────────── */

@media (max-width: 900px) {
    .page-vulnerabilities .vl-head { display: none; }
    /* !important overrides the inline grid-template set for column customisation */
    .page-vulnerabilities .vl-row {
        grid-template-columns: 1fr auto !important;
        row-gap: 10px;
        column-gap: 14px;
    }
    .page-vulnerabilities .vl-name { grid-column: 1 / -1; }
    .page-vulnerabilities .vl-time { text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
    .page-vulnerabilities .loading .vt-tile::after,
    .page-vulnerabilities .loading .vuln-toolbar::after,
    .page-vulnerabilities .loading .panel::after { animation: none; }
}

/* page overrides of shared components */
.page-vulnerabilities .pop { min-width: 200px; }
/* Wide enough for the longer of this page's two placeholders ("Search by reference, title or CVE"
   on the Remediation tab) so neither is clipped and the toolbar doesn't resize between tabs. */
.page-vulnerabilities .tb-search { min-width: 264px; }