/* Urgent Action Vulnerabilities: the tab /soc/vulnerabilities opens on, and the UAV detail page.
   Scoped under .page-vulnerabilities / .page-uav-detail like every other page file: the kit's class names
   (.modal, .vl-pill) collide with Bootstrap's and with other pages' own rules, so an unscoped rule here
   either loses to Bootstrap or leaks sideways. Colours come from the theme tokens: never a literal hex,
   or the light theme renders black-on-black (§14). */

/* ─── Tabs (UAV ⇄ vulnerability list) ─────────────────────────── */
/* The page-level tab idiom, shared with the Help page's .hp-tabs (§57) and the rules-of-engagement
   page's .roe-tabs: an underline rail, the active one taking the accent. */

.page-vulnerabilities .vl-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--line);
}

.page-vulnerabilities .vl-tabs button {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--muted);
    font: 600 13px var(--font-body);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.page-vulnerabilities .vl-tabs button:hover { color: var(--text); }

.page-vulnerabilities .vl-tabs button.is-active {
    color: var(--text);
    border-bottom-color: var(--accent);
}

/* How many warnings are live, on the tab itself: the number that tells the reader whether to open it.
   Drawn in the bad tint rather than the accent: an unanswered UAV is something to act on, and the accent
   is the interactive chrome's (§14). Absent at zero rather than showing a 0, which reads as a control
   that failed to load (§30). */
.page-vulnerabilities .vl-tabcount {
    flex: none;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--bad) 45%, transparent);
    background: color-mix(in srgb, var(--bad) 15%, transparent);
    color: var(--bad);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* "We couldn't count these" is its own state, in the muted ink rather than the bad tint: it is an
   absence of information, not a warning about the customer's estate (§30). */
.page-vulnerabilities .vl-tabcount.is-unknown {
    border-color: var(--line);
    background: var(--surface-2);
    color: var(--faint);
}

/* ─── The Urgent action cell on a CVE row ─────────────────────── */
/* The reference is a link and is coloured by the UAV's own status (the inline style comes from
   Uav.StatusColor), so the cell says both "there is a warning" and "where it has got to" in one token. */

.page-vulnerabilities .vl-ticket {
    font-size: 12.5px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-vulnerabilities .vl-ticket a { font-weight: 600; text-decoration: none; }
.page-vulnerabilities .vl-ticket a:hover { text-decoration: underline; }
.page-vulnerabilities .vl-dash { color: var(--faint); }

/* ─── UAV list tiles ─────────────────────────────────────────── */
/* Same shape as the CVE list's .vt-tile: border + background shift on hover, no glow. */

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

.page-vulnerabilities .uavq-tile {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 14px 16px 13px;
    border: 1px solid var(--line);
    border-left: 3px solid color-mix(in srgb, var(--c) 70%, transparent);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
    /* A floor that clears the tallest variant, so a tile does not resize when its number does (§28). */
    min-height: 74px;
}

.page-vulnerabilities .uavq-tile:hover {
    border-color: rgba(255, 255, 255, 0.20);
    border-left-color: var(--c);
    background: var(--surface-2);
}

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

.page-vulnerabilities .uavq-tile-label {
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 500;
}

.page-vulnerabilities .uavq-tile-value {
    color: var(--text);
    font-size: 25px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* ─── UAV list table ─────────────────────────────────────────── */
/* Every track proportional with a ZERO floor (§26): `.content .panel` is overflow:hidden, so a pixel
   minimum is a floor the grid won't go below and the last columns would be cut off rather than scrolled. */

.page-vulnerabilities .uavq-head,
.page-vulnerabilities .uavq-row {
    display: grid;
    grid-template-columns:
        minmax(0, 2fr) minmax(0, 0.9fr) minmax(0, 1.3fr)
        minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 14px;
    align-items: center;
}

/* Every grid item clamps, header cells included. A zero-floor track stops the grid growing past the
   panel, but a child's automatic minimum size is still its content, so without this the nowrap pill in
   the Status cell prints over the column beside it (§26). */
.page-vulnerabilities .uavq-head > *,
.page-vulnerabilities .uavq-row > * {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-vulnerabilities .uavq-head {
    padding: 12px 22px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line-soft);
    color: var(--faint);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.page-vulnerabilities .uavq-row {
    padding: 13px 22px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
}

.page-vulnerabilities .uavq-row:last-of-type { border-bottom: none; }
.page-vulnerabilities .uavq-row:hover { background: var(--surface-2); }
.page-vulnerabilities .uavq-row:hover .uavq-key { text-decoration: underline; }

/* A live warning is marked in the name cell, the way a waiting incident is (§46): a bar rather than a
   badge, so it costs the row no width. */
.page-vulnerabilities .uavq-row.is-live { box-shadow: inset 2px 0 0 var(--bad); }

.page-vulnerabilities .uavq-ref {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.page-vulnerabilities .uavq-key {
    color: var(--accent);
    font-weight: 700;
}

.page-vulnerabilities .uavq-cve {
    color: var(--text);
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.page-vulnerabilities .uavq-soft {
    color: var(--muted);
    font-size: 12.5px;
}

/* The two cells that stack rather than clamping to one line: flex needs the rule restated, because the
   blanket clamp above sets white-space on the cell and these lay their children out instead. */
.page-vulnerabilities .uavq-sev {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: var(--muted);
}

.page-vulnerabilities .uavq-detect { font-size: 12px; }

.page-vulnerabilities .uavq-when {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.page-vulnerabilities .uavq-comments { color: var(--faint); font-size: 11.5px; }

/* Give the gutters back when the grid is tight: clipped is not the same as fitting (§26). */
@media (max-width: 1400px) {
    .page-vulnerabilities .uavq-head,
    .page-vulnerabilities .uavq-row { gap: 10px; }

    .page-vulnerabilities .uavq-head { padding: 12px 14px; }
    .page-vulnerabilities .uavq-row { padding: 13px 14px; }
}

/* An unreadable Defender changes what every row's detection line may claim, so it is said once above the
   list rather than as an unexplained "unknown" down a column (§30). */
.page-vulnerabilities .uavq-note {
    margin: 0;
    padding: 10px 22px;
    border-bottom: 1px solid var(--line-soft);
    background: color-mix(in srgb, var(--warn) 8%, transparent);
    color: var(--muted);
    font-size: 12.5px;
}

.page-vulnerabilities .uavq-error {
    margin: 0;
    padding: 12px 22px;
    color: var(--bad);
    font-size: 12.5px;
}

/* ─── The three detection states ─────────────────────────────── */
/* Shared by the list and the detail page, because one row must not read differently in the two places.
   Unknown is deliberately the muted ink rather than a colour: it is an absence of information, not a
   warning and not good news (§30). */

.page-vulnerabilities .uav-detected,
.page-uav-detail .uav-detected { color: var(--warn); }

.page-vulnerabilities .uav-cleared,
.page-uav-detail .uav-cleared { color: var(--good); }

.page-vulnerabilities .uav-unknown,
.page-uav-detail .uav-unknown { color: var(--faint); }

/* ─── UAV detail page ────────────────────────────────────────── */
/* .id-* comes from the shared kit in components.css; .vl-pill / .vl-sq are scoped to the vulnerabilities
   page, so the pill and severity square are restated here. */

.page-uav-detail { display: flex; flex-direction: column; gap: 34px; }

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

.page-uav-detail .vl-sq,
.page-uav-detail .id-sq { width: 11px; height: 11px; flex: none; display: inline-block; }

.page-uav-detail .uav-cleared-chip {
    padding: 3px 10px;
    border: 1px solid color-mix(in srgb, var(--good) 45%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--good) 12%, transparent);
    color: var(--good);
    font-size: 11.5px;
    font-weight: 600;
}

/* The advice is the page. Bigger than body copy and pre-wrapped, because the SOC laid out the line
   breaks they typed and those are part of the instruction (§8's shared white-space rule). */
.page-uav-detail .uav-advice {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.page-uav-detail .btn-ghost {
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    font: 500 13px var(--font-body);
    cursor: pointer;
}

.page-uav-detail .btn-ghost:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.22); }

.page-uav-detail .btn-primary {
    padding: 9px 18px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: #04201D;
    font: 600 13px var(--font-body);
    cursor: pointer;
}

.page-uav-detail .btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.page-uav-detail .btn-primary:disabled { opacity: .5; cursor: default; }

/* ── the CVEs one warning covers ──────────────────────────────────────────────────────────────────── */
/* A row each, because every figure on it belongs to its own CVE: a warning covering five has five
   severities, five scores and five device counts, and rolling them into one line would be four of them
   missing (§30). Each row opens the shared CVE pane, so it is a button rather than a link: the pane is not
   a route and an <a href> would claim it was. */
.page-uav-detail .uav-cves {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}

/* Fluid tracks with a zero floor, never a pixel minimum: a floor the grid will not go below is what pushes
   the last column off the panel, which is clipped rather than scrolled (§26). */
.page-uav-detail .uav-cve-head,
.page-uav-detail .uav-cve-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, .4fr)
                           minmax(0, 1.4fr) minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 10px;
}

/* The column headings, in the queue's own header style (.uavq-head) so the two tables read as one kit. The
   1px transparent border matches the row's, or the headings sit a pixel off their columns. */
.page-uav-detail .uav-cve-head {
    border: 1px solid transparent;
    border-bottom-color: var(--line-soft);
    color: var(--faint);
    font: 600 11px var(--font-body);
    letter-spacing: .05em;
    text-transform: uppercase;
}

.page-uav-detail .uav-cve-row {
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    font: 400 12.5px var(--font-body);
    text-align: left;
    cursor: pointer;
}

.page-uav-detail .uav-cve-row:hover {
    border-color: var(--line-soft);
    background: var(--surface-2);
}

/* Every cell clamps to one line and carries its full value on a title (§26), header cells included. */
.page-uav-detail .uav-cve-head > *,
.page-uav-detail .uav-cve-row > * {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-uav-detail .uav-cve-id {
    color: var(--accent);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.page-uav-detail .uav-cve-sev { display: flex; align-items: center; gap: 7px; }

.page-uav-detail .uav-cve-cvss,
.page-uav-detail .uav-cve-devices,
.page-uav-detail .uav-cve-soft { color: var(--muted); }

.page-uav-detail .uav-cve-cvss { font-variant-numeric: tabular-nums; }

.page-uav-detail .uav-cve-detect { font-size: 12px; }

/* The count beside the panel's own heading: state, which is what §14 allows beside a heading, never an
   explanation of it. */
.page-uav-detail .id-h2-count {
    margin-left: 8px;
    color: var(--muted);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* The CVE in the Details list opens the shared pane, so it is a button that looks like the link it
   behaves as: the pane is not a route, and an <a href> would claim it was. */
.page-uav-detail .uav-cve-link {
    padding: 0;
    border: none;
    background: transparent;
    color: var(--accent);
    font: 600 13px var(--font-body);
    font-variant-numeric: tabular-nums;
    text-align: left;
    cursor: pointer;
}

.page-uav-detail .uav-cve-link:hover { text-decoration: underline; }

.page-uav-detail .uav-error { margin: 12px 0 0; color: var(--bad); font-size: 12.5px; }

/* The product filter's state, above the table it narrowed (§56). */
.page-uav-detail .uav-filter-note {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin: 0 0 6px;
    color: var(--muted);
    font-size: 12.5px;
}

.page-uav-detail .uav-filter-note strong { color: var(--text); font-weight: 600; }

/* The Details panel's product list: one toggle per product, name and CVE count on the first line, the
   versions under it. The name is a token and clamps to one line; the versions are a list and wrap, bounded
   at two lines, both with the full text on a title. */
.page-uav-detail .uav-products { display: grid; gap: 6px; }

.page-uav-detail .uav-product {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 10px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    font: 400 12.5px var(--font-body);
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

.page-uav-detail .uav-product:hover { background: var(--surface-2); }

.page-uav-detail .uav-product.is-on {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.page-uav-detail .uav-product-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.page-uav-detail .uav-product-count {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.page-uav-detail .uav-product-ver {
    grid-column: 1 / -1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--muted);
    font-size: 11.5px;
}

/* The character counter beside a capped field's label: the control stops accepting keystrokes at the cap,
   so it has to say so (§35). The kit owns its colour, its weight and the is-full tint it takes at the cap;
   only the size is this page's. The label it sits on carries .fld-head, which is the kit's own
   label-with-a-counter row, rather than this page re-flexing .fld-label on its own. */
.page-uav-detail .fld-count { font-size: 11.5px; }

@media (max-width: 860px) {
    .page-vulnerabilities .uavq-head { display: none; }

    .page-vulnerabilities .uavq-row {
        grid-template-columns: 1fr 1fr;
        row-gap: 8px;
    }

    /* Six columns do not fit a phone, so the row stacks rather than clipping five of them (§26), and the
       headings go with the columns they named, as the queue's do. */
    .page-uav-detail .uav-cve-head { display: none; }

    .page-uav-detail .uav-cve-row {
        grid-template-columns: 1fr 1fr;
        row-gap: 6px;
    }
}