/* /Komponenter/Drift/DriftExportPanel.razor.rz.scp.css */
/* ================================================================
   DriftExportPanel – scoped CSS
   ================================================================ */

.dep-wrap[b-0ltdyt3w5z] {
    background: var(--bg-yta, #fff);
    border: 1px solid var(--kant, #dee2e6);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

/* ── Rubrik ──────────────────────────────────────────────────── */
.dep-huvud[b-0ltdyt3w5z] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
}

.dep-titel[b-0ltdyt3w5z] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-prim, #1a1a2e);
}

/* ── Filter-rad ──────────────────────────────────────────────── */
.dep-filter-rad[b-0ltdyt3w5z] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
}

.dep-falt[b-0ltdyt3w5z] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 140px;
}

.dep-falt--knapp[b-0ltdyt3w5z] {
    justify-content: flex-end;
}

.dep-etikett[b-0ltdyt3w5z] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-sek, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dep-input[b-0ltdyt3w5z] {
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--kant, #dee2e6);
    border-radius: 0.375rem;
    background: var(--bg-yta, #fff);
    color: var(--text-prim, #1a1a2e);
    font-size: 0.8rem;
    width: 100%;
    box-sizing: border-box;
}

.dep-input:focus[b-0ltdyt3w5z] {
    outline: none;
    border-color: var(--accent, #4f63d2);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #4f63d2) 20%, transparent);
}

/* ── Export-knapp ────────────────────────────────────────────── */
.dep-exportknapp[b-0ltdyt3w5z] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 1rem;
    background: var(--accent, #4f63d2);
    color: #fff;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.15s, opacity 0.15s;
}

.dep-exportknapp:not(:disabled):hover[b-0ltdyt3w5z] { filter: brightness(1.1); }
.dep-exportknapp:disabled[b-0ltdyt3w5z]             { opacity: 0.55; cursor: not-allowed; }

/* ── Felmeddelande ───────────────────────────────────────────── */
.dep-fel[b-0ltdyt3w5z] {
    margin-top: 0.6rem;
    background: var(--fel-bg, #f8d7da);
    color: var(--fel-text, #842029);
    border: 1px solid color-mix(in srgb, var(--fel-text, #842029) 30%, transparent);
    border-radius: 0.375rem;
    padding: 0.4rem 0.7rem;
    font-size: 0.8rem;
}

/* /Komponenter/Drift/DriftKontrollMini.razor.rz.scp.css */
/* ================================================================
   DriftKontrollMini – inline pill-knappar, scoped CSS
   Dark-mode safe: solid bakgrunder, alltid vit text inuti.
   ================================================================ */

.dkm-wrap[b-16gi4omraw] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.dkm-knapp-container[b-16gi4omraw] {
    display: flex;
    gap: 0.5rem;
}

/* ── Pill-knapp ──────────────────────────────────────────────── */
.dkm-knapp[b-16gi4omraw] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem 0.3rem 0.55rem;
    border-radius: 999px;
    border: none;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.15s, opacity 0.15s;
    line-height: 1.3;
    /* Alla barn ärver vit färg */
    color: #fff;
}

.dkm-knapp:disabled[b-16gi4omraw] {
    opacity: 0.55;
    cursor: not-allowed;
}

.dkm-knapp--on[b-16gi4omraw]  { background: #198754; }
.dkm-knapp--off[b-16gi4omraw] { background: #b02a37; }

.dkm-knapp--on:not(:disabled):hover[b-16gi4omraw]  { filter: brightness(1.1); }
.dkm-knapp--off:not(:disabled):hover[b-16gi4omraw] { filter: brightness(1.1); }

/* ── Statusdot (alltid vit inuti färgad knapp) ───────────────── */
.dkm-dot[b-16gi4omraw] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.85);
}

.dkm-dot--on[b-16gi4omraw] {
    animation: dkm-puls-b-16gi4omraw 2s ease-in-out infinite;
}

@keyframes dkm-puls-b-16gi4omraw {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}

/* ── Text ────────────────────────────────────────────────────── */
.dkm-label[b-16gi4omraw] {
    color: #fff;
}

.dkm-status[b-16gi4omraw] {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
    font-size: 0.72rem;
}

.dkm-spinner[b-16gi4omraw] {
    width: 0.65rem;
    height: 0.65rem;
    margin-left: 0.15rem;
    color: #fff;
}

/* ── Laddas ──────────────────────────────────────────────────── */
.dkm-laddas[b-16gi4omraw] {
    color: var(--text-sek, #6c757d);
    font-size: 0.75rem;
}

/* ── Felindikator ────────────────────────────────────────────── */
.dkm-fel[b-16gi4omraw] {
    font-size: 0.85rem;
    cursor: help;
    color: #f87171;  /* ljusare röd – läsbar på både ljust och mörkt */
}
/* /Layout/DatorLayout.razor.rz.scp.css */
/* DatorLayout – all CSS är flyttad till app.css (global)
   så att NavLink-element träffas korrekt av stilarna. */
/* /Layout/MobilLayout.razor.rz.scp.css */
/* ── Mobil-layout (iPhone-optimerad) ─────────────────────────────────── */
.mobil-sida[b-rtdoe5f21t] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--bg-grund);
}

/* ── Header ───────────────────────────────────────────────────────────── */
.mobil-header[b-rtdoe5f21t] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--sidebar-bg);
    color: white;
    display: flex;
    flex-direction: column;
    padding-top: env(safe-area-inset-top, 0px);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.07), 0 1px 6px rgba(0,0,0,0.25);
}


/* Den faktiska raden med ikon+text och temaknapp */
.mobil-header-rad[b-rtdoe5f21t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding: 0 1rem;
}

.mobil-rubrik[b-rtdoe5f21t],
.mobil-rubrik:hover[b-rtdoe5f21t],
.mobil-rubrik:focus[b-rtdoe5f21t],
.mobil-rubrik.active[b-rtdoe5f21t] {
    color: white !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
}

.tema-knapp--mobil[b-rtdoe5f21t] {
    border-color: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.85);
    font-size: 1rem;
    padding: 0.3rem 0.6rem;
    min-height: 34px;
    min-width: auto;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    line-height: 1;
}
.tema-knapp--mobil:hover[b-rtdoe5f21t] {
    background: rgba(255,255,255,0.18);
    color: white;
}

.mobil-innehall[b-rtdoe5f21t] {
    flex: 1;
    overflow-y: auto;
    padding: 1.125rem 1rem;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
    color: var(--text-prim);
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}
/* /Pages/Dator/DatorAnvandareLista.razor.rz.scp.css */
/* ── Skapaformulär ─────────────────────────────────────────────────── */
.skapa-kort[b-kdjh6wlwmx] {
    border-color: var(--accent);
    border-width: 1px;
}

/* ── Lösenordssektion ──────────────────────────────────────────────── */
.losenords-sektion[b-kdjh6wlwmx] {
    background: var(--bg-yta-2);
    border: 1px solid var(--kant);
    border-radius: .5rem;
    padding: 1rem 1.1rem;
}

.losenords-huvud[b-kdjh6wlwmx] {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--text-sek);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .75rem;
}

/* ── Standardlösenord-baner ────────────────────────────────────────── */
.std-losenord-baner[b-kdjh6wlwmx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-yta-2));
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--kant));
    border-radius: .375rem;
    padding: .6rem .85rem;
}

.std-losenord-info[b-kdjh6wlwmx] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.std-losenord-etikett[b-kdjh6wlwmx] {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-sek);
}

.std-losenord-varde[b-kdjh6wlwmx] {
    font-size: .95rem;
    color: var(--text-prim);
    font-weight: 600;
    letter-spacing: .04em;
    word-break: break-all;
}

.std-losenord-knappar[b-kdjh6wlwmx] {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-shrink: 0;
}

/* ── Klickbar tabellrad ─────────────────────────────────────────────── */
.anvandare-rad:hover td[b-kdjh6wlwmx] {
    background-color: var(--bg-yta-hov);
}
.anvandare-rad:active td[b-kdjh6wlwmx] {
    background-color: var(--bg-yta-2);
}

/* ── Ghost-knapp ───────────────────────────────────────────────────── */
.btn-ghost[b-kdjh6wlwmx] {
    --bs-btn-color: var(--text-sek);
    --bs-btn-hover-color: var(--text-prim);
    background: none;
    border: 1px solid transparent;
    color: var(--text-sek);
    border-radius: .25rem;
    padding: .2rem .45rem;
    font-size: .88rem;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.btn-ghost:hover[b-kdjh6wlwmx] {
    background: var(--bg-yta-hov);
    border-color: var(--kant);
    color: var(--text-prim) !important;
}
.btn-ghost svg[b-kdjh6wlwmx] { color: inherit !important; stroke: currentColor; }

/* ── Lösenordsstyrka ───────────────────────────────────────────────── */
.losenords-styrka[b-kdjh6wlwmx] {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.styrka-staplar[b-kdjh6wlwmx] {
    display: flex;
    gap: 4px;
    flex: 1;
    max-width: 120px;
}

.styrka-stapel[b-kdjh6wlwmx] {
    height: 5px;
    flex: 1;
    border-radius: 3px;
    background: var(--kant-stark);
    transition: background .2s;
}

.styrka-stapel.styrka-1[b-kdjh6wlwmx] { background: #dc3545; }
.styrka-stapel.styrka-2[b-kdjh6wlwmx] { background: #fd7e14; }
.styrka-stapel.styrka-3[b-kdjh6wlwmx] { background: #ffc107; }
.styrka-stapel.styrka-4[b-kdjh6wlwmx] { background: #28a745; }

.styrka-text[b-kdjh6wlwmx] {
    font-size: .75rem;
    color: var(--text-sek);
}

/* ── Användaravatar i lista ─────────────────────────────────────────── */
.anvandare-avatar[b-kdjh6wlwmx] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 20%, var(--bg-yta-2));
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .95rem;
    flex-shrink: 0;
    text-transform: uppercase;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--kant));
}
/* /Pages/Dator/DatorBasdata.razor.rz.scp.css */
.basdata-mall-editor[b-97xte18ir4] {
    background: var(--bg-yta-2);
    border-color: var(--kant) !important;
}

.basdata-mall-tabell[b-97xte18ir4] {
    color: var(--text-prim);
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-prim);
    --bs-table-border-color: var(--kant);
    --bs-table-striped-bg: var(--bg-yta-hov);
    --bs-table-striped-color: var(--text-prim);
}

.basdata-mall-tabell thead th[b-97xte18ir4] {
    color: var(--text-sek);
    border-bottom-color: var(--kant-stark);
}

/* /Pages/Dator/DatorDriftKontroll.razor.rz.scp.css */
/* ====================================================================
   DatorDriftKontroll.razor.css – Driftkontroll-sida, scoped CSS
   ==================================================================== */

.driftkontroll-wrap[b-nt1t927xke] {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

/* ── Rubrikrad ─────────────────────────────────────────────────── */
.driftkontroll-rubrikrad[b-nt1t927xke] {
    margin-bottom: 1.75rem;
}

.driftkontroll-titel[b-nt1t927xke] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.2rem;
    display: flex;
    align-items: center;
    color: var(--text-prim, #1a1a2e);
}

.driftkontroll-subtitle[b-nt1t927xke] {
    font-size: 0.875rem;
    color: var(--text-sek, #6c757d);
}

/* ── Laddas ────────────────────────────────────────────────────── */
.driftkontroll-laddas[b-nt1t927xke] {
    display: flex;
    align-items: center;
    padding: 2rem;
    color: var(--text-sek, #6c757d);
}

/* ── Felmeddelande ─────────────────────────────────────────────── */
.driftkontroll-fel[b-nt1t927xke] {
    background: var(--fel-bg, #f8d7da);
    color: var(--fel-text, #842029);
    border: 1px solid color-mix(in srgb, var(--fel-text, #842029) 30%, transparent);
    border-radius: 0.375rem;
    padding: 0.6rem 0.9rem;
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}

/* ── Kortrad ───────────────────────────────────────────────────── */
.driftkontroll-kortrad[b-nt1t927xke] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

/* ── Enskilt kort ──────────────────────────────────────────────── */
.driftkontroll-kort[b-nt1t927xke] {
    background: var(--bg-yta, #fff);
    border: 2px solid var(--kant, #dee2e6);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.driftkontroll-kort--kör[b-nt1t927xke] {
    border-color: #198754;
    box-shadow: 0 2px 12px rgba(25, 135, 84, .15);
}

.driftkontroll-kort--stoppad[b-nt1t927xke] {
    border-color: #dc3545;
    box-shadow: 0 2px 12px rgba(220, 53, 69, .1);
}

/* ── Kortets huvud ─────────────────────────────────────────────── */
.driftkontroll-kort-huvud[b-nt1t927xke] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.driftkontroll-funktionsnamn[b-nt1t927xke] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-prim, #1a1a2e);
}

/* ── Indikatorlampa ────────────────────────────────────────────── */
.driftkontroll-indikator[b-nt1t927xke] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.3s;
}

.driftkontroll-indikator--on[b-nt1t927xke] {
    background: #198754;
    box-shadow: 0 0 0 4px rgba(25, 135, 84, .25);
    animation: driftkontroll-puls-b-nt1t927xke 2s ease-in-out infinite;
}

.driftkontroll-indikator--off[b-nt1t927xke] {
    background: #dc3545;
    box-shadow: 0 0 0 4px rgba(220, 53, 69, .15);
}

@keyframes driftkontroll-puls-b-nt1t927xke {
    0%, 100% { box-shadow: 0 0 0 4px rgba(25, 135, 84, .25); }
    50%       { box-shadow: 0 0 0 8px rgba(25, 135, 84, .08); }
}

/* ── Statustext ────────────────────────────────────────────────── */
.driftkontroll-status-text[b-nt1t927xke] {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.driftkontroll-kort--kör    .driftkontroll-status-text[b-nt1t927xke] { color: #198754; }
.driftkontroll-kort--stoppad .driftkontroll-status-text[b-nt1t927xke] { color: #dc3545; }

/* ── Senast ändrad ─────────────────────────────────────────────── */
.driftkontroll-senast[b-nt1t927xke] {
    font-size: 0.8rem;
    color: var(--text-sek, #6c757d);
}

/* ── Knappar ───────────────────────────────────────────────────── */
.driftkontroll-knapp[b-nt1t927xke] {
    padding: 0.55rem 1.25rem;
    border-radius: 0.5rem;
    border: none;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: filter 0.15s, opacity 0.15s;
    align-self: flex-start;
}

.driftkontroll-knapp:disabled[b-nt1t927xke] {
    opacity: 0.55;
    cursor: not-allowed;
}

.driftkontroll-knapp--success[b-nt1t927xke] {
    background: #198754;
    color: #fff;
}

.driftkontroll-knapp--danger[b-nt1t927xke] {
    background: #dc3545;
    color: #fff;
}

.driftkontroll-knapp--success:not(:disabled):hover[b-nt1t927xke] { filter: brightness(1.1); }
.driftkontroll-knapp--danger:not(:disabled):hover[b-nt1t927xke]  { filter: brightness(1.1); }

/* /Pages/Dator/DatorDriftlogg.razor.rz.scp.css */
/* ====================================================================
   DatorDriftlogg.razor.css – Driftlogg-modul, scoped CSS
   Följer befintliga CSS-variabler i projektet.
   ==================================================================== */

.driftsida-wrap[b-po28uf44bd] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

/* ── Topprad ─────────────────────────────────────────────────────── */
.drift-topprad[b-po28uf44bd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.drift-topprad-vänster[b-po28uf44bd],
.drift-topprad-höger[b-po28uf44bd] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.drift-titel[b-po28uf44bd] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    color: var(--text-prim, #1a1a2e);
}

.drift-datum-visning[b-po28uf44bd] {
    font-size: 0.875rem;
    color: var(--text-sek, #6c757d);
    text-transform: capitalize;
}

.drift-datum-input[b-po28uf44bd] {
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--kant, #dee2e6);
    border-radius: 0.375rem;
    background: var(--bg-yta, #fff);
    color: var(--text-prim, #1a1a2e);
    font-size: 0.875rem;
}

.drift-dag-knapp[b-po28uf44bd] {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--kant, #dee2e6);
    border-radius: 0.375rem;
    background: var(--bg-yta, #fff);
    color: var(--text-prim, #1a1a2e);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: background 0.15s;
}
.drift-dag-knapp:hover:not(:disabled)[b-po28uf44bd] { background: var(--bg-yta-2, #f0f4ff); }
.drift-dag-knapp:disabled[b-po28uf44bd] { opacity: 0.4; cursor: not-allowed; }

/* ── Laddas ──────────────────────────────────────────────────────── */
.drift-laddas[b-po28uf44bd] {
    display: flex;
    align-items: center;
    padding: 2rem;
    color: var(--text-sek, #6c757d);
}

/* ── Sektion ─────────────────────────────────────────────────────── */
.drift-sektion[b-po28uf44bd] {
    background: var(--bg-yta, #fff);
    border: 1px solid var(--kant, #dee2e6);
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

.drift-sektion--formulär[b-po28uf44bd] {
    border-color: var(--accent, #4f63d2);
    border-left: 4px solid var(--accent, #4f63d2);
}

.drift-sektion-huvud[b-po28uf44bd] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.drift-sektion-titel[b-po28uf44bd] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-prim, #1a1a2e);
}

/* ── Knappar ─────────────────────────────────────────────────────── */
.drift-knapp[b-po28uf44bd] {
    padding: 0.4rem 1rem;
    border-radius: 0.375rem;
    border: none;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s, filter 0.15s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.drift-knapp:disabled[b-po28uf44bd] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: auto; /* keep cursor visible */
}
.drift-knapp--prim[b-po28uf44bd]  { background: var(--accent, #4f63d2); color: var(--accent-text, #fff); }
.drift-knapp--sek[b-po28uf44bd]   { background: var(--bg-yta-2, #f0f4ff); color: var(--text-prim, #1a1a2e); border: 1px solid var(--kant, #dee2e6); }
.drift-knapp--gron[b-po28uf44bd]  { background: #198754; color: #fff; }
.drift-knapp--prim:not(:disabled):hover[b-po28uf44bd]  { filter: brightness(1.1); }
.drift-knapp--sek:not(:disabled):hover[b-po28uf44bd]   { background: var(--kant, #dee2e6); }
.drift-knapp--gron:not(:disabled):hover[b-po28uf44bd]  { filter: brightness(1.1); }

/* ── Badge ───────────────────────────────────────────────────────── */
.drift-badge[b-po28uf44bd] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
}
.drift-badge--pagaende[b-po28uf44bd] { background: var(--status-pagaende-bg, #fff3cd); color: var(--status-pagaende-text, #856404); }
.drift-badge--ok[b-po28uf44bd]       { background: var(--status-avslutad-bg, #d1e7dd); color: var(--status-avslutad-text, #155724); }

/* ── Tabell ──────────────────────────────────────────────────────── */
.drift-tabell[b-po28uf44bd] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.drift-tabell th[b-po28uf44bd] {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid var(--kant, #dee2e6);
    color: var(--text-sek, #6c757d);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.drift-tabell td[b-po28uf44bd] {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--kant, #dee2e6);
    vertical-align: middle;
    color: var(--text-prim, #1a1a2e);
}
.drift-rad[b-po28uf44bd] { cursor: pointer; transition: background 0.1s; }
.drift-rad:hover[b-po28uf44bd] { background: var(--bg-yta-2, #f0f4ff); }
.drift-rad--aktiv[b-po28uf44bd] { background: var(--bg-yta-2, #f0f4ff); }
.drift-rad:last-child td[b-po28uf44bd] { border-bottom: none; }
.drift-detalj-rad td[b-po28uf44bd] { padding: 0; border-bottom: 1px solid var(--kant, #dee2e6); }
.drift-tid[b-po28uf44bd]          { white-space: nowrap; }
.drift-beskrivning-cell[b-po28uf44bd] { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drift-expand-pil[b-po28uf44bd]   { font-size: 0.7rem; color: var(--text-sek, #6c757d); }

/* ── Status ──────────────────────────────────────────────────────── */
.drift-status[b-po28uf44bd] {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}
.drift-status--pagaende[b-po28uf44bd] { background: var(--status-pagaende-bg, #fff3cd); color: var(--status-pagaende-text, #856404); }
.drift-status--lost[b-po28uf44bd]     { background: var(--status-avslutad-bg, #d1e7dd); color: var(--status-avslutad-text, #155724); }

/* ── Prioritet ───────────────────────────────────────────────────── */
.drift-prioritet[b-po28uf44bd] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 600;
}
.drift-prioritet--låg[b-po28uf44bd]     { background: var(--bg-yta-2, #e9ecef); color: var(--text-sek, #495057); }
.drift-prioritet--normal[b-po28uf44bd]  { background: color-mix(in srgb, var(--accent, #0a3578) 22%, transparent); color: var(--accent, #0a3578); }
.drift-prioritet--hög[b-po28uf44bd]     { background: color-mix(in srgb, var(--status-oppen-text, #8b3a00) 20%, transparent); color: var(--status-oppen-text, #8b3a00); }
.drift-prioritet--kritisk[b-po28uf44bd] { background: color-mix(in srgb, var(--fel-text, #842029) 18%, transparent); color: var(--fel-text, #842029); }

/* ── Tom ─────────────────────────────────────────────────────────── */
.drift-tom[b-po28uf44bd]         { padding: 1rem; color: var(--text-sek, #6c757d); font-style: italic; }
.drift-tom--ok[b-po28uf44bd]     { color: var(--ok-text, #155724); font-style: normal; font-weight: 500; }
.drift-tom-kommentar[b-po28uf44bd] { padding: 0.5rem 0; color: var(--text-sek, #6c757d); font-size: 0.85rem; font-style: italic; }

/* ── Panel (expanderad händelse) ─────────────────────────────────── */
.drift-panel[b-po28uf44bd] {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--kant, #dee2e6);
    background: var(--bg-yta-2, #f8f9fa);
}

.drift-detalj-beskrivning-wrap[b-po28uf44bd] {
    border: 1px solid color-mix(in srgb, var(--accent, #4f63d2) 22%, var(--kant, #dee2e6));
    border-radius: 0.7rem;
    background: color-mix(in srgb, var(--accent, #4f63d2) 7%, var(--bg-yta, #fff));
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.9rem;
}

.drift-detalj-beskrivning-rubrik[b-po28uf44bd] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent, #4f63d2);
    margin-bottom: 0.45rem;
}

.drift-detalj-beskrivning-text[b-po28uf44bd] {
    font-size: 0.9rem;
    color: var(--text-prim, #1a1a2e);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.drift-detalj-beskrivning-text--kollapsad[b-po28uf44bd] {
    position: relative;
    max-height: 6.7rem;
    overflow: hidden;
}

.drift-detalj-beskrivning-text--kollapsad[b-po28uf44bd]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2.4rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), color-mix(in srgb, var(--accent, #4f63d2) 7%, var(--bg-yta, #fff)) 85%);
}

.drift-detalj-beskrivning-text--tom[b-po28uf44bd] {
    color: var(--text-sek, #6c757d);
    font-style: italic;
}

/* ── Objekt-sök i registrera-formulär ───────────────────────────── */
.drift-objekt-wrap[b-po28uf44bd] {
    position: relative;
}

.drift-input--objekt[b-po28uf44bd] {
    padding-right: 2.2rem;
}

.drift-objekt-dropdown[b-po28uf44bd] {
    position: absolute;
    z-index: 60;
    left: 0;
    right: 0;
    top: calc(100% + 0.35rem);
    background: var(--bg-yta, #fff);
    border: 1px solid var(--kant, #dee2e6);
    border-radius: 0.55rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    max-height: 280px;
    overflow-y: auto;
    padding: 0.25rem;
}

.drift-objekt-rad[b-po28uf44bd] {
    width: 100%;
    text-align: left;
    border: 0;
    border-radius: 0.45rem;
    background: transparent;
    color: var(--text-prim, #1a1a2e);
    padding: 0.46rem 0.6rem;
    font-size: 0.88rem;
    cursor: pointer;
}

.drift-objekt-rad:hover[b-po28uf44bd],
.drift-objekt-rad--aktiv[b-po28uf44bd] {
    background: color-mix(in srgb, var(--accent, #4f63d2) 12%, var(--bg-yta, #fff));
}

.drift-objekt-rad mark[b-po28uf44bd] {
    background: color-mix(in srgb, var(--accent, #4f63d2) 25%, transparent);
    color: inherit;
    border-radius: 3px;
    padding: 0 0.12rem;
}

.drift-objekt-tom[b-po28uf44bd] {
    color: var(--text-sek, #6c757d);
    font-size: 0.82rem;
    padding: 0.5rem 0.55rem;
}

.drift-beskrivning-toggle[b-po28uf44bd] {
    margin-top: 0.45rem;
    background: transparent;
    border: none;
    color: var(--accent, #4f63d2);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.drift-beskrivning-toggle:hover[b-po28uf44bd] {
    filter: brightness(1.1);
}

/* ── Avsluta-sektion ─────────────────────────────────────────────── */
.drift-avsluta-sektion[b-po28uf44bd] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--kant, #dee2e6);
    flex-wrap: wrap;
}

/* ── Tidslinje ───────────────────────────────────────────────────── */
.drift-tidslinje[b-po28uf44bd]        { padding-top: 0.25rem; }
.drift-tidslinje-rubrik[b-po28uf44bd] { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--text-prim, #1a1a2e); }
.drift-storningstid[b-po28uf44bd]     { font-size: 0.85rem; color: var(--text-sek, #6c757d); margin-bottom: 0.75rem; }

.drift-kommentar-lista[b-po28uf44bd] {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
}
.drift-kommentar-post[b-po28uf44bd] {
    display: flex;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px dashed var(--kant, #dee2e6);
    font-size: 0.875rem;
    align-items: baseline;
}
.drift-kommentar-post:last-child[b-po28uf44bd] { border-bottom: none; }
.drift-kommentar-tid[b-po28uf44bd]       { font-weight: 700; color: var(--accent, #4f63d2); white-space: nowrap; min-width: 3rem; }
.drift-kommentar-anvandare[b-po28uf44bd] { font-weight: 600; color: var(--text-sek, #6c757d); min-width: 6rem; }
.drift-kommentar-text[b-po28uf44bd]      { color: var(--text-prim, #1a1a2e); }

.drift-lagg-till-kommentar[b-po28uf44bd] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

/* ── Formulär ────────────────────────────────────────────────────── */
.drift-formulär-grid[b-po28uf44bd] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.875rem 1.25rem;
    margin-bottom: 1rem;
}
.drift-fält[b-po28uf44bd] { display: flex; flex-direction: column; gap: 0.3rem; }
.drift-fält--bred[b-po28uf44bd] { grid-column: 1 / -1; }

@media (min-width: 1100px) {
    .drift-formulär-grid--registrera[b-po28uf44bd] {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .drift-formulär-grid--registrera .drift-fält[b-po28uf44bd] {
        grid-column: span 2;
    }

    .drift-formulär-grid--registrera .drift-fält--objekt[b-po28uf44bd] {
        grid-column: span 4;
    }

    .drift-formulär-grid--registrera .drift-fält--prioritet[b-po28uf44bd],
    .drift-formulär-grid--registrera .drift-fält--starttid[b-po28uf44bd] {
        grid-column: span 1;
    }

    .drift-formulär-grid--registrera .drift-fält--bred[b-po28uf44bd] {
        grid-column: 1 / -1;
    }
}

.drift-etikett[b-po28uf44bd] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-sek, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.obligatorisk[b-po28uf44bd] { color: #dc3545; }

.drift-input[b-po28uf44bd],
.drift-tid-input[b-po28uf44bd],
.drift-text-input[b-po28uf44bd] {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--kant, #dee2e6);
    border-radius: 0.375rem;
    background: var(--bg-yta, #fff);
    color: var(--text-prim, #1a1a2e);
    font-size: 0.875rem;
    width: 100%;
    box-sizing: border-box;
}
.drift-input:focus[b-po28uf44bd], .drift-tid-input:focus[b-po28uf44bd], .drift-text-input:focus[b-po28uf44bd] {
    outline: none;
    border-color: var(--accent, #4f63d2);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #4f63d2) 25%, transparent);
}
.drift-tid-input[b-po28uf44bd]  { width: auto; min-width: 6rem; }
.drift-text-input[b-po28uf44bd] { flex: 1; min-width: 12rem; }

.drift-formulär-knappar[b-po28uf44bd] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}
.drift-sparat-ok[b-po28uf44bd] {
    color: var(--ok-text, #155724);
    font-size: 0.875rem;
    font-weight: 600;
}

/* ── Felmeddelande ───────────────────────────────────────────────── */
.drift-felmeddelande[b-po28uf44bd] {
    background: var(--fel-bg, #f8d7da);
    color: var(--fel-text, #842029);
    border: 1px solid color-mix(in srgb, var(--fel-text, #842029) 30%, transparent);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

/* ── Dashboard-kort ──────────────────────────────────────────────── */
.drift-dash-kort-rad[b-po28uf44bd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.drift-dash-kort[b-po28uf44bd] {
    background: var(--bg-yta, #fff);
    border: 1px solid var(--kant, #dee2e6);
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    transition: box-shadow 0.15s;
}
.drift-dash-kort:hover[b-po28uf44bd] { box-shadow: 0 3px 8px rgba(0,0,0,.1); }
.drift-dash-kort--varning[b-po28uf44bd] { border-left: 4px solid var(--status-oppen-text, #ffc107); }
.drift-dash-kort--ok[b-po28uf44bd]      { border-left: 4px solid var(--status-avslutad-text, #28a745); }
.drift-dash-kort-varde[b-po28uf44bd]    { font-size: 2.5rem; font-weight: 800; color: var(--accent, #4f63d2); line-height: 1; }
.drift-dash-kort-varde-sm[b-po28uf44bd] { font-size: 1.1rem; font-weight: 600; color: var(--accent, #4f63d2); min-height: 2.5rem; display: flex; align-items: center; justify-content: center; }
.drift-dash-kort-etikett[b-po28uf44bd]  { font-size: 0.8rem; color: var(--text-sek, #6c757d); margin-top: 0.4rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; }
.drift-dash-enhet[b-po28uf44bd]         { font-size: 1.1rem; font-weight: 400; color: var(--text-sek, #6c757d); }

/* /Pages/Dator/DatorDriftloggDaganteckningarRapport.razor.rz.scp.css */
/* ====================================================================
   DatorDriftloggDaganteckningarRapport.razor.css - Polerad rapportsida
   ==================================================================== */

.driftrap-page[b-r7kzp4ztae] {
    display: grid;
    gap: 1.1rem;
    padding-bottom: 1.25rem;
}

.driftrap-hero[b-r7kzp4ztae] {
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 35%),
        radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 40%),
        var(--bg-yta);
}

.driftrap-hero-head[b-r7kzp4ztae] {
    display: grid;
    gap: 0.4rem;
}

.drift-titel[b-r7kzp4ztae] {
    margin: 0;
    display: inline-flex;
    align-items: center;
    font-size: clamp(1.35rem, 1.8vw, 1.75rem);
    color: var(--text-prim);
}

.driftrap-subtitel[b-r7kzp4ztae] {
    margin: 0;
    color: var(--text-sek);
    max-width: 72ch;
    line-height: 1.5;
}

.driftrap-meta[b-r7kzp4ztae] {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.driftrap-meta-chip[b-r7kzp4ztae] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--kant));
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-yta));
    font-size: 0.8rem;
    color: var(--text-sek);
}

.driftrap-sektionshuvud[b-r7kzp4ztae] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    margin-bottom: 0.95rem;
}

.driftrap-filterhint[b-r7kzp4ztae] {
    font-size: 0.82rem;
    color: var(--text-sek);
}

.driftrap-filterkort[b-r7kzp4ztae] {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.driftrap-knapprad[b-r7kzp4ztae] {
    margin-top: 1rem;
}

.driftrap-stickybar[b-r7kzp4ztae] {
    position: sticky;
    bottom: 0.5rem;
    z-index: 5;
    justify-content: space-between;
    padding: 0.65rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--kant));
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-yta) 88%, transparent);
    backdrop-filter: blur(6px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.driftrap-stickybar-meta[b-r7kzp4ztae] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.driftrap-stickybar-actions[b-r7kzp4ztae] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.driftrap-exportknapp[b-r7kzp4ztae] {
    min-width: 320px;
    justify-content: center;
    gap: 0.45rem;
    font-weight: 700;
}

.driftrap-info-grid[b-r7kzp4ztae] {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: 0.85rem;
}

.driftrap-info-kort[b-r7kzp4ztae] {
    background: var(--bg-yta-2);
    border: 1px solid var(--kant);
    border-radius: 12px;
    padding: 0.95rem;
}

.driftrap-info-kort h3[b-r7kzp4ztae] {
    margin: 0 0 0.5rem;
    font-size: 0.98rem;
    color: var(--text-prim);
}

.driftrap-info-kort p[b-r7kzp4ztae] {
    margin: 0;
    color: var(--text-sek);
    font-size: 0.88rem;
    line-height: 1.45;
}

/* Core drift styles used by this page */
.drift-sektion[b-r7kzp4ztae] {
    background: var(--bg-yta);
    border: 1px solid var(--kant);
    border-radius: 14px;
    padding: 1.15rem 1.25rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.drift-sektion--formulär[b-r7kzp4ztae] {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--kant));
}

.drift-sektion-titel[b-r7kzp4ztae] {
    margin: 0;
    font-size: 1.08rem;
    color: var(--text-prim);
}

.drift-formulär-grid[b-r7kzp4ztae] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.85rem 1rem;
}

.drift-fält[b-r7kzp4ztae] {
    display: grid;
    gap: 0.33rem;
}

.drift-etikett[b-r7kzp4ztae] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.83rem;
    font-weight: 650;
    color: var(--text-sek);
}

.drift-etikett svg[b-r7kzp4ztae] {
    opacity: 0.9;
    color: var(--accent);
    flex-shrink: 0;
}

.drift-input[b-r7kzp4ztae] {
    width: 100%;
    border: 1px solid var(--kant);
    background: var(--bg-inmatning);
    color: var(--text-prim);
    border-radius: 10px;
    padding: 0.48rem 0.6rem;
    font-size: 0.9rem;
    transition: border-color 0.16s, box-shadow 0.16s;
}

.drift-input:focus[b-r7kzp4ztae] {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
    outline: none;
}

.drift-formulär-knappar[b-r7kzp4ztae] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.drift-knapp[b-r7kzp4ztae] {
    border: none;
    border-radius: 10px;
    padding: 0.48rem 0.95rem;
    font-size: 0.87rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    cursor: pointer;
    transition: transform 0.14s, filter 0.14s;
}

.drift-knapp:disabled[b-r7kzp4ztae] {
    opacity: 0.6;
    cursor: not-allowed;
}

.drift-knapp--prim[b-r7kzp4ztae] {
    color: var(--accent-text);
    background: linear-gradient(120deg, var(--accent), color-mix(in srgb, var(--accent) 78%, #000));
}

.drift-knapp--sek[b-r7kzp4ztae] {
    color: var(--text-prim);
    background: var(--bg-yta-2);
    border: 1px solid var(--kant);
}

.drift-knapp:not(:disabled):hover[b-r7kzp4ztae] {
    transform: translateY(-1px);
    filter: brightness(1.03);
}

.drift-felmeddelande[b-r7kzp4ztae] {
    margin-top: 0.8rem;
    padding: 0.65rem 0.8rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--fel-text) 35%, transparent);
    background: var(--fel-bg);
    color: var(--fel-text);
    font-size: 0.86rem;
    font-weight: 600;
}

.driftrap-snabbval[b-r7kzp4ztae] {
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.driftrap-snabbval-text[b-r7kzp4ztae] {
    font-size: 0.8rem;
    color: var(--text-sek);
    margin-right: 0.1rem;
}

.driftrap-chip[b-r7kzp4ztae] {
    border: 1px solid var(--kant);
    background: var(--bg-yta-2);
    color: var(--text-sek);
    border-radius: 999px;
    font-size: 0.8rem;
    line-height: 1;
    min-height: 30px;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
    transition: border-color 0.14s, background 0.14s, color 0.14s;
}

.driftrap-chip:hover[b-r7kzp4ztae] {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--kant));
    color: var(--text-prim);
}

.driftrap-chip--aktiv[b-r7kzp4ztae] {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--kant));
    background: color-mix(in srgb, var(--accent) 14%, var(--bg-yta));
    color: var(--accent);
    font-weight: 700;
}

@media (max-width: 900px) {
    .drift-sektion[b-r7kzp4ztae] {
        padding: 1rem;
    }

    .driftrap-sektionshuvud[b-r7kzp4ztae] {
        align-items: flex-start;
        flex-direction: column;
    }

    .driftrap-stickybar[b-r7kzp4ztae] {
        position: static;
    }

    .driftrap-stickybar-actions[b-r7kzp4ztae] {
        width: 100%;
        justify-content: flex-end;
    }

    .driftrap-exportknapp[b-r7kzp4ztae] {
        min-width: 100%;
    }
}

/* /Pages/Dator/DatorDriftloggDashboard.razor.rz.scp.css */
/* ====================================================================
   DatorDriftloggDashboard.razor.css – Driftläge Live Dashboard
   Använder samma designsystem som DatorStart (dash-kpi etc. från app.css).
   Egna klasser har prefix "ddash-" för att inte krocka.
   ==================================================================== */

/* ── Titelrad med badge ───────────────────────────────────────────── */
.ddash-titel-rad[b-i4e4icc5ya] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Pulserande "live"-badge – visas när störningar pågår */
.ddash-puls-badge[b-i4e4icc5ya] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem 0.25rem 1.75rem;
    background: color-mix(in srgb, var(--dash-varning) 15%, var(--bg-yta));
    color: var(--dash-varning);
    border: 1px solid color-mix(in srgb, var(--dash-varning) 35%, transparent);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ddash-puls-ring[b-i4e4icc5ya] {
    position: absolute;
    left: 0.55rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--dash-varning);
}
.ddash-puls-ring[b-i4e4icc5ya]::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: var(--dash-varning);
    opacity: 0.4;
    animation: ddash-puls-b-i4e4icc5ya 1.5s ease-out infinite;
}

@keyframes ddash-puls-b-i4e4icc5ya {
    0%   { transform: scale(1);   opacity: 0.5; }
    70%  { transform: scale(1.8); opacity: 0; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* Grön "allt ok"-badge */
.ddash-ok-badge[b-i4e4icc5ya] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    background: color-mix(in srgb, var(--dash-ok) 12%, var(--bg-yta));
    color: var(--dash-ok);
    border: 1px solid color-mix(in srgb, var(--dash-ok) 30%, transparent);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
}

/* ── KPI-kort – enhet-suffix ──────────────────────────────────────── */
.ddash-enhet[b-i4e4icc5ya] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-sek);
    margin-left: 0.1rem;
}

/* Senaste störning – kompakt text i KPI-kortet */
.ddash-senaste-text[b-i4e4icc5ya] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-prim);
    line-height: 1.3;
    word-break: break-word;
    max-width: 220px;
}

/* ── Antal-badge i sektionshuvudet ────────────────────────────────── */
.ddash-antal-badge[b-i4e4icc5ya] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.4rem;
    background: var(--dash-varning);
    color: #000;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
}

/* ── Tom-tillstånd ("Inga störningar") ────────────────────────────── */
.ddash-ingen-storning[b-i4e4icc5ya] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    gap: 0.5rem;
    text-align: center;
}
.ddash-ingen-ikon[b-i4e4icc5ya] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--dash-ok) 12%, var(--bg-yta));
    color: var(--dash-ok);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
}
.ddash-ingen-text[b-i4e4icc5ya] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-prim);
}
.ddash-ingen-sub[b-i4e4icc5ya] {
    font-size: 0.85rem;
    color: var(--text-sek);
}

/* ── Lista med störningskort ──────────────────────────────────────── */
.ddash-storning-lista[b-i4e4icc5ya] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.ddash-storning-kort[b-i4e4icc5ya] {
    position: relative;
    background: var(--bg-yta-2);
    border: 1px solid var(--kant);
    border-radius: 12px;
    padding: 0.875rem 1rem 0.875rem 1.25rem;
    overflow: hidden;
    transition: box-shadow 0.13s, border-color 0.13s;
}
.ddash-storning-kort:hover[b-i4e4icc5ya] {
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    border-color: var(--kant-stark);
}

/* Färgad vänsterkant baserat på prioritet */
.ddash-storning-prioritet-linje[b-i4e4icc5ya] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 12px 0 0 12px;
}
.ddash-storning-kort--låg      .ddash-storning-prioritet-linje[b-i4e4icc5ya] { background: var(--text-dov); }
.ddash-storning-kort--normal   .ddash-storning-prioritet-linje[b-i4e4icc5ya] { background: var(--dash-info); }
.ddash-storning-kort--hög      .ddash-storning-prioritet-linje[b-i4e4icc5ya] { background: var(--dash-varning); }
.ddash-storning-kort--kritisk  .ddash-storning-prioritet-linje[b-i4e4icc5ya] { background: var(--dash-fel); }

/* Kritisk – extra framhävning */
.ddash-storning-kort--kritisk[b-i4e4icc5ya] {
    border-color: color-mix(in srgb, var(--dash-fel) 35%, transparent);
    background: color-mix(in srgb, var(--dash-fel) 6%, var(--bg-yta));
}

.ddash-storning-huvud[b-i4e4icc5ya] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.ddash-storning-objekt[b-i4e4icc5ya] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.ddash-storning-objekt strong[b-i4e4icc5ya] {
    font-size: 0.95rem;
    color: var(--text-prim);
}
.ddash-storning-typ[b-i4e4icc5ya] {
    font-size: 0.78rem;
    color: var(--text-sek);
}

/* Prioritet-chip */
.ddash-prioritet-chip[b-i4e4icc5ya] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}
.ddash-prioritet-chip--låg[b-i4e4icc5ya]     { background: color-mix(in srgb, var(--text-dov)     18%, var(--bg-yta)); color: var(--text-sek); }
.ddash-prioritet-chip--normal[b-i4e4icc5ya]  { background: color-mix(in srgb, var(--dash-info)    18%, var(--bg-yta)); color: var(--dash-info); }
.ddash-prioritet-chip--hög[b-i4e4icc5ya]     { background: color-mix(in srgb, var(--dash-varning) 18%, var(--bg-yta)); color: var(--dash-varning); }
.ddash-prioritet-chip--kritisk[b-i4e4icc5ya] { background: color-mix(in srgb, var(--dash-fel)     18%, var(--bg-yta)); color: var(--dash-fel); }

/* Metarad (tid, varaktighet, ansvarig) */
.ddash-storning-meta[b-i4e4icc5ya] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.ddash-meta-post[b-i4e4icc5ya] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--text-sek);
}
.ddash-meta-post--tid[b-i4e4icc5ya]          { font-weight: 600; color: var(--text-prim); }
.ddash-meta-post--varning[b-i4e4icc5ya]      { color: var(--dash-varning); }

/* Beskrivning */
.ddash-storning-beskrivning[b-i4e4icc5ya] {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--kant);
    font-size: 0.83rem;
    color: var(--text-sek);
    line-height: 1.45;
}

/* /Pages/Dator/DatorDriftloggRapport.razor.rz.scp.css */
/* ====================================================================
   DatorDriftloggRapport.razor.css - Polerad rapportsida for export
   ==================================================================== */

.driftrap-page[b-effg5cvsar] {
    display: grid;
    gap: 1.1rem;
    padding-bottom: 1.25rem;
}

.driftrap-hero[b-effg5cvsar] {
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 35%),
        radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 40%),
        var(--bg-yta);
}

.driftrap-hero-head[b-effg5cvsar] {
    display: grid;
    gap: 0.4rem;
}

.drift-titel[b-effg5cvsar] {
    margin: 0;
    display: inline-flex;
    align-items: center;
    font-size: clamp(1.35rem, 1.8vw, 1.75rem);
    color: var(--text-prim);
}

.driftrap-subtitel[b-effg5cvsar] {
    margin: 0;
    color: var(--text-sek);
    max-width: 72ch;
    line-height: 1.5;
}

.driftrap-meta[b-effg5cvsar] {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.driftrap-meta-chip[b-effg5cvsar] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--kant));
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-yta));
    font-size: 0.8rem;
    color: var(--text-sek);
}

.driftrap-sektionshuvud[b-effg5cvsar] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    margin-bottom: 0.95rem;
}

.driftrap-filterhint[b-effg5cvsar] {
    font-size: 0.82rem;
    color: var(--text-sek);
}

.driftrap-filterkort[b-effg5cvsar] {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.driftrap-knapprad[b-effg5cvsar] {
    margin-top: 1rem;
}

.driftrap-stickybar[b-effg5cvsar] {
    position: sticky;
    bottom: 0.5rem;
    z-index: 5;
    justify-content: space-between;
    padding: 0.65rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--kant));
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-yta) 88%, transparent);
    backdrop-filter: blur(6px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.driftrap-stickybar-meta[b-effg5cvsar] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.driftrap-stickybar-actions[b-effg5cvsar] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.driftrap-exportknapp[b-effg5cvsar] {
    min-width: 280px;
    justify-content: center;
    gap: 0.45rem;
    font-weight: 700;
}

.driftrap-info-grid[b-effg5cvsar] {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: 0.85rem;
}

.driftrap-info-kort[b-effg5cvsar] {
    background: var(--bg-yta-2);
    border: 1px solid var(--kant);
    border-radius: 12px;
    padding: 0.95rem;
}

.driftrap-info-kort h3[b-effg5cvsar] {
    margin: 0 0 0.5rem;
    font-size: 0.98rem;
    color: var(--text-prim);
}

.driftrap-info-kort p[b-effg5cvsar] {
    margin: 0;
    color: var(--text-sek);
    font-size: 0.88rem;
    line-height: 1.45;
}

/* Core drift styles used by this page */
.drift-sektion[b-effg5cvsar] {
    background: var(--bg-yta);
    border: 1px solid var(--kant);
    border-radius: 14px;
    padding: 1.15rem 1.25rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.drift-sektion--formulär[b-effg5cvsar] {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--kant));
}

.drift-sektion-titel[b-effg5cvsar] {
    margin: 0;
    font-size: 1.08rem;
    color: var(--text-prim);
}

.drift-formulär-grid[b-effg5cvsar] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.85rem 1rem;
}

.drift-fält[b-effg5cvsar] {
    display: grid;
    gap: 0.33rem;
}

.drift-etikett[b-effg5cvsar] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.83rem;
    font-weight: 650;
    color: var(--text-sek);
}

.drift-etikett svg[b-effg5cvsar] {
    opacity: 0.9;
    color: var(--accent);
    flex-shrink: 0;
}

.drift-input[b-effg5cvsar] {
    width: 100%;
    border: 1px solid var(--kant);
    background: var(--bg-inmatning);
    color: var(--text-prim);
    border-radius: 10px;
    padding: 0.48rem 0.6rem;
    font-size: 0.9rem;
    transition: border-color 0.16s, box-shadow 0.16s;
}

.drift-input:focus[b-effg5cvsar] {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
    outline: none;
}

.drift-formulär-knappar[b-effg5cvsar] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.drift-knapp[b-effg5cvsar] {
    border: none;
    border-radius: 10px;
    padding: 0.48rem 0.95rem;
    font-size: 0.87rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    cursor: pointer;
    transition: transform 0.14s, filter 0.14s;
}

.drift-knapp:disabled[b-effg5cvsar] {
    opacity: 0.6;
    cursor: not-allowed;
}

.drift-knapp--prim[b-effg5cvsar] {
    color: var(--accent-text);
    background: linear-gradient(120deg, var(--accent), color-mix(in srgb, var(--accent) 78%, #000));
}

.drift-knapp--sek[b-effg5cvsar] {
    color: var(--text-prim);
    background: var(--bg-yta-2);
    border: 1px solid var(--kant);
}

.drift-knapp:not(:disabled):hover[b-effg5cvsar] {
    transform: translateY(-1px);
    filter: brightness(1.03);
}

.drift-felmeddelande[b-effg5cvsar] {
    margin-top: 0.8rem;
    padding: 0.65rem 0.8rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--fel-text) 35%, transparent);
    background: var(--fel-bg);
    color: var(--fel-text);
    font-size: 0.86rem;
    font-weight: 600;
}

.driftrap-snabbval[b-effg5cvsar] {
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.driftrap-snabbval-text[b-effg5cvsar] {
    font-size: 0.8rem;
    color: var(--text-sek);
    margin-right: 0.1rem;
}

.driftrap-chip[b-effg5cvsar] {
    border: 1px solid var(--kant);
    background: var(--bg-yta-2);
    color: var(--text-sek);
    border-radius: 999px;
    font-size: 0.8rem;
    line-height: 1;
    min-height: 30px;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
    transition: border-color 0.14s, background 0.14s, color 0.14s;
}

.driftrap-chip:hover[b-effg5cvsar] {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--kant));
    color: var(--text-prim);
}

.driftrap-chip--aktiv[b-effg5cvsar] {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--kant));
    background: color-mix(in srgb, var(--accent) 14%, var(--bg-yta));
    color: var(--accent);
    font-weight: 700;
}

@media (max-width: 900px) {
    .drift-sektion[b-effg5cvsar] {
        padding: 1rem;
    }

    .driftrap-sektionshuvud[b-effg5cvsar] {
        align-items: flex-start;
        flex-direction: column;
    }

    .driftrap-stickybar[b-effg5cvsar] {
        bottom: 0;
        padding: 0.65rem;
    }

    .driftrap-stickybar-meta[b-effg5cvsar],
    .driftrap-stickybar-actions[b-effg5cvsar] {
        width: 100%;
    }

    .driftrap-stickybar-actions[b-effg5cvsar] {
        justify-content: flex-end;
    }

    .driftrap-exportknapp[b-effg5cvsar] {
        min-width: 100%;
    }
}

/* /Pages/Dator/DatorRedigeraAnvandare.razor.rz.scp.css */
/* ── Stor avatar i rubrik ──────────────────────────────────────────── */
.anvandare-avatar-stor[b-0466j263vv] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 20%, var(--bg-yta-2));
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
    flex-shrink: 0;
    text-transform: uppercase;
    border: 2px solid color-mix(in srgb, var(--accent) 35%, var(--kant));
}

/* ── card-header ───────────────────────────────────────────────────── */
.card-header[b-0466j263vv] {
    background: var(--bg-yta-2);
    border-color: var(--kant);
    color: var(--text-sek);
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ── Standardlösenord-baner (samma som lista) ──────────────────────── */
.std-losenord-baner[b-0466j263vv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-yta-2));
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--kant));
    border-radius: .375rem;
    padding: .6rem .85rem;
}

.std-losenord-info[b-0466j263vv] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.std-losenord-etikett[b-0466j263vv] {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-sek);
}

.std-losenord-varde[b-0466j263vv] {
    font-size: .95rem;
    color: var(--text-prim);
    font-weight: 600;
    letter-spacing: .04em;
    word-break: break-all;
}

.std-losenord-knappar[b-0466j263vv] {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-shrink: 0;
}

/* ── Ghost-knapp ───────────────────────────────────────────────────── */
.btn-ghost[b-0466j263vv] {
    background: none;
    border: 1px solid transparent;
    color: var(--text-sek);
    border-radius: .25rem;
    padding: .2rem .45rem;
    font-size: .88rem;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.btn-ghost:hover[b-0466j263vv] {
    background: var(--bg-yta-hov);
    border-color: var(--kant);
    color: var(--text-prim);
}

/* ── Lösenordsstyrka-mätare ─────────────────────────────────────────── */
.losenords-styrka[b-0466j263vv] {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.styrka-staplar[b-0466j263vv] {
    display: flex;
    gap: 4px;
    flex: 1;
    max-width: 120px;
}

.styrka-stapel[b-0466j263vv] {
    height: 5px;
    flex: 1;
    border-radius: 3px;
    background: var(--kant-stark);
    transition: background .2s;
}

.styrka-stapel.styrka-1[b-0466j263vv] { background: #dc3545; }
.styrka-stapel.styrka-2[b-0466j263vv] { background: #fd7e14; }
.styrka-stapel.styrka-3[b-0466j263vv] { background: #ffc107; }
.styrka-stapel.styrka-4[b-0466j263vv] { background: #28a745; }

.styrka-text[b-0466j263vv] {
    font-size: .75rem;
    color: var(--text-sek);
}

/* /Pages/Dator/DatorSystemInstallningar.razor.rz.scp.css */
.installningar-grid[b-npfnv9n8fg] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 1.25rem;
}

.inst-kort[b-npfnv9n8fg] {
    background: var(--bg-yta);
    border-color: var(--kant);
}

.inst-ikon-rad[b-npfnv9n8fg] {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.inst-ikon[b-npfnv9n8fg] {
    font-size: 1.6rem;
    line-height: 1;
}

.epost-grid[b-npfnv9n8fg] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .75rem;
}

/* /Pages/Dator/DatorSystemlogg.razor.rz.scp.css */
/* ── Filter-rad ──────────────────────────────────────────────────────── */
.logg-filter-rad[b-2m6efb1lgc] {
    background: var(--bg-yta-2);
    border-color: var(--kant) !important;
}

/* ── Tabell-wrapper ──────────────────────────────────────────────────── */
.logg-tabell-wrap[b-2m6efb1lgc] {
    border: 1px solid var(--kant);
    border-top: none;
    border-radius: 0 0 .375rem .375rem;
    background: var(--bg-yta);
}

/* ── Tabell ──────────────────────────────────────────────────────────── */
.logg-tabell[b-2m6efb1lgc] {
    font-size: .82rem;
    margin-bottom: 0;
    --bs-table-bg:          var(--bg-yta);
    --bs-table-hover-bg:    var(--bg-yta-hov);
    --bs-table-border-color: var(--kant);
    color: var(--text-prim);
}

.logg-tabell thead tr[b-2m6efb1lgc] {
    background-color: var(--bg-yta-2);
}

.logg-tabell thead th[b-2m6efb1lgc] {
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .5rem .75rem;
    white-space: nowrap;
    color: var(--text-sek);
    border-color: var(--kant-stark);
    background-color: var(--bg-yta-2);
}

.logg-tabell td[b-2m6efb1lgc] {
    padding: .4rem .75rem;
    vertical-align: middle;
    color: var(--text-prim);
    border-color: var(--kant);
}

/* ── Radmarkering per nivå ───────────────────────────────────────────── */
.logg-rad--fel[b-2m6efb1lgc] {
    background-color: color-mix(in srgb, var(--fel-bg) 40%, transparent) !important;
}

.logg-rad--varning[b-2m6efb1lgc] {
    background-color: color-mix(in srgb, var(--status-oppen-bg) 30%, transparent) !important;
}

.logg-rad:hover td[b-2m6efb1lgc] {
    background-color: var(--bg-yta-hov) !important;
}

/* ── Meddelande-kolumn ───────────────────────────────────────────────── */
.logg-msg[b-2m6efb1lgc] {
    max-width: 0;
}

.logg-msg-text[b-2m6efb1lgc] {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 600px;
    color: var(--text-prim);
}

.logg-undantag-ikon[b-2m6efb1lgc] {
    color: var(--fel-text);
    font-size: .85em;
    cursor: default;
}

/* ── Källkod ─────────────────────────────────────────────────────────── */
.logg-kallkod[b-2m6efb1lgc] {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-sek) !important;
}

/* ── Tidstämpel ──────────────────────────────────────────────────────── */
.logg-tid[b-2m6efb1lgc] {
    font-family: var(--bs-font-monospace);
    font-size: .78rem;
    color: var(--text-sek) !important;
}

/* ── Nav-flikar ──────────────────────────────────────────────────────── */
.nav-tabs[b-2m6efb1lgc] {
    border-color: var(--kant);
}

.nav-tabs .nav-link[b-2m6efb1lgc] {
    color: var(--text-sek);
    border-color: transparent;
    background: transparent;
}

.nav-tabs .nav-link:hover[b-2m6efb1lgc] {
    color: var(--text-prim);
    border-color: var(--kant);
    background: var(--bg-yta-2);
}

.nav-tabs .nav-link.active[b-2m6efb1lgc] {
    color: var(--text-prim);
    background-color: var(--bg-yta);
    border-color: var(--kant) var(--kant) var(--bg-yta);
}

/* ── Pre-block i modal ───────────────────────────────────────────────── */
.logg-pre[b-2m6efb1lgc] {
    background: var(--bg-yta-2);
    border: 1px solid var(--kant);
    border-radius: .25rem;
    padding: .6rem .75rem;
    font-size: .78rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 300px;
    overflow-y: auto;
    color: var(--text-prim);
}

.logg-pre--fel[b-2m6efb1lgc] {
    background: var(--fel-bg);
    border-color: var(--fel-text);
    color: var(--fel-text);
}

/* ── Pre-block wrapper med kopiera-knapp ─────────────────────────────── */
.logg-pre-wrap[b-2m6efb1lgc] {
    position: relative;
}

.logg-kopiera-knapp[b-2m6efb1lgc] {
    position: absolute;
    top: .3rem;
    right: .3rem;
    padding: .15rem .45rem;
    font-size: .75rem;
    line-height: 1.4;
    border: 1px solid var(--kant);
    border-radius: .25rem;
    background: var(--bg-yta);
    color: var(--text-sek);
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease, background .15s ease;
}

.logg-pre-wrap:hover .logg-kopiera-knapp[b-2m6efb1lgc] {
    opacity: 1;
}

.logg-kopiera-knapp:hover[b-2m6efb1lgc] {
    background: var(--bg-yta-hov);
    color: var(--text-prim);
}

.logg-kopiera-knapp--fel[b-2m6efb1lgc] {
    background: var(--fel-bg);
    border-color: var(--fel-text);
    color: var(--fel-text);
}

.logg-kopiera-knapp--fel:hover[b-2m6efb1lgc] {
    background: var(--fel-text);
    color: #fff;
}


.modal-content[b-2m6efb1lgc] {
    background-color: var(--bg-yta);
    border-color: var(--kant);
    color: var(--text-prim);
}

.modal-header[b-2m6efb1lgc],
.modal-footer[b-2m6efb1lgc] {
    border-color: var(--kant);
    background-color: var(--bg-yta-2);
    color: var(--text-prim);
}

/* Modal-huvud färgade per loggnivå */
.logg-modal-huvud--fel[b-2m6efb1lgc] {
    background-color: var(--fel-bg) !important;
    border-color: var(--fel-text) !important;
    color: var(--fel-text) !important;
}

.logg-modal-huvud--varning[b-2m6efb1lgc] {
    background-color: var(--status-oppen-bg) !important;
    border-color: var(--status-oppen-text) !important;
    color: var(--status-oppen-text) !important;
}

.logg-modal-huvud--normal[b-2m6efb1lgc] {
    background-color: var(--bg-yta-2);
    border-color: var(--kant);
    color: var(--text-prim);
}

/* btn-close anpassad till tema */
.logg-stang-knapp[b-2m6efb1lgc] {
    filter: none;
    opacity: 0.7;
    background-color: transparent;
    border: none;
    cursor: pointer;
    width: 1.5em;
    height: 1.5em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293A1 1 0 0 1 .293 14.707L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 1em;
    background-position: center;
}

.logg-stang-knapp:hover[b-2m6efb1lgc] { opacity: 1; }

.modal-body dt[b-2m6efb1lgc] {
    color: var(--text-sek);
}

.modal-body dd[b-2m6efb1lgc] {
    color: var(--text-prim);
}

/* ── Paginering ──────────────────────────────────────────────────────── */
.page-link[b-2m6efb1lgc] {
    background-color: var(--bg-yta);
    border-color: var(--kant);
    color: var(--accent);
}

.page-link:hover[b-2m6efb1lgc] {
    background-color: var(--bg-yta-2);
    border-color: var(--kant-stark);
    color: var(--accent-hov);
}

.page-item.active .page-link[b-2m6efb1lgc] {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--accent-text);
}

.page-item.disabled .page-link[b-2m6efb1lgc] {
    background-color: var(--bg-inmatning);
    color: var(--text-dov);
    border-color: var(--kant);
}

/* ── Sökfält ─────────────────────────────────────────────────────────── */
.logg-filter-rad .input-group-text[b-2m6efb1lgc] {
    background-color: var(--bg-yta-2);
    border-color: var(--kant);
    color: var(--text-sek);
}

.logg-filter-rad .form-control[b-2m6efb1lgc] {
    background-color: var(--bg-inmatning);
    border-color: var(--kant);
    color: var(--text-prim);
}

.logg-filter-rad .form-control[b-2m6efb1lgc]::placeholder {
    color: var(--text-dov);
}

.logg-filter-rad .form-control:focus[b-2m6efb1lgc] {
    background-color: var(--bg-inmatning);
    border-color: var(--accent);
    color: var(--text-prim);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* ── Spinner / tom-text ──────────────────────────────────────────────── */
.logg-tabell-wrap ~ p.text-muted[b-2m6efb1lgc],
.text-muted[b-2m6efb1lgc] {
    color: var(--text-sek) !important;
}
/* /Pages/Dator/DatorVersionsdokument.razor.rz.scp.css */
.vd-wrap[b-xwnt4wayf6] {
    max-width: 1040px;
    margin: 0 auto;
    padding: 1.5rem 1rem 2.25rem;
}

.vd-hero[b-xwnt4wayf6] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    background: linear-gradient(135deg, #0a3578 0%, #1d4ed8 65%, #3b82f6 100%);
    color: #fff;
    border-radius: 16px;
    padding: 1.35rem 1.35rem;
    margin-bottom: 1rem;
    box-shadow: 0 14px 28px rgba(10, 53, 120, 0.24);
}

.vd-hero h1[b-xwnt4wayf6] {
    margin: 0 0 0.35rem 0;
    font-size: 1.65rem;
}

.vd-hero p[b-xwnt4wayf6] {
    margin: 0;
    max-width: 65ch;
    opacity: 0.96;
}

.vd-meta[b-xwnt4wayf6] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.vd-meta span[b-xwnt4wayf6] {
    background: color-mix(in srgb, var(--accent, #1d4ed8) 12%, var(--bg-yta, #fff));
    color: var(--accent, #1d4ed8);
    border: 1px solid color-mix(in srgb, var(--accent, #1d4ed8) 30%, var(--kant, #bfdbfe));
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.vd-tidslinje[b-xwnt4wayf6] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.vd-dag[b-xwnt4wayf6] {
    background: var(--bg-yta, #fff);
    border: 1px solid var(--kant, #e5e7eb);
    border-radius: 14px;
    padding: 1rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

.vd-dag-header[b-xwnt4wayf6] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.vd-dag h2[b-xwnt4wayf6] {
    margin: 0;
    font-size: 1.05rem;
    color: var(--text-prim, #0f172a);
}

.vd-datum[b-xwnt4wayf6] {
    display: inline-flex;
    align-items: center;
    background: color-mix(in srgb, var(--accent, #1d4ed8) 20%, var(--bg-yta, #fff));
    color: color-mix(in srgb, var(--accent, #1d4ed8) 85%, #0f172a 15%);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
}

.vd-typ[b-xwnt4wayf6] {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.76rem;
    font-weight: 700;
}

.vd-typ--ny[b-xwnt4wayf6] {
    background: color-mix(in srgb, #22c55e 20%, var(--bg-yta, #fff));
    color: color-mix(in srgb, #22c55e 78%, var(--text-prim, #0f172a));
}

.vd-typ--forbattring[b-xwnt4wayf6] {
    background: color-mix(in srgb, #f59e0b 22%, var(--bg-yta, #fff));
    color: color-mix(in srgb, #f59e0b 75%, var(--text-prim, #0f172a));
}

.vd-dag-intro[b-xwnt4wayf6] {
    margin: 0.55rem 0 0.75rem;
    color: var(--text-sek, #334155);
}

.vd-lista[b-xwnt4wayf6] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
}

.vd-kort[b-xwnt4wayf6] {
    display: grid;
    grid-template-columns: 1.2rem 1fr;
    align-items: start;
    gap: 0.6rem;
    background: var(--bg-yta-2, #f8fafc);
    border: 1px solid var(--kant, #e2e8f0);
    border-radius: 10px;
    padding: 0.72rem 0.8rem;
}

.vd-ikon[b-xwnt4wayf6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    font-size: 0.9rem;
    line-height: 1;
}

.vd-kort p[b-xwnt4wayf6] {
    margin: 0;
    color: var(--text-prim, #374151);
    line-height: 1.4;
}

@media (max-width: 780px) {
    .vd-hero[b-xwnt4wayf6] {
        flex-direction: column;
        align-items: stretch;
    }

    .vd-hero h1[b-xwnt4wayf6] {
        font-size: 1.45rem;
    }
}