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

/* ── Component kit (scoped to this page): tables, modals, key/value
   rows, risk tags — ported from the old global portal.css. Colour
   tokens (--surface, --line, --accent…) inherit from .shell on the
   layout. Scoped here so they can't collide with Bootstrap globals. ── */

/* Data table */
.page-assets .data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.page-assets .data-table thead th {
    text-align: left; padding: 12px 16px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--faint);
    border-bottom: 1px solid var(--line); white-space: nowrap;
}
.page-assets .data-table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); color: var(--text); vertical-align: middle; }
.page-assets .data-table tbody tr:last-child td { border-bottom: none; }
.page-assets .data-table tbody tr.row-click { cursor: pointer; transition: background .14s ease; }
.page-assets .data-table tbody tr.row-click:hover { background: var(--surface-2); }
.page-assets .cell-strong { font-weight: 600; }
.page-assets .cell-mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12px; color: var(--muted); }
.page-assets .cell-muted { color: var(--faint); }
.page-assets .live-count { font-size: 12.5px; color: var(--muted); padding: 12px 16px 0; }

/* Empty / loading / error */
.page-assets .empty { padding: 40px 24px; text-align: center; color: var(--muted); }
.page-assets .empty-title { font-size: 14.5px; font-weight: 600; color: var(--text); margin: 0 0 6px; }
.page-assets .empty-detail { font-size: 13px; color: var(--faint); margin: 0; }
.page-assets .loading { padding: 28px 24px; text-align: center; color: var(--muted); font-size: 13px; }
.page-assets .error-box { margin: 0 0 12px; padding: 11px 14px; border: 1px solid rgba(255,107,107,.3); background: rgba(255,107,107,.08); color: #ffb3b3; font-size: 12.5px; }

/* Modal overlay + card (centred, faded backdrop) */
.page-assets .modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center; padding: 24px;
    background: rgba(7,9,10,.66); backdrop-filter: blur(3px);
    animation: modal-fade .18s ease both;
}
.page-assets .modal {
    display: block; position: relative; inset: auto; height: auto; overflow-x: hidden;
    width: 100%; max-width: 560px; max-height: calc(100vh - 64px); overflow-y: auto;
    background: var(--surface); border: 1px solid var(--line);
    box-shadow: 0 24px 60px rgba(0,0,0,.5); padding: 22px 24px 26px;
    animation: modal-rise .22s cubic-bezier(.22,.9,.3,1) both;
}
.page-assets .modal-lg { max-width: 720px; }
.page-assets .modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.page-assets .modal-title { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.page-assets .modal-eyebrow { margin: 0 0 3px; font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }
.page-assets .modal-close {
    flex: none; width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); background: transparent; color: var(--muted);
    font-size: 15px; cursor: pointer; transition: border-color .15s, color .15s;
}
.page-assets .modal-close:hover { border-color: var(--accent-line); color: var(--text); }

/* Section label + key/value meta rows */
.page-assets .block-label { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); margin: 18px 0 8px; display: flex; align-items: center; gap: 8px; }
.page-assets .meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin: 4px 0 18px; }
.page-assets .meta-row { display: flex; flex-direction: column; gap: 3px; }
.page-assets .meta-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.page-assets .meta-value { font-size: 13.5px; color: var(--text); }
.page-assets .kv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.page-assets .kv-row:last-child { border-bottom: none; }

/* Risk / status colour helpers */
.page-assets .tag-risk { display: inline-flex; padding: 3px 10px; font-size: 11.5px; font-weight: 600; border: 1px solid transparent; }
.page-assets .tag-risk--low      { color: var(--good); background: rgba(61,220,151,.10); border-color: rgba(61,220,151,.25); }
.page-assets .tag-risk--medium   { color: var(--warn); background: rgba(255,180,84,.11); border-color: rgba(255,180,84,.28); }
.page-assets .tag-risk--high     { color: var(--bad);  background: rgba(255,107,107,.11); border-color: rgba(255,107,107,.28); }
.page-assets .tag-risk--critical { color: var(--crit); background: rgba(185,138,255,.12); border-color: rgba(185,138,255,.30); }
.page-assets .tag-risk--unknown  { color: var(--faint); background: var(--surface-2); border-color: var(--line); }
.page-assets .badge-good { color: var(--good); font-weight: 600; }
.page-assets .badge-bad  { color: var(--bad);  font-weight: 600; }

@media (max-width: 960px) { .page-assets .meta-grid { grid-template-columns: 1fr; } }

/* ── Log ingestion: period selector ── */
.page-assets .range-select { margin-left: auto; display: inline-flex; border: 1px solid var(--line); overflow: hidden; }
.page-assets .range-btn {
    padding: 6px 12px; font-size: 12px; font-weight: 600;
    background: transparent; color: var(--muted); border: none;
    border-left: 1px solid var(--line); cursor: pointer; transition: background .14s, color .14s;
}
.page-assets .range-btn:first-child { border-left: none; }
.page-assets .range-btn:hover { color: var(--text); }
.page-assets .range-btn.is-active { background: var(--accent); color: #04110e; }
.page-assets .range-btn:disabled { cursor: default; }

/* Period-change refresh indicator: spins beside the range buttons while the new
   period loads, so the chart stays in place instead of blanking to its skeleton
   (mirrors the Incidents toolbar Refresh). It takes the auto margin that would
   otherwise sit on .range-select, keeping both pinned to the right together. */
.page-assets .ingest-spin {
    margin-left: auto; align-self: center; flex: none;
    width: 15px; height: 15px; color: var(--accent);
    transform-box: fill-box; transform-origin: center;
    animation: tb-spin .7s linear infinite;
}
.page-assets .card--ingest .ingest-spin + .range-select { margin-left: 0; }
@media (prefers-reduced-motion: reduce) { .page-assets .ingest-spin { animation: none; } }

/* ── Log ingestion: compact summary figures (inside the ingestion card) ── */
.page-assets .ingest-summary { display: flex; flex-wrap: wrap; gap: 14px 30px; margin: 2px 0 18px; }
.page-assets .ingest-summary .is-val {
    display: block;
    font-family: var(--font-display);
    font-size: 21px; font-weight: 700; line-height: 1;
    color: var(--text); font-variant-numeric: tabular-nums;
}
.page-assets .ingest-summary .is-val small { font-size: 13px; font-weight: 600; color: var(--muted); }
.page-assets .ingest-summary .is-lab {
    display: block; margin-top: 5px;
    font-size: 11px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--faint);
}

/* ── Log ingestion: see-more / see-less toggle ── */
.page-assets .ingest-more {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 14px; padding: 6px 2px;
    border: none; background: transparent;
    color: var(--accent); font: 600 12.5px var(--font-body);
    cursor: pointer; transition: color .15s ease;
}
.page-assets .ingest-more:hover { color: var(--text); }
.page-assets .ingest-more svg { width: 13px; height: 13px; }

/* NB: the daily-volume chart now uses the shared `.vol-*` bar chart and the by-source
   list uses the shared `.hbar-*` rows — both defined in the dashboard-vocabulary block
   further down this file (scoped to .page-assets). */

/* ── Page-specific: storage bar in the device detail modal ── */
.page-assets .storage-bar {
    width: 100%;
    height: 8px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    overflow: hidden;
    margin: 4px 0 8px;
}

.page-assets .storage-fill {
    height: 100%;
    background: var(--accent);
    transition: width .25s ease;
}

.page-assets .storage-label {
    font-size: 12px;
    color: var(--faint);
    margin-bottom: 4px;
}

/* ════════════════════════════════════════════════════════════════
   Incidents-page scheme (ported, scoped): skeleton shimmer · risk
   stat cards · toolbar · grid list. `.is-skel` is the load-state hook
   (not `.loading`, which is a standalone element here).
   ════════════════════════════════════════════════════════════════ */

.page-assets .is-skel .stat > *,
.page-assets .is-skel .card > *,
.page-assets .is-skel .inc-toolbar > *,
.page-assets .is-skel .panel > * { visibility: hidden; }

.page-assets .is-skel .stat,
.page-assets .is-skel .card,
.page-assets .is-skel .inc-toolbar,
.page-assets .is-skel .panel { position: relative; }

.page-assets .is-skel .stat.is-active {
    border-color: var(--line);
    background: var(--surface);
}

.page-assets .is-skel .inc-toolbar::after { border: 1px solid var(--line); }

.page-assets .is-skel .stat::after,
.page-assets .is-skel .card::after,
.page-assets .is-skel .inc-toolbar::after,
.page-assets .is-skel .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;
}

@media (prefers-reduced-motion: reduce) {
    .page-assets .is-skel .stat::after,
    .page-assets .is-skel .card::after,
    .page-assets .is-skel .inc-toolbar::after,
    .page-assets .is-skel .panel::after { animation: none; }
}

/* Log-ingestion card runs its own async load (Sentinel query) after the device
   list, so it can still be in flight once the page-wide `.is-skel` has cleared.
   Keep it shimmering on its own until its data lands — same overlay as above —
   rather than flashing the plain "Loading…" text out of step with the rest. */
.page-assets .card--ingest.is-loading > * { visibility: hidden; }
.page-assets .card--ingest.is-loading { position: relative; }
.page-assets .card--ingest.is-loading::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;
}
@media (prefers-reduced-motion: reduce) {
    .page-assets .card--ingest.is-loading::after { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   Dashboard vocabulary (ported from site/pages/soc-dashboard.css and
   re-scoped to .page-assets): the card / stat-tile / donut / volume-bar
   / horizontal-bar system that defines "high quality" across the SOC
   pages. The Environment page reuses it so it reads as a sibling of the
   SOC dashboard rather than a repurposed incidents list.
   ════════════════════════════════════════════════════════════════ */

/* ─── Summary + telemetry grid ────────────────────────────────── */
.page-assets .asset-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; align-items: start; }
.page-assets .card--score  { grid-column: span 4; }
.page-assets .asset-stats  { grid-column: span 8; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.page-assets .card--ingest { grid-column: span 8; }
.page-assets .asset-side   { grid-column: span 4; display: flex; flex-direction: column; gap: 14px; }

/* Consolidated empty / not-connected panel: takes the stat-block's slot (beside the score hero) when a
   connected tenant has no managed devices, or a staff view-as tenant hasn't connected Defender. The
   posture cards and inventory table are omitted in that state, so this one panel carries the message.
   When it's showing, the log-ingestion card has no right-hand neighbour, so it spans the full row. */
.page-assets .asset-empty-card { grid-column: span 8; align-self: stretch; justify-content: center; }
.page-assets .asset-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 32px 24px; max-width: 460px; margin: 0 auto; }
.page-assets .asset-empty-icon { width: 34px; height: 34px; color: var(--faint); margin-bottom: 10px; }
.page-assets .asset-grid.is-single .card--ingest { grid-column: 1 / -1; }

/* Summary row: the score card and the 2×2 stat block share one grid row, so give them a
   matched height and let each fill it — otherwise the shorter of the two stops short and
   their bottom edges don't meet (the grid's `align-items: start` top-aligns both at their
   natural height). align-self overrides that; the score card then centres its donut in the
   extra space (donut margin:auto), and the stat block splits its height evenly across its
   rows (grid-auto-rows:1fr) so the tile bottoms line up with the card's bottom edge. */
.page-assets .card--score,
.page-assets .asset-stats { align-self: stretch; }
.page-assets .asset-stats { grid-auto-rows: 1fr; }

/* Telemetry row: keep the ingestion card and the right-hand stack the same height so
   their bottom edges line up no matter which side has more content. The shorter column
   stretches to the taller one (align-self overrides the grid's `align-items: start`);
   the right column's three cards then grow to share that height — otherwise `.asset-side`
   has no border of its own and the cards would just cluster at the top, leaving the gap. */
.page-assets .card--ingest,
.page-assets .asset-side       { align-self: stretch; }
.page-assets .asset-side .card { flex: 1 1 auto; }

/* ─── Card shell ──────────────────────────────────────────────── */
.page-assets .card {
    display: flex; flex-direction: column;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); padding: 14px 16px 16px;
}
.page-assets .card-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.page-assets .card-head h3 { margin: 0; font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--text); }
.page-assets .card-sub { font-size: 12px; color: var(--faint); }
.page-assets .card--ingest .range-select { margin-left: auto; }

/* ─── Stat tiles (posture tiles double as device-list filters) ── */
.page-assets .stat {
    display: flex; flex-direction: column; gap: 3px;
    padding: 14px 16px; min-height: 92px;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.page-assets .stat-label { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.page-assets .stat-value { font-family: var(--font-display); font-size: 32px; font-weight: 700; line-height: 1.05; color: var(--text); font-variant-numeric: tabular-nums; }
.page-assets .stat-sub { font-size: 12px; color: var(--faint); }

.page-assets .stat-btn {
    text-align: left; font: inherit; cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}
.page-assets .stat-btn:hover { border-color: rgba(255, 255, 255, 0.20); background: var(--surface-2); }
.page-assets .stat-btn.is-active { border-color: var(--accent-line); background: var(--accent-soft); }

/* ─── Tone helpers ────────────────────────────────────────────── */
.page-assets .tone-good { color: var(--good); }
.page-assets .tone-warn { color: var(--warn); }
.page-assets .tone-bad  { color: var(--bad); }
.page-assets .tone-crit { color: var(--crit); }

/* ─── Arrow-segment donut (secure-score gauge + OS mix) ───────────
   The same chevron-boundary ring the SOC dashboard uses (see
   site/pages/soc.css). Segment geometry comes from ArrowSegs in the
   code-behind; the track ring + centre text are styled here. */
.page-assets .donut { width: 176px; height: 176px; display: block; margin: 4px auto 12px; }
/* Score gauge sits alone in its card; size it to sit level with the 2×2 stat block beside it. */
.page-assets .card--score .donut { width: 150px; height: 150px; margin: auto; }
.page-assets .donut-track { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 15; }
.page-assets .donut-seg {
    /* stroke matches fill (set inline) to cover the anti-aliased seam between sectors;
       the ring sweeps in via geometry + the count-up ticker, so no CSS entrance here. */
    stroke-width: 1;
    stroke-linejoin: round;
    transition: filter .2s ease;
}
.page-assets .donut-seg:hover { filter: brightness(1.15); }
.page-assets .donut-total { fill: var(--text); font: 700 34px var(--font-display); text-anchor: middle; }
.page-assets .donut-caption { fill: var(--faint); font: 500 11px var(--font-body); letter-spacing: .06em; text-transform: uppercase; text-anchor: middle; }

/* Legend under the OS-mix donut. */
.page-assets .donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.page-assets .donut-legend li { display: grid; grid-template-columns: 11px 1fr auto; align-items: center; gap: 9px; font-size: 12.5px; }
.page-assets .donut-legend .dot { width: 11px; height: 11px; border-radius: 2px; }
.page-assets .lg-label { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-assets .lg-count { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ─── Volume bars (daily ingestion) ───────────────────────────── */
/* Wrapper hosts a y-axis gutter + gridlines behind the bars. The scale overlay is
   anchored to the plot area: top offset = .vol-chart padding-top (8px); bottom offset
   = the x-axis label row (.vol-label height 12px + margin-top 5px = 17px). Keep these
   offsets in sync with .vol-chart / .vol-label below. */
.page-assets .vol-chart-wrap { position: relative; padding-left: 50px; }
.page-assets .vol-scale { position: absolute; left: 0; right: 0; top: 8px; bottom: 17px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.page-assets .vol-grid-row { display: flex; align-items: center; height: 0; }
.page-assets .vol-tick { flex: none; width: 50px; padding-right: 8px; text-align: right; font-size: 10px; line-height: 1; color: var(--faint); white-space: nowrap; }
.page-assets .vol-grid-line { flex: 1; border-top: 1px dashed var(--line); }
.page-assets .vol-chart { display: flex; align-items: flex-end; gap: 4px; height: 150px; padding-top: 8px; }
.page-assets .vol-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; height: 100%; }
.page-assets .vol-bar-wrap { flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.page-assets .vol-bar { width: 64%; min-height: 2px; background: linear-gradient(180deg, var(--accent), var(--accent-line)); border-radius: 2px 2px 0 0; transition: height .4s ease; }
.page-assets .vol-col:hover .vol-bar { filter: brightness(1.12); }
.page-assets .vol-label { font-size: 10px; color: var(--faint); margin-top: 5px; white-space: nowrap; height: 12px; }

/* ─── Horizontal bars (ingestion by source) ───────────────────── */
.page-assets .hbars { display: flex; flex-direction: column; gap: 11px; margin-top: 4px; }
.page-assets .hbar-row { display: grid; grid-template-columns: minmax(110px, 1.3fr) 3fr max-content max-content; align-items: center; gap: 10px; font-size: 12.5px; }
.page-assets .hbar-label { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-assets .hbar-track { height: 9px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.page-assets .hbar-fill { display: block; height: 100%; background: var(--accent); transition: width .4s ease; }
.page-assets .hbar-fill.tone-neutral { background: var(--accent); }
.page-assets .hbar-fill.tone-good { background: var(--good); }
.page-assets .hbar-fill.tone-warn { background: var(--warn); }
.page-assets .hbar-fill.tone-bad  { background: var(--bad); }
.page-assets .hbar-count { text-align: right; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.page-assets .hbar-pct { text-align: right; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ─── Toolbar (only .inc-toolbar remains local; controls are global) ── */

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

/* ─── Menus-open stacking context ─────────────────────────────── */

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

/* ─── Filter row ──────────────────────────────────────────────── */

.page-assets .inc-filterbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 14px; }

/* ─── Pagination (in the list footer) ─────────────────────────── */

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

.page-assets .pager-size { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--faint); }
.page-assets .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-assets .pager-nav { display: inline-flex; align-items: center; gap: 10px; }
.page-assets .pager-page { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.page-assets .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-assets .pager-btn:hover:not(:disabled) { color: var(--text); border-color: rgba(255, 255, 255, 0.2); }
.page-assets .pager-btn:disabled { opacity: 0.4; cursor: default; }
.page-assets .pager-btn svg { width: 13px; height: 13px; flex: none; }

/* ─── Device list (grid rows) ─────────────────────────────────── */

.page-assets .inc-head,
.page-assets .inc-row {
    display: grid;
    gap: 16px;
    align-items: center;
}

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

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

.page-assets .inc-row {
    position: relative;
    padding: 16px 22px;
    border-bottom: 1px solid var(--line-soft);
    cursor: pointer;
    transition: background .18s ease;
}

.page-assets .inc-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--c);
    opacity: 0;
    transition: opacity .18s ease;
}

.page-assets .inc-row:hover { background: rgba(255, 255, 255, 0.035); }
.page-assets .inc-row:hover::before { opacity: 0.8; }
.page-assets .inc-row:last-of-type { border-bottom: 0; }

.page-assets .inc-name-cell { min-width: 0; }
.page-assets .inc-name-cell strong {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.page-assets .inc-plain {
    font-size: 13px;
    color: var(--text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.page-assets .inc-sq {
    width: 11px;
    height: 11px;
    flex: none;
}

.page-assets .inc-dot2 {
    width: 9px;
    height: 9px;
    flex: none;
    border-radius: 50%;
}

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

.page-assets .inc-empty {
    padding: 36px 22px;
    text-align: center;
    color: var(--faint);
    font-size: 13.5px;
}

.page-assets .inc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 22px;
    border-top: 1px solid var(--line-soft);
    color: var(--faint);
    font-size: 12.5px;
}

.page-assets .inc-foot strong { color: var(--muted); font-variant-numeric: tabular-nums; }

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

@media (max-width: 1250px) {
    /* Score sits above a full-width 4-across stat row; charts stack. */
    .page-assets .card--score  { grid-column: 1 / -1; }
    .page-assets .asset-stats  { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
    .page-assets .card--ingest,
    .page-assets .asset-empty-card,
    .page-assets .asset-side   { grid-column: 1 / -1; }
}

@media (max-width: 1080px) {
    .page-assets .inc-head { display: none; }
    .page-assets .inc-row {
        grid-template-columns: 1fr auto !important;
        row-gap: 10px;
        column-gap: 14px;
    }
    .page-assets .inc-name-cell { grid-column: 1 / -1; }
    .page-assets .inc-updated { text-align: right; }
}

@media (max-width: 640px) {
    .page-assets .asset-stats { grid-template-columns: repeat(2, 1fr); }
}