/* Driftsbildet for admin («/»).

   Globalt stilark, ikke scoped .razor.css: de fleste elementene her er MudBlazor-komponenter, og
   scope-attributtet følger ikke med inn i dem. */

.admin-dashboard {
    --dash-border: color-mix(in oklab, var(--mud-palette-text-secondary) 18%, transparent);
    --dash-divider: color-mix(in oklab, var(--mud-palette-text-secondary) 12%, transparent);

    /* Signalfargene blandes mot tekstfargen. Ren success/warning fra temaet er for lys til å
       leses mot hvitt i lys modus, og blandingen snur riktig vei av seg selv i mørk modus. */
    --dash-ok: color-mix(in oklab, var(--mud-palette-success) 70%, var(--mud-palette-text-primary));
    --dash-warn: color-mix(in oklab, var(--mud-palette-warning) 68%, var(--mud-palette-text-primary));
    --dash-bad: color-mix(in oklab, var(--mud-palette-error) 88%, var(--mud-palette-text-primary));

    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---------- Topplinje ---------- */

.dash-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.dash-header-kicker {
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mud-palette-text-secondary);
}

.dash-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ---------- Tellerstripe ---------- */

.dash-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    min-height: 94px;
    padding: 12px 14px;
    border: 1px solid var(--dash-border);
    border-radius: 16px;
    background: var(--mud-palette-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.dash-kpi:hover,
.dash-kpi:focus-visible {
    color: inherit;
    text-decoration: none;
    border-color: color-mix(in oklab, var(--mud-palette-primary) 45%, transparent);
    transform: translateY(-1px);
}

.dash-kpi-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.dash-kpi-value {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.15;
}

.dash-kpi-hint {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

.dash-kpi-ok .dash-kpi-value {
    color: var(--dash-ok);
}

.dash-kpi-warn .dash-kpi-value {
    color: var(--dash-warn);
}

.dash-kpi-warn {
    background: linear-gradient(180deg, color-mix(in oklab, var(--mud-palette-warning) 12%, var(--mud-palette-surface)) 0%, var(--mud-palette-surface) 100%);
}

.dash-kpi-bad .dash-kpi-value {
    color: var(--dash-bad);
}

.dash-kpi-bad {
    background: linear-gradient(180deg, color-mix(in oklab, var(--mud-palette-error) 12%, var(--mud-palette-surface)) 0%, var(--mud-palette-surface) 100%);
    border-color: color-mix(in oklab, var(--mud-palette-error) 32%, transparent);
}

/* ---------- Paneler ---------- */

/* Panelene strekker seg bevisst IKKE til høyden på naboen. Gjorde de det, fikk et kort panel en
   tom flate under innholdet før «Se alle»-lenka – plass som ser ut som noe mangler. */
.dash-panel {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--dash-border);
    border-radius: 18px;
    background: var(--mud-palette-surface);
    overflow: hidden;
}

.dash-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 10px;
}

.dash-panel-icon {
    flex: 0 0 auto;
}

.dash-panel-titles {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.dash-panel-title {
    font-weight: 600;
    line-height: 1.25;
}

.dash-panel-subtitle {
    line-height: 1.3;
    color: var(--mud-palette-text-secondary);
}

.dash-panel-badge {
    flex: 0 0 auto;
    margin-left: auto;
}

.dash-panel-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 16px 8px;
}

.dash-panel-alert {
    padding-left: 0;
    padding-right: 0;
}

.dash-panel-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding: 10px 16px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    text-decoration: none;
}

.dash-panel-link:hover {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

.dash-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 0;
    color: var(--mud-palette-text-secondary);
}

/* Høyrespalta: samme avstand som MudGrid Spacing="3". */
.dash-side-stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: stretch;
}

/* ---------- Tabeller i paneler ---------- */

/* Ingen kolonner skjules på telefon – lista scroller sidelengs i stedet, helt ut til kanten. */
.dash-table-scroll {
    margin: 0 -16px;
    padding: 0 16px;
    overflow-x: auto;
}

.dash-table {
    background: transparent;
}

.dash-table .mud-table-container {
    overflow: visible;
}

/* Uten en minstebredde krymper tabellen seg selv ned i stedet for å scrolle, og kolonnene blir
   uleselige på telefon. Med den beholder kolonnene bredden sin og lista scroller sidelengs. */
.dash-table .mud-table-root {
    min-width: 660px;
}

/* Bla-linja under ERS-lista. Ligger inne i panelkroppen, som har sideluftingen sin fra før. */
.dash-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    padding-top: 4px;
    font-size: 0.74rem;
}

/* En retur som ligger uhentet – verdt å se, ikke verdt å rope om. */
.dash-pending {
    color: var(--dash-warn);
    font-weight: 600;
}

.dash-table .mud-table-cell {
    padding: 6px 10px;
    font-size: 0.82rem;
}

.dash-table .mud-table-head .mud-table-cell {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* ---------- Lister i paneler ---------- */

.dash-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dash-list > li {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 9px 0;
    border-top: 1px solid var(--dash-divider);
}

.dash-list > li:first-child {
    border-top: none;
}

.dash-list-top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Metalinja har flere ledd («grunn · siste melding · batteri»). På en smal telefon får de bryte
   til neste linje i stedet for å presse seg ut av panelet. */
.dash-list-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 6px;
    min-width: 0;
    font-size: 0.74rem;
    color: var(--mud-palette-text-secondary);
}

.dash-list-actions {
    display: flex;
    gap: 4px;
    margin-top: 2px;
}

/* Statusmerket skyves ut til høyre kant av linja, uansett hvor lang teksten foran er. Det er
   teksten før som kortes ned når det blir trangt, ikke merket. */
.dash-push-right {
    flex: 0 0 auto;
    margin-left: auto;
}

/* En rolig markør foran en linje som ikke er i orden. Fargen er et signal, ikke et rop –
   teksten ved siden av sier hva som er galt, så prikken alene bærer ingen informasjon. */
.dash-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-text-secondary);
}

.dash-dot-bad {
    background: var(--mud-palette-error);
}

.dash-dot-warn {
    background: var(--mud-palette-warning);
}

.dash-dot-info {
    background: var(--mud-palette-info);
}

.dash-dot-ok {
    background: var(--mud-palette-success);
}

/* ---------- Tekst ---------- */

.dash-strong {
    font-weight: 600;
}

.dash-muted {
    color: var(--mud-palette-text-secondary);
}

.dash-mono {
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
}

.dash-nowrap {
    white-space: nowrap;
}

.dash-two-line {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.dash-clamp {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (max-width: 599px) {
    .dash-kpi {
        min-height: 78px;
        padding: 10px 12px;
    }

    .dash-kpi-value {
        font-size: 1.5rem;
    }

    .dash-panel-head,
    .dash-panel-body,
    .dash-panel-link {
        padding-left: 12px;
        padding-right: 12px;
    }

    .dash-table-scroll {
        margin: 0 -12px;
        padding: 0 12px;
    }
}