/* InfinityNMS product base styling.

   The application SHELL (sidebar, mobile drawer/top bar, brand, nav rendering, account region, workspace
   surface, responsive breakpoints, scrollbars — all the generic geometry that used to live here) is now
   owned by the canonical Infinity.AppShell package (_content/Infinity.AppShell/infinity-appshell.css).
   This file keeps only product-level base concerns:

     1. --nms-font: the single app-wide font stack. It is the authority the Mud->AIR bridge
        (nms-mud-bridge.css) maps every --mud-typography-*-family onto, and AIR components inherit it via
        the body (Infinity.UI's --air-font-family is `inherit`).
     2. body: apply that font and paint the darkest shell surface behind everything so overscroll never
        flashes a light background. */

:root {
    /* System UI first = the clean Segoe UI rendering of the InfinityAI baseline on Windows. */
    --nms-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Consumer shell values (HOME-001 / landing / v1.3 §4). Infinity.AppShell renders the sidebar, top bar and
       navigation from these tokens; InfinityNMS supplies its values here, measured from the registered v1.3
       reference at 1536×1024. The runtime theme <style> (AirThemeProvider) re-declares the emitted ones
       (--air-sidebar-w and the --air-sidebar-* tones) at :root later in the document, so those overrides are
       marked important to win the cascade — the same technique nms-mud-bridge.css uses for the MudBlazor
       runtime theme. Every colour is derived from theme tokens, so the light theme follows automatically. */
    --air-sidebar-w: 235px !important;
    --air-sidebar-bg: color-mix(in srgb, var(--air-bg) 86%, black);
    --air-sidebar-border: var(--air-border);
    --air-sidebar-secondary: color-mix(in srgb, var(--air-text) 84%, var(--air-bg)) !important;
    --air-sidebar-active-bg: color-mix(in srgb, var(--air-accent) 72%, black) !important;
    --air-sidebar-active-text: white !important;
    --air-sidebar-active-icon: white !important;
    --air-topbar-bg: var(--air-surface);
    --air-topbar-border: var(--air-border);
    --air-topbar-height: 57px;
    --air-topbar-search-offset: calc(var(--air-sidebar-w) * -1);
    --air-nav-item-size: 15px;
    --air-nav-icon-size: 20px;
    --air-nav-item-height: 31px;
    --air-nav-item-padding: 5px 13px;
    --air-nav-item-gap: 17px;
    --air-nav-item-radius: 6px;
    --air-nav-heading-size: 13px;
    --air-nav-heading-tracking: 0.02em;
    --air-nav-heading-padding: 13px 11px 5px;
}

body {
    font-family: var(--nms-font);
    background: var(--air-bg);
}

/* HOME-001 / landing / v1.2 §5. The router moves focus to the page heading after navigation
   (<FocusOnNavigate Selector="h1" />), which is the accessible "focus moved to the new page" cue.
   The heading is only ever PROGRAMMATICALLY focusable (the router adds tabindex="-1"); it is never
   in the tab order, so the browser's default focus outline around it is a visual artefact rather
   than a keyboard affordance. Suppress the outline for exactly that state and leave every
   interactive control's own focus ring untouched. */
.air-compact-greeting[tabindex="-1"]:focus,
.air-compact-greeting[tabindex="-1"]:focus-visible {
    outline: none;
}

/* ── HOME-001 / landing / v1.3 — Home composition ──────────────────────────────────────────────────────────
   Product-scoped spacing, type scale and the few Home-only row compositions (Top Accesses bars, Quick Actions
   rows, tip, footer). Every colour is a shared --air-* token or an area tone (.air-tone-* / .air-cf-*); no hex,
   no grid primitive and no breakpoint is introduced here — the grid and the split are the shared AirGrid and
   .air-intel-split. Geometry measured from the registered HOME-001__landing__v1.3.png at 1536×1024. */
.nms-home {
    /* Fluid gutters: the reference 37px / 28px on a wide desktop, easing to 16px on a phone (no breakpoint). */
    padding: 0.75rem clamp(1rem, 1.8vw, 1.75rem) 0.5rem clamp(1rem, 2.41vw, 2.3125rem);
    gap: 0.875rem;
}

.nms-home .air-compact-greeting--display {
    font-size: 1.875rem;
    font-weight: var(--air-font-weight-semibold, 600);
    letter-spacing: -0.01em;
}

.nms-home .air-compact-sub {
    margin-top: 0.125rem;
    font-size: 1.125rem;
    color: color-mix(in srgb, var(--air-text) 90%, var(--air-bg));
}

.nms-home > :first-child {
    margin-bottom: 0;
}

/* Summary cards (v1.3 §6): the reference card is ~199px tall — tile, value, measure label, then the delta and the
   area sparkline in the foot. The numeric value and a §16.1 text label keep one fixed line box, so every outcome
   keeps the same card height. */
.nms-home .air-kpi-card--display {
    padding: 1.0625rem clamp(0.875rem, 1.37vw, 1.3125rem) 0.5rem;
    min-height: 12.4375rem;
}

.nms-home .air-kpi-card--display .air-kpi-card-head {
    margin-bottom: 0.25rem;
}

.nms-home .air-kpi-card--display .air-kpi-card-value--text {
    font-size: 1.125rem;
}

/* Panels: the reference insets panel content ~20px and opens the lower row one step further from the charts. */
.nms-home .air-intel-split > .air-card {
    padding: 1.25rem 1.25rem 0.875rem;
}

.nms-home .air-intel-split + .air-intel-split {
    margin-top: 0;
}

.nms-home .air-heading--panel {
    font-size: 1.0625rem;
    font-weight: var(--air-font-weight-semibold, 600);
    margin: 0;
}

.nms-panel-head {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    min-width: 0;
}

.nms-panel-caption {
    font-size: 1rem;
    color: color-mix(in srgb, var(--air-text) 82%, var(--air-bg));
}

.nms-panel-chevron {
    margin-left: auto;
    align-self: center;
    display: inline-flex;
    color: var(--air-accent);
}

/* Network Activity: the legend sits on its own line under the title, aligned to the plot's right edge. */
.nms-activity-legend {
    display: flex;
    justify-content: flex-end;
    padding: 0.25rem 2.5rem 0.125rem 0;
}

.nms-activity-legend .air-legend {
    gap: 1.75rem;
    font-size: 0.875rem;
    color: color-mix(in srgb, var(--air-text) 88%, var(--air-bg));
}

/* Top Accesses (v1.3 §9): name column, a proportional bar in the Network tone, right-aligned value; hairline
   separators between rows. The bar length is the fixture's illustrative share; the value label carries the
   meaning. */
.nms-topaccesses-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 2.375rem;
    padding: 0.4375rem 0.25rem 0.4375rem 0;
    border-bottom: 1px solid var(--air-border);
}

.nms-topaccesses-row:last-child {
    border-bottom: none;
}

.nms-topaccesses .nms-panel-head {
    margin-bottom: 0.625rem;
}

.nms-topaccesses-name {
    flex: 0 0 7rem;
    min-width: 0;
    white-space: nowrap;
    font-size: 0.9375rem;
    color: var(--air-text);
}

.nms-topaccesses-track {
    flex: 0 1 10.125rem;
    min-width: 0;
    display: flex;
    margin-right: auto;
}

.nms-topaccesses-bar {
    display: block;
    height: 0.8125rem;
    border-radius: 2px;
}

.nms-topaccesses-value {
    flex: 0 0 5.5rem;
    text-align: right;
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
    color: var(--air-text);
}

/* Modules (v1.3 §10): six tiles, each led by its area's solid tone tile. */
/* The reference insets the tile grid ~12px from the card edge while the title keeps the 20px panel inset. */
.nms-home .air-intel-split > .nms-modules {
    padding: 1rem 0.75rem 0.6875rem;
}

.nms-home .air-intel-split > .nms-quick-actions {
    padding-top: 1rem;
}

.nms-modules .air-heading--panel {
    margin: 0 0 0.625rem 0.5rem;
}

.nms-module-tile {
    padding: 0.625rem 0.75rem 0.625rem 0.625rem;
    min-height: 5.4375rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: color-mix(in srgb, var(--air-surface) 88%, var(--air-text) 2%);
}

.nms-module-title {
    font-size: 0.875rem;
    font-weight: var(--air-font-weight-semibold, 600);
    color: var(--air-text);
}

.nms-module-items {
    font-size: 0.8125rem;
    line-height: 1.3;
    color: color-mix(in srgb, var(--air-text) 78%, var(--air-bg));
}

.nms-module-tile .air-inline {
    gap: 0;
}

.nms-module-tile .air-accent-tile {
    margin-right: 0.875rem;
}

.nms-module-tile .nms-chevron {
    padding-left: 0.25rem;
}

.nms-chevron {
    margin-left: auto;
    display: inline-flex;
    flex: 0 0 auto;
    color: color-mix(in srgb, var(--air-text) 80%, var(--air-bg));
}

/* Quick Actions (v1.3 §10): rows in an inset list with hairline separators; accent glyphs, the alerts row in the
   warning tone. */
.nms-quick-actions .nms-panel-head {
    margin-bottom: 0.625rem;
}

.nms-quick-actions-list {
    border: 1px solid var(--air-border);
    border-radius: var(--air-radius-sm, 6px);
}

.nms-quick-action {
    display: flex;
    align-items: center;
    gap: 1.125rem;
    min-height: 2.375rem;
    padding: 0.25rem 0.75rem 0.25rem 0.8125rem;
    border-bottom: 1px solid var(--air-border);
}

.nms-quick-action:last-child {
    border-bottom: none;
}

.nms-quick-action-icon {
    display: inline-flex;
    color: var(--air-accent);
}

.nms-quick-action-icon.is-attention {
    color: var(--air-warning);
}

.nms-quick-action-label {
    font-size: 0.9375rem;
    color: var(--air-text);
}

/* §12 contextual tip: an accent-outlined strip with a larger bulb glyph and an accent close control. */
.nms-home .nms-tip {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.375rem;
    padding: 0.5rem 1rem 0.5rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--air-accent) 70%, var(--air-bg));
    background: color-mix(in srgb, var(--air-accent) 6%, var(--air-bg));
    margin-top: 0.3125rem;
}

.nms-tip-icon {
    display: inline-flex;
    color: var(--air-accent);
}

.nms-tip-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9375rem;
    color: color-mix(in srgb, var(--air-text) 90%, var(--air-bg));
}

.nms-tip-text strong {
    color: var(--air-text);
    font-weight: var(--air-font-weight-semibold, 600);
}

.nms-tip .nms-tip-close {
    color: var(--air-accent);
}

/* §11 footer: low emphasis, right-aligned, hairline separators. */
.nms-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.9375rem;
    font-size: 0.8125rem;
    color: var(--air-text-muted);
    padding-top: 0.25rem;
}

.nms-footer-sep {
    width: 1px;
    height: 0.875rem;
    background: var(--air-border-strong, var(--air-border));
}

/* HOME-001 v1.4 navigation (RADIUS): the Radius module's tab row (RadiusModuleNav). The module admits no Infinity.*
   package, so its look arrives here, from the theme's tokens. Plain text tabs, an accent underline on the active one,
   no icons and no segmented container; the row scrolls inside itself rather than widening the document. Every rule also
   carries a module-neutral .nms-module-nav selector, so another module's tab row (IDENTITET-001 Certifikat) is drawn by
   these same declarations without a module-to-module edge. */
.radius-module-nav,
.nms-module-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.radius-module-nav__title,
.nms-module-nav__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: var(--air-font-weight-bold, 700);
    line-height: 1.25;
    color: var(--air-text);
}

/* Programmatic focus from FocusOnNavigate (Selector="h1"), as for the Home greeting above. */
.radius-module-nav__title[tabindex="-1"]:focus,
.radius-module-nav__title[tabindex="-1"]:focus-visible,
.nms-module-nav__title[tabindex="-1"]:focus,
.nms-module-nav__title[tabindex="-1"]:focus-visible {
    outline: none;
}

.radius-module-nav__tabs,
.nms-module-nav__tabs {
    display: flex;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    /* The divider is an inset shadow, not a border, so the active underline paints over it without a negative
       margin that the scroll container would clip. */
    box-shadow: inset 0 -1px 0 var(--air-border);
    overflow-x: auto;
    scrollbar-width: none;
}

.radius-module-nav__tab,
.nms-module-nav__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 1rem 0.625rem;
    border-bottom: 2px solid transparent;
    border-radius: 4px 4px 0 0;
    color: color-mix(in srgb, var(--air-text) 85%, var(--air-bg));
    font-size: 0.875rem;
    font-weight: var(--air-font-weight-medium, 500);
    line-height: 1.25rem;
    text-decoration: none;
    white-space: nowrap;
}

/* Reserves the semibold width on every tab, so selecting one never shifts the tabs after it. */
.radius-module-nav__tab::after,
.nms-module-nav__tab::after {
    content: attr(data-label);
    height: 0;
    overflow: hidden;
    visibility: hidden;
    font-weight: var(--air-font-weight-semibold, 600);
    pointer-events: none;
    user-select: none;
}

.radius-module-nav__tab:hover,
.nms-module-nav__tab:hover {
    color: var(--air-accent);
}

.radius-module-nav__tab.is-active,
.nms-module-nav__tab.is-active {
    color: var(--air-accent);
    border-bottom-color: var(--air-accent);
    font-weight: var(--air-font-weight-semibold, 600);
}

.radius-module-nav__tab:focus-visible,
.nms-module-nav__tab:focus-visible {
    outline: 2px solid var(--air-accent);
    outline-offset: -2px;
}

/* RADIUS-001 overview v1.0: the RADIUS Overview's content, under the unchanged module header above. The summary
   cards are the HOME summary card's own markup (toned display air-kpi-card), tuned here to RADIUS's denser row of
   six; panels are air-card with the HOME panel head. Tokens only, each with an emitted fallback. */
/* The breakpoints below follow the CONTENT width (a container), not the viewport: the sidebar takes a varying share. */
.radius-overview {
    position: relative;
    container-type: inline-size;
    container-name: radius-overview;
}

/* The period control sits on the module title's line, at the content's right edge (pa-6 = 1.5rem). */
.radius-overview__period {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.radius-overview__period-select {
    width: 12.5rem;
}

.radius-overview__period .mud-input-control {
    margin: 0;
}

.radius-overview__kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.875rem;
}

.radius-kpi.air-kpi-card--display {
    padding: 1rem 1.125rem 1.0625rem;
    gap: 0.25rem;
}

.radius-kpi.air-kpi-card--display .air-kpi-card-head {
    margin-bottom: 0.5rem;
    gap: 0.75rem;
    min-height: 2.75rem;
}

/* RADIUS measures are named, not area-coded: sentence case, allowed to wrap onto a second line. */
.radius-kpi.air-kpi-card--toned .air-kpi-card-title {
    font-size: 0.9375rem;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    color: color-mix(in srgb, var(--air-text) 92%, var(--air-bg));
}

.radius-kpi.air-kpi-card--toned .air-kpi-card-subtitle {
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    font-weight: var(--air-font-weight-regular, 400);
    color: var(--air-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A text label (a refused read) keeps the numeric value's line box at HOME's reduced label scale. */
.radius-kpi.air-kpi-card--display .air-kpi-card-value--text {
    font-size: 1.125rem;
}

.radius-kpi .air-kpi-card-media .radius-glyph {
    width: 24px;
    height: 24px;
}

.radius-overview__split {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 0.875rem;
    align-items: stretch;
}

.radius-overview__panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    padding: 1.125rem 1.25rem 1rem;
}

.radius-overview .air-heading--panel {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: var(--air-font-weight-semibold, 600);
}

.radius-overview .nms-panel-caption {
    font-size: 0.9375rem;
}

.radius-overview__more {
    margin-left: auto;
    align-self: center;
    display: inline-flex;
    border-radius: 4px;
    color: var(--air-accent);
}

.radius-overview__more:focus-visible,
.radius-overview__link:focus-visible {
    outline: 2px solid var(--air-accent);
    outline-offset: 2px;
}

.radius-overview__chevron {
    width: 20px;
    height: 20px;
}

.radius-overview__state {
    margin: 0;
    padding: 0.75rem 0;
    font-size: 0.875rem;
    color: var(--air-text-muted);
}

.radius-overview__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    color: var(--air-text);
}

.radius-overview__table th {
    padding: 0 0.75rem 0.5rem 0;
    font-weight: var(--air-font-weight-medium, 500);
    text-align: left;
    white-space: nowrap;
    color: var(--air-text-muted);
}

/* Names and times stay on one line; the relative-duration bar is the column that gives way. */
.radius-overview__table td {
    padding: 0.5rem 0.75rem 0.5rem 0;
    border-top: 1px solid var(--air-border);
    white-space: nowrap;
}

.radius-overview__table--sessions td {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.radius-overview__table tbody tr:hover td {
    background: var(--air-hover, color-mix(in srgb, var(--air-text) 4%, transparent));
}

.radius-overview__nums {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.radius-overview__muted {
    color: var(--air-text-muted);
}

.radius-overview__user {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
}

.radius-overview__user-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--air-text-muted);
}

.radius-overview__bar-cell {
    width: 28%;
}

.radius-overview__track,
.radius-outcome__track {
    display: block;
    height: 0.5rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--air-text) 9%, transparent);
    overflow: hidden;
}

.radius-overview__bar,
.radius-outcome__bar {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: 4px;
}

/* Result markers: a small dot beside the word, so the outcome is never carried by colour alone. */
.radius-overview__status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.radius-overview__status-dot,
.radius-outcome__dot {
    flex: 0 0 auto;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--radius-status, var(--air-text-muted));
}

.radius-overview__status--success { --radius-status: var(--air-chart-2, var(--air-accent)); }
.radius-overview__status--error { --radius-status: var(--air-chart-5, var(--air-accent)); }
.radius-overview__status--warning { --radius-status: var(--air-chart-7, var(--air-accent)); }
.radius-overview__status--neutral { --radius-status: var(--air-chart-9, var(--air-text-muted)); }

.radius-overview__foot {
    display: flex;
    justify-content: flex-end;
    margin-top: -0.25rem;
}

.radius-overview__link {
    border-radius: 4px;
    font-size: 0.875rem;
    color: var(--air-accent);
    text-decoration: none;
}

.radius-overview__link:hover {
    text-decoration: underline;
}

.radius-overview__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Authentication outcome: the period's total, then one bar per disjoint outcome with its share and count. */
.radius-outcome__total {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.radius-outcome__total-value {
    font-size: 1.75rem;
    font-weight: var(--air-font-weight-bold, 700);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--air-text);
}

.radius-outcome__total-label {
    font-size: 0.9375rem;
    color: var(--air-text-muted);
}

/* The rows share the panel's height with the Top sessions panel beside them, rather than leaving a void below. */
.radius-outcome__rows {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 1rem;
    margin: 0.25rem 0 0;
    padding: 0;
    list-style: none;
}

.radius-outcome__row {
    display: grid;
    grid-template-columns: minmax(8.5rem, auto) minmax(4rem, 1fr) 4rem 4.5rem;
    align-items: center;
    gap: 0.875rem;
    font-size: 0.875rem;
    --radius-status: var(--air-tone, var(--air-accent));
}

.radius-outcome__label {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    white-space: nowrap;
}

.radius-outcome__bar {
    background: var(--air-tone, var(--air-accent));
}

.radius-outcome__share {
    font-weight: var(--air-font-weight-semibold, 600);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.radius-outcome__count {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--air-text-muted);
}

/* Six cards need ~195px each for a two-line "Authentication Attempts"; below that, two rows of three. */
@container radius-overview (max-width: 1220px) {
    .radius-overview__kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@container radius-overview (max-width: 1060px) {
    .radius-overview__split {
        grid-template-columns: minmax(0, 1fr);
    }
}

@container radius-overview (max-width: 860px) {
    .radius-overview__panel {
        overflow-x: auto;
    }
}

/* Narrow: the period control leaves the title line, and the wide tables scroll inside their own panel. */
@container radius-overview (max-width: 640px) {
    .radius-overview__kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .radius-overview__period {
        position: static;
        order: -1;
        align-self: flex-end;
    }

    .radius-outcome__row {
        grid-template-columns: minmax(7rem, auto) minmax(3rem, 1fr) 3.5rem 3.5rem;
        gap: 0.5rem;
    }
}

/* RADIUS-001 RADIUS Clients v1.0: the RADIUS Clients tab's content, under the unchanged module header. One compact
   toolbar directly under the tabs, one full-width table card, a compact pager. Every rule is scoped to .radius-clients;
   tokens only, each with an emitted fallback. The breakpoints follow the list's own width (a container), because the
   client drawer takes a share of it.
   THE ADMINISTRATION LIST FAMILY IS SHARED, NOT COPIED. Every rule that draws the fields, buttons, panel, table, badge,
   footer and states also carries a module-neutral .nms-list selector, so another module's administration list
   (IDENTITET-001 Groups) is drawn by these same declarations. Layout that is RADIUS Clients' own — its toolbar grid,
   column widths, open column and drawer split — stays .radius-clients only. */
.radius-clients__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    margin-top: 0.75rem;
}

.radius-clients__body--split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.radius-clients__list {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    min-width: 0;
    container-type: inline-size;
    container-name: radius-clients;
}

.radius-clients__toolbar {
    display: grid;
    grid-template-columns: minmax(11rem, 1.1fr) minmax(9rem, 1fr) minmax(9rem, 1fr) auto auto;
    align-items: center;
    gap: 1rem;
}

/* One control height for the whole row: the three fields, the refresh button and the create action. */
.radius-clients .radius-clients__field.mud-input-control,
.nms-list .nms-list__field.mud-input-control {
    margin: 0;
}

.radius-clients .radius-clients__field .mud-input.mud-input-outlined,
.nms-list .nms-list__field .mud-input.mud-input-outlined {
    min-height: 2.75rem;
    font-size: 0.9375rem;
}

.radius-clients .radius-clients__field .mud-input-outlined-border,
.nms-list .nms-list__field .mud-input-outlined-border {
    border-color: var(--air-border);
    border-radius: 6px;
}

.radius-clients .radius-clients__field .mud-input-adornment-start .mud-icon-root,
.nms-list .nms-list__field .mud-input-adornment-start .mud-icon-root {
    color: var(--air-text-muted);
}

.radius-clients .radius-clients__refresh,
.nms-list .nms-list__refresh {
    width: 2.75rem;
    height: 2.75rem;
    border-color: var(--air-border);
    border-radius: 6px;
    color: var(--air-text);
}

.radius-clients .radius-clients__add,
.nms-list .nms-list__add {
    height: 2.75rem;
    padding: 0 1.25rem 0 1rem;
    border-radius: 6px;
    font-size: 0.9375rem;
    font-weight: var(--air-font-weight-semibold, 600);
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    box-shadow: none;
}

.radius-clients .radius-clients__add .mud-button-icon-start,
.nms-list .nms-list__add .mud-button-icon-start {
    margin-right: 0.375rem;
}

.radius-clients__panel,
.nms-list__panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0.5rem 1.25rem 0.75rem;
}

/* position: relative makes the scroll box the containing block of the table's visually hidden caption (.nms-list__sr is
   absolutely positioned). Without it a table wider than its box — one that scrolls, as Direktåtkomst does on a phone —
   placed the caption outside the box's clipping and widened the whole page. */
.radius-clients__scroll,
.nms-list__scroll {
    position: relative;
    min-width: 0;
    overflow-x: auto;
}

.radius-clients__table,
.nms-list__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.9375rem;
    color: var(--air-text);
}

.radius-clients__table th,
.nms-list__table th {
    padding: 0.875rem 1rem 0.875rem 0.375rem;
    font-size: 0.9375rem;
    font-weight: var(--air-font-weight-semibold, 600);
    text-align: left;
    white-space: nowrap;
    color: var(--air-text);
}

.radius-clients__table th:nth-child(1) { width: 18%; }
.radius-clients__table th:nth-child(2) { width: 22%; }
.radius-clients__table th:nth-child(3) { width: max(11%, 7.25rem); }
.radius-clients__table th:nth-child(4) { width: max(16%, 9.5rem); }
.radius-clients__table th.radius-clients__col--open { width: 3.5rem; }

/* The column the list is ordered by. Name ascending is the only ordering the list asks for. */
.radius-clients__sort,
.nms-list__sort {
    display: inline-block;
    margin-left: 0.5rem;
    border-right: 0.3125rem solid transparent;
    border-bottom: 0.375rem solid currentColor;
    border-left: 0.3125rem solid transparent;
    vertical-align: 0.125rem;
}

.radius-clients__table td,
.nms-list__table td {
    padding: 1.0625rem 1rem 1.0625rem 0.375rem;
    border-top: 1px solid var(--air-border);
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.radius-clients__table tbody tr,
.nms-list__table tbody tr {
    cursor: pointer;
}

.radius-clients__table tbody tr:hover td,
.nms-list__table tbody tr:hover td {
    background: var(--air-hover, color-mix(in srgb, var(--air-text) 4%, transparent));
}

/* The row whose drawer is open: a tint and an accent edge, so the operator can see which client they are editing. */
.radius-clients__table tbody tr.is-selected td,
.nms-list__table tbody tr.is-selected td {
    background: color-mix(in srgb, var(--air-accent) 10%, transparent);
}

.radius-clients__table tbody tr.is-selected td:first-child,
.nms-list__table tbody tr.is-selected td:first-child {
    box-shadow: inset 3px 0 0 var(--air-accent);
}

/* A page being replaced: kept in place so nothing jumps, but dimmed and inert, never presented as the new answer. */
.radius-clients__table.is-stale tbody,
.nms-list__table.is-stale tbody {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 120ms ease-in;
}

.radius-clients__name {
    font-weight: var(--air-font-weight-medium, 500);
    white-space: nowrap;
}

.radius-clients__description {
    white-space: nowrap;
}

.radius-clients__addresses {
    font-variant-numeric: tabular-nums;
}

.radius-clients__address {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.radius-clients__muted,
.nms-list__muted {
    color: var(--air-text-muted);
}

.radius-clients__badge,
.nms-list__badge {
    --radius-tone: var(--air-text-muted);
    display: inline-flex;
    align-items: center;
    height: 1.625rem;
    padding: 0 0.625rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: var(--air-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
    color: color-mix(in srgb, var(--radius-tone) 55%, white);
    background: color-mix(in srgb, var(--radius-tone) 22%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--radius-tone) 45%, transparent);
}

.radius-clients__badge--success,
.nms-list__badge--success { --radius-tone: var(--air-chart-2, var(--air-accent)); }
.radius-clients__badge--error,
.nms-list__badge--error { --radius-tone: var(--air-chart-5, var(--air-accent)); }
.radius-clients__badge--warning,
.nms-list__badge--warning { --radius-tone: var(--air-chart-7, var(--air-accent)); }
.radius-clients__badge--info,
.nms-list__badge--info { --radius-tone: var(--air-accent); }
.radius-clients__badge--neutral,
.nms-list__badge--neutral { --radius-tone: var(--air-chart-9, var(--air-text-muted)); }

.radius-clients__table .radius-clients__col--open {
    text-align: right;
    overflow: visible;
    padding-right: 0.25rem;
}

.radius-clients__open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 4px;
    color: var(--air-text-muted);
}

.radius-clients__open svg {
    width: 1.125rem;
    height: 1.125rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.radius-clients__open:hover {
    color: var(--air-text);
}

.radius-clients__open:focus-visible {
    outline: 2px solid var(--air-accent);
    outline-offset: 1px;
}

.radius-clients__foot,
.nms-list__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0 0 0.375rem;
    border-top: 1px solid var(--air-border);
}

.radius-clients__range,
.nms-list__range {
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    color: var(--air-text-muted);
}

/* The state panels' actions use the toolbar's sentence case, not MudBlazor's uppercase default. */
.radius-clients__empty .mud-button-root,
.nms-list__empty .mud-button-root,
.radius-clients__failure .mud-button-root,
.nms-list__failure .mud-button-root {
    letter-spacing: 0;
    text-transform: none;
}

/* A refused read inside the table card: one border (the card's), a quiet error tint, and only the icon and title
   in the error tone — the explanation stays in the secondary text colour. */
.radius-clients__failure .mud-alert,
.nms-list__failure .mud-alert {
    border: 0;
    background: color-mix(in srgb, var(--mud-palette-error, var(--air-chart-5)) 8%, transparent);
}

.radius-clients__failure .mud-alert .mud-typography-body2,
.nms-list__failure .mud-alert .mud-typography-body2 {
    color: var(--air-text-muted);
}

/* The pager's arrows are plain glyphs; only the current page is filled. */
.radius-clients .radius-clients__pager .mud-pagination-item:not(.mud-pagination-item-selected) .mud-button-root,
.nms-list .nms-list__pager .mud-pagination-item:not(.mud-pagination-item-selected) .mud-button-root {
    background: transparent;
    box-shadow: none;
}

.radius-clients__state,
.nms-list__state {
    margin: 0;
    padding: 1.25rem 0.375rem;
    font-size: 0.9375rem;
    color: var(--air-text-muted);
}

.radius-clients__failure,
.nms-list__failure {
    padding: 0.75rem 0 0.5rem;
}

.radius-clients__empty,
.nms-list__empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    padding: 1.25rem 0.375rem 0.75rem;
}

.radius-clients__empty-title,
.nms-list__empty-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: var(--air-font-weight-semibold, 600);
    color: var(--air-text);
}

.radius-clients__empty-body,
.nms-list__empty-body {
    margin: 0 0 0.375rem;
    font-size: 0.875rem;
    color: var(--air-text-muted);
}

.radius-clients__sr,
.nms-list__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* The drawer column is narrow on purpose; the list keeps what identifies a client and drops the wide columns. */
.radius-clients__body--split .radius-clients__col--wide {
    display: none;
}

.radius-clients__body--split .radius-clients__table th:nth-child(1) { width: 34%; }
.radius-clients__body--split .radius-clients__table th:nth-child(3) { width: 7.25rem; }
.radius-clients__body--split .radius-clients__table th:nth-child(4) { width: auto; }

@media (max-width: 1279.98px) {
    .radius-clients__body--split {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Narrower lists: the search takes its own line and the other controls share the next, rather than clipping labels. */
@container radius-clients (max-width: 860px) {
    .radius-clients__toolbar {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
    }

    .radius-clients__toolbar > .radius-clients__search {
        grid-column: 1 / -1;
    }
}

@container radius-clients (max-width: 420px) {
    .radius-clients__toolbar {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .radius-clients__toolbar > .radius-clients__field {
        grid-column: 1 / -1;
    }

    .radius-clients__table {
        table-layout: auto;
    }
}

/* IDENTITET-001 Groups v1.0 — an administration list in the shared .nms-list family above. What follows is only what
   the family does not already say: the list's own layout, the two-line name cell whose name is the row's link, quiet
   value tags, the status dot, and the row's focus ring. Tokens only, each with an emitted fallback. */
.nms-list__list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
    container-type: inline-size;
    container-name: nms-list;
}

.nms-list__toolbar {
    display: grid;
    align-items: center;
    gap: 1rem;
}

/* Search and status on the left, then page size, refresh and Create group at the right edge. The controls are placed
   by position — search, status, page size, refresh, create — because MudSelect puts its Class on an inner element, so
   a class selector cannot reach the grid item. Column 3 is the empty spacer. Devices has the same five controls in the
   same order, so it shares the layout. */
.identity-groups__toolbar,
.identity-devices__toolbar {
    grid-template-columns: minmax(11rem, 1.1fr) minmax(9rem, 1fr) minmax(0, 0.35fr) minmax(7rem, 11rem) auto auto;
}

.identity-groups__toolbar > :nth-child(3),
.identity-devices__toolbar > :nth-child(3) {
    grid-column: 4;
}

/* Devices' search keeps room for its whole placeholder, as Identities' does. */
.identity-devices__toolbar {
    grid-template-columns: minmax(19rem, 1.1fr) minmax(9rem, 1fr) minmax(0, 0.35fr) minmax(7rem, 11rem) auto auto;
}

/* IDENTITET-001 Devices v1.0 — Groups and Status as wide as their content needs, a narrow trailing column for the
   row's chevron; Reference, Display name and Owner share the rest. */
.identity-devices__table th:nth-child(4) { width: 7rem; }
.identity-devices__table th:nth-child(5) { width: 8rem; }
.identity-devices__table th:nth-child(6) { width: 3rem; }

.identity-devices__table th {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The chevron is the row's quiet affordance, not a control: the row and its reference link are what open the device. */
.identity-devices__chevron {
    padding-right: 0.75rem;
    text-align: right;
    color: var(--air-text-muted);
}

.identity-devices__chevron svg {
    width: 1.125rem;
    height: 1.125rem;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nms-list__row:hover .identity-devices__chevron {
    color: var(--air-text);
}

/* Members and Status are as wide as their content needs; the three text columns share the rest equally, which is what a
   fixed-layout table does with unsized columns. Percentages beside fixed columns overran the table at 1024 px and at
   200 % zoom, clipping Status; this cannot. */
.identity-groups__table th:nth-child(4) { width: 7rem; }
.identity-groups__table th:nth-child(5) { width: 8rem; }

.identity-groups__table th {
    overflow: hidden;
    text-overflow: ellipsis;
}

.nms-list__table td {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.nms-list__table .nms-list__num {
    padding-right: 1.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* The name is the row's link: the one focusable control in the row, named by the group itself. */
.nms-list__row-link {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: var(--air-font-weight-medium, 500);
    color: var(--air-text);
    text-decoration: none;
}

.nms-list__row-link:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.nms-list__row-link:focus-visible {
    outline: none;
}

.nms-list__secondary {
    display: block;
    margin-top: 0.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.8125rem;
    color: var(--air-text-muted);
}

/* The keyboard's focus ring is drawn around the whole row it opens. */
.nms-list__table tbody tr:has(.nms-list__row-link:focus-visible) td {
    background: var(--air-hover, color-mix(in srgb, var(--air-text) 4%, transparent));
    box-shadow: inset 0 2px 0 var(--air-accent), inset 0 -2px 0 var(--air-accent);
}

.nms-list__table tbody tr:has(.nms-list__row-link:focus-visible) td:first-child {
    box-shadow: inset 2px 0 0 var(--air-accent), inset 0 2px 0 var(--air-accent), inset 0 -2px 0 var(--air-accent);
}

.nms-list__table tbody tr:has(.nms-list__row-link:focus-visible) td:last-child {
    box-shadow: inset -2px 0 0 var(--air-accent), inset 0 2px 0 var(--air-accent), inset 0 -2px 0 var(--air-accent);
}

@supports not selector(:has(*)) {
    .nms-list__row-link:focus-visible {
        outline: 2px solid var(--air-accent);
        outline-offset: -2px;
    }
}

/* Canonical values as quiet tags. They wrap rather than clip, so no value is hidden. */
.nms-list__table td.nms-list__tags {
    white-space: normal;
}

.nms-list__tag {
    display: inline-flex;
    align-items: center;
    height: 1.625rem;
    margin: 0.125rem 0.375rem 0.125rem 0;
    padding: 0 0.625rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    line-height: 1;
    white-space: nowrap;
    color: var(--air-text);
    background: color-mix(in srgb, var(--air-text) 6%, transparent);
    box-shadow: inset 0 0 0 1px var(--air-border);
}

.nms-list__badge--dot::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.4375rem;
    border-radius: 50%;
    background: var(--radius-tone);
}

@container nms-list (max-width: 860px) {
    .identity-groups__toolbar,
    .identity-devices__toolbar {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
    }

    .identity-groups__toolbar > :nth-child(1),
    .identity-devices__toolbar > :nth-child(1) {
        grid-column: 1 / -1;
    }

    .identity-groups__toolbar > :nth-child(3),
    .identity-devices__toolbar > :nth-child(3) {
        grid-column: auto;
    }
}

@container nms-list (max-width: 520px) {
    .identity-groups__toolbar,
    .identity-devices__toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .identity-groups__toolbar > :nth-child(-n + 3),
    .identity-devices__toolbar > :nth-child(-n + 3) {
        grid-column: 1 / -1;
    }
}

/* IDENTITET-001 Identities v1.0 — an administration list in the shared .nms-list family, with the identity drawer
   beside it. What follows is only the page's own layout: the list/drawer split, the six-control toolbar, the column
   widths and the reference's monospace face. Tokens only, each with an emitted fallback. */
.nms-list__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.nms-list__drawer {
    min-width: 0;
}

/* The drawer sits beside the list only where both keep a usable width — the list and the drawer share the width
   equally, and the list keeps what identifies a row (the drawer shows the rest, as RADIUS Clients' split does).
   Narrower, the drawer follows the full-width list. */
@media (min-width: 1440px) {
    .nms-list__body--split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .nms-list__body--split .nms-list__col--wide {
        display: none;
    }
}

/* Search, type and status, then page size, refresh and Create identity at the right edge. Placed by position, as
   Groups' toolbar is, because MudSelect puts its Class on an inner element. */
.identity-identities__toolbar {
    grid-template-columns: minmax(17rem, 1.4fr) minmax(8rem, 1fr) minmax(8rem, 1fr) minmax(7rem, 0.75fr) auto auto;
}

/* Type, Groups and Status are as wide as their content needs; Reference and Display name share the rest. A wide list
   gives the three short columns more air, as the reference does, still in rem so nothing can overrun the table. */
.identity-identities__table th:nth-child(3) { width: 7rem; }
.identity-identities__table th:nth-child(4) { width: 6.5rem; }
.identity-identities__table th:nth-child(5) { width: 8rem; }

@container nms-list (min-width: 1200px) {
    .identity-identities__table th:nth-child(3) { width: 12rem; }
    .identity-identities__table th:nth-child(4) { width: 8rem; }
    .identity-identities__table th:nth-child(5) { width: 11rem; }
}

.identity-identities__table th {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The reference is an operator-typed handle (often an e-mail address): a monospace face keeps look-alike characters
   distinct. */
.nms-list__row-link.identity-identities__reference,
.nms-list__row-link.identity-devices__reference {
    font-family: var(--air-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 0.875rem;
}

/* The search keeps room for its whole placeholder; below the width where six controls fit on one row, it takes its own
   row and the other controls share the next. */
@container nms-list (max-width: 1040px) {
    .identity-identities__toolbar {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto auto;
    }

    .identity-identities__toolbar > :nth-child(1) {
        grid-column: 1 / -1;
    }
}

@container nms-list (max-width: 520px) {
    .identity-identities__toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .identity-identities__toolbar > :nth-child(-n + 4) {
        grid-column: 1 / -1;
    }
}

/* The RADIUS live lists — Authentication Logs v1.0 and Sessions v1.0 — under the unchanged module header, drawn by the
   shared Radius.UI Components/LiveList components. One compact control row directly under the tabs (filter, local
   search, the single live status, interval, Pause, and a tab's own actions), an optional low filter panel, then the
   live table in the RADIUS Clients visual language. Every shared rule is scoped to .radius-live-list; a tab adds only
   its column widths under its own table class. Tokens only, each with an emitted fallback. The breakpoints follow the
   body's own width. */
.radius-live-list__body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
    margin-top: 0.75rem;
    container-type: inline-size;
    container-name: radius-live-list;
}

.radius-live-list__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-bottom: 0.5rem;
}

.radius-live-list__live-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

/* One control height for the whole row: the buttons, the search and the interval select. */
.radius-live-list .radius-live-list__field.mud-input-control {
    margin: 0;
}

.radius-live-list .radius-live-list__field .mud-input.mud-input-outlined {
    min-height: 2.75rem;
    font-size: 0.9375rem;
}

.radius-live-list .radius-live-list__field .mud-input-outlined-border {
    border-color: var(--air-border);
    border-radius: 6px;
}

.radius-live-list .radius-live-list__field .mud-input-adornment-start .mud-icon-root {
    color: var(--air-text-muted);
}

.radius-live-list .radius-live-list__search {
    flex: 1 1 14rem;
    max-width: 34rem;
    min-width: 14rem;
}

.radius-live-list .radius-live-list__interval {
    width: 7.5rem;
    flex: 0 0 auto;
}

.radius-live-list .radius-live-list__button {
    height: 2.75rem;
    padding: 0 1rem;
    border-color: var(--air-border);
    border-radius: 6px;
    font-size: 0.9375rem;
    font-weight: var(--air-font-weight-semibold, 600);
    color: var(--air-text);
    white-space: nowrap;
}

.radius-live-list .radius-live-list__filter-toggle {
    text-transform: none;
    letter-spacing: 0;
    min-width: 8rem;
    justify-content: flex-start;
}

.radius-live-list .radius-live-list__button:focus-visible,
.radius-live-list__table tbody tr:focus-visible {
    outline: 2px solid var(--air-accent);
    outline-offset: -2px;
}

/* The single live status: a quiet dot and a word, never a second chip. */
.radius-live-list__live {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: var(--air-font-weight-semibold, 600);
    white-space: nowrap;
    color: var(--air-text);
}

.radius-live-list__live-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--air-text-muted);
}

.radius-live-list__live.is-live .radius-live-list__live-dot {
    background: var(--air-chart-2, var(--air-accent));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--air-chart-2, var(--air-accent)) 22%, transparent);
}

.radius-live-list__live.is-paused {
    color: var(--air-text-muted);
}

/* The filter panel: one low row of compact controls. */
.radius-live-list__filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(9rem, 1fr)) auto;
    align-items: start;
    gap: 0.75rem 1rem;
    padding: 0.875rem 1rem;
}

.radius-live-list__filters .mud-button-root,
.radius-live-list__notice .mud-button-root,
.radius-live-list__empty .mud-button-root,
.radius-live-list__foot .mud-button-root {
    letter-spacing: 0;
    text-transform: none;
}

.radius-live-list__clear-filters {
    align-self: center;
}

.radius-live-list__panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0.25rem 1.25rem;
}

.radius-live-list__notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.5rem 0 0.25rem;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--air-text);
    background: color-mix(in srgb, var(--air-chart-7, var(--air-accent)) 12%, transparent);
    box-shadow: inset 3px 0 0 var(--air-chart-7, var(--air-accent));
}

.radius-live-list__scroll {
    min-width: 0;
    overflow-x: auto;
}

.radius-live-list__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.9375rem;
    color: var(--air-text);
}

.radius-live-list__table th {
    padding: 0.875rem 1rem 0.875rem 0.375rem;
    font-size: 0.9375rem;
    font-weight: var(--air-font-weight-semibold, 600);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--air-text);
}

/* The rule under the sticky header. The row dividers are each cell's border-top, and with collapsed
   borders none of them paints on a sticky th — so once the first row scrolled under the header, the
   header sat bare on top of a half-clipped row. An inset shadow travels with the sticky cell. */
.radius-live-list__table thead th {
    box-shadow: inset 0 -1px 0 var(--air-border);
}

.radius-auth-logs__table th:nth-child(1) { width: 13%; }
.radius-auth-logs__table th:nth-child(2) { width: max(13%, 8rem); }
.radius-auth-logs__table th:nth-child(3) { width: 20%; }
.radius-auth-logs__table th:nth-child(4) { width: 16%; }
.radius-auth-logs__table th:nth-child(5) { width: 18.5%; }

.radius-live-list__table td {
    padding: 0.6875rem 1rem 0.6875rem 0.375rem;
    border-top: 1px solid var(--air-border);
    vertical-align: middle;
    overflow: hidden;
}

.radius-live-list__table tbody tr {
    cursor: pointer;
}

.radius-live-list__table tbody tr:hover td {
    background: var(--air-hover, color-mix(in srgb, var(--air-text) 4%, transparent));
}

/* The row whose detail is open: a tint and an accent edge, as on RADIUS Clients. */
.radius-live-list__table tbody tr.is-selected td {
    background: color-mix(in srgb, var(--air-accent) 10%, transparent);
}

.radius-live-list__table tbody tr.is-selected td:first-child {
    box-shadow: inset 3px 0 0 var(--air-accent);
}

.radius-live-list__table tbody tr.radius-live-list__state-row {
    cursor: default;
}

.radius-live-list__table tbody tr.radius-live-list__state-row:hover td {
    background: transparent;
}

/* Two lines per cell: the primary value, then the secondary one in the muted tone. Long values truncate with the
   full text in the title. */
.radius-live-list__primary,
.radius-live-list__secondary {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.radius-live-list__primary {
    line-height: 1.45;
}

.radius-live-list__secondary {
    margin-top: 0.125rem;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--air-text-muted);
}

.radius-live-list__nums {
    font-variant-numeric: tabular-nums;
}

.radius-live-list__table .radius-live-list__address {
    color: var(--air-accent);
}

.radius-live-list__table .radius-live-list__muted,
.radius-live-list__muted {
    color: var(--air-text-muted);
}

/* The status badge: the RADIUS Clients badge, in the live lists' scope. */
.radius-live-list__badge {
    --radius-tone: var(--air-text-muted);
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 1.625rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.8125rem;
    font-size: 0.8125rem;
    font-weight: var(--air-font-weight-semibold, 600);
    line-height: 1.15;
    color: color-mix(in srgb, var(--radius-tone) 55%, white);
    background: color-mix(in srgb, var(--radius-tone) 22%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--radius-tone) 45%, transparent);
}

.radius-live-list__badge--success { --radius-tone: var(--air-chart-2, var(--air-accent)); }
.radius-live-list__badge--error { --radius-tone: var(--air-chart-5, var(--air-accent)); }
.radius-live-list__badge--warning { --radius-tone: var(--air-chart-7, var(--air-accent)); }
.radius-live-list__badge--info { --radius-tone: var(--air-accent); }
.radius-live-list__badge--neutral { --radius-tone: var(--air-chart-9, var(--air-text-muted)); }

.radius-live-list__state {
    margin: 0;
    padding: 1.25rem 0;
    font-size: 0.9375rem;
    color: var(--air-text-muted);
}

.radius-live-list__failure {
    padding: 0.75rem 0 0.5rem;
}

.radius-live-list__failure .mud-alert {
    border: 0;
    background: color-mix(in srgb, var(--mud-palette-error, var(--air-chart-5)) 8%, transparent);
}

.radius-live-list__empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    padding: 1.25rem 0 0.75rem;
}

.radius-live-list__empty-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: var(--air-font-weight-semibold, 600);
    color: var(--air-text);
}

.radius-live-list__empty-body {
    margin: 0;
    font-size: 0.875rem;
    color: var(--air-text-muted);
}

.radius-live-list__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2rem;
    margin-top: -0.5rem;
}

.radius-live-list__range {
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    color: var(--air-text-muted);
}

.radius-live-list__pager {
    display: flex;
    gap: 0.25rem;
}

/* Narrower bodies: the search takes its own line under the filter button and the live controls, rather than
   squeezing the controls or clipping their labels. */
@container radius-live-list (max-width: 820px) {
    .radius-live-list .radius-live-list__search {
        order: 3;
        flex: 1 1 100%;
    }

    .radius-live-list__filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* The "N new events" action in the footer: new attempts arrived above the row being read. It sits beside the count,
   never over the table, and uses the control row's sentence case. */
.radius-live-list .radius-live-list__new-events {
    margin-left: auto;
    height: 1.875rem;
    padding: 0 0.75rem;
    border-color: var(--air-accent);
    border-radius: 999px;
    color: var(--air-accent);
    font-weight: var(--air-font-weight-semibold, 600);
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

.radius-live-list .radius-live-list__new-events:focus-visible {
    outline: 2px solid var(--air-accent);
    outline-offset: 2px;
}

/* Narrow desktop bodies: six two-line columns do not fit, and truncating the time or the result would hide the
   row's meaning. The table keeps a readable minimum and scrolls inside its own card; the page never scrolls sideways. */
@container radius-live-list (max-width: 860px) {
    .radius-auth-logs__table,
    .radius-sessions__table {
        min-width: 52rem;
    }
}

/* A live list's detail drawer is a viewport overlay, and it is positioned like one.
   MudBlazor gives a drawer that is not inside a MudDrawerContainer `position: absolute`
   (.mud-drawer:not(.mud-drawer-fixed)), and a closed end-anchored drawer sits at right: -34rem — in
   the DOCUMENT's scrollable overflow, which is what gave Authentication Logs a 544px horizontal
   scrollbar even though everything visible fitted. Fixed puts the off-canvas panel in the viewport,
   where an overlay belongs, and it still covers the same area when open. Scoped to the live lists'
   drawers; other pages' drawers are untouched. */
.radius-live-list__drawer.mud-drawer {
    position: fixed;
}

/* RADIUS-001 Sessions v1.0: the Sessions columns, paired two to a cell as the image pairs them. The state column is
   sized to the longest registered state badge (reconciliation-required); the five paired columns share the rest
   equally, as they do in the image. */
.radius-sessions__table th:nth-child(1) { width: 12.5rem; }

/* IDENTITET-001 Certifikat v1.0 (TRUSTED, PROFILES) — the title and tab row are the shared .nms-module-nav above, each
   tab's list the shared .nms-list family. What follows is only the page's own layout: the toolbar (refresh left; the CRL
   status and the primary action right), the column widths, the thumbprint face, the row's overflow menu and the dialogs'
   file row. Tokens only, each with an emitted fallback. */
.identity-certificates {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.identity-certificates__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.identity-certificates__end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-left: auto;
}

.nms-list .identity-certificates__primary {
    text-transform: uppercase;
}

/* SWA-9's statement, compact: a quiet warning outline at the toolbar's control height, never a paragraph. */
.identity-certificates__crl {
    --identity-crl-tone: var(--air-chart-7, var(--air-accent));
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.75rem;
    padding: 0 0.875rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: var(--air-font-weight-semibold, 600);
    white-space: nowrap;
    color: color-mix(in srgb, var(--identity-crl-tone) 80%, white);
    background: color-mix(in srgb, var(--identity-crl-tone) 8%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--identity-crl-tone) 70%, transparent);
}

.identity-certificates__crl:focus-visible {
    outline: 2px solid var(--air-accent);
    outline-offset: 2px;
}

/* Rows open nothing; their only control is the overflow menu. */
.identity-certificates__table tbody tr {
    cursor: default;
}

.identity-certificates__table th {
    overflow: hidden;
    text-overflow: ellipsis;
}

.identity-certificates__table--trusted th:nth-child(1) { width: 16rem; }
.identity-certificates__table--trusted th:nth-child(3) { width: 10rem; }
.identity-certificates__table--trusted th:nth-child(4) { width: 3.5rem; }

.identity-certificates__table--profiles th:nth-child(4) { width: 10rem; }
.identity-certificates__table--profiles th:nth-child(5) { width: 3.5rem; }

/* The whole thumbprint is the cell's text; a narrow column only ellipsizes it, and the title carries it in full. */
.identity-certificates__thumbprint {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--air-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 0.875rem;
    color: var(--air-text);
    background: none;
    padding: 0;
}

.nms-list__table td.identity-certificates__actions {
    overflow: visible;
    padding-right: 0.25rem;
    text-align: right;
}

.identity-certificates__file-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.identity-certificates__file-label {
    flex-basis: 100%;
    font-size: 0.8125rem;
    color: var(--air-text-muted);
}

.identity-certificates__file {
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    color: var(--air-text-muted);
}

@container nms-list (max-width: 520px) {
    .identity-certificates__table--trusted th:nth-child(1) { width: 9rem; }
}

/* IDENTITET-001 Groups detail v1.0 (ÅTKOMST, ENHETER, ADDorEDIT) — one group's workspace. The tab row is the shared
   .nms-module-nav, the lists the shared .nms-list family; what follows is only the page's own layout: the header, the
   Åtkomst strip and two columns, the form rows, the stepper, the method cards, the member journey and the summary.
   Tokens only, each with an emitted fallback. Breakpoints follow the page's own width (a container). */
.identity-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    container-type: inline-size;
    container-name: identity-group;
}

.identity-group__crumbs .mud-breadcrumb-item a,
.identity-group__crumbs .mud-breadcrumb-item {
    font-size: 0.875rem;
}

.identity-group__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.identity-group__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.875rem;
    min-width: 0;
}

.identity-group__title {
    margin: 0;
    font-size: 1.625rem;
    font-weight: var(--air-font-weight-semibold, 600);
    line-height: 1.25;
    color: var(--air-text);
    overflow-wrap: anywhere;
}

.identity-group__title[tabindex="-1"]:focus,
.identity-group__title[tabindex="-1"]:focus-visible {
    outline: none;
}

.identity-group__meta {
    font-size: 0.9375rem;
    color: var(--air-text-muted);
}

.nms-list .identity-group__delete {
    text-transform: uppercase;
}

/* Icon and label on one line inside the shared tab. */
.identity-group__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.identity-group__tabs .nms-module-nav__tab {
    padding-inline: 1.125rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.identity-group__tabs .nms-module-nav__tab::after {
    padding-left: 1.75rem;
    letter-spacing: 0.02em;
}

/* ── Åtkomst ─────────────────────────────────────────────────────────────────────────────── */
.identity-group__access {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.identity-group__strip {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    padding: 1.125rem 1.5rem;
}

.identity-group__cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    min-width: 0;
    padding: 0 1.25rem;
    border-left: 1px solid var(--air-border);
}

.identity-group__cell--method {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    padding-left: 0;
    border-left: 0;
}

.identity-group__cell-icon.mud-icon-root {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--air-text);
}

.identity-group__cell-label {
    font-size: 0.8125rem;
    color: var(--air-text-muted);
}

.identity-group__cell-value {
    display: block;
    font-size: 1.0625rem;
    font-weight: var(--air-font-weight-semibold, 600);
    color: var(--air-text);
    /* break-word, not anywhere: "anywhere" lets the flex cell shrink to one character's min-content, which split
       "Gästport|al" at 390 px. A long SSID still breaks when it cannot fit its line. */
    overflow-wrap: break-word;
}

.identity-group__columns {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
    gap: 1rem;
    align-items: start;
}

.identity-group__panel {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding: 1.25rem 1.5rem;
}

.identity-group__panel-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: var(--air-font-weight-semibold, 600);
    color: var(--air-text);
}

.identity-group__panel-lead {
    margin: 0 0 0.5rem;
    font-size: 0.9375rem;
    color: var(--air-text-muted);
}

.identity-group__section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--air-border);
}

.identity-group__caption {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--air-text-muted);
}

.identity-group__caption a,
.identity-group-preview a {
    color: var(--air-accent);
}

/* ── Form rows: label and hint on the left, the control on the right, a quiet rule between rows ── */
.identity-group-form {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.identity-group-form--settings {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--air-border);
}

.identity-group-form__heading {
    margin: 0 0 0.25rem;
    font-size: 1.0625rem;
    font-weight: var(--air-font-weight-semibold, 600);
    color: var(--air-text);
}

.identity-group-form__row {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(0, 1.4fr);
    align-items: center;
    gap: 0.5rem 1.5rem;
    min-width: 0;
    margin: 0;
    padding: 0.875rem 0;
    border: 0;
    border-bottom: 1px solid var(--air-border);
}

.identity-group-form__row:last-child {
    border-bottom: 0;
}

.identity-group-form__fieldset legend {
    float: left;
    padding: 0;
}

.identity-group-form__label {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    font-size: 0.9375rem;
    font-weight: var(--air-font-weight-semibold, 600);
    color: var(--air-text);
}

.identity-group-form__hint {
    font-size: 0.8125rem;
    font-weight: var(--air-font-weight-regular, 400);
    color: var(--air-text-muted);
}

.identity-group-form__value {
    font-size: 0.9375rem;
    color: var(--air-text);
    overflow-wrap: anywhere;
}

.identity-group-form__value--warning {
    color: color-mix(in srgb, var(--air-chart-7, var(--air-accent)) 80%, white);
}

.identity-group-form__control {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.identity-group-form__control > .mud-input-control {
    flex: 1 1 auto;
}

.identity-group-form__choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
}

/* ── GST-001-A4 GSTA4-12 item 3: the terms editor stacks label over a full-width text area and its counter ── */
.identity-group-form__row--stacked {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
}

.identity-group-form__control--stacked {
    flex-direction: column;
    align-items: stretch;
    gap: 0.375rem;
}

.identity-group-form__subheading {
    margin: 1rem 0 0.25rem;
    font-size: 0.9375rem;
    font-weight: var(--air-font-weight-semibold, 600);
    color: var(--air-text);
}

.identity-group-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 0;
}

.identity-group-form__error {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: color-mix(in srgb, var(--air-chart-5, var(--air-accent)) 85%, white);
}

/* ── Member journey and summary ──────────────────────────────────────────────────────────── */
.identity-group-preview__heading {
    margin: 0;
    font-size: 1.125rem;
    font-weight: var(--air-font-weight-semibold, 600);
    color: var(--air-text);
}

.identity-group-preview__lead,
.identity-group-preview__empty {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    color: var(--air-text-muted);
}

.identity-group-preview__subheading {
    margin: 1rem 0 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--air-border);
    font-size: 0.9375rem;
    font-weight: var(--air-font-weight-semibold, 600);
    color: var(--air-text);
}

.identity-group-journey {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
}

.identity-group-journey__icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 8px;
    color: var(--air-text);
    background: color-mix(in srgb, var(--air-accent) 10%, transparent);
}

.identity-group-journey__steps {
    margin: 0;
    padding: 0;
    list-style: none;
}

.identity-group-journey__step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0 0 0.875rem 1.5rem;
}

/* The timeline: a dot per step and a hairline joining them. */
.identity-group-journey__step::before {
    content: "";
    position: absolute;
    top: 0.3rem;
    left: 0;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--air-accent) 55%, var(--air-text-muted));
}

.identity-group-journey__step:first-child::before {
    background: var(--air-accent);
}

.identity-group-journey__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 1.1rem;
    bottom: 0.1rem;
    left: 0.28rem;
    width: 1px;
    background: var(--air-border);
}

.identity-group-journey__title {
    font-size: 0.9375rem;
    font-weight: var(--air-font-weight-semibold, 600);
    color: var(--air-text);
}

.identity-group-journey__body {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--air-text-muted);
}

.identity-group-summary {
    display: grid;
    grid-template-columns: minmax(7rem, auto) minmax(0, 1fr);
    gap: 0.375rem 1.25rem;
    margin: 0;
    font-size: 0.875rem;
}

.identity-group-summary dt {
    color: var(--air-text-muted);
}

.identity-group-summary dd {
    margin: 0;
    color: var(--air-text);
    /* break-word, not anywhere: a URL then breaks at its own opportunities ("https://" | "www.example.se/") and never
       strands its trailing "/" on a line of its own; an unbreakable value that cannot fit still breaks. */
    overflow-wrap: break-word;
}

.identity-group-summary--review {
    max-width: 44rem;
    font-size: 0.9375rem;
}

/* ── Actions sit where the task is done: the page's or the stepper's lower right edge ─────── */
.identity-group-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}

.nms-list .identity-group-actions .mud-button-root {
    min-width: 8.5rem;
    min-height: 2.75rem;
    text-transform: none;
    font-size: 0.9375rem;
}

/* ── Stepper ─────────────────────────────────────────────────────────────────────────────── */
.identity-group-stepper {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
    padding: 1.25rem 1.5rem 1.5rem;
}

.identity-group-stepper__steps {
    display: flex;
    margin: 0;
    padding: 0 1rem;
    list-style: none;
}

.identity-group-stepper__step {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.identity-group-stepper__step:last-child {
    flex: 0 1 auto;
}

/* The connector runs from each step's label to the next step's marker. */
.identity-group-stepper__step:not(:last-child)::after {
    content: "";
    flex: 1 1 2rem;
    height: 2px;
    margin: 0 1rem;
    background: var(--air-border);
}

.identity-group-stepper__step.is-done:not(:last-child)::after {
    background: var(--air-accent);
}

.identity-group-stepper__marker {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1.5px solid var(--air-border-strong, var(--air-border));
    border-radius: 50%;
    font: inherit;
    font-size: 1rem;
    font-weight: var(--air-font-weight-semibold, 600);
    color: var(--air-text);
    background: transparent;
}

.identity-group-stepper__step.is-current .identity-group-stepper__marker {
    border-color: var(--air-accent);
    color: #fff;
    background: var(--air-accent);
}

.identity-group-stepper__step.is-done .identity-group-stepper__marker {
    border-color: var(--air-chart-2, var(--air-accent));
    color: #fff;
    background: var(--air-chart-2, var(--air-accent));
    cursor: pointer;
}

.identity-group-stepper__marker:focus-visible {
    outline: 2px solid var(--air-accent);
    outline-offset: 3px;
}

.identity-group-stepper__label {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.identity-group-stepper__title {
    font-size: 0.9375rem;
    font-weight: var(--air-font-weight-semibold, 600);
    color: var(--air-text);
    white-space: nowrap;
}

.identity-group-stepper__subtitle {
    overflow: hidden;
    font-size: 0.8125rem;
    color: var(--air-text-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.identity-group-stepper__body {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
    gap: 1rem;
    align-items: start;
}

.identity-group-stepper__main,
.identity-group-stepper__aside {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.identity-group-stepper__panel,
.identity-group-stepper .identity-group-form--settings,
.identity-group-stepper .identity-group-preview {
    min-width: 0;
    margin: 0;
    padding: 1.25rem 1.25rem 1rem;
    border: 1px solid var(--air-border);
    border-radius: 8px;
}

.identity-group-stepper__heading {
    margin: 0;
    font-size: 1.125rem;
    font-weight: var(--air-font-weight-semibold, 600);
    color: var(--air-text);
}

.identity-group-stepper__heading:focus {
    outline: none;
}

.identity-group-stepper__lead {
    margin: 0.25rem 0 1rem;
    font-size: 0.875rem;
    color: var(--air-text-muted);
}

/* ── Method cards ────────────────────────────────────────────────────────────────────────── */
.identity-group-methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.identity-group-methods__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
    padding: 1rem 1rem 1.125rem;
    border: 1px solid var(--air-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.identity-group-methods__card:hover {
    border-color: color-mix(in srgb, var(--air-accent) 50%, var(--air-border));
}

.identity-group-methods__card.is-selected {
    border-color: var(--air-accent);
    background: color-mix(in srgb, var(--air-accent) 12%, transparent);
    box-shadow: inset 0 0 0 1px var(--air-accent);
}

.identity-group-methods__card.is-disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.identity-group-methods__card:has(.identity-group-methods__radio:focus-visible) {
    outline: 2px solid var(--air-accent);
    outline-offset: 2px;
}

.identity-group-methods__radio {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    accent-color: var(--air-accent);
}

.identity-group-methods__icon.mud-icon-root {
    width: 2rem;
    height: 2rem;
    color: var(--air-text);
}

.identity-group-methods__name {
    margin-top: 0.5rem;
    font-size: 1rem;
    font-weight: var(--air-font-weight-semibold, 600);
    color: var(--air-text);
}

.identity-group-methods__summary,
.identity-group-methods__reason {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--air-text-muted);
}

.identity-group-methods__reason {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

/* ── Medlemmar, Enheter, Policyer ────────────────────────────────────────────────────────── */
.identity-group__workspace {
    gap: 0.75rem;
    padding-top: 1.125rem;
}

.identity-group__workspace-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.identity-group__view {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.identity-group__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem 1rem;
}

.identity-group__toolbar > .mud-input-control,
.identity-group__toolbar > .mud-autocomplete {
    flex: 1 1 18rem;
    max-width: 28rem;
}

.identity-group__segments {
    display: inline-flex;
    flex-wrap: wrap;
    padding: 0.1875rem;
    border: 1px solid var(--air-border);
    border-radius: 8px;
}

.identity-group__segment {
    padding: 0.375rem 0.875rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: var(--air-font-weight-medium, 500);
    color: var(--air-text-muted);
    text-decoration: none;
    white-space: nowrap;
}

.identity-group__segment:hover {
    color: var(--air-text);
}

.identity-group__segment.is-active {
    color: var(--air-text);
    background: color-mix(in srgb, var(--air-accent) 18%, transparent);
}

.identity-group__segment:focus-visible {
    outline: 2px solid var(--air-accent);
    outline-offset: 1px;
}

.nms-list__table td.identity-group__row-actions {
    overflow: visible;
    padding-right: 0.25rem;
    text-align: right;
}

.identity-group__table th:last-child {
    width: 6.5rem;
}

.identity-group__table--members th:nth-child(2) { width: 7rem; }
.identity-group__table--members th:nth-child(3) { width: 8.5rem; }
.identity-group__table--devices th:nth-child(3) { width: 12rem; }
.identity-group__table--devices th:nth-child(4) { width: 8.5rem; }

.identity-group__table td:nth-child(4) .nms-list__secondary {
    white-space: normal;
}

/* GST-001-A4 Direktåtkomst: seven columns. The row action "Avsluta åtkomst" gets a column wide enough to read in full,
   and below 820 px of page width the table keeps a readable minimum and scrolls inside its own .nms-list__scroll
   (the live-list precedent above) instead of squeezing seven headers into each other; the page never scrolls sideways. */
.identity-group__table--direct th:nth-child(2) { width: 11rem; }
.identity-group__table--direct th:nth-child(3) { width: 6.5rem; }
.identity-group__table--direct th:last-child { width: 10.5rem; }

@container identity-group (max-width: 820px) {
    .identity-group__table--direct {
        min-width: 56rem;
    }

    /* The terms history (Version, Publicerad, Av, Visa) scrolls the same way rather than overlapping its headers. */
    .identity-group__table--terms {
        min-width: 30rem;
    }
}

/* A canonical subject reference (the terms publisher): one unbroken monospace line, cut with an ellipsis where the
   space ends, and the whole value in the title (tooltip). It is never split mid-string. Showing a name instead is an
   open authority question, not a layout one. */
.identity-group__subject {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* The policy radio group (Så får gäster åtkomst): one option per line, and a hint on its own line under its option,
   indented to the option's text. The selector outweighs MudBlazor's own row rule (.mud-input-control.mud-input-control-boolean-input
   .mud-radio-group), which it must, because that rule sets flex-direction: row. */
.mud-input-control.identity-group-policy > .mud-input-control-input-container > .mud-radio-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.identity-group-policy__hint {
    display: block;
    margin: -0.25rem 0 0.25rem 2.25rem;
}

/* ── Narrower pages ──────────────────────────────────────────────────────────────────────── */
@container identity-group (max-width: 1180px) {
    .identity-group__columns,
    .identity-group-stepper__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .identity-group-methods {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container identity-group (max-width: 820px) {
    .identity-group__strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem 0;
    }

    .identity-group__cell:nth-child(3) {
        padding-left: 0;
        border-left: 0;
    }

    .identity-group-form__row {
        grid-template-columns: minmax(0, 1fr);
    }

    .identity-group-stepper__subtitle {
        display: none;
    }
}

@container identity-group (max-width: 560px) {
    /* A phone cannot show five tabs in one row, and the shared row hides its scrollbar, so the tabs past the edge had
       no affordance at all. Here the row wraps instead: every tab stays visible and reachable, the divider stays under
       the last line, and the active tab keeps its underline. */
    .identity-group__tabs .nms-module-nav__tabs {
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .identity-group__tabs .nms-module-nav__tab {
        padding-inline: 0.75rem;
    }

    .identity-group-methods {
        grid-template-columns: minmax(0, 1fr);
    }

    .identity-group-stepper__steps {
        padding: 0;
    }

    .identity-group-stepper__title {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .identity-group-methods__card {
        transition: none;
    }
}

/* The onboarding panel's "Lägg till enhet" keeps its own width inside the workspace column. */
.identity-group__workspace > #group-add-device {
    align-self: flex-start;
}

/* IDENTITET-001 Groups detail v1.0 — ADDorEDIT, "Autentisering och nätverk" (the updated EAP–PEAP reference): the method
   cards read in one line each (radio, icon, name over summary) in two columns, the method's settings and the shared
   Trådlösa nätverk section sit in panels of their own, and Avbryt leads the footer on the left. */
.identity-group-methods__card {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas:
        "radio icon name"
        "radio icon summary"
        ".     .    reason";
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.125rem;
    padding: 0.875rem 1.125rem;
}

.identity-group-methods__radio {
    position: static;
    grid-area: radio;
}

.identity-group-methods__icon.mud-icon-root {
    grid-area: icon;
    width: 1.75rem;
    height: 1.75rem;
}

.identity-group-methods__name {
    grid-area: name;
    margin-top: 0;
    align-self: end;
}

.identity-group-methods__summary {
    grid-area: summary;
    align-self: start;
}

.identity-group-methods__reason {
    grid-area: reason;
    margin-top: 0.375rem;
}

.identity-group-stepper .identity-group-form--settings .identity-group-form__heading {
    font-size: 1.125rem;
}

.identity-group-networks__lead {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    color: var(--air-text-muted);
}

.identity-group-networks .identity-group-form__label {
    margin-bottom: 0.375rem;
}

.identity-group-networks__picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.nms-list .identity-group-networks__picker .mud-button-root {
    min-height: 2.75rem;
    text-transform: none;
}

.identity-group-networks__list {
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
    border: 1px solid var(--air-border);
    border-radius: 8px;
}

.identity-group-networks__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 0.875rem;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
}

.identity-group-networks__row + .identity-group-networks__row {
    border-top: 1px solid var(--air-border);
}

.identity-group-networks__icon.mud-icon-root {
    color: var(--air-text);
}

.identity-group-networks__name {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* The SSID exactly as stored: spaces and case are the network's own. */
.identity-group-networks__ssid {
    overflow: hidden;
    font-size: 0.9375rem;
    color: var(--air-text);
    white-space: pre;
    text-overflow: ellipsis;
}

.identity-group-actions__cancel {
    margin-right: auto;
}

@container identity-group (max-width: 820px) {
    .identity-group-networks__row {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .identity-group-networks__row .nms-list__badge {
        grid-column: 2;
        justify-self: start;
    }
}

.identity-group-networks__rule {
    margin: 0;
    font-size: 0.8125rem;
}

/* ── Portalutseende — signed INF-ARCH-GST-001-A2 GSTA2-12 item 4, IDENTITET-001 GROUPS_Detail v1.1 ──────────────────────
   Two panels: the form (images, backgrounds, themes, Spara/Avbryt) and the sandboxed preview. The theme dots show the
   product's closed preset colours (captive-appearance.css) — they are catalogue values, never a customer value. */

.identity-appearance {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.identity-appearance .visually-hidden,
.identity-appearance__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.identity-appearance__columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 1rem;
    align-items: start;
}

.identity-appearance__form,
.identity-appearance__preview {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
    padding: 1.25rem 1.5rem;
}

.identity-appearance__images {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.identity-appearance__image {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.identity-appearance__legend {
    padding: 0;
    font-size: 0.9375rem;
    font-weight: var(--air-font-weight-semibold, 600);
    color: var(--air-text);
}

.identity-appearance__thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--air-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--air-text) 4%, var(--air-bg));
}

/* A LOGO IS OFTEN A TRANSPARENT PNG IN DARK INK: its slot shows it on a light, neutral checkerboard in every admin theme, so
   both dark and light marks stay visible and transparency reads as transparency. */
.identity-appearance__thumb--logo {
    background-color: #f4f5f7;
    background-image: conic-gradient(#e6e8ec 25%, transparent 0 50%, #e6e8ec 0 75%, transparent 0);
    background-size: 16px 16px;
}

.identity-appearance__thumb-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.identity-appearance__thumb--logo .identity-appearance__thumb-image {
    width: auto;
    height: auto;
    max-width: 80%;
    max-height: 70%;
    object-fit: contain;
}

.identity-appearance__empty {
    padding: 0.75rem;
    font-size: 0.8125rem;
    text-align: center;
    color: var(--air-text-muted);
}

.identity-appearance .identity-appearance__remove.mud-icon-button {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    background: color-mix(in srgb, var(--air-bg) 82%, transparent);
    border: 1px solid var(--air-border);
}

.identity-appearance__hint {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--air-text-muted);
}

.identity-appearance__status,
.identity-appearance__saved {
    margin: 0;
    font-size: 0.875rem;
    color: var(--air-text-muted);
}

.identity-appearance__error {
    margin: 0;
    font-size: 0.875rem;
    color: var(--mud-palette-error, var(--air-text));
}

.identity-appearance__choices {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.identity-appearance__choices .identity-appearance__legend {
    margin-bottom: 0.625rem;
}

.identity-appearance__swatches {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.identity-appearance__swatch {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--air-border);
    border-radius: 8px;
    cursor: pointer;
    color: var(--air-text);
}

.identity-appearance__swatch:hover {
    background: var(--air-hover);
}

.identity-appearance__swatch.is-selected {
    border-color: var(--air-accent);
    box-shadow: inset 0 0 0 1px var(--air-accent);
}

.identity-appearance__swatch:focus-within {
    outline: 2px solid var(--air-accent);
    outline-offset: 2px;
}

.identity-appearance__choices[disabled] .identity-appearance__swatch {
    cursor: default;
}

.identity-appearance__swatch-label {
    font-size: 0.875rem;
}

.identity-appearance__check.mud-icon-root {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    color: var(--air-accent);
}

/* The background tiles: a neutral miniature of the page with a card on it. */
.identity-appearance__tile {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3.5rem;
    border-radius: 6px;
    background-color: color-mix(in srgb, var(--air-text) 6%, var(--air-bg));
}

.identity-appearance__tile--soft-gradient {
    background-image: linear-gradient(to bottom, color-mix(in srgb, var(--air-accent) 28%, var(--air-bg)), color-mix(in srgb, var(--air-text) 6%, var(--air-bg)));
}

.identity-appearance__tile--dots {
    background-image: radial-gradient(color-mix(in srgb, var(--air-text) 22%, transparent) 1.2px, transparent 1.3px);
    background-size: 8px 8px;
}

.identity-appearance__tile--lines {
    background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--air-text) 16%, transparent) 0 1px, transparent 1px 6px);
}

.identity-appearance__tile-card {
    width: 55%;
    height: 55%;
    border-radius: 4px;
    background: var(--air-bg);
    border: 1px solid var(--air-border);
}

.identity-appearance__dots {
    display: flex;
    align-items: center;
    height: 3.5rem;
    padding-inline: 0.25rem;
}

.identity-appearance__dot {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 2px solid var(--air-bg);
}

.identity-appearance__dot + .identity-appearance__dot {
    margin-left: -0.5rem;
}

.identity-appearance__dot--standard-light { background: #1f6feb; }
.identity-appearance__dot--standard-active { background: #164fa8; }
.identity-appearance__dot--standard-dark { background: #4493f8; }
.identity-appearance__dot--forest-light { background: #1d6f5a; }
.identity-appearance__dot--forest-active { background: #134a3c; }
.identity-appearance__dot--forest-dark { background: #4fc3a1; }
.identity-appearance__dot--plum-light { background: #7b3fa0; }
.identity-appearance__dot--plum-active { background: #582a72; }
.identity-appearance__dot--plum-dark { background: #c297e6; }
.identity-appearance__dot--graphite-light { background: #3e4c5e; }
.identity-appearance__dot--graphite-active { background: #283341; }
.identity-appearance__dot--graphite-dark { background: #aab6c5; }

.identity-appearance__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--air-border);
}

.identity-appearance__dirty {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--air-warning, var(--air-text));
}

.identity-appearance__dirty-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}

.identity-appearance .identity-appearance__reset {
    margin-left: auto;
}

.identity-appearance__preview-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.identity-appearance__toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.identity-appearance__toggle {
    display: inline-flex;
    border: 1px solid var(--air-border);
    border-radius: 8px;
    overflow: hidden;
}

.identity-appearance__toggle-button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font: inherit;
    font-size: 0.875rem;
    color: var(--air-text);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.identity-appearance__toggle-button + .identity-appearance__toggle-button {
    border-left: 1px solid var(--air-border);
}

.identity-appearance__toggle-button:hover {
    background: var(--air-hover);
}

.identity-appearance__toggle-button.is-pressed {
    background: var(--air-accent);
    color: white;
}

.identity-appearance__toggle-button:focus-visible {
    outline: 2px solid var(--air-accent);
    outline-offset: -2px;
}

.identity-appearance__frame {
    display: flex;
    justify-content: center;
    padding: 0.75rem;
    border: 1px solid var(--air-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--air-text) 6%, var(--air-bg));
}

.identity-appearance__iframe {
    display: block;
    width: 100%;
    /* 42 rem holds the whole code card at the panel's desktop width (measured: 640 px of content in a 576 px frame
       cropped the Anslut button); the mobile frame below is taller still. */
    height: 42rem;
    border: 0;
    border-radius: 6px;
    background: white;
}

.identity-appearance__frame--mobile .identity-appearance__iframe {
    width: 390px;
    max-width: 100%;
    height: 40rem;
}

.identity-appearance__clear-only {
    gap: 0.75rem;
}

.identity-appearance__clear-actions {
    display: flex;
    justify-content: flex-start;
}

@container identity-group (max-width: 1180px) {
    .identity-appearance__columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

@container identity-group (max-width: 560px) {
    .identity-appearance__swatches {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .identity-appearance__images {
        grid-template-columns: minmax(0, 1fr);
    }

    .identity-appearance__form,
    .identity-appearance__preview {
        padding: 1rem;
    }
}

/* TACACS+ module (InfinityNMS.Tacacs.UI). The tab row and lists reuse .nms-module-nav and .nms-list; the
   rules below cover what only TACACS+ draws: the secondary view row, the drawer head and facts, the one-time
   secret, KPI tiles, policy flow cards and ordered rule lists. Tokens only, each with a fallback. */
.tacacs-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.tacacs-subnav__link {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--air-border);
    border-radius: 999px;
    color: var(--air-text-muted, var(--air-text));
    font-size: 0.8125rem;
    text-decoration: none;
    white-space: nowrap;
}

.tacacs-subnav__link:hover,
.tacacs-subnav__link.is-active {
    color: var(--air-accent);
    border-color: var(--air-accent);
}

.tacacs-subnav__link:focus-visible {
    outline: 2px solid var(--air-accent);
    outline-offset: 1px;
}

.tacacs-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.tacacs-drawer__section {
    padding: 0.75rem;
    border: 1px solid var(--air-border);
    border-radius: 6px;
}

.tacacs-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.375rem 1rem;
    margin: 0;
    font-size: 0.875rem;
}

.tacacs-facts dt {
    color: var(--air-text-muted, var(--air-text));
}

.tacacs-facts dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.tacacs-secret__value {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px dashed var(--air-border-strong, var(--air-border));
    border-radius: 6px;
    background: var(--air-surface-2, transparent);
}

.tacacs-secret__value code {
    font-size: 1rem;
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
}

.tacacs-pager {
    display: flex;
    gap: 0.25rem;
}

.tacacs-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.75rem;
}

.tacacs-kpi {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.875rem 1rem;
}

.tacacs-kpi__label {
    color: var(--air-text-muted, var(--air-text));
    font-size: 0.8125rem;
}

.tacacs-kpi__value {
    font-size: 1.5rem;
    font-weight: var(--air-font-weight-semibold, 600);
    color: var(--air-text);
}

.tacacs-kpi--warning .tacacs-kpi__value {
    color: var(--air-warning, var(--air-accent));
}

.tacacs-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    gap: 0.75rem;
}

.tacacs-panel {
    padding: 1rem;
    min-width: 0;
}

.tacacs-member-list,
.tacacs-plain-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tacacs-member-list li,
.tacacs-plain-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--air-border);
}

.tacacs-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

.tacacs-flow__step {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--air-border);
    border-radius: 6px;
    min-width: 0;
}

.tacacs-flow__label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--air-text-muted, var(--air-text));
    font-size: 0.6875rem;
    font-weight: var(--air-font-weight-semibold, 600);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@media (max-width: 960px) {
    .tacacs-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.tacacs-rule--deny td:first-child,
.tacacs-effect--deny {
    color: var(--air-danger, #d9534f);
}

.tacacs-effect--permit {
    color: var(--air-success, #2e9d5b);
}

.tacacs-warning-list {
    margin: 0.25rem 0 0;
    padding-left: 1.25rem;
}

.tacacs-explanation {
    padding: 0.75rem;
    border-left: 3px solid var(--air-accent);
    background: var(--air-surface-2, transparent);
    font-size: 0.875rem;
}

.tacacs-link-button {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.tacacs-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

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

/* Profile and command set lists: the name column carries the Standard badge on a second line, AAA
   profiles add what they apply (authorization profile over command set). Fixed layout, so size the
   content columns and let the description take the rest. */
.tacacs-profile-table th {
    overflow: hidden;
    text-overflow: ellipsis;
}

.tacacs-profile-table th:nth-child(1) { width: 28%; }
.tacacs-profile-table--composed th:nth-child(2) { width: 22%; }
.tacacs-profile-table th.nms-list__num { width: 8.5rem; }
.tacacs-profile-table th.tacacs-col--changed { width: 10.5rem; }
.tacacs-profile-table th.tacacs-col--actions { width: 7.5rem; }

.tacacs-template,
.tacacs-cell-line {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tacacs-template {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
}

/* Clone summary: label and value in two columns; the "kopia av …" note on its own line. */
.tacacs-summary li {
    display: grid;
    grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr);
    align-items: start;
}

.tacacs-summary li > span:first-child {
    overflow-wrap: anywhere;
}

.tacacs-summary__note {
    display: block;
    font-size: 0.8125rem;
}

.nms-list__table tbody tr.tacacs-row--muted td {
    opacity: 0.6;
}

.nms-list__table tbody tr.tacacs-rule--flagged td:first-child {
    box-shadow: inset 3px 0 0 var(--air-warning, #d9a441);
}

.tacacs-draft-status {
    display: grid;
    gap: 0.75rem;
}

.tacacs-findings {
    display: grid;
    gap: 0.5rem;
}

.tacacs-document {
    max-height: 60vh;
    margin: 0;
    padding: 0.75rem;
    overflow: auto;
    border: 1px solid var(--air-border);
    border-radius: 6px;
    font-size: 0.8125rem;
    white-space: pre;
}

.tacacs-activity-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-start;
}

.tacacs-activity-filters .tacacs-filter,
.tacacs-activity-filters .mud-autocomplete {
    flex: 0 1 14rem;
    min-width: 11rem;
}

/* Åtkomstpolicyer: the default-deny note beside the Ny policy button, never a full-width button. */
.tacacs-policy-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.tacacs-policy-toolbar .tacacs-policy-toolbar__note {
    flex: 1 1 20rem;
}

/* Rank, priority, result and the move buttons as wide as their content; name, när and tillämpa share the rest and
   wrap instead of clipping (the scope — which clients — is the part that matters). */
.tacacs-policies__table th:nth-child(1) { width: 4.5rem; }
.tacacs-policies__table th:nth-child(5) { width: 7rem; }
.tacacs-policies__table th:nth-child(6) { width: 10rem; }
.tacacs-policies__table th:nth-child(7) { width: 5.5rem; }

.tacacs-policies__table td {
    white-space: normal;
    overflow-wrap: anywhere;
}

.tacacs-usage + .tacacs-usage {
    margin-top: 0.25rem;
}

/* Command rules: order, effect, level and actions as wide as their content; command, arguments and description
   wrap, so a long pattern and its Regex mark stay readable. */
.tacacs-rules__table th:nth-child(1) { width: 3.5rem; }
.tacacs-rules__table th:nth-child(2) { width: 6rem; }
.tacacs-rules__table th:nth-child(5) { width: 6rem; }
.tacacs-rules__table th:nth-child(7) { width: 9.5rem; }

.tacacs-rules__table td {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Activity lists: the timestamp keeps its full width; the other columns wrap rather than clip. */
.tacacs-activity-table th:nth-child(1) { width: 11.5rem; }

.tacacs-activity-table td {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Narrow screens: these tables scroll inside their panel instead of squeezing columns to nothing. */
.tacacs-policies__table { min-width: 52rem; }
.tacacs-rules__table { min-width: 48rem; }
.tacacs-activity-table { min-width: 56rem; }
.tacacs-profile-table { min-width: 48rem; }
.tacacs-profile-table--composed { min-width: 60rem; }