/* ==========================================================================
   Consumer-specific column layout for the server-side virtualized list screens
   (Accesses, Devices, Support). The list SHELL, scroll region, sticky header,
   row base, skeleton, status bar and error banner now come from the Infinity.UI
   package (AirVirtualizedListShell / AirListStatusBar / AirSkeletonRow /
   AirLoadError + _content/Infinity.UI/css/air-list-shell.css).

   This file owns ONLY what is specific to each DTO: the grid-template-columns,
   the responsive breakpoints, row/header metrics (height must match the
   Virtualize ItemSize), and the small status-dot / chip-flex / empty-state
   helpers. Status colors stay on MudBlazor palette tokens so light/dark theme
   parity is preserved.
   ========================================================================== */

/* ── Shared row/header metrics ──────────────────────────────────────────── */

/* Header reuses .air-list-row for the grid mechanics but is not interactive.
   Higher specificity than the page column class so the 40px header height wins
   over the (taller) body-row height. */
.air-list-row.nms-head-row { height: 40px; cursor: default; }
.air-list-row.nms-head-row:hover { background: transparent; }

/* ── Accesses: column layout ────────────────────────────────────────────── */

.access-row-cols {
    grid-template-columns: 36px 100px 60px minmax(120px, 1fr) minmax(140px, 1.3fr) 90px 90px minmax(110px, 0.9fr) minmax(110px, 0.9fr) minmax(130px, 1fr) 44px;
    height: 56px;
    padding: 0 8px;
}

.ar-l2, .ar-l3, .ar-tags { display: flex; align-items: center; flex-wrap: nowrap; }

.ar-status-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--mud-palette-gray-default);
    background: var(--mud-palette-gray-default);
}

.ar-status-dot.st-invoiced { border-color: var(--mud-palette-success); }
.ar-status-dot.st-online   { background: var(--mud-palette-success); }
.ar-status-dot.st-warning  { background: var(--mud-palette-warning); }
.ar-status-dot.st-offline  { background: var(--mud-palette-error); }
.ar-status-dot.st-service  { background: var(--mud-palette-info); }
.ar-status-dot.st-unknown  { background: var(--mud-palette-gray-default); }

.accesses-mobile-sort { display: none; }

@media (max-width: 1400px) {
    .access-row-cols {
        grid-template-columns: 36px 100px 60px minmax(120px, 1fr) minmax(140px, 1.3fr) 90px 90px minmax(130px, 1fr) 44px;
    }
    .ar-l2, .ar-l3 { display: none; }
}

@media (max-width: 1100px) {
    .access-row-cols {
        grid-template-columns: 36px 100px minmax(120px, 1fr) minmax(140px, 1.3fr) 90px minmax(130px, 1fr) 44px;
    }
    .ar-cid, .ar-ports { display: none; }
}

@media (max-width: 768px) {
    .accesses-mobile-sort { display: inline-flex; }

    .access-row-cols {
        grid-template-columns: 28px minmax(80px, 1fr) minmax(60px, 1.4fr) 80px 40px;
    }

    .ar-address, .ar-tags { display: none; }
}

/* ── Devices: column layout ─────────────────────────────────────────────── */

.device-row-cols {
    grid-template-columns: 110px minmax(140px, 1.2fr) 130px minmax(100px, 0.8fr) minmax(160px, 1.6fr) 88px;
    height: 52px;
    padding: 0 8px;
}

.dr-ports { display: flex; align-items: center; flex-wrap: nowrap; }

@media (max-width: 768px) {
    .device-row-cols { grid-template-columns: 96px minmax(100px, 1fr) 88px; }
    .dr-ip, .dr-model, .dr-ports { display: none; }
}

/* ── Support cases: column layout ───────────────────────────────────────── */

.case-row-cols {
    grid-template-columns: 80px minmax(160px, 2fr) 110px 110px 150px minmax(120px, 1fr);
    height: 52px;
    padding: 0 8px;
}

.cr-latest { opacity: 0.65; font-size: 0.75rem; }

@media (max-width: 768px) {
    .case-row-cols { grid-template-columns: 64px minmax(120px, 1fr) 100px; }
    .cr-priority, .cr-submitted, .cr-comments { display: none; }
}

/* ── Empty-state layout (custom EmptyContent markup lives in each page) ──── */

.accesses-empty, .devices-empty, .support-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 16px;
    text-align: center;
}

/* ── Misc shared bits ───────────────────────────────────────────────────── */

.nms-comment-card { border: 1px solid var(--mud-palette-table-lines); }