/* Skemagi Planner – design-tema v2
   Brand: Dyb Lilla #362d6a · Støvet Rosa #df72ab · Knækket Hvid #ebe9df · Lys Lavendel #dcd5f9
   Layout: fast venstre sidebar (hvid), lilla topbar, lilla header-band, hvide cards.
   VIGTIGT: Undgå !important på card-body padding — Bootstrap p-0 skal stadig virke.

   Fontroller:
     --sk-font-brand   Nunito      — navigation, knapper, card-titler, brand-elementer
     --sk-font-ui      DM Sans     — brødtekst, formularer, hjælpetekst
     --sk-font-work    Open Sans   — datatunge tabeller, planlægningslister, matrixer
     --sk-font-numeric Open Sans   — tider, tal, datoer (tabular-nums)
   Udskift til Auro + Nicky Sans når fontfiler leveres fra bureau.
*/

/* ─── Farvevariabler ──────────────────────────────────────────────────────── */
:root {
    /* ── Skemagi brand-farver (fra brandbog) ── */
    --sk-purple:       #362d6a;
    --sk-pink:         #df72ab;
    --sk-cream:        #ebe9df;
    --sk-lavender:     #dcd5f9;

    /* ── Purple tint/shade-skala ── */
    --sk-purple-900:   #2a2258;
    --sk-purple-700:   #362d6a;
    --sk-purple-500:   #5d5488;
    --sk-purple-300:   #8881a8;
    --sk-purple-200:   #aaa5ba;
    --sk-purple-100:   #c7c4cc;

    /* ── Pink tint/shade-skala ── */
    --sk-pink-700:     #d665a3;
    --sk-pink-500:     #df72ab;
    --sk-pink-300:     #e1a0bf;
    --sk-pink-200:     #e5b8c7;
    --sk-pink-100:     #e8d1d4;

    /* ── Cream tint-skala ── */
    --sk-cream-100:    #f5f3ee;
    --sk-cream-050:    #fbfaf7;

    /* ── Lavender tint/shade-skala ── */
    --sk-lavender-500: #dcd5f9;
    --sk-lavender-300: #e6e1f5;
    --sk-lavender-200: #ebe7f1;
    --sk-lavender-100: #f2eff8;

    /* ── UI-farver (afledt af palette) ── */
    --sk-body-bg:      var(--sk-cream-100);
    --sk-card-bg:      #ffffff;
    --sk-text:         #2d2a45;
    --sk-muted:        var(--sk-purple-300);
    --sk-border:       #ddd9ce;
    --sk-label-bg:     var(--sk-cream-100);

    /* ── Statuskoder — brand-tilpassede ── */
    --sk-success:        #3db48a;
    --sk-success-bg:     #e4f4ed;
    --sk-success-border: #9fd3bd;
    --sk-warning:        #d4900a;
    --sk-warning-dark:   var(--sk-warning-dark);
    --sk-warning-bg:     #fdf1dc;
    --sk-danger:         #c4425a;
    --sk-danger-dark:    var(--sk-danger-dark);
    --sk-danger-bg:      #fbeaee;
    --sk-info:           #6070cc;
    --sk-info-bg:        var(--sk-lavender-100);

    /* ── Shadows ── */
    --sk-card-shadow:  0px 1px 4px rgba(54, 45, 106, 0.08), 0px 0px 1px rgba(54, 45, 106, 0.12);
    --sk-btn-shadow:   rgba(54, 45, 106, 0.14) 0px 2px 4px, rgba(0, 0, 0, 0.04) 0px 1px 2px;

    /* ── Dimensioner ── */
    --sk-label-col-w:  8.5rem;
    --sk-font-sm:      0.8125rem;
    --sk-font-xs:      0.74rem;

    /* ── Font-stacks ── */
    --sk-font-brand:   'Nunito', 'Segoe UI', system-ui, sans-serif;
    --sk-font-ui:      'DM Sans', 'Segoe UI', system-ui, sans-serif;
    --sk-font-work:    'Open Sans', 'Segoe UI', system-ui, sans-serif;
    --sk-font-numeric: 'Open Sans', 'Segoe UI', system-ui, sans-serif;
}

/* ─── Global ──────────────────────────────────────────────────────────────── */
body {
    background: var(--sk-body-bg);
    color: var(--sk-text);
    font-size: 0.9375rem;
    font-family: var(--sk-font-ui);
}
a { color: var(--sk-purple); }
a:hover { color: var(--sk-purple-900); }

/* Sekundært, diskret tekstlink (fx "Se plan") — mindre vægt end almindelige links,
   men tydeligt interaktivt på hover. */
.sk-text-link {
    color: var(--sk-muted);
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
}
.sk-text-link:hover {
    color: var(--sk-purple);
}

/* ─── AdminLTE content-wrapper ────────────────────────────────────────────── */
.content-wrapper {
    background: var(--sk-body-bg) !important;
}
/* Cards starter med naturlig luft under header-band + action-bar */
.content-wrapper > .content {
    padding-top: 1rem;
}

/* ─── Lilla topbar (~65px) ────────────────────────────────────────────────── */
.main-header.sk-topbar {
    background-color: var(--sk-purple) !important;
    border-bottom: none !important;
    box-shadow: 0 2px 8px rgba(54, 45, 106, 0.30) !important;
    min-height: 65px !important;
}
.sk-topbar-toggle,
.sk-topbar-user,
.sk-topbar .nav-link {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 0.83rem;
    line-height: 65px;
}
.sk-topbar-toggle:hover,
.sk-topbar-user:hover,
.sk-topbar .nav-link:hover {
    color: #fff !important;
    background: transparent !important;
}
.sk-topbar-user-info {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.15;
    vertical-align: middle;
    text-align: left;
}
.sk-topbar-inst {
    display: block;
    font-size: 0.68rem;
    opacity: 0.72;
    white-space: nowrap;
}
.sk-topbar-name {
    display: block;
    font-size: 0.83rem;
    white-space: nowrap;
}

/* Dropdown fra topbar */
.sk-dropdown {
    border: 0;
    border-radius: 6px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
    font-size: 0.82rem;
    min-width: 190px;
    padding: 0.3rem 0;
}
.sk-dropdown .dropdown-header {
    font-size: 0.67rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sk-muted);
    padding: 0.45rem 1rem 0.15rem;
}
.sk-dropdown .dropdown-item {
    padding: 0.35rem 1rem;
    color: var(--sk-text);
    font-size: 0.82rem;
}
.sk-dropdown .dropdown-item:hover { background: var(--sk-body-bg); color: var(--sk-purple); }
.sk-dropdown .dropdown-divider { margin: 0.25rem 0; border-color: var(--sk-border); }
.sk-dropdown-disabled { cursor: default; pointer-events: none; }
.sk-tenant-switcher {
    min-width: 16rem;
    padding: 0.35rem 1rem 0.55rem;
}
.sk-tenant-switcher-label {
    display: block;
    color: var(--sk-purple);
    font-family: var(--sk-font-brand);
    font-size: 0.78rem;
    font-weight: 800;
    margin-bottom: 0.35rem;
}
.sk-tenant-switcher-select {
    font-size: 0.78rem !important;
    color: var(--sk-text);
    border-color: var(--sk-border) !important;
    border-radius: 4px !important;
}

/* ─── Hvid sidebar ────────────────────────────────────────────────────────── */
.main-sidebar.sk-sidebar {
    background-color: #ffffff !important;
    border-right: 1px solid var(--sk-border) !important;
    box-shadow: 2px 0 12px rgba(136, 152, 170, 0.10) !important;
}

/* Brand/logo øverst i sidebar — rigtige Skemagi-logoer */
.sk-brand {
    background: #fff !important;
    border-bottom: 1px solid var(--sk-border) !important;
    padding: 0 1.1rem !important;
    justify-content: center !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none !important;
    min-height: 65px;
}
.sk-brand:hover { background: var(--sk-lavender) !important; opacity: 1; }

/* Wordmark (fuld logo) vises når sidebaren er åben */
.sk-brand-wordmark {
    height: 38px;
    width: auto;
    display: block;
}
/* Kompakt (ikon) vises når sidebaren er kollapset */
.sk-brand-kompakt {
    height: 38px;
    width: auto;
    display: none;
}
/* Kollapset sidebar: vis kompakt logo */
.sidebar-collapse .sk-brand-wordmark { display: none; }
.sidebar-collapse .sk-brand-kompakt  { display: block; }

/* Sidebar scrollbar */
.sk-sidebar .sidebar { overflow-y: auto; overflow-x: hidden; }

/* ─── Sidebar navigationslinks ────────────────────────────────────────────── */
.sk-nav {
    padding: 0.5rem 0;
}

/* Primære menupunkter */
.sk-nav > .nav-item > .nav-link {
    color: rgba(45, 42, 69, 0.65) !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    font-family: var(--sk-font-brand);
    padding: 0.72rem 1.1rem !important;
    min-height: 46px;
    display: flex;
    align-items: center;
    border-radius: 0 !important;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
}
.sk-nav > .nav-item > .nav-link:hover {
    background: rgba(220, 213, 249, 0.45) !important;
    color: var(--sk-purple) !important;
}
.sk-nav > .nav-item > .nav-link.sk-parent-active {
    color: var(--sk-purple) !important;
    background: rgba(220, 213, 249, 0.38) !important;
    font-weight: 700 !important;
}

/* Ikoner ved primære punkter */
.sk-nav .nav-icon {
    color: var(--sk-pink) !important;
    font-size: 0.9rem !important;
    width: 1.35rem;
    text-align: center;
    margin-right: 0.55rem !important;
    flex-shrink: 0;
}
.sk-nav .sk-menu-icon {
    width: 1.35rem;
    height: 1.35rem;
    object-fit: contain;
    opacity: 0.96;
}
/* Lille brand-ikon inline med tekst (fx kontaktoplysninger) */
.sk-inline-icon {
    width: 1.1rem;
    height: 1.1rem;
    object-fit: contain;
    vertical-align: -0.2rem;
    margin-right: 0.4rem;
}
.sk-nav > .nav-item > .nav-link:hover .sk-menu-icon,
.sk-nav > .nav-item > .nav-link.sk-parent-active .sk-menu-icon,
.sk-nav > .nav-item > .nav-link.sk-sub-active .sk-menu-icon {
    opacity: 1;
}
/* Pil-ikon */
.sk-nav > .nav-item > .nav-link .right {
    color: var(--sk-muted) !important;
    font-size: 0.68rem;
}

/* Underpunkter (treeview) */
.sk-nav .nav-treeview {
    background: #fff;
}
.sk-nav .nav-treeview .nav-link {
    color: rgba(45, 42, 69, 0.60) !important;
    font-size: 0.86rem !important;
    font-weight: 500 !important;
    font-family: var(--sk-font-ui);
    padding: 0.42rem 1.1rem 0.42rem 3.35rem !important;
    min-height: 34px;
    display: flex;
    align-items: center;
    border-radius: 0 !important;
    white-space: nowrap;
    transition: background 0.1s, color 0.1s;
}
.sk-nav .nav-treeview .nav-link:hover {
    background: rgba(220, 213, 249, 0.45) !important;
    color: var(--sk-purple) !important;
}
.sk-nav .nav-treeview .nav-icon {
    font-size: 0.42rem !important;
    color: var(--sk-muted) !important;
    width: 1rem;
    margin-right: 0.5rem !important;
}

/* Aktiv undermenu-side: lilla accent-linje + lavendel baggrund */
.sk-nav .nav-treeview .nav-link.sk-sub-active {
    color: var(--sk-purple) !important;
    font-weight: 700 !important;
    background: rgba(220, 213, 249, 0.55) !important;
    border-left: 3px solid var(--sk-pink);
    padding-left: calc(3.35rem - 3px) !important;
}
.sk-nav .nav-treeview .nav-link.sk-sub-active .nav-icon {
    color: var(--sk-purple) !important;
}

/* Stub-punkter (ikke implementeret): tydeligt synlige men ikke-klikbare */
.sk-nav-stub {
    opacity: 0.62 !important;
    pointer-events: none !important;
    cursor: default !important;
}

/* ─── Lilla header-band (øverst i content-wrapper) ───────────────────────── */
.sk-header-band {
    background: var(--sk-purple);
    padding: 0.85rem 0 0.6rem;
}
.sk-header-title {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    font-family: var(--sk-font-brand);
    margin: 0;
    letter-spacing: 0.01em;
}
.sk-header-sub-inline {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.95rem;
    font-weight: 400;
    font-family: var(--sk-font-ui);
}

/* ─── Handlingsbjælke (_DagtilbudTabs) ───────────────────────────────────── */
/* Hvid strip direkte under header-band, over de første cards */
.sk-action-bar {
    background: #fff;
    border-bottom: 1px solid var(--sk-border);
    padding: 0.5rem 0;
}
.sk-action-bar-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* ─── Cards ────────────────────────────────────────────────────────────────── */
.card {
    border-radius: 6px !important;
    border: 0 !important;
    box-shadow: var(--sk-card-shadow) !important;
    background: #fff !important;
    margin-bottom: 1rem;
}
.card > .card-header {
    background: #fff !important;
    border-bottom: 1px solid var(--sk-border) !important;
    border-radius: 6px 6px 0 0 !important;
    padding: 0.8rem 1.1rem;
    min-height: auto;
}
/* INGEN !important på card-body padding — Bootstrap p-0 skal stadig virke */
.card > .card-body {
    padding: 1.1rem;
}
.card > .card-footer {
    background: var(--sk-cream-050) !important;
    border-top: 1px solid var(--sk-border) !important;
    border-radius: 0 0 6px 6px !important;
    padding: 0.45rem 1.1rem;
    font-size: var(--sk-font-xs);
    color: var(--sk-muted);
}
.card-title {
    font-size: 0.925rem !important;
    font-weight: 700 !important;
    font-family: var(--sk-font-brand) !important;
    color: var(--sk-text) !important;
    margin-bottom: 0;
}
.card-tools { margin-right: 0 !important; }

/* Faner (Bootstrap .nav-tabs/.card-header-tabs) — den aktive fane blandede sig usynligt ind
   i både card-headerens og indholdets hvide baggrund (begge #fff), og inaktive faner havde
   ingen visuel markering ud over tekstfarve, så det var svært at se at det overhovedet var
   faner (bekræftet af bruger 2026-09-17, fx FollowUp/Overblik). Gælder generelt alle
   .card-header-tabs i appen (også Worker/Detail.cshtml m.fl.), ikke kun ét sted. */
.card-header-tabs {
    border-bottom: 0 !important;
}
.card-header-tabs .nav-link {
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    color: var(--sk-muted);
    font-weight: 600;
    padding: 0.5rem 0.9rem;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.card-header-tabs .nav-link:hover {
    color: var(--sk-purple);
    background: var(--sk-lavender);
}
.card-header-tabs .nav-link.active {
    color: var(--sk-purple) !important;
    font-weight: 700;
    background: transparent !important;
    border-bottom-color: var(--sk-purple) !important;
}

/* Outline-kort */
.card.card-outline.card-primary   { border-top: 3px solid var(--sk-purple) !important; }
.card.card-outline.card-warning   { border-top: 3px solid var(--sk-warning) !important; }
.card.card-outline.card-secondary { border-top: 3px solid var(--sk-muted) !important; }

/* Forsiden: kanceller .content's globale padding-top for netop den primære spalte, så
   "Dagens skema"-kortet sidder lige under toplinjens dato-navigation uden mellemrum eller
   sin egen konkurrerende lilla topkant — toplinjens bundkant bliver dermed den ENE
   samlende streg, i stedet for to selvstændige streger der opleves som uafhængige af
   hinanden (rettet 2026-09-17, bekræftet af bruger). Kun den primære spalte (col-lg-8)
   trækkes op — sidespaltens indhold (Afventer behandling m.v.) er ikke dato-styret og
   beholder derfor sin normale afstand til toplinjen. */
.sk-home-primary-col {
    margin-top: -1rem;
}
.sk-card-flush-top.card.card-outline.card-primary {
    border-top: none !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}
/* Header'ens egne top-rundinger skal matche det nu firkantede kort, ellers viser der sig
   en lille synlig "kærv" i toppen hvor sidebaggrunden kigger igennem. */
.sk-card-flush-top.card > .card-header {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* Kompakt, sekundært kort — mindre header/celle-padding og skarpere titel end det
   primære kort på samme side, så hierarkiet mellem dem er tydeligt uden ekstra farve. */
.sk-card-compact > .card-header {
    padding: 0.55rem 0.9rem;
}
.sk-card-compact > .card-header .card-title {
    font-size: 0.85rem !important;
}
.sk-card-compact .sk-day-table td {
    padding: 0.15rem 0.6rem !important;
}

/* "Afventer behandling" — to enkle status-/genvejsrækker (Ønsker/Ændringer), bevidst
   IKKE stylet som to store primære handlinger: label + tydeligt antal + lille
   sekundær knap, samme rolige linje-mønster som .sk-tl-slot/.sk-day-worker-item. */
.sk-pending-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.9rem;
    border-top: 1px solid var(--sk-border);
}
.sk-pending-row:first-child { border-top: 0; }
.sk-pending-label {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--sk-text);
}
.sk-pending-count {
    min-width: 1.7rem;
    text-align: center;
}

/* Footer-indhold højrestillet (fx "Gem"-knappen i Dagbog-kortet) i stedet for
   Bootstraps standard venstrestillede blokplacering. */
.card > .card-footer.sk-card-footer-end {
    display: flex;
    justify-content: flex-end;
}

/* ─── Knapper: Skemagi-brand ──────────────────────────────────────────────── */
.btn {
    font-family: var(--sk-font-brand);
    border-radius: 6px !important;
}
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
    background-color: var(--sk-purple) !important;
    border-color:     var(--sk-purple) !important;
    color: var(--sk-cream) !important;
    box-shadow: var(--sk-btn-shadow) !important;
}
.btn-primary:hover:not(:disabled) {
    background-color: var(--sk-purple-900) !important;
    border-color:     var(--sk-purple-900) !important;
}
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--sk-purple-900) !important;
    border-color:     var(--sk-purple-900) !important;
    box-shadow: 0 0 0 3px rgba(54, 45, 106, 0.30) !important;
}
.btn-default {
    background: #fff;
    border-color: var(--sk-border);
    color: var(--sk-text);
    box-shadow: var(--sk-btn-shadow) !important;
}
.btn-default:hover:not(:disabled) { background: var(--sk-lavender); border-color: var(--sk-lavender); }
/* Sekundær knap-stil — samme brand-lilla som .btn-primary, men konturet i stedet for
   fyldt. Bruges til sekundære handlinger (fx skift-visning-knapper) på samme flade som
   primære .btn-primary-knapper, uden at konkurrere visuelt med dem. */
.btn-outline-primary,
.btn-outline-primary:not(:disabled):not(.disabled) {
    background-color: transparent !important;
    border-color: var(--sk-purple) !important;
    color: var(--sk-purple) !important;
    box-shadow: none !important;
}
.btn-outline-primary:hover:not(:disabled) {
    background-color: var(--sk-lavender) !important;
    border-color: var(--sk-purple) !important;
    color: var(--sk-purple-900) !important;
}
.btn-outline-primary:focus,
.btn-outline-primary:active {
    box-shadow: 0 0 0 3px rgba(54, 45, 106, 0.20) !important;
}
.btn-danger,
.btn-danger:not(:disabled):not(.disabled) {
    background-color: var(--sk-danger) !important;
    border-color: var(--sk-danger) !important;
    box-shadow: var(--sk-btn-shadow) !important;
}
.btn-danger:hover:not(:disabled) {
    background-color: var(--sk-danger-dark) !important;
    border-color: var(--sk-danger-dark) !important;
}
.btn-warning,
.btn-warning:not(:disabled):not(.disabled) {
    background-color: var(--sk-warning) !important;
    border-color: var(--sk-warning) !important;
    color: #fff !important;
    box-shadow: var(--sk-btn-shadow) !important;
}
.btn-warning:hover:not(:disabled) {
    background-color: var(--sk-warning-dark) !important;
    border-color: var(--sk-warning-dark) !important;
}

.btn-xs {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    padding: 0.22rem 0.65rem !important;
    border-radius: 6px !important;
    line-height: 1.45;
}

/* Opfølgning > Overblik: Puljetid/Ferie-fanernes udfold-knap ("+"/"−") sidder i en tætpakket
   sk-table-dense-række. Uden dette arver den .btn-xs' egen (rummelige) padding/line-height,
   som gør netop de rækker mærkbart højere end de almindelige tekst-rækker i Norm-fanen —
   selvom alle tre faner deler samme tabel-klasser (rettet 2026-08-11, bekræftet af bruger). */
.sk-overblik-table .sk-expand-toggle {
    padding: 0 !important;
    line-height: 1 !important;
}

/* ─── Badges ──────────────────────────────────────────────────────────────── */
.badge           { border-radius: 20px !important; }
.badge-primary   { background-color: var(--sk-purple)  !important; }
.badge-success   { background-color: var(--sk-success) !important; }
.badge-warning   { background-color: var(--sk-warning) !important; color: #fff !important; }
.badge-danger    { background-color: var(--sk-danger)  !important; }
.badge-info      { background-color: var(--sk-info)    !important; }
.badge-secondary { background-color: var(--sk-muted)   !important; }

/* ─── Spotlight-accent (varm pink) ────────────────────────────────────────────
   Lilla forbliver den strukturelle identitet (topbar, sidebar, kort-kant,
   primærknapper) — pink bruges bevidst KUN til: (1) det ene vigtigste tal på et
   kort, (2) kortets primære handling, (3) en reelt positiv/"alt er godt"-tilstand.
   Ikke en generel erstatning for badge-primary/btn-primary — brug sparsomt, ét
   sted pr. kort/skærm. Rettet 2026-08-16, se docs-eksempel i chat-historik. */
.sk-spotlight-badge {
    background: linear-gradient(135deg, var(--sk-pink) 0%, #c85a94 100%) !important;
    color: #fff !important;
}
.btn-spotlight,
.btn-spotlight:not(:disabled):not(.disabled) {
    background: linear-gradient(135deg, var(--sk-purple) 0%, var(--sk-pink) 100%) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 2px 5px rgba(223, 114, 171, 0.35) !important;
}
.btn-spotlight:hover:not(:disabled) { opacity: 0.92; }
.btn-spotlight:focus,
.btn-spotlight:active {
    box-shadow: 0 0 0 3px rgba(223, 114, 171, 0.30) !important;
}
.sk-positive-state {
    background: linear-gradient(135deg, var(--sk-pink-100) 0%, var(--sk-lavender-100) 100%);
    color: #7a3862;
    border: 1px solid #f0c9dd;
    border-radius: 6px;
    font-size: 0.78rem;
    padding: 0.5rem 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* ─── Utility: numerisk font til tal, tider og datoer ────────────────────── */
.sk-num {
    font-family: var(--sk-font-numeric) !important;
    font-variant-numeric: tabular-nums;
}

/* ─── Medarbejder/vikar-tabeller ──────────────────────────────────────────── */
.sk-worker-table {
    font-size: 0.875rem;
    font-family: var(--sk-font-work);
    border-collapse: collapse;
}
.sk-worker-table th,
.sk-worker-table td {
    padding: 0.42rem 0.65rem !important;
    vertical-align: middle !important;
    color: var(--sk-text);
    font-variant-numeric: tabular-nums;
}
.sk-worker-table thead th {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--sk-muted);
    background: var(--sk-label-bg) !important;
    border-bottom: 2px solid var(--sk-border) !important;
    border-top: 0 !important;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
/* Kun horisontale linjer — ingen venstre/højre-kanter */
.sk-worker-table.table-bordered {
    border: 0 !important;
}
.sk-worker-table.table-bordered thead th,
.sk-worker-table.table-bordered tbody td,
.sk-worker-table.table-bordered tbody th {
    border-left: 0 !important;
    border-right: 0 !important;
    border-color: var(--sk-border) !important;
}
.sk-worker-table.table-bordered thead th {
    border-top: 0 !important;
}
.sk-worker-table.table-bordered tbody td,
.sk-worker-table.table-bordered tbody th {
    border-top: 1px solid var(--sk-border) !important;
    border-bottom: 0 !important;
}

/* Tættere variant til Opfølgning > Medarbejdere — meget mindre luft end den almindelige.
   NB: .sk-table-smart (længere nede i filen) sætter tbody td/thead th-padding med en MERE
   specifik selector (element + 3 klasser) end en simpel ".sk-table-dense td" (1 klasse), og
   vandt derfor over denne regel uanset hvor lille en padding-værdi der blev sat her. Løst ved
   at matche/overgå samme specificitet nedenfor. */
.sk-table-dense th,
.sk-table-dense td {
    padding: 0.15rem 0.5rem !important;
    line-height: 1;
    font-size: 0.82rem;
}
.sk-table-dense thead th {
    padding-top: 0.2rem !important;
    padding-bottom: 0.2rem !important;
}
table.sk-worker-table.table-bordered.sk-table-smart.sk-table-dense tbody td {
    padding-top:    0.15rem !important;
    padding-bottom: 0.15rem !important;
}
/* Header-rækken (fra/til-perioderne) er dobbelt så høj som tbody-rækkerne (rettet 2026-07-08),
   så de længere "Uge X (år) - uge Y (år)"-labels ikke klippes af i højden. */
table.sk-worker-table.table-bordered.sk-table-smart.sk-table-dense thead th {
    padding-top:    0.2rem !important;
    padding-bottom: 0.2rem !important;
}

/* Fælles kolonnebredder på tværs af de separate <table>-elementer i Opfølgning >
   Medarbejdere, så kolonnerne står ud for hinanden fra sektion til sektion. */
.sk-followup-matrix {
    table-layout: fixed;
    width: 100%;
}
.sk-followup-matrix td,
.sk-followup-matrix th {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Header-cellerne (fra/til-periodelabels) må gerne ombrydes over to linjer i stedet for at
   klippes af med "..." — de er ofte for lange til kolonnebredden med ellipsis alene
   (rettet 2026-07-08, kombineret med den fordoblede thead-padding ovenfor). */
.sk-followup-matrix thead th {
    white-space: normal;
    line-height: 1.2;
}
/* "Overskriftsrækker" i tbody (Timer i alt/Beregnede timer/Normbalance, samt hver
   kontogruppes fed-skrift-summeringsrække) skal være tydeligt højere end de almindelige
   tætpakkede datarækker — ellers drukner de i den generelle tæthed (rettet 2026-07-08). */
/* NB: samme specificitetsfælde som .sk-table-dense (se ovenfor) — tbody td-reglen
   (element+4 klasser) vinder over en simpel ".sk-followup-matrix tr td" (2 klasser), så
   disse to regler skal matche/overgå samme specificitet for at padding rent faktisk slår
   igennem (ikke kun border-top, som ikke er i konflikt). */
table.sk-worker-table.table-bordered.sk-table-smart.sk-table-dense tbody tr.sk-row-heading td {
    padding-top:    0.5rem !important;
    padding-bottom: 0.5rem !important;
}
/* Lidt luft før en ny kontogruppes overskriftsrække (Konto 250, Særlig nul-dag, Ferie,
   Puljetid...), så de tætpakkede rækker stadig kan skelnes fra hinanden. */
table.sk-worker-table.table-bordered.sk-table-smart.sk-table-dense tbody tr.sk-group-separator td {
    border-top: 2px solid var(--sk-border) !important;
    padding-top: 0.75rem !important;
}

/* Kolonnebredder */
.sk-col-nr     { width: 2.8rem; }
.sk-col-hours  { width: 4.2rem; }
.sk-col-status { width: 5rem; }
.sk-col-action { width: 2.8rem; }
.sk-col-group  { width: 8rem; }

/* Gruppefarve-prik */
.sk-group-dot {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    margin-right: 0.3rem;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Gruppe-badge (hvid tekst på gruppefarve) */
.sk-group-badge {
    display: inline-block;
    padding: 0.15em 0.5em;
    border-radius: 3px;
    font-size: var(--sk-font-xs);
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

/* Afkortet tekst til stillings-kolonner */
.sk-text-truncate-sm {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Gruppe-separator: marker gruppeskift på selve første medarbejderrække. */
.sk-matrix-new-group > td {
    border-top: 1px solid #0b0a12 !important;
    background-image: linear-gradient(#0b0a12, #0b0a12);
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: top left;
}

/* Inaktive rækker */
.sk-row-inactive td { opacity: 0.45; }
.sk-badge-status    { font-size: 0.66rem; padding: 0.12em 0.38em; }
.sk-check           { font-size: 0.8rem; }

/* Dæmpet badge-variant — blød fyldfarve + kant i stedet for fuld farveflade, samme
   mønster som fx .sk-here-now-badge. Bruges hvor en status-badge gentages mange gange
   i samme tabel (fx Åben/Lukket pr. ugedag) og derfor skal virke tydelig, ikke skrigende. */
.sk-badge-soft.badge-success {
    background: var(--sk-success-bg) !important;
    color: var(--sk-success) !important;
    border: 1px solid var(--sk-success-border);
}
.sk-badge-soft.badge-secondary {
    background: var(--sk-cream-100) !important;
    color: var(--sk-muted) !important;
    border: 1px solid var(--sk-border);
}
.sk-badge-soft.badge-warning {
    background: var(--sk-warning-bg) !important;
    color: var(--sk-warning) !important;
    border: 1px solid var(--sk-warning);
}
.sk-badge-soft.badge-info {
    background: var(--sk-info-bg) !important;
    color: var(--sk-info) !important;
    border: 1px solid var(--sk-lavender-500);
}
.sk-badge-soft.badge-primary {
    background: var(--sk-lavender-100) !important;
    color: var(--sk-purple) !important;
    border: 1px solid var(--sk-lavender-500);
}
.sk-badge-soft.badge-danger {
    background: var(--sk-danger-bg) !important;
    color: var(--sk-danger) !important;
    border: 1px solid var(--sk-danger);
}

/* Farvefelt */
.sk-color-swatch {
    display: inline-block;
    width: 13px; height: 13px;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    vertical-align: middle;
}

/* Links i tabeller */
.sk-worker-table a,
.sk-form-table a {
    color: var(--sk-purple);
    text-decoration: none;
}
.sk-worker-table a:hover,
.sk-form-table a:hover {
    color: var(--sk-purple-900);
    text-decoration: underline;
}

/* ─── Formular-tabel (stamdata) ───────────────────────────────────────────── */
.sk-form-table {
    font-size: var(--sk-font-sm);
    border-collapse: collapse;
    width: 100%;
    margin: 0;
}
.sk-form-table th,
.sk-form-table td {
    padding: 0.22rem 0.6rem;
    border: 1px solid var(--sk-border);
    vertical-align: middle;
    line-height: 1.4;
}
.sk-form-table th {
    background: var(--sk-label-bg);
    font-weight: 600;
    font-size: var(--sk-font-xs);
    color: var(--sk-muted);
    white-space: nowrap;
    width: var(--sk-label-col-w);
}
.sk-form-table .sk-col3 {
    width: var(--sk-label-col-w);
    background: var(--sk-label-bg);
    font-weight: 600;
    font-size: var(--sk-font-xs);
    color: var(--sk-muted);
    white-space: nowrap;
}

/* Rolig definition-/detaljeoversigt — lægges oveni .sk-form-table (samme mønster som
   .sk-hours-table) hvor tabellen ER sidens hovedindhold, ikke en understøttende
   detalje. Kun vandrette rækkeskel i stedet for et fuldt gitter, mere luft pr. række,
   og tydeligere kontrast mellem den dæmpede label og den mørkere værdi. */
.sk-detail-table th,
.sk-detail-table td {
    border: none;
    border-bottom: 1px solid var(--sk-border);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.sk-detail-table tbody tr:last-child th,
.sk-detail-table tbody tr:last-child td {
    border-bottom: none;
}
.sk-detail-table th {
    background: transparent;
}
.sk-detail-table td {
    color: var(--sk-text);
    font-weight: 500;
}
/* Fremhævet label — fx Kaldenavn på kortet, da kaldenavnet er det navn Skemagi viser alle steder. */
.sk-form-table th.sk-label-strong {
    font-weight: 700;
    color: var(--sk-text);
}

/* ─── Toolbar (filterstriber/action-rækker over cards) ────────────────────── */
.sk-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

/* ─── Gruppefarver: blok i tabelcelle og farve-picker-UI ──────────────────── */
.sk-color-block {
    display: block;
    height: 1.5rem;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.sk-td-color { padding: 5px 8px !important; }

.sk-colorpicker-input {
    width: 4rem;
    height: 3rem;
    cursor: pointer;
    display: block;
    border: 1px solid var(--sk-border);
    border-radius: 0.35rem;
    padding: 3px;
}
.sk-colorpicker-hint {
    font-size: 0.65rem;
    width: 4rem;
    display: block;
    text-align: center;
    margin-top: 0.25rem;
    color: var(--sk-muted);
}
.sk-hex-input {
    width: 7rem;
    font-family: monospace;
    text-transform: lowercase;
}
.sk-group-preview-wrap {
    display: inline-block;
    padding: 0.5rem 1.4rem;
    border-radius: 0.35rem;
    min-width: 14rem;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.sk-group-preview-label {
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* ─── Kalender: uge-celle med rowspan ─────────────────────────────────────── */
.sk-week-cell {
    vertical-align: middle !important;
    background: var(--sk-label-bg) !important;
    color: var(--sk-muted);
    font-weight: 700;
    text-align: center;
}

/* ─── Form-inputs ─────────────────────────────────────────────────────────── */
.form-control,
.form-control-sm,
.input-group > .form-control,
.input-group > .form-control-sm,
.input-group-text {
    border-radius: 5px !important;
}
.input-group > .form-control:not(:last-child),
.input-group > .form-control-sm:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-append > .btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-prepend > .btn {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* ─── Bootstrap custom-switch farve → lilla i stedet for blå ─────────────── */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--sk-purple);
    border-color:     var(--sk-purple);
}
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(54, 45, 106, 0.25);
}
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--sk-purple-300);
}

/* ─── Toggle-visning i lister (read-only boolean) ────────────────────────── */
.sk-toggle {
    display: inline-block;
    width: 2.1rem;
    height: 1.1rem;
    border-radius: 0.55rem;
    vertical-align: middle;
    position: relative;
    flex-shrink: 0;
    transition: background 0.12s;
}
.sk-toggle::after {
    content: '';
    display: block;
    width: 0.78rem;
    height: 0.78rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    position: absolute;
    top: 0.16rem;
    transition: left 0.12s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.sk-toggle.sk-on  { background: var(--sk-purple); }
.sk-toggle.sk-off { background: var(--sk-lavender-500); }
.sk-toggle.sk-on::after  { left: calc(2.1rem - 0.78rem - 0.16rem); }
.sk-toggle.sk-off::after { left: 0.16rem; }
.sk-toggle-link { display: inline-flex; text-decoration: none; cursor: pointer; }
.sk-toggle-link:hover .sk-toggle { opacity: 0.75; }

/* ─── Vikar-forbrug: udvidelig ugetabel ───────────────────────────────────── */
.sk-usage-summary {
    border-bottom: 1px solid var(--sk-border);
    background: var(--sk-label-bg);
}
.sk-usage-summary-val { font-size: 1.05rem; color: var(--sk-text); }
.sk-usage-week-row { cursor: pointer; }
.sk-usage-week-row:hover td { background-color: var(--sk-lavender-300) !important; }
.sk-usage-week-current td { background-color: var(--sk-lavender-100) !important; }
.sk-usage-toggle-icon {
    color: var(--sk-muted);
    font-size: 0.68rem;
    transition: transform 0.12s;
}
.sk-usage-week-open .sk-usage-toggle-icon { transform: rotate(90deg); }
.sk-usage-day-table td {
    padding: 0.35rem 0.65rem !important;
    background: var(--sk-label-bg);
    border-top: 1px solid var(--sk-border) !important;
}

/* ─── "Smart tabel" — luftig rækkeafstand, header uden baggrund (ramme i
   stedet), tydeligt klikbart rækkelink. Tilføj .sk-table-smart til
   <table class="... sk-worker-table table-bordered ...">, og .sk-row-link
   på rækkens primære link, for at få stilen. Afprøvet på grundskema-
   oversigten (Master/Index + Inactive), derefter faktiske planer (Journal). ── */
table.sk-worker-table.table-bordered.sk-table-smart tbody td {
    padding-top:    0.85rem !important;
    padding-bottom: 0.85rem !important;
}
table.sk-worker-table.table-bordered.sk-table-smart thead th {
    background:     transparent !important;
    border-top:     1px solid var(--sk-border) !important;
    border-bottom:  2px solid var(--sk-border) !important;
    padding-top:    0.75rem !important;
    padding-bottom: 0.75rem !important;
}
/* Undgå dobbelt streg: første datarække har i forvejen sin egen border-top */
table.sk-worker-table.table-bordered.sk-table-smart tbody tr:first-child td {
    border-top: 0 !important;
}
table.sk-worker-table.table-bordered.sk-table-smart tbody td a.sk-row-link,
table.sk-worker-table.table-bordered.sk-table-smart tbody td.sk-row-link {
    color: var(--sk-purple-500) !important;
    font-weight: 700 !important;
}
table.sk-worker-table.table-bordered.sk-table-smart tbody td a.sk-row-link:hover,
table.sk-worker-table.table-bordered.sk-table-smart tbody td.sk-row-link:hover {
    color: var(--sk-purple-900) !important;
    text-decoration: underline;
}

/* Medarbejder-oversigt (/Worker): mindre luft mellem rækkerne end den delte
   sk-table-smart-standard ovenfor — listen har mange rækker og skal være mere kompakt. */
.sk-worker-list-page table.sk-worker-table.table-bordered.sk-table-smart tbody td {
    padding-top:    0.3rem !important;
    padding-bottom: 0.3rem !important;
}

/* Faktiske planer > Overblik + Ændringer/Ønsker: strammere rækker end den delte
   sk-table-smart-standard — 0.3rem var stadig for luftigt (bekræftet af bruger
   2026-08-13), skåret yderligere ned til 0.15rem. Knapperne i "Handlinger"/
   godkend-kolonnerne (.btn-xs, line-height 1.45) var den reelle højde-synder ud
   over selve cellepaddingen, så deres linjehøjde strammes samtidig, scoped til
   disse to sider (rører ikke .btn-xs andre steder i appen). */
.sk-journal-list-page table.sk-worker-table.table-bordered.sk-table-smart tbody td,
.sk-approval-page table.sk-worker-table.table-bordered.sk-table-smart tbody td {
    padding-top:    0.15rem !important;
    padding-bottom: 0.15rem !important;
}
.sk-journal-list-page .btn-xs,
.sk-approval-page .btn-xs {
    line-height: 1.1 !important;
}

/* Faktiske planer > Overblik: den aktuelle uge (samme lilla som dagens dato i ugeplanen). */
.sk-journal-list-page #tblJournals tbody tr.sk-current-week > td {
    background-color: var(--sk-lavender-100);
}
.sk-journal-list-page #tblJournals tbody tr.sk-current-week:hover > td {
    background-color: var(--sk-lavender-300);
}
.sk-journal-list-page #tblJournals tbody tr.sk-current-week > td:first-child {
    box-shadow: inset 4px 0 0 var(--sk-purple);
}
.sk-current-week-badge {
    background-color: var(--sk-purple);
    color: #fff;
    font-weight: 600;
}

/* Ændringer/Ønsker (Approval.cshtml): 9 smalle kolonner i én tabel — den delte
   .sk-worker-table-vandrette padding (0.65rem pr. side) presser dem unødigt langt
   fra hinanden. */
.sk-approval-page table.sk-worker-table.table-bordered.sk-table-smart th,
.sk-approval-page table.sk-worker-table.table-bordered.sk-table-smart td {
    padding-left:  0.45rem !important;
    padding-right: 0.45rem !important;
}

/* Opsætning > Kalender: op til 366 rækker (én pr. dag i året) — samme tætte
   rækkepadding som de andre høj-rækkeantal-lister. */
.sk-calendar-list-page table.sk-worker-table.table-bordered.sk-table-smart tbody td {
    padding-top:    0.15rem !important;
    padding-bottom: 0.15rem !important;
}

/* ─── Stamdata-sektion (medarbejderdetalje) ───────────────────────────────── */
.sk-stamdata {
    border-radius: 6px;
    box-shadow: var(--sk-card-shadow);
    border-top: 3px solid var(--sk-purple);
    margin-bottom: 0.75rem;
    background: #fff;
    overflow: hidden;
}
.sk-stamdata-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1.1rem;
    background: #fff;
    border-bottom: 1px solid var(--sk-border);
}
.sk-stamdata-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--sk-text);
    margin: 0;
}
.sk-stamdata-meta {
    font-size: 0.68rem;
    color: var(--sk-muted);
    padding: 0.3rem 1.1rem;
    background: var(--sk-label-bg);
    border-top: 1px solid var(--sk-border);
}

/* ─── Indre faner (detalje-views) ─────────────────────────────────────────── */
/* Lilla topkant (samme tone/vægt som .card-outline.card-primary) + skygge på selve
   fane-stribe, og en tydelig lys "pille"-baggrund på den aktive fane, så hele
   faneblok+indhold læses som ét sammenhængende kort med rigtige, klikbare faner —
   ikke bare dæmpet tekst med en tynd streg under (rettet 2026-08-13, bekræftet af
   bruger: "ikke helt tydeligt at det er faner"). */
.sk-detail-tabs {
    border-bottom: 1px solid var(--sk-border);
    border-top: 3px solid var(--sk-purple);
    box-shadow: var(--sk-card-shadow);
    margin-bottom: 0;
    background: #fff;
    border-radius: 6px 6px 0 0;
    padding: 0.4rem 0.7rem 0;
    display: flex;
    gap: 0.2rem;
}
.sk-detail-tabs .nav-link {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.55rem 0.9rem;
    color: var(--sk-muted);
    border: none;
    border-radius: 6px 6px 0 0 !important;
    background: transparent;
    transition: background 0.12s, color 0.12s;
}
.sk-detail-tabs .nav-link:hover {
    color: var(--sk-purple);
    background: var(--sk-lavender-200);
}
.sk-detail-tabs .nav-link.active {
    color: var(--sk-purple);
    font-weight: 700;
    background: var(--sk-lavender-100);
}

/* Tab-indhold */
.sk-detail-tab-body {
    border: 0;
    border-radius: 0 0 6px 6px;
    box-shadow: var(--sk-card-shadow);
    background: #fff;
    margin-bottom: 0.75rem;
    overflow: hidden;
}
.sk-detail-tab-body .tab-pane { padding: 0; }

/* Toolbar-bjælker i tab-indhold */
.sk-tab-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 1.1rem;
    background: var(--sk-label-bg);
    border-bottom: 1px solid var(--sk-border);
    min-height: 38px;
}
.sk-tab-toolbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    padding: 0.45rem 1.1rem;
    background: var(--sk-label-bg);
    border-bottom: 1px solid var(--sk-border);
    min-height: 38px;
}

/* ─── Footer ──────────────────────────────────────────────────────────────── */
.main-footer.sk-footer {
    background: var(--sk-cream) !important;
    border-top: 1px solid var(--sk-border) !important;
    color: var(--sk-muted) !important;
    font-size: 0.74rem !important;
    padding: 0.55rem 1.5rem !important;
    box-shadow: none !important;
    min-height: auto !important;
}

/* ─── Login-side ──────────────────────────────────────────────────────────── */
.sk-login-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: clamp(1rem, 3vw, 2.5rem);
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 16%, rgba(220, 213, 249, 0.9), transparent 29rem),
        radial-gradient(circle at 88% 84%, rgba(223, 114, 171, 0.18), transparent 25rem),
        var(--sk-cream-100);
}
.sk-auth-page,
.sk-auth-content {
    min-height: 100vh !important;
}
.sk-auth-content {
    margin-left: 0 !important;
    background: transparent !important;
}
.sk-login-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(23rem, 0.92fr);
    width: min(100%, 68rem);
    min-height: 39rem;
    overflow: hidden;
    border: 1px solid rgba(54, 45, 106, 0.1);
    border-radius: 1.5rem;
    background: #fff;
    box-shadow: 0 2rem 5rem rgba(54, 45, 106, 0.16);
}
.sk-login-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(2.25rem, 5vw, 4.5rem);
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 90% 5%, rgba(223, 114, 171, 0.65), transparent 17rem),
        linear-gradient(145deg, var(--sk-purple-900), var(--sk-purple) 64%, #544682);
}
.sk-login-brand::after {
    position: absolute;
    right: -7rem;
    bottom: -9rem;
    width: 23rem;
    height: 23rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    box-shadow:
        0 0 0 3.5rem rgba(255, 255, 255, 0.035),
        0 0 0 7rem rgba(255, 255, 255, 0.025);
    content: "";
}
.sk-login-brand-logo {
    position: relative;
    z-index: 1;
    width: 10.5rem;
    height: auto;
}
.sk-login-brand-copy {
    position: relative;
    z-index: 1;
    max-width: 29rem;
}
.sk-login-eyebrow {
    margin: 0 0 0.75rem;
    color: var(--sk-pink);
    font-family: var(--sk-font-brand);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}
.sk-login-brand-copy h1 {
    margin: 0 0 1.25rem;
    color: #fff;
    font-family: var(--sk-font-brand);
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.04em;
}
.sk-login-brand-copy > p:last-child {
    max-width: 25rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 1rem;
    line-height: 1.65;
}
.sk-login-brand-version {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.sk-login-panel {
    display: flex;
    align-items: center;
    padding: clamp(2rem, 5vw, 4.5rem);
}
.sk-login-form {
    width: 100%;
    max-width: 23rem;
    margin: 0 auto;
}
.sk-login-mobile-logo {
    display: none;
    width: 9rem;
    margin-bottom: 2.5rem;
}
.sk-login-form h2 {
    margin: 0 0 0.65rem;
    color: var(--sk-purple);
    font-family: var(--sk-font-brand);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}
.sk-login-intro {
    margin-bottom: 2rem;
    color: var(--sk-muted);
}
.sk-login-form label {
    margin-bottom: 0.45rem;
    color: var(--sk-text);
    font-family: var(--sk-font-brand);
    font-size: 0.78rem;
    font-weight: 800;
}
.sk-login-input {
    position: relative;
}
.sk-login-input > i {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 0.9rem;
    color: var(--sk-purple-300);
    transform: translateY(-50%);
    pointer-events: none;
}
.sk-login-input .form-control {
    height: 3.1rem;
    padding-left: 2.75rem;
    border: 1px solid var(--sk-border);
    border-radius: 0.65rem;
    background: var(--sk-cream-050);
    color: var(--sk-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.sk-login-input .form-control:focus {
    border-color: var(--sk-purple-500);
    background: #fff;
    box-shadow: 0 0 0 0.2rem rgba(93, 84, 136, 0.14);
}
.sk-login-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    min-height: 3.1rem;
    margin-top: 1.75rem;
    border-radius: 0.65rem !important;
    font-family: var(--sk-font-brand);
    font-weight: 800;
}
.sk-login-submit i {
    transition: transform 0.15s ease;
}
.sk-login-submit:hover i {
    transform: translateX(0.2rem);
}
.sk-login-help {
    margin: 2rem 0 0;
    color: var(--sk-muted);
    font-size: 0.75rem;
    line-height: 1.55;
}

@media (max-width: 767.98px) {
    .sk-login-wrapper {
        align-items: flex-start;
        padding: 0;
        background: #fff;
    }
    .sk-login-shell {
        display: block;
        min-height: 100vh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .sk-login-brand {
        display: none;
    }
    .sk-login-panel {
        min-height: 100vh;
        padding: 2rem 1.5rem;
    }
    .sk-login-mobile-logo {
        display: block;
    }
}

/* ─── Tenant-valgkort ─────────────────────────────────────────────────────── */
.sk-tenant-card {
    border-radius: 6px !important;
    border: 0 !important;
    box-shadow: var(--sk-card-shadow) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sk-tenant-card:hover {
    transform: translateY(-2px);
    box-shadow: rgba(136, 152, 170, 0.28) 0px 8px 32px 0px !important;
}

/* ─── Check-ikon farve (text-primary → lilla) ─────────────────────────────── */
.text-primary { color: var(--sk-purple) !important; }

/* ─── Form-tabel gruppeoverskrift ────────────────────────────────────────── */
.sk-form-group-header td {
    background: var(--sk-label-bg) !important;
    border-top: 1px solid var(--sk-border) !important;
    border-bottom: 1px solid var(--sk-border) !important;
    padding: 0.2rem 0.6rem !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    color: var(--sk-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

/* ─── Card-footer metadata (stamdata, åbningstider) ──────────────────────── */
.sk-meta-footer {
    background: var(--sk-label-bg) !important;
    border-top: 1px solid var(--sk-border) !important;
    padding: 0.35rem 1rem !important;
    font-size: 0.68rem !important;
    color: var(--sk-muted) !important;
    line-height: 1.5;
}
.sk-meta-sep {
    margin: 0 0.4rem;
    opacity: 0.5;
}
.sk-meta-id {
    font-family: monospace;
    font-size: 0.64rem;
    opacity: 0.7;
    word-break: break-all;
}
.sk-hist-toggle { font-size: 0.72rem !important; white-space: nowrap; }

/* Åbningstider-tabel: tre data-kolonner + status. Sidens tydeligste arbejdskort —
   lettere kanter (kun vandret rækkeskel i stedet for et fuldt gitter), mere luft pr.
   række, og en diskret lavendel header-baggrund i stedet for den almindelige
   .sk-form-table-labelbaggrund (rettet 2026-08-13). */
.sk-hours-table th:first-child { width: 5.5rem; }
.sk-hours-table th:nth-child(2),
.sk-hours-table th:nth-child(3) { width: 5rem; }
.sk-hours-table td,
.sk-hours-table th { font-size: var(--sk-font-sm) !important; }
.sk-hours-table th,
.sk-hours-table td {
    border: none !important;
    border-bottom: 1px solid var(--sk-border) !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}
.sk-hours-table tbody tr:last-child th,
.sk-hours-table tbody tr:last-child td {
    border-bottom: none !important;
}
.sk-hours-table thead th {
    background: var(--sk-lavender-100) !important;
    color: var(--sk-purple);
    border-bottom: 2px solid var(--sk-lavender-500) !important;
}

/* ─── Stat-kort (Forside og Opfølgning) ───────────────────────────────────── */
.sk-stat-card {
    border-radius: 6px !important;
    border: 0 !important;
    box-shadow: var(--sk-card-shadow) !important;
    margin-bottom: 1rem;
    overflow: hidden;
}
.sk-stat-card .card-body {
    padding: 1.25rem 1.1rem 0.9rem !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.sk-stat-card .card-footer {
    background: var(--sk-label-bg) !important;
    border-top: 1px solid var(--sk-border) !important;
    padding: 0.5rem 1.1rem !important;
    display: block;
    text-decoration: none;
}
.sk-stat-card .card-footer:hover {
    background: var(--sk-border) !important;
    color: var(--sk-purple) !important;
}
.sk-stat-icon {
    font-size: 1.4rem;
    margin-bottom: 0.4rem;
    opacity: 0.85;
}
.sk-stat-value {
    font-family: var(--sk-font-numeric);
    font-variant-numeric: tabular-nums;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--sk-text);
}
.sk-stat-label {
    font-size: 0.74rem;
    color: var(--sk-muted);
    margin-top: 0.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ─── Grundskema-matrix ────────────────────────────────────────────────────── */
.sk-matrix-table {
    font-size: 0.78rem;
    white-space: nowrap;
}
.sk-matrix-table th,
.sk-matrix-table td {
    padding: 0.18rem 0.7rem !important;
    vertical-align: middle !important;
    border-color: var(--sk-border) !important;
    border-left:  none !important;
    border-right: none !important;
}
.sk-matrix-table tr.sk-matrix-new-group > td {
    border-top: 1px solid #0b0a12 !important;
    background-image: linear-gradient(#0b0a12, #0b0a12);
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: top left;
    padding-top: 0.28rem !important;
}
.sk-matrix-table tbody tr:has(+ tr.sk-matrix-new-group) > td {
    padding-bottom: 0.28rem !important;
}
.sk-matrix-table thead th {
    background: var(--sk-label-bg) !important;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--sk-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--sk-border) !important;
}
.sk-matrix-name-col  { width: 6rem; }
.sk-matrix-day-col   { width: 4.9rem; }
.sk-matrix-table th.sk-matrix-day-col {
    padding-left: 0.65rem !important;
    padding-right: 0.65rem !important;
}
.sk-matrix-table td.sk-matrix-cell {
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
}

/* Dag-kolonneoverskrifter: fed og mørkere end norm-headere */
.sk-day-head {
    color: #6f6880 !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.sk-day-head .sk-jp-day-name,
.sk-day-head .sk-jp-day-hours {
    color: #6f6880 !important;
    font-weight: 700 !important;
}

/* Norm-kolonne: smal center (planlagt/norm) */
.sk-matrix-norm-col  { width: 4.8rem; min-width: 4.2rem; max-width: 5.5rem; font-size: 0.68rem; }

/* Diff-kolonner: smallere, højrejusterede tal */
.sk-matrix-diff-col  { width: 3.2rem; min-width: 3rem; max-width: 4rem; font-size: 0.68rem; }

/* Gruppe-kolonne */
.sk-matrix-group-col  { width: 3.8rem; min-width: 3.2rem; max-width: 4.6rem; }
.sk-matrix-group-cell {
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sk-group-badge {
    display: inline-block;
    max-width: 100%;
    padding: 0.06rem 0.3rem;
    border-radius: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* Type-kolonne: smal, centreret forkortelse */
.sk-matrix-type-col  { width: 2.8rem; min-width: 2.8rem; }
.sk-matrix-type-cell { font-size: 0.68rem; }
.sk-type-badge {
    display: inline-block;
    background: var(--sk-label-bg);
    border: 1px solid var(--sk-border);
    border-radius: 3px;
    font-size: 0.66rem;
    font-weight: 700;
    padding: 0.05em 0.3em;
    color: var(--sk-muted);
    letter-spacing: 0.03em;
}

/* Navnecelle: gruppenavn (farvet) + medarbejdernavn + titel */
.sk-matrix-name-cell {
    overflow: hidden;
    max-width: 10rem;
    min-width: 7rem;
    padding: 0.25rem 0.5rem !important;
    vertical-align: middle !important;
    color: #201f2e;
    font-weight: 700;
}
.sk-name-group {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    color: #fff !important;
    padding: 1px 6px;
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin-bottom: 2px;
    line-height: 1.4;
}
.sk-name-primary {
    font-weight: 600;
    font-size: 0.80rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.sk-name-secondary {
    font-size: 0.68rem;
    color: var(--sk-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* Klikbare celler */
.sk-matrix-cell {
    transition: background 0.08s;
    user-select: none;
}
.sk-matrix-table .sk-matrix-cell {
    box-shadow: inset -4px 0 0 #fff;
}
.sk-matrix-table tr.sk-matrix-new-group > td.sk-matrix-cell {
    box-shadow: none;
}
/* background-color (ikke background-shorthand): shorthanden nulstiller også
   background-image, som er den linje der markerer gruppeskift (se
   tr.sk-matrix-new-group > td ovenfor) — det fik stregen til at forsvinde ved
   hover på en celle i gruppens første række (bekræftet af bruger 2026-07-17). */
.sk-matrix-cell:hover { background-color: transparent !important; }
.sk-matrix-cell.sk-cell-selected {
    outline: 2px solid var(--sk-pink);
    outline-offset: -4px;
}
.sk-matrix-cell.sk-cell-selected:has(.sk-cell-content) {
    outline: none;
}
.sk-matrix-cell.sk-cell-selected .sk-cell-content {
    border-color: var(--sk-pink);
}
/* Malet med "mal/kopiér"-værktøjet (Boks 3), endnu ikke committet til serveren */
.sk-matrix-cell.sk-cell-painted {
    background: rgba(255, 193, 7, 0.22) !important;
    outline: 2px dashed rgba(255, 152, 0, 0.8);
    outline-offset: -2px;
}
/* Synligt praj når man forsøger at male uden valgt konto i Boks 3 */
.sk-paint-missing { outline: 2px solid #dc3545 !important; }
.sk-time-invalid {
    border-color: var(--sk-danger) !important;
    box-shadow: 0 0 0 2px rgba(196, 66, 90, 0.12) !important;
}
.sk-time-error {
    min-height: 0.85rem;
    margin-top: 0.12rem;
    color: var(--sk-danger);
    font-size: 0.68rem;
    line-height: 1.15;
}

/* Indhold i celler */
.sk-matrix-cell { text-align: center !important; }
.sk-cell-content {
    display: inline-block;
    max-width: 100%;
    padding: 0.05rem 0.18rem;
    border: 2px solid transparent;
    border-radius: 2px;
    text-align: center;
    vertical-align: middle;
}
.sk-cell-times {
    /* block (ikke inline-block): når en celle har flere vagter, skal hvert
       tidsrum stå på sin egen linje i stedet for at flyde ved siden af
       hinanden og blive klippet af cellens bredde (bekræftet af bruger
       2026-07-17, fx Nadja onsdag i uge 40 med 2 vagter). */
    display: block;
    font-family: var(--sk-font-numeric);
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    font-weight: 400;
    color: #525f7f;
    letter-spacing: normal;
    text-align: center;
    line-height: 1.5;
    min-width: 4.15rem;
    padding: 0.08rem 0.22rem;
    border-radius: 2px;
}
.sk-cell-empty {
    display: block;
    color: var(--sk-border);
    font-size: 0.7rem;
    text-align: center;
}
.sk-cell-account-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.15em 0.4em;
    border-radius: 3px;
    font-weight: 600;
}

/* Plus/minus-knapper i grundskema-opsætning */
.sk-mjw-btn {
    padding: 0.1rem 0.4rem !important;
    font-size: 0.68rem !important;
    line-height: 1.4;
}

/* Note under tid i matrixcelle */
.sk-cell-note {
    display: block;
    width: 100%;
    font-size: 0.60rem;
    color: var(--sk-muted);
    text-align: center;
    line-height: 1.2;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Norm-celle: tabular-nums for alignment */
.sk-norm-head { font-size: 0.62rem !important; }
.sk-norm-cell {
    font-family: var(--sk-font-numeric);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

/* ─── Ugepagination med dato-labels ──────────────────────────────────────── */
.sk-week-pagination { gap: 3px; }
.sk-week-link,
.sk-week-active {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    padding: 0.2rem 0.5rem !important;
    min-width: 3.4rem;
    text-align: center;
    border-radius: 4px !important;
    line-height: 1.1;
}
.page-item.active .sk-week-active {
    background: var(--sk-purple) !important;
    border-color: var(--sk-purple) !important;
    color: #fff !important;
}
.sk-week-link { color: var(--sk-purple) !important; }
.sk-week-link:hover { background: rgba(54, 45, 106, 0.06); }

/* Uge-nummer: fremhævet */
.sk-week-num {
    font-size: 0.82rem;
    font-weight: 700;
    display: block;
}
/* Dato-interval: lille og dæmpet */
.sk-week-dates {
    font-size: 0.60rem;
    font-weight: 400;
    opacity: 0.72;
    display: block;
    white-space: nowrap;
}
.page-item.active .sk-week-dates { opacity: 0.85; }

/* ─── Hurtigtider-bælte (under ugepaginationen) ──────────────────────────── */
.sk-quicktime-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.45rem 1.1rem 0.55rem;
    border-top: 1px solid var(--sk-border);
    background: var(--sk-label-bg);
}
.sk-quicktime-label {
    margin-right: 0.1rem;
    opacity: 0.7;
}

/* Hurtigtids-knapper */
.sk-quicktime-btn {
    background: linear-gradient(135deg, var(--sk-purple) 0%, var(--sk-pink) 100%);
    color: #fff !important;
    border: none;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    letter-spacing: -0.01em;
    box-shadow: var(--sk-btn-shadow);
    transition: opacity 0.12s;
}
.sk-quicktime-btn:hover { opacity: 0.88; }
.sk-qt-count {
    opacity: 0.72;
    font-size: 0.65em;
    margin-left: 0.25em;
}

/* Timer-badge i detaljepanel */
.sk-hours-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 1.6rem;
    font-family: var(--sk-font-numeric);
    font-variant-numeric: tabular-nums;
    min-width: 5rem;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--sk-purple-300);
    white-space: nowrap;
    text-align: center;
    background: var(--sk-label-bg);
    border: 1px solid var(--sk-border);
    border-radius: 3px;
    padding: 0 0.3rem;
}

/* ─── Kompakt redigeringstrip (over matrixtabel) ─────────────────────────── */
.sk-jpd-strip { border-color: var(--sk-border); }
.sk-jpd-who {
    flex-shrink: 0;
    width: 9rem;
}
/* Samme 9px som .sk-jpd-fields-grid, så kaldenavnet flugter med Konto/Tid-rækken
   i Detaljer/Kopi funktion (bekræftet af bruger 2026-07-17). Padding (ikke margin)
   for at undgå samme margin-collapse-fælde som der. */
.sk-jpd-who-body {
    padding-top: 9px;
}
.sk-jpd-date {
    margin-bottom: 0.1rem;
    color: var(--sk-muted);
    font-family: var(--sk-font-numeric);
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.sk-jpd-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--sk-text);
    line-height: 1.3;
}
.sk-jpd-sep {
    flex-shrink: 0;
    width: 1px;
    background: var(--sk-border);
    align-self: stretch;
    margin: 0.1rem 0;
}
.sk-jpd-shifts { flex-shrink: 0; }
.sk-jpd-field {
    display: flex;
    flex-direction: column;
}
.sk-jpd-label {
    font-size: 0.60rem;
    font-weight: 700;
    color: var(--sk-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.1rem;
    white-space: nowrap;
}
/* Fælles fast højde på boks-overskrifterne (Detaljer / Kopi funktion), så
   felterne herunder starter i samme vandrette linje i begge bokse, uanset
   at Kopi funktion-overskriften indeholder en switch og Detaljer kun tekst. */
.sk-jpd-box-header {
    display: flex;
    align-items: center;
    height: 1.5rem;
    margin-bottom: 0.25rem;
}
/* Detaljer-boksen som grid: Konto/Tid på linje 1, Gruppe/Bemærkning på linje 2,
   så Bemærkning flugter med Gruppe uanset at Tid-feltet (pga. fejlbeskeden under)
   er højere end Konto-feltet — grid'et synkroniserer rækkehøjden på tværs af
   kolonnerne. Gem spænder begge rækker og centreres lodret imellem dem. */
.sk-jpd-fields-grid {
    display: grid;
    grid-template-columns: 10rem max-content max-content;
    grid-template-areas:
        "konto  tid    gem"
        "gruppe bemaerkning gem";
    column-gap: 0.5rem;
    row-gap: 0.25rem;
    align-items: start;
    /* Kopi funktion-boksen (.sk-jpd-empty-section) har padding-top før sin
       Konto/Tid-række starter — Detaljer-formularen har ingen tilsvarende padding,
       så rykkes rækken her ned for at flugte. Brug padding (ikke margin) da margin
       ellers kollapser med .sk-jpd-box-header's margin-bottom og giver for lidt
       plads (målt med DevTools 2026-07-17: krævede 9px, ikke 8px). */
    padding-top: 9px;
}
.sk-jpd-gem {
    grid-area: gem;
    align-self: center;
}
/* Kopi funktion-boksen som samme slags grid, med samme feltopbygning (Konto +
   Tid på linje 1) som Detaljer-boksen ovenfor, så de to bokse flugter i højden.
   Første kolonne er fast 10rem — samme som i .sk-jpd-fields-grid — så afstanden
   mellem Konto og Tid bliver ens i begge bokse (bekræftet af bruger 2026-07-17). */
.sk-jpd-paint-grid {
    display: grid;
    /* max-content (ikke auto) på 2. kolonne: .sk-jpd-empty-section har flex:1 1 0
       og bliver derfor bredere end sit indhold — en "auto"-kolonne suger al den
       ekstra plads til sig, så Bemærkning (width:100%) blev unaturligt bred.
       max-content låser kolonnen til Tid-rækkens faktiske bredde i stedet
       (bekræftet af bruger 2026-07-17: "bemærkningsfeltet ... er meget stor"). */
    grid-template-columns: 10rem max-content;
    grid-template-areas:
        "konto    tid"
        "checkbox bemaerkning";
    column-gap: 0.5rem;
    row-gap: 0.25rem;
    align-items: start;
}
.sk-jpd-acctgrp { width: 10rem; }
.sk-jpd-time    { width: 5rem !important; }
/* Fylder hele Tid-rækkens bredde ud (i stedet for et fast min/max-interval),
   så Bemærkning flugter pænt med start/slut/timeantal ovenover (bekræftet af
   bruger 2026-07-17: "lad bemærkningen fylde mere så der kommer harmoni"). */
.sk-jpd-note    { width: 100%; box-sizing: border-box; }

/* "Flash"-effekt: viser hvilket felt der lige er blevet sat programmatisk (fx ved
   klik på en hurtigtid), så ændringen er tydelig selvom feltet ligger et stykke
   væk fra knappen man klikkede (bekræftet af bruger 2026-07-17). */
@keyframes sk-flash-pulse {
    0%   { background-color: var(--sk-pink-100); box-shadow: 0 0 0 2px var(--sk-pink-300); }
    100% { background-color: transparent; box-shadow: 0 0 0 2px transparent; }
}
.sk-flash {
    border-radius: 4px;
    animation: sk-flash-pulse 0.8s ease-out;
}

/* Mal/kopiér-boks i detaljestrib — egen baggrund adskiller den visuelt fra Boks 2.
   Padding rettet 2026-07-10 (bekræftet af bruger): uden den sad indholdet helt ud til
   kanten af den stiplede kant, så fx timer-badgen (.sk-hours-badge) ramte/overskred
   kanten i stedet for at have luft omkring sig. min-width sat op til 19rem samme dag
   (bekræftet af bruger, opfølgning) — boksens indhold (konto på 10rem + to tidsfelter
   på 5rem hver + timer-badge på 3.8rem) krævede mere plads end den tidligere 6-10rem
   gav den, selv med flex:1 1 0 på den omsluttende div (sat inline i viewet).*/
.sk-jpd-empty-section {
    border: 1px dashed var(--sk-border);
    border-radius: 4px;
    min-width: 19rem;
    padding: 0.5rem 0.6rem;
    background: var(--sk-label-bg);
}

/* Formular-inputs i detaljestrib: ensartet højde og lille skrift */
.sk-jpd-strip form .form-control-sm {
    font-size: 0.72rem;
    padding: 0.15rem 0.3rem;
    height: 1.6rem;
    line-height: 1.3;
    box-sizing: border-box;
}
.sk-jpd-strip form .btn-sm {
    font-size: 0.72rem;
    padding: 0.18rem 0.5rem;
}

/* Kompakt matrix-tabel: tæt cellemargen + clip overflow */
.sk-jp-table.table-sm td,
.sk-jp-table.table-sm th {
    padding: 0.18rem 0.25rem !important;
    overflow: hidden;
}

/* ─── Matrix-celler: åbningstid/lukketid-indikation ──────────────────────── */
/* Grøn: vagten starter præcis ved åbningstiden */
/* Orange: vagten slutter præcis ved lukketiden  */
/* Lilla: begge rammer (dækker hele perioden)    */
.sk-cell-opens  { background: rgba(45, 206, 137, 0.22) !important; }
.sk-cell-closes { background: rgba(251, 99,  64, 0.18) !important; }
.sk-cell-both   { background: rgba(54, 45, 106, 0.15) !important; }

/* ─── Matrix-footer (opsummering) ────────────────────────────────────────── */
.sk-matrix-table tfoot tr td {
    border-top: 2px solid var(--sk-border) !important;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    background: var(--sk-label-bg) !important;
}
.sk-matrix-footer-label {
    font-weight: 700;
    color: var(--sk-muted);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.sk-matrix-footer-hours { border-top: 2px solid var(--sk-border); }
.sk-matrix-footer-coverage td { border-top: 0 !important; }
.sk-footer-val {
    font-weight: 700;
    color: #201f2e;
    font-size: 0.76rem;
}
.sk-footer-hours-total::after {
    content: " timer";
    color: var(--sk-muted);
    font-weight: 600;
}
.sk-matrix-footer-coverage .sk-matrix-footer-label {
    font-size: 0;
}
.sk-matrix-footer-coverage .sk-legend-open,
.sk-matrix-footer-coverage .sk-legend-close {
    display: none;
}

/* Åbn / Luk-legende og tæller-farver */
.sk-legend-open  { color: var(--sk-success); }
.sk-legend-close { color: var(--sk-warning); }
.sk-opens-count  { color: var(--sk-success); font-family: var(--sk-font-numeric); font-variant-numeric: tabular-nums; font-weight: 700; }
.sk-closes-count { color: var(--sk-warning); font-family: var(--sk-font-numeric); font-variant-numeric: tabular-nums; font-weight: 700; }

/* ─── Setup: timeantal-input ──────────────────────────────────────────────── */
.sk-hour-input {
    width: 5.5rem;
    min-width: 4.5rem;
    text-align: right;
    padding-right: 0.4rem;
    font-size: 0.8rem;
}
.sk-fetch-btn {
    font-size: 0.75rem;
    white-space: nowrap;
    color: var(--sk-muted) !important;
    text-decoration: none !important;
}
.sk-fetch-btn:hover {
    color: var(--sk-purple) !important;
}

/* ─── Forside: dato-navigation ────────────────────────────────────────────── */
/* Simpel, samlet toplinje — de tre zoner centreres som ét kompakt cluster i stedet
   for at blive presset ud mod kanterne (som efterlod meget ubrugt luft, især når
   "I dag"-pillen ikke vises), og dagnavn/dato har lidt stærkere vægt/kontrast for
   at være tydeligt synlige (rettet 2026-08-13, bekræftet af bruger).
   Lys lavendel-baggrund + lilla bundkant (samme --sk-purple-tone og samme 3px-vægt
   som kortenes .card-outline.card-primary-topkant) giver linjen tydelig identitet
   som "her styrer du den viste dag", uden at øge højden (rettet 2026-08-13). */
.sk-day-nav {
    background: var(--sk-lavender-100);
    border-bottom: 3px solid var(--sk-purple);
    box-shadow: 0 1px 3px rgba(54, 45, 106, 0.06);
    padding: 0.6rem 0;
    margin-bottom: 0;
}
/* Grid (ikke flex) med to lige store side-kolonner om en auto-bred midterkolonne — sikrer at
   dato/dag-blokken ALTID sidder præcis centreret, uanset om "I dag"-knappen (kun vist når man
   ikke er på i dag) fylder noget i højre kolonne eller ej. Med den tidligere flex+justify-
   content:center-løsning centrerede browseren HELE rækkens samlede indholdsbredde, så
   midten flyttede sig i det øjeblik "I dag" dukkede op/forsvandt (bekræftet af bruger
   2026-09-17: "det hopper lidt"). */
.sk-day-nav-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    row-gap: 0.4rem;
}
.sk-day-nav-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.sk-day-nav-center {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.sk-day-nav-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
}
/* Planstatus-noten (genbruger .sk-plan-note) skal altid ligge på sin egen linje under
   selve navigations-rækken, uanset om denne wrapper eller ej. */
.sk-day-nav-inner > .sk-plan-note {
    grid-column: 1 / -1;
    margin-top: 0.1rem;
    text-align: center;
}

.sk-day-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--sk-lavender-500);
    color: var(--sk-purple);
    font-size: 0.85rem;
    flex-shrink: 0;
    text-decoration: none !important;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.sk-day-nav-btn:hover {
    background: var(--sk-purple);
    border-color: var(--sk-purple);
    color: #fff;
}
.sk-day-nav-label {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.55rem;
    min-width: 0;
}
.sk-day-nav-name {
    font-family: var(--sk-font-brand);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--sk-purple);
    white-space: nowrap;
}
.sk-day-nav-date {
    font-size: 0.95rem;
    color: var(--sk-muted);
    white-space: nowrap;
}
.sk-day-nav-date-input {
    font-size: 0.95rem;
    font-family: var(--sk-font-ui);
    color: var(--sk-muted);
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0.05rem 0.2rem;
    border-radius: 4px;
    outline: none;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
    /* Fjern browser-standard input-styling */
    -webkit-appearance: none;
    appearance: none;
    /* Men behold kalender-ikonet — kun tekst-delen styles om */
}
.sk-day-nav-date-input:hover {
    color: var(--sk-purple);
    background: var(--sk-lavender);
}
.sk-day-nav-date-input:focus {
    color: var(--sk-purple);
    background: var(--sk-lavender);
    box-shadow: none;
}
/* Kalender-ikonet i Chrome/Edge justeres til brand-lilla */
.sk-day-nav-date-input::-webkit-calendar-picker-indicator {
    opacity: 0.45;
    cursor: pointer;
    filter: invert(20%) sepia(60%) saturate(600%) hue-rotate(220deg);
}
.sk-day-nav-date-input:hover::-webkit-calendar-picker-indicator,
.sk-day-nav-date-input:focus::-webkit-calendar-picker-indicator {
    opacity: 0.85;
}

.sk-day-nav-hours {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sk-purple);
    white-space: nowrap;
    background: #fff;
    border: 1px solid var(--sk-lavender-500);
    padding: 0.08rem 0.5rem;
    border-radius: 10px;
}
.sk-day-nav-closed {
    font-size: 0.95rem;
    color: var(--sk-muted);
    white-space: nowrap;
    background: #fff;
    border: 1px solid var(--sk-border);
    padding: 0.08rem 0.5rem;
    border-radius: 10px;
    opacity: 0.85;
}
.sk-day-nav-today {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sk-purple);
    background: var(--sk-lavender);
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background 0.1s;
}
.sk-day-nav-today:hover {
    background: var(--sk-pink);
    color: #fff;
}

/* Mindre skærme: centrér de tre header-zoner i stedet for at presse dem til kanterne,
   og lad handlingsknapperne fylde bredden i stedet for at klumpe sig sammen. */
@media (max-width: 767.98px) {
    .sk-day-nav-inner {
        grid-template-columns: 1fr;
    }
    .sk-day-nav-left,
    .sk-day-nav-right {
        justify-content: center;
    }
    .sk-day-nav-center {
        justify-content: center;
        order: -1;
    }
    .sk-action-bar-inner {
        justify-content: center;
    }
    .sk-action-bar-inner .btn {
        flex: 1 1 auto;
    }
}

/* ─── Forside: dagsskema-tabel ────────────────────────────────────────────── */
.sk-day-group-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 0.3rem;
}
.sk-day-table {
    font-family: var(--sk-font-work);
    font-size: 0.9rem;
}
.sk-day-table tbody tr:first-child td { border-top: 0 !important; }
.sk-day-table td {
    border-top: 1px solid var(--sk-border) !important;
    vertical-align: middle !important;
    padding: 0.2rem 0.65rem !important;
}
.sk-day-table tbody tr:hover td { background-color: var(--sk-lavender-300) !important; }
.sk-col-group { width: 6.5rem; }
.sk-col-name  { width: 22%; }
.sk-col-time  { width: 7rem; }
.sk-col-note  { /* resterende plads */ }
.sk-day-group-cell { padding-right: 0.25rem !important; }
/* Gruppefarven bruges som diskret venstre-kant-markør på en neutral, lys flade —
   IKKE som en dominerende fyldt farveflade — så mange forskellige gruppefarver i
   samme tabel virker som kategorimarkører, ikke som farvestøj. Farven sættes pr.
   række via --sk-tag-color (inline i markup, da den er runtime-data pr. institution). */
.sk-day-group-tag {
    display: block;
    width: 100%;
    font-size: 0.68rem;
    font-weight: 600;
    font-family: var(--sk-font-brand);
    padding: 0.14rem 0.4rem;
    border-radius: 3px;
    background: var(--sk-label-bg);
    border-left: 3px solid var(--sk-tag-color, var(--sk-muted));
    color: var(--sk-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}
.sk-day-name-cell {
    font-weight: 500;
    font-size: 0.82rem;
    color: var(--sk-purple-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sk-day-time-cell {
    text-align: center;
}
.sk-day-time {
    font-family: var(--sk-font-numeric);
    font-variant-numeric: tabular-nums;
    color: var(--sk-text);
    font-size: 0.82rem;
}
.sk-time-sep {
    margin: 0 0.2em;
}
.sk-day-note-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
}
.sk-col-type     { width: 4rem; }
.sk-day-type-cell {
    white-space: nowrap;
}
.sk-day-type-badge {
    font-size: 0.66rem;
    color: var(--sk-muted);
    background: var(--sk-label-bg);
    border: 1px solid var(--sk-border);
    border-radius: 4px;
    padding: 0.05em 0.35em;
    white-space: nowrap;
    vertical-align: middle;
}
.sk-day-account-name-cell {
    font-size: 0.82rem;
    color: var(--sk-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}
.sk-account-debug {
    font-size: 0.72rem;
    background: var(--sk-cream-100);
    color: var(--sk-text);
    border: 1px solid var(--sk-border);
    border-radius: 3px;
    padding: 0.05rem 0.35rem;
}
.sk-day-empty {
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--sk-muted);
    font-size: 0.86rem;
}

/* ─── Forside: tidslinje ──────────────────────────────────────────────────── */
.sk-here-now-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: var(--sk-font-brand);
    color: var(--sk-success);
    background: var(--sk-success-bg);
    border: 1px solid var(--sk-success-border);
    border-radius: 10px;
    padding: 0.15rem 0.55rem;
    white-space: nowrap;
}
.sk-here-dot {
    font-size: 0.45rem;
    animation: sk-pulse 2s ease-in-out infinite;
}
@keyframes sk-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}
.sk-tl-toggle-btn.sk-tl-toggle-active {
    background: var(--sk-purple);
    color: #fff;
    border-color: var(--sk-purple);
}
.sk-tl-here-now {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.85rem;
    background: var(--sk-cream);
    border-bottom: 1px solid var(--sk-border);
    font-size: 0.78rem;
}
.sk-tl-here-badge {
    font-family: var(--sk-font-brand);
    font-weight: 700;
    color: var(--sk-purple);
    white-space: nowrap;
    margin-right: 0.2rem;
}
.sk-tl-here-name {
    padding: 0.1rem 0.5rem 0.1rem 0.45rem;
    background: #fff;
    border: 1px solid var(--sk-border);
    border-radius: 3px;
    white-space: nowrap;
}
.sk-tl {
    padding: 0.25rem 0 0.5rem;
}
.sk-tl-slot {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.32rem 0.85rem;
    border-top: 1px solid var(--sk-border);
}
.sk-tl-slot:first-child { border-top: 0; }
.sk-tl-slot:hover { background: var(--sk-label-bg); }
.sk-tl-time {
    font-family: var(--sk-font-numeric);
    font-variant-numeric: tabular-nums;
    font-size: 0.77rem;
    color: var(--sk-muted);
    width: 3rem;
    text-align: right;
    flex-shrink: 0;
    padding-top: 0.15rem;
}
.sk-tl-roster {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.3rem;
    flex: 1;
    min-width: 0;
}
.sk-tl-worker {
    font-size: 0.76rem;
    font-weight: 400;
    padding: 0.1rem 0.45rem 0.1rem 0.35rem;
    background: #fff;
    border: 1px solid var(--sk-border);
    border-radius: 3px;
    white-space: nowrap;
    color: var(--sk-text);
}
.sk-tl-worker--new {
    font-weight: 600;
    background: var(--sk-success-bg);
    border-color: var(--sk-success-border);
    color: var(--sk-success);
}
.sk-tl-worker--departing {
    font-weight: 400;
    background: var(--sk-danger-bg);
    border-color: var(--sk-pink-300);
    color: var(--sk-danger);
    opacity: 0.8;
}
.sk-tl-roster-empty {
    font-size: 0.75rem;
    color: var(--sk-muted);
    font-style: italic;
}
.sk-tl-now-marker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0.85rem;
    margin: 0.15rem 0;
}
.sk-tl-now-line {
    flex: 1;
    height: 2px;
    background: var(--sk-pink);
    border-radius: 1px;
}
.sk-tl-now-label {
    font-size: 0.7rem;
    font-weight: 700;
    font-family: var(--sk-font-brand);
    color: var(--sk-pink);
    white-space: nowrap;
}

/* ─── Forside: højre kolonne ──────────────────────────────────────────────── */
.sk-day-worker-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sk-day-worker-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.3rem 0.85rem;
    font-size: 0.82rem;
    border-bottom: 1px solid var(--sk-border);
    gap: 0.25rem;
}
.sk-day-worker-item:last-child { border-bottom: 0; }
.sk-plan-status-badge {
    font-size: 0.78rem;
    padding: 0.25em 0.65em;
}
.sk-plan-note {
    font-size: 0.78rem;
    color: var(--sk-muted);
    background: var(--sk-label-bg);
    border-radius: 4px;
    padding: 0.3rem 0.55rem;
}

/* ─── Dagbog ──────────────────────────────────────────────────────────────── */
/* Sammenklappelig kort-header — hele rækken er klikbar (data-toggle="collapse"),
   så Dagbogens fylde kan reduceres uden at miste indholdet. */
.sk-collapsible-header {
    cursor: pointer;
    user-select: none;
}
.sk-collapsible-header:hover {
    background: var(--sk-label-bg);
}
.sk-collapse-chevron {
    color: var(--sk-muted);
    font-size: 0.78rem;
    transition: transform 0.15s ease;
}
.sk-collapsible-header[aria-expanded="false"] .sk-collapse-chevron {
    transform: rotate(180deg);
}
.sk-diary-header {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sk-purple);
    margin-bottom: 0.15rem;
}
.sk-diary-content {
    font-size: 0.82rem;
    color: var(--sk-text);
    white-space: pre-wrap;
    line-height: 1.45;
}
.sk-diary-header-input {
    font-weight: 600;
    font-size: 0.78rem;
    border: none;
    background: transparent;
    padding-left: 0;
    padding-right: 0;
}
.sk-diary-header-input:focus {
    box-shadow: none;
    background: transparent;
}
.sk-diary-content-input {
    font-size: 0.82rem;
    resize: vertical;
}

/* ─── Aftaledetalje / beregningsark ──────────────────────────────────────── */
.sk-agr-card {
    margin-bottom: 1rem;
}
.sk-agr-topbar {
    margin-bottom: 1rem;
}

/* Aftalehoved: kompakt beregningsark */
.sk-calc-table {
    font-size: 0.82rem;
    border-collapse: collapse;
}
.sk-calc-table th,
.sk-calc-table td {
    padding: 0.3rem 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--sk-border);
}
.sk-calc-table th {
    font-weight: 600;
    color: var(--sk-muted);
    text-align: right;
    white-space: nowrap;
    background: var(--sk-label-bg);
    width: 14rem;
}
.sk-calc-readonly {
    color: var(--sk-text);
    background: var(--sk-label-bg);
}
.sk-calc-formula {
    font-family: 'DM Mono', 'Consolas', monospace;
    font-size: 0.80rem;
    color: var(--sk-text);
}

/* Inputfelter i aftalehoved */
.sk-agr-date-input {
    width: 8.5rem;
    padding: 0.15rem 0.4rem;
    font-size: 0.82rem;
    border: 1px solid var(--sk-border);
    border-radius: 3px;
    background: #fff;
    color: var(--sk-text);
}
.sk-agr-num-input {
    width: 5rem;
    padding: 0.15rem 0.4rem;
    font-family: var(--sk-font-numeric);
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
    border: 1px solid var(--sk-border);
    border-radius: 3px;
    text-align: right;
}
.sk-agr-select {
    width: auto;
    display: inline-block;
    font-size: 0.82rem;
    height: auto;
    padding: 0.15rem 0.5rem;
}

/* Aftalelinjer */
.sk-agr-line-table {
    font-size: 0.80rem;
}
.sk-agr-line-table th {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--sk-muted);
    background: var(--sk-label-bg);
    border-bottom: 1px solid var(--sk-border);
    padding: 0.25rem 0.5rem;
}
.sk-agr-line-table td {
    padding: 0.22rem 0.5rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--sk-lavender-200);
}
.sk-agr-adjustment td {
    color: var(--sk-muted);
    font-style: italic;
}
.sk-agr-stored {
    font-size: 0.75rem;
}
.sk-agr-line-input {
    width: 4.5rem;
    padding: 0.1rem 0.3rem;
    font-size: 0.80rem;
    border: 1px solid var(--sk-border);
    border-radius: 3px;
    text-align: right;
}
.sk-agr-footer td {
    font-size: 0.78rem;
    padding: 0.3rem 0.5rem;
    border-top: 1px solid var(--sk-border);
    background: var(--sk-label-bg);
}
.sk-agr-add-row {
    padding: 0.3rem 0.5rem;
    border-top: 1px solid var(--sk-border);
    background: var(--sk-label-bg);
}

/* Beregningsopsummering */
.sk-agr-summary {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.85rem;
}
.sk-agr-sum-block {
    background: var(--sk-label-bg);
    border-left: 3px solid var(--sk-lavender);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
}
.sk-agr-sum-result {
    border-left-color: var(--sk-purple);
    background: var(--sk-lavender-100);
}
.sk-agr-sum-label {
    font-size: 0.70rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sk-purple);
    margin-bottom: 0.2rem;
}
.sk-agr-sum-sub {
    font-size: 0.68rem;
    color: var(--sk-muted);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.sk-agr-add-select {
    display: inline-block;
    width: auto;
    max-width: 16rem;
    font-size: var(--sk-font-xs);
    height: calc(1.5em + .375rem + 2px);
    padding: .1rem .4rem;
}
.sk-agr-card-sub {
    font-size: 0.70rem;
    color: var(--sk-muted);
    font-style: italic;
    margin-top: 1px;
}

/* Aftalelink fra medarbejder-detalje */
/* ─── Journal Detail (Faktiske planer) ───────────────────────────────────── */

.sk-jp-table {
    table-layout: fixed;
    width: 100%;
    font-family: var(--sk-font-work);
}

.sk-jp-table td.sk-jp-day-col {
    padding-left: 0.55rem !important;
    padding-right: 0.8rem !important;
    box-shadow: inset -8px 0 0 #fff;
}
.sk-jp-table th.sk-matrix-day-col {
    padding-left: 0.55rem !important;
    padding-right: 0.55rem !important;
    box-shadow: none;
}
.sk-jp-table tr.sk-matrix-new-group > td.sk-jp-day-col {
    box-shadow:
        inset -8px 0 0 #fff,
        inset 0 1px 0 #0b0a12;
}

.sk-jp-day-head {
    min-width: 5rem;
    white-space: nowrap;
}
.sk-jp-day-name {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sk-muted);
}
.sk-jp-day-date {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--sk-text);
}

.sk-jp-cell {
    min-width: 5rem;
    max-width: 7rem;
    vertical-align: middle;
    transition: background 0.1s;
}
.sk-jp-cell:hover {
    background: rgba(54, 45, 106, 0.07) !important;
}
/* Faktiske planer: låst dag (før låsedatoen, afsluttet uge eller låst i kalenderen) - kan vises, ikke ændres */
.sk-jp-cell.sk-cell-locked {
    opacity: 0.7;
}
.sk-jp-day-lock {
    font-size: 0.6rem;
    color: var(--sk-muted);
    margin-left: 0.15rem;
}

/* Faktiske planer: dagen har tid, der er sendt til SD Løn (lille fly i hjørnet) */
.sk-jp-cell.sk-cell-sent {
    position: relative;
}
.sk-jp-cell.sk-cell-sent::after {
    content: "\f1d8";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 1px;
    right: 3px;
    font-size: 0.55rem;
    color: var(--sk-muted);
    opacity: 0.8;
}

.sk-jp-day-date,
.sk-jp-day-name,
.sk-jp-day-hours {
    font-weight: 700;
    color: var(--sk-text);
}
.sk-jp-day-hours {
    font-family: var(--sk-font-numeric);
    font-variant-numeric: tabular-nums;
    font-size: 0.65rem;
    margin-top: 0.1rem;
}

/* Uændret vagt: nedtonet celleindhold */
.sk-cell-unchanged .sk-cell-times {
    font-weight: 400;
    color: var(--sk-muted);
}
.sk-cell-unchanged .sk-cell-account-badge {
    font-weight: 400;
    opacity: 0.6;
}
.sk-cell-unchanged .sk-cell-note {
    color: var(--sk-muted);
    opacity: 0.7;
}
.sk-master-detail-page .sk-cell-unchanged .sk-cell-times {
    color: #3a3159;
}
.sk-master-detail-page .sk-cell-unchanged .sk-cell-note {
    color: #4a4265;
    opacity: 0.92;
}

/* Ændret vagt: tydelig men ikke larmende topaccent */
.sk-cell-changed {
    border-top: 2px solid var(--sk-pink) !important;
}
.sk-cell-changed .sk-cell-times {
    font-weight: 600;
    color: var(--sk-text);
}
.sk-cell-changed .sk-cell-account-badge {
    font-weight: 600;
}
.sk-cell-changed .sk-cell-note {
    color: var(--sk-text);
}

.sk-jp-shift-badge {
    font-size: 0.6rem;
    padding: 0.1em 0.35em;
    vertical-align: middle;
}

/* ─── Tabel-celler: erstat Bootstrap font-weight-bold (700→500) ───────────── */
/* 500 = medium: visuelt adskilt fra brødtekst uden at fremstå "sort og fed" */
.table td.font-weight-bold,
.table td.font-weight-bold a,
.table td.font-weight-bold a.text-body,
table.dataTable tbody td.font-weight-bold,
table.dataTable tbody td.font-weight-bold a {
    font-weight: 500 !important;
    color: var(--sk-text) !important;
}

/* ─── DataTables: brand-farver i stedet for Bootstraps #212529 ────────────── */
.dataTables_wrapper {
    color: var(--sk-text);
    font-family: var(--sk-font-work);
    font-size: var(--sk-font-sm);
}
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color: var(--sk-muted);
    font-size: var(--sk-font-sm);
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    color: var(--sk-text);
    border-color: var(--sk-border) !important;
    border-radius: 4px;
}
table.dataTable thead th,
table.dataTable thead td {
    color: var(--sk-text);
    font-weight: 600;
}
table.dataTable tbody td {
    color: var(--sk-text);
}
/* Sorteringspilar — nedton til muted */
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after,
table.dataTable thead .sorting::before,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::before {
    opacity: 0.35;
}
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
    opacity: 0.7;
    color: var(--sk-purple);
}

/* Master overview: keep headings quiet so rows carry the visual weight. */
.sk-master-list-page .card-title {
    color: var(--sk-purple-300) !important;
    font-weight: 600 !important;
}
.sk-master-list-page .card-title i {
    color: var(--sk-purple-200) !important;
}
.sk-master-list-page table.sk-worker-table.table-bordered.sk-table-smart thead th,
.sk-master-list-page table.dataTable thead th,
.sk-master-list-page table.dataTable thead td {
    color: var(--sk-purple-300) !important;
    font-weight: 500 !important;
}
.sk-master-list-page table.dataTable thead .sorting::after,
.sk-master-list-page table.dataTable thead .sorting_asc::after,
.sk-master-list-page table.dataTable thead .sorting_desc::after,
.sk-master-list-page table.dataTable thead .sorting::before,
.sk-master-list-page table.dataTable thead .sorting_asc::before,
.sk-master-list-page table.dataTable thead .sorting_desc::before {
    opacity: 0.24;
    color: var(--sk-purple-300);
}
/* Master detail: page header names the area; the card title carries the schedule name. */
.sk-master-detail-page .sk-master-detail-title {
    color: var(--sk-text) !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
}

/* Grundskema-matrix: mindre luft mellem rækkerne end den delte sk-matrix-table-standard —
   de fleste celler har kun én kort tidsangivelse, så den almindelige padding virker for luftig. */
.sk-master-detail-page .sk-matrix-table th,
.sk-master-detail-page .sk-matrix-table td {
    padding-top:    0.06rem !important;
    padding-bottom: 0.06rem !important;
}
.sk-master-detail-page .sk-cell-times {
    line-height: 1.2;
}
/* Kompakt uge-navigation i et card-header (Faktiske planer) — samme "her er du"-sprog
   som forsidens sk-day-nav og Grundskemaets aktive uge (sk-week-active): den valgte uge
   er en massiv lilla chip, forrige/næste er lette omridspiller. */
.sk-week-nav {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}
.sk-week-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.65rem;
    border-radius: 20px;
    border: 1px solid var(--sk-lavender-500);
    background: #fff;
    color: var(--sk-purple);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none !important;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.sk-week-nav-btn:hover {
    background: var(--sk-purple);
    border-color: var(--sk-purple);
    color: #fff;
}
.sk-week-nav-current {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.9rem;
    border-radius: 20px;
    background: var(--sk-purple);
    color: #fff;
    font-family: var(--sk-font-brand);
    font-weight: 800;
    font-size: 0.95rem;
    white-space: nowrap;
}
.sk-week-picker {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}
.sk-week-picker-label {
    color: var(--sk-muted);
    font-family: var(--sk-font-brand);
    font-size: 0.78rem;
    font-weight: 700;
}
.sk-copy-tool-label {
    color: var(--sk-purple);
    font-family: var(--sk-font-brand);
    font-size: 0.78rem;
    font-weight: 800;
}
.sk-copy-tool-hint {
    color: var(--sk-muted);
    font-size: 0.72rem;
    font-weight: 500;
}
.sk-detail-week-label {
    color: var(--sk-muted);
    font-size: 0.72rem;
}

/* Dagens dato-label i kolonne-overskrift */
.sk-today-label {
    color: var(--sk-purple) !important;
    font-weight: 800;
}

/* Dagens dato: kasse omkring hele kolonne-overskriften (dato, dag, tider) */
.sk-jp-table th.sk-matrix-day-col.sk-today-col {
    box-shadow: inset 0 0 0 2px var(--sk-purple);
    border-radius: 6px;
}

/* "Skift til vikar"-dialog: kompakt dato/tid-linje over vikar-dropdown'en, uden tabelramme. */
.sk-sub-summary {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.sk-sub-summary-date {
    font-weight: 700;
    color: var(--sk-text);
    font-size: 0.9rem;
}
.sk-sub-summary-time {
    font-family: var(--sk-font-numeric);
    font-variant-numeric: tabular-nums;
    color: var(--sk-muted);
    font-size: 0.85rem;
}

/* Helligdage / lukkede dage */
.sk-day-closed-head {
    background: var(--sk-lavender-200) !important;
    color: var(--sk-muted) !important;
    background-image: repeating-linear-gradient(
        135deg,
        transparent,
        transparent 4px,
        rgba(0,0,0,0.06) 4px,
        rgba(0,0,0,0.06) 8px
    ) !important;
}
.sk-day-closed-cell {
    background: var(--sk-lavender-100) !important;
    background-image: repeating-linear-gradient(
        135deg,
        transparent,
        transparent 4px,
        rgba(0,0,0,0.05) 4px,
        rgba(0,0,0,0.05) 8px
    ) !important;
    cursor: not-allowed !important;
    pointer-events: none;
}
.sk-day-closed-cell:hover {
    background: var(--sk-lavender-100) !important;
}

/* Faktiske planer: medarbejderen er i en anden gruppe denne dag — intet at klikke på (model a). */
.sk-cell-other-group {
    background: rgba(0,0,0,0.02);
    cursor: default;
}
.sk-cell-other-group-label {
    font-size: 0.7rem;
    color: var(--sk-text-muted, #8881a8);
    font-style: italic;
    opacity: 0.7;
}

/* ─── ibrand icon-font ──────────────────────────────────────────────────────── */
@font-face {
    font-family: 'ibrand';
    src: url('/assets/brand/fonts/ibrand.woff2') format('woff2'),
         url('/assets/brand/fonts/ibrand.woff')  format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ─── Brand frames ──────────────────────────────────────────────────────────── */
/*
 * Wrap content in .sk-brand-frame to add a subtle decorative frame behind it.
 * Override --sk-frame-url on the element to pick a specific frame/theme.
 * Default: ramme-3-lys (light oval frame, works on cream/white backgrounds).
 */
.sk-brand-frame,
.sk-brand-frame-sm {
    position: relative;
}
.sk-brand-frame::before,
.sk-brand-frame-sm::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--sk-frame-url, url('/assets/brand/frames/light/ramme-3-lys.svg')) no-repeat center / contain;
    pointer-events: none;
    opacity: 0.2;
    z-index: 0;
}
.sk-brand-frame > *,
.sk-brand-frame-sm > * { position: relative; z-index: 1; }
.sk-brand-frame-sm::before { opacity: 0.14; }

/* Callout: lavender box with frame accent in the background */
.sk-brand-frame-callout {
    position: relative;
    background: var(--sk-lavender-100);
    border-left: 3px solid var(--sk-lavender);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    overflow: hidden;
}
.sk-brand-frame-callout::after {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 50%;
    height: 140%;
    background: var(--sk-frame-url, url('/assets/brand/frames/light/ramme-2-lys.svg')) no-repeat center / contain;
    pointer-events: none;
    opacity: 0.1;
}

/* Sparkle: small inline decorative mark */
.sk-brand-sparkle {
    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
    background: url('/assets/brand/frames/light/ramme-4-lys.svg') no-repeat center / contain;
    opacity: 0.45;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ─── Empty states ──────────────────────────────────────────────────────────── */
.sk-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
}
.sk-empty-state-icon {
    position: relative;
    width: 5rem;
    height: 5rem;
    margin-bottom: 1.1rem;
    flex-shrink: 0;
}
.sk-empty-state-icon::before {
    content: '';
    position: absolute;
    inset: -1rem;
    background: url('/assets/brand/frames/light/ramme-1-lys.svg') no-repeat center / contain;
    opacity: 0.28;
    pointer-events: none;
}
.sk-empty-state-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
}
.sk-empty-state-title {
    font-size: 0.95rem;
    font-weight: 600;
    font-family: var(--sk-font-brand);
    color: var(--sk-purple);
    margin-bottom: 0.3rem;
}
.sk-empty-state-text {
    font-size: 0.83rem;
    color: var(--sk-muted);
    max-width: 22rem;
    line-height: 1.5;
}

/* ─── Brand icons ───────────────────────────────────────────────────────────── */
.sk-brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
}
.sk-brand-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.sk-brand-icon--sm { width: 1.75rem; height: 1.75rem; }
.sk-brand-icon--lg { width: 3.75rem; height: 3.75rem; }

/* ─── Faktiske planer: "Nuværende planlægning"-modal ──────────────────────── */
#jpInfoModal .table td, #jpInfoModal .table th { vertical-align: middle; padding: 0.35rem 0.5rem; }

/* ─── Faktiske planer: roligere matrix (feedback 2026-09-24) ─────────────── */
/* Gruppeskift: én ensartet streg hele vejen ud, tegnet som indvendig skygge øverst i hver celle
   i gruppens første række. Cellekanter vises ikke i denne tabel, og den tidligere baggrundslinje
   blev nulstillet af celler med egen baggrund (åbner/lukker, lukkedage), mens mellemrummet mellem
   dagkolonnerne (hvid skygge til højre) brød den — derfor ligger stregen ØVERST i skyggelisten. */
.sk-jp-table tr.sk-matrix-new-group > td {
    box-shadow: inset 0 2px 0 #3b3857 !important;
}
.sk-jp-table tr.sk-matrix-new-group > td.sk-jp-day-col {
    box-shadow: inset 0 2px 0 #3b3857, inset -8px 0 0 #fff !important;
}

/* Navne: lidt mørkere end vagterne, men stadig vægt 500 (ikke sort/fed). */
.sk-jp-table .sk-matrix-name-cell {
    font-weight: 500;
    color: var(--sk-text);
}

/* Kolonneoverskrift: datoen i samme farve/vægt som dagsnavn og åbningstid. Dagens dato beholder
   sin lilla fremhævning (.sk-today-label). */
.sk-jp-table .sk-day-head .sk-jp-day-date:not(.sk-today-label) {
    color: #6f6880 !important;
    font-weight: 700 !important;
}

/* Ændret i forhold til grundskemaet: tonet ned — lidt mørkere end uændret, ingen pink streg. */
.sk-jp-table td.sk-cell-changed {
    border-top: 1px solid var(--sk-border) !important;
}
.sk-jp-table .sk-cell-changed .sk-cell-times {
    font-weight: 500;
    color: #4a4568;
}
.sk-jp-table .sk-cell-changed .sk-cell-account-badge {
    font-weight: 500;
}
.sk-jp-table .sk-cell-changed .sk-cell-note {
    color: #5d5878;
}

/* Åbner/lukker-farve med luft: farven tegnes kun i cellens indholdsfelt (ikke i polstringen), så
   den ikke fylder hele cellen og der er luft mellem naboceller. Lidt ekstra lodret luft. */
.sk-jp-table td.sk-cell-opens,
.sk-jp-table td.sk-cell-closes,
.sk-jp-table td.sk-cell-both {
    background-clip: content-box !important;
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
}