/*
  Skemagi Mobil - mobile-first stylesheet.

  Struktur og komponenter (fast topbar/bottomnav, day-card, segmented tabs, quick-grid,
  action-row, split-preview, balance-card, mobile-table) er portet fra den klikbare
  prototype i C:\Users\JesperBirch\SkemagiAdmin\skemagi_mobile_prototype\css\skemagi-mobile.css
  og tilpasset til server-renderet Razor i stedet for en SPA. Farvetokens tager
  udgangspunkt i Skemagi.Planner/docs/design-system.md (brandfarver), ikke prototypens
  midlertidige palette.

  Et lille udvalg SVG-ikoner (home/news/plus-bold/clothes/tables/arrow-*) er kopieret
  fra det koebte Go Mobile-template (wwwroot/assets/icons) til bundnavigation og
  dag-/ugenavigation, fordi det giver reel visuel vaerdi for meget lav kompleksitet.
  Resten af templaten (jQuery/Swiper/demo-HTML) er bevidst IKKE vendoret ind.
*/

:root {
    --sk-purple: #362d6a;
    --sk-purple-dark: #241d4d;
    --sk-purple-soft: #efe9fb;
    --sk-pink: #df72ab;
    --sk-mint: #2f9c95;
    --sk-cream: #ebe9df;
    --sk-lavender: #dcd5f9;
    --sk-ink: #24202e;
    --sk-muted: #6f6a80;
    --sk-line: #e6e1ee;
    --sk-ok: #1f8f4e;
    --sk-ok-bg: #e0f4e7;
    --sk-warn: #93590a;
    --sk-warn-bg: #fdf0d0;
    --sk-error: #b3341c;
    --sk-error-bg: #fbe4df;
    --sk-font: "DM Sans", "Segoe UI", system-ui, sans-serif;
    --sk-font-brand: "Nunito", "Segoe UI", system-ui, sans-serif;

    --sk-topbar-h: 64px;
    --sk-bottomnav-h: 66px;
    --sk-tap-min: 44px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--sk-font);
    background: var(--sk-cream);
    color: var(--sk-ink);
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

a { color: var(--sk-purple); }
button, a, input, select, textarea { touch-action: manipulation; }

img.sk-icon { width: 20px; height: 20px; display: block; }

/* ── Fast topbar ─────────────────────────────────────────────────────── */
.sk-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--sk-topbar-h);
    background: var(--sk-purple);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.6rem 0 1rem;
    z-index: 30;
    box-shadow: 0 2px 10px rgba(36, 32, 46, .18);
}
.sk-topbar-brand {
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: var(--sk-tap-min);
}
.sk-topbar-logo {
    display: block;
    width: 2.45rem;
    height: 2.45rem;
    object-fit: contain;
}
.sk-topbar-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.05rem;
}
.sk-topbar-name {
    font-size: 0.72rem;
    color: var(--sk-lavender);
    max-width: 8.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1;
}
.sk-topbar-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 1.7rem;
    min-width: var(--sk-tap-min);
    padding: 0 0.7rem;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0.5rem;
}
.sk-topbar-user-icon {
    display: block;
    width: 1.05rem;
    height: 1.05rem;
    object-fit: contain;
}
.sk-topbar-logout:active { background: rgba(255, 255, 255, .16); }
.sk-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.sk-topbar-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.7rem;
    min-width: var(--sk-tap-min);
    padding: 0 0.6rem;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, .12);
}
.sk-topbar-switch:active { background: rgba(255, 255, 255, .22); }

/* ── Support-impersonation-banner ("Du ser appen som ...") ─────────────── */
.sk-impersonation-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}
.sk-impersonation-banner form { margin: 0; }
.sk-impersonation-banner button {
    border: none;
    background: var(--sk-error);
    color: #fff;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 0.35rem 0.8rem;
    border-radius: 0.5rem;
    min-height: var(--sk-tap-min);
}

/* ── Content area ────────────────────────────────────────────────────── */
.sk-content {
    max-width: 30rem;
    margin: 0 auto;
    padding: calc(var(--sk-topbar-h) + 0.85rem) 0.85rem calc(var(--sk-bottomnav-h) + 1rem);
    min-height: 100vh;
}

/* ── Fast bottomnav ──────────────────────────────────────────────────── */
.sk-bottomnav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--sk-bottomnav-h);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    background: var(--sk-purple);
    box-shadow: 0 -6px 20px rgba(36, 32, 46, .2);
    z-index: 30;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.sk-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-height: var(--sk-tap-min);
    padding: 0.4rem 0.15rem;
    color: rgba(255, 255, 255, .74);
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.1;
}
.sk-bottomnav .sk-icon { width: 26px; height: 26px; object-fit: contain; }
.sk-nav-item img { opacity: .82; }
.sk-nav-item.active { color: #fff; background: rgba(255, 255, 255, .14); }
.sk-nav-item.active img { opacity: 1; }
.sk-nav-item:active { background: rgba(255, 255, 255, .1); }

/* ── Flash message ───────────────────────────────────────────────────── */
.sk-flash {
    padding: 0.75rem 0.9rem;
    border-radius: 0.6rem;
    margin-bottom: 0.9rem;
    font-size: 0.92rem;
    font-weight: 500;
}
.sk-flash-ok { background: var(--sk-ok-bg); color: var(--sk-ok); }
.sk-flash-error { background: var(--sk-error-bg); color: var(--sk-error); }

/* ── Headings ────────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--sk-font-brand); color: var(--sk-purple); margin: 0 0 0.6rem; }
h1 { font-size: 1.25rem; }
h2 { font-size: 1.02rem; }

/* ── Cards ───────────────────────────────────────────────────────────── */
.sk-card {
    background: #fff;
    border-radius: 0.9rem;
    padding: 1rem;
    margin-bottom: 0.9rem;
    box-shadow: 0 4px 16px rgba(54, 45, 106, .08);
}

/* ── Purple nav bar (day/week navigation) ───────────────────────────── */
.sk-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.7rem;
    margin-bottom: 0.85rem;
    border-radius: 0.9rem;
    background: var(--sk-purple);
    color: #fff;
}
.sk-navbar strong { font-size: 0.95rem; text-align: center; flex: 1; }
.sk-date-stack {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    line-height: 1.15;
    text-transform: capitalize;
}
.sk-date-stack span:first-child { font-size: 1rem; }
.sk-date-stack span:last-child { font-size: 0.86rem; opacity: 0.9; }
.sk-date-jump {
    flex: 1;
    margin: 0;
    text-align: center;
    font-weight: 800;
    position: relative;
}
.sk-date-jump > summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    line-height: 1.15;
    list-style: none;
    cursor: pointer;
    color: #fff;
}
.sk-date-jump > summary::-webkit-details-marker { display: none; }
.sk-date-jump > summary span:last-child {
    display: inline-block;
    border-bottom: 2px solid rgba(223, 114, 171, .65);
    padding-bottom: 0.05rem;
}
.sk-week-jump > summary {
    gap: 0.24rem;
}
.sk-week-jump > summary span:last-child {
    font-size: 0.78rem;
    opacity: 0.82;
}
.sk-date-jump-popover {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.55rem);
    left: 50%;
    width: min(19rem, calc(100vw - 2rem));
    transform: translateX(-50%);
    padding: 0.85rem;
    border: 1px solid rgba(54, 45, 106, .14);
    border-radius: 0.7rem;
    background: #fff;
    box-shadow: 0 14px 34px rgba(54, 45, 106, .18);
    text-align: left;
    text-transform: none;
}
.sk-date-jump-popover label {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--sk-muted);
    font-size: 0.82rem;
    font-weight: 800;
}
.sk-date-jump-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.45rem;
}
.sk-date-jump-controls input,
.sk-date-jump-controls button {
    min-height: 2.75rem;
    border-radius: 0.55rem;
    font: inherit;
}
.sk-date-jump-controls input {
    min-width: 0;
    border: 1px solid var(--sk-line);
    padding: 0.45rem 0.65rem;
    color: var(--sk-ink);
}
.sk-date-jump-controls button {
    border: 0;
    padding: 0 0.9rem;
    background: var(--sk-pink);
    color: #fff;
    font-weight: 900;
}
.sk-navbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sk-tap-min);
    height: var(--sk-tap-min);
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, .12);
    text-decoration: none;
    flex-shrink: 0;
}
.sk-navbar-btn:active { background: rgba(255, 255, 255, .22); }

/* ── Segmented control (Mit skema / Gruppe / Alle) ──────────────────── */
.sk-segmented {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    margin-bottom: 0.9rem;
}
.sk-segmented a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--sk-tap-min);
    border-radius: 0.6rem;
    background: #fff;
    border: 1px solid var(--sk-line);
    color: var(--sk-purple);
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    text-align: center;
    padding: 0.3rem;
}
.sk-segmented a.active { background: var(--sk-purple); border-color: var(--sk-purple); color: #fff; }

/* ── Quick-grid (forside genveje) ────────────────────────────────────── */
.sk-quick-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}
.sk-quick-grid a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.3rem;
    position: relative;
    min-height: 3.35rem;
    padding: 0.75rem 1rem 0.75rem 1.2rem;
    border-radius: 0.8rem;
    border: 1px solid var(--sk-line);
    background: #fff;
    color: var(--sk-purple);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 3px 12px rgba(54, 45, 106, .05);
}
.sk-quick-grid a::before {
    content: "";
    width: 0.34rem;
    position: absolute;
    left: 0;
    top: 0.65rem;
    bottom: 0.65rem;
    border-radius: 0 999px 999px 0;
    background: var(--sk-pink);
}
.sk-quick-grid a::after {
    content: "›";
    margin-left: auto;
    color: var(--sk-pink);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
}
.sk-quick-grid a:active {
    background: var(--sk-purple-soft);
    border-color: rgba(223, 114, 171, .55);
}

/* ── Day accordion (native <details>) ────────────────────────────────── */
.sk-day {
    background: #fff;
    border-radius: 0.9rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 4px 16px rgba(54, 45, 106, .08);
    overflow: hidden;
}
.sk-day > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    min-height: 3.6rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-weight: 700;
    color: var(--sk-purple);
}
.sk-day > summary::-webkit-details-marker { display: none; }
.sk-day-title { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.sk-day-title .sk-day-date { font-size: 0.95rem; }
.sk-day-title .sk-day-meta { font-size: 0.78rem; color: var(--sk-muted); font-weight: 500; overflow-wrap: anywhere; }
.sk-day-chevron {
    flex-shrink: 0;
    width: 1.6rem; height: 1.6rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--sk-purple-soft);
    color: var(--sk-purple);
    font-size: 0.85rem;
    transition: transform .15s ease;
}
.sk-day[open] .sk-day-chevron { transform: rotate(180deg); }
.sk-day-body { padding: 0 1rem 1rem; border-top: 1px solid var(--sk-line); }
.sk-schedule-day {
    border-radius: 0.72rem;
    margin-bottom: 0.45rem;
}
.sk-schedule-day > summary {
    min-height: 2.85rem;
    padding: 0.55rem 0.75rem;
}
.sk-schedule-row {
    display: grid;
    grid-template-columns: minmax(8.6rem, 1fr) auto;
    align-items: baseline;
    gap: 0.45rem;
    min-width: 0;
    width: 100%;
}
.sk-schedule-date,
.sk-schedule-summary {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sk-schedule-date {
    color: var(--sk-purple);
    font-weight: 800;
    text-transform: capitalize;
    font-size: 0.86rem;
}
.sk-schedule-summary {
    color: var(--sk-ink);
    font-size: 0.82rem;
    text-align: right;
}
.sk-schedule-time {
    color: var(--sk-pink);
    font-weight: 900;
    margin-left: 0.3rem;
}
.sk-schedule-day .sk-day-chevron {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.72rem;
}
.sk-roster-day {
    margin-bottom: 0.7rem;
    border-radius: 0.72rem;
    background: #fff;
    box-shadow: 0 4px 16px rgba(54, 45, 106, .08);
    overflow: hidden;
}
.sk-roster-day-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: var(--sk-purple-soft);
    color: var(--sk-purple);
    cursor: pointer;
    list-style: none;
}
.sk-roster-day-head::-webkit-details-marker { display: none; }
.sk-roster-day-head strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: capitalize;
    font-size: 0.86rem;
}
.sk-roster-day-head span {
    flex-shrink: 0;
    color: var(--sk-muted);
    font-size: 0.74rem;
    font-weight: 800;
}
.sk-roster-day-head .sk-day-chevron {
    width: 1.1rem;
    height: 1.1rem;
    font-size: 0.68rem;
}
.sk-roster-opening-hours {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.sk-roster-opening-icon {
    display: inline-block;
    width: 0.82rem;
    height: 0.82rem;
    background: var(--sk-pink);
    -webkit-mask: url("/assets/icons/home.svg") center / contain no-repeat;
    mask: url("/assets/icons/home.svg") center / contain no-repeat;
}
.sk-roster-day > .sk-empty {
    margin: 0;
    padding: 0.7rem 0.75rem;
}
.sk-roster-group {
    border-top: 1px solid var(--sk-line);
}
.sk-roster-group-name {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem 0.35rem;
    color: var(--sk-muted);
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}
.sk-roster-group-name span {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 999px;
    flex-shrink: 0;
}
.sk-roster-worker {
    display: grid;
    grid-template-columns: minmax(5.9rem, 0.42fr) minmax(0, 1fr);
    gap: 0.55rem;
    padding: 0.58rem 0.75rem;
    border-top: 1px solid #f1eef7;
}
.sk-roster-worker-name {
    min-width: 0;
    color: var(--sk-purple);
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.sk-roster-lines {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
}
.sk-roster-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.4rem;
    min-width: 0;
    font-size: 0.82rem;
    line-height: 1.25;
    padding: 0.18rem 0.28rem;
    border-radius: 0.42rem;
}
.sk-roster-line-open {
    background: #e7f7ed;
}
.sk-roster-line-close {
    background: #fee8e6;
}
.sk-roster-line-open.sk-roster-line-close {
    background: linear-gradient(90deg, #e7f7ed 0 50%, #fee8e6 50% 100%);
}
.sk-roster-line strong {
    color: var(--sk-pink);
    font-size: 0.86rem;
    font-weight: 900;
    white-space: nowrap;
}
.sk-roster-line span {
    min-width: 0;
    color: var(--sk-ink);
    font-weight: 700;
    overflow-wrap: anywhere;
}
.sk-roster-line small {
    color: var(--sk-muted);
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
}

/* ── Schedule lines ──────────────────────────────────────────────────── */
.sk-line {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid #f1eef7;
}
.sk-line:last-child { border-bottom: none; }
.sk-line-time { font-weight: 700; min-width: 5.6rem; padding-top: 0.15rem; }
.sk-line-main { flex: 1; min-width: 0; }
.sk-today-line-main {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.sk-today-group-row {
    margin: 0.15rem 0 0.35rem;
}
.sk-today-group {
    align-self: flex-start;
    border-radius: 999px;
    background: var(--sk-purple-soft);
    color: var(--sk-purple);
    padding: 0.18rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 800;
}
.sk-today-shift {
    display: block;
    font-size: 1.08rem;
    line-height: 1.35;
    color: var(--sk-ink);
}
.sk-today-shift span {
    color: var(--sk-muted);
    padding: 0 0.25rem;
}
.sk-today-pool-list {
    display: grid;
    gap: 0.25rem;
    margin-top: 0.45rem;
    padding-top: 0.45rem;
    border-top: 1px solid #f1eef7;
}
.sk-today-pool-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.28rem;
    color: var(--sk-muted);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
}
.sk-today-pool-line strong {
    color: var(--sk-pink);
    font-size: 0.88rem;
    font-weight: 900;
    white-space: nowrap;
}
.sk-opening-hours {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.8rem;
    color: var(--sk-muted);
    font-size: 0.82rem;
}
.sk-opening-hours .sk-icon {
    width: 1.35rem;
    height: 1.35rem;
    padding: 0.25rem;
    border-radius: 0.45rem;
    background: rgba(54, 45, 106, 0.34);
}
.sk-today-free {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--sk-purple);
    letter-spacing: 0.04em;
    padding: 0.65rem 0;
}
.sk-line-owner { color: var(--sk-purple); font-weight: 700; }
.sk-line-note { color: var(--sk-muted); font-size: 0.82rem; margin-top: 0.2rem; }
.sk-pending-list {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.85rem;
}
.sk-pending-item {
    padding: 0.65rem 0.75rem;
    border-left: 0.22rem solid var(--sk-pink);
    border-radius: 0.55rem;
    background: var(--sk-purple-soft);
    color: var(--sk-ink);
    font-size: 0.9rem;
    line-height: 1.35;
}
.sk-pending-item strong { color: var(--sk-purple); }
.sk-shift-card {
    padding: 0.75rem 0;
    border-bottom: 1px solid #f1eef7;
}
.sk-shift-card.sk-shift-segment {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}
.sk-shift-card:last-child { border-bottom: none; }
.sk-shift-reference {
    display: flex;
    gap: 0.7rem;
    color: var(--sk-muted);
    font-size: 0.74rem;
    margin-bottom: 0.45rem;
}
.sk-shift-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
}
.sk-shift-text {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.45rem;
}
.sk-shift-line {
    min-width: 100%;
    color: var(--sk-ink);
    font-size: 0.98rem;
    line-height: 1.25;
}
.sk-shift-line span {
    color: var(--sk-muted);
    padding: 0 0.25rem;
}
.sk-shift-line .sk-time-open {
    color: #256b43;
    background: #dff4e7;
    border-radius: 0.28rem;
    padding: 0.02rem 0.18rem;
}
.sk-shift-line .sk-time-close {
    color: #9a312c;
    background: #fde1df;
    border-radius: 0.28rem;
    padding: 0.02rem 0.18rem;
}
.sk-schedule-time .sk-time-open {
    color: #256b43;
    background: #dff4e7;
    border-radius: 0.28rem;
    padding: 0.02rem 0.18rem;
}
.sk-schedule-time .sk-time-close {
    color: #9a312c;
    background: #fde1df;
    border-radius: 0.28rem;
    padding: 0.02rem 0.18rem;
}
.sk-schedule-deviation,
.sk-shift-deviation {
    color: var(--sk-pink);
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1;
    padding-right: 0.1rem;
}
.sk-shift-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.sk-icon-action {
    width: 2.35rem;
    height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.72rem;
    border: 1px solid var(--sk-line);
    background: #fff;
    color: var(--sk-purple);
    font-size: 1.1rem;
    font-weight: 900;
    text-decoration: none;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(54, 45, 106, .06);
}
.sk-icon-action:active { background: var(--sk-purple-soft); }
.sk-icon-action-plus {
    background: var(--sk-pink);
    border-color: var(--sk-pink);
}
.sk-icon-action-plus .sk-icon {
    width: 1rem;
    height: 1rem;
}
.sk-icon-action-danger {
    color: var(--sk-error);
    border-color: var(--sk-error-bg);
    cursor: pointer;
}
.sk-day-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.7rem;
}
.sk-day-actions .sk-btn {
    gap: 0.4rem;
    width: 100%;
}
.sk-day-actions .sk-icon {
    width: 1rem;
    height: 1rem;
}
.sk-pool-compact-list {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--sk-line);
}
.sk-pool-compact-list-separated {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 2px solid var(--sk-lavender);
}
.sk-pool-compact-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.6rem;
    border-radius: 0.62rem;
    background: var(--sk-purple-soft);
}
.sk-pool-compact-main {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.45rem;
    font-size: 0.84rem;
}
.sk-pool-compact-main strong {
    color: var(--sk-pink);
    font-size: 0.9rem;
}
.sk-pool-compact-main span {
    color: var(--sk-ink);
    font-weight: 800;
}
.sk-pool-compact-main small {
    width: 100%;
    color: var(--sk-muted);
    font-size: 0.74rem;
    font-weight: 700;
}
.sk-pool-compact-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
form.sk-inline-icon-form {
    flex: 0 0 auto;
    display: inline-flex;
    min-width: 0;
}
.sk-choice-list {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.85rem;
}
.sk-choice-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.9rem 1rem;
    border-radius: 0.8rem;
    border: 1px solid var(--sk-line);
    background: #fff;
    color: var(--sk-purple);
    text-decoration: none;
    box-shadow: 0 3px 12px rgba(54, 45, 106, .05);
}
.sk-choice-item:active { background: var(--sk-purple-soft); }
.sk-choice-title {
    font-weight: 900;
    font-size: 0.98rem;
}
.sk-choice-meta {
    color: var(--sk-muted);
    font-size: 0.82rem;
    line-height: 1.35;
}
.sk-day-context {
    margin: 0.85rem 0 1rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--sk-line);
    border-bottom: 1px solid var(--sk-line);
}
.sk-day-context-head {
    display: flex;
    justify-content: space-between;
    gap: 0.65rem;
    align-items: baseline;
    margin-bottom: 0.55rem;
}
.sk-day-context-head strong {
    color: var(--sk-purple);
    font-size: 0.95rem;
}
.sk-day-context-head span {
    color: var(--sk-muted);
    font-size: 0.76rem;
    font-weight: 800;
}
.sk-day-context-lines {
    display: grid;
    gap: 0.4rem;
}
.sk-day-context-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.45rem;
    align-items: baseline;
    padding: 0.5rem 0.6rem;
    border-radius: 0.55rem;
    background: var(--sk-purple-soft);
    font-size: 0.84rem;
}
.sk-day-context-line strong {
    color: var(--sk-pink);
    font-size: 0.9rem;
}
.sk-day-context-line span {
    color: var(--sk-ink);
    font-weight: 800;
}
.sk-day-context-line small {
    flex: 1 1 100%;
    color: var(--sk-muted);
    font-size: 0.74rem;
    font-weight: 800;
}
.sk-day-context-line.sk-day-context-line-pool {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    background: var(--sk-lavender);
}
.sk-day-context-line.sk-day-context-line-pool small {
    grid-column: 1 / -1;
}
.sk-day-context-line-action {
    justify-self: end;
    margin-left: 0;
}
.sk-form-section-head {
    margin-top: 1rem;
    margin-bottom: -0.25rem;
}
.sk-choice-disabled {
    opacity: 0.62;
}
.sk-choice-group {
    display: grid;
    gap: 0.35rem;
    padding: 0.9rem 1rem;
    border-radius: 0.8rem;
    border: 1px solid var(--sk-line);
    background: #fff;
}
.sk-choice-sublist {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.3rem;
}
.sk-choice-item-compact {
    padding: 0.65rem 0.75rem;
    border-radius: 0.6rem;
    background: var(--sk-purple-soft);
}

/* ── Action rows / big buttons (replace inline links) ───────────────── */
.sk-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.7rem;
}
.sk-split-action-row {
    margin-top: 0.35rem;
    margin-bottom: 0.8rem;
}
.sk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 7rem;
    min-height: var(--sk-tap-min);
    padding: 0 0.9rem;
    border-radius: 0.6rem;
    border: 1px solid var(--sk-purple);
    background: #fff;
    color: var(--sk-purple);
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
}
.sk-btn:active { background: var(--sk-purple-soft); }
.sk-btn-primary { background: var(--sk-purple); color: #fff; border-color: var(--sk-purple); }
.sk-btn-primary:active { background: var(--sk-purple-dark); }
.sk-btn-secondary { background: var(--sk-mint); color: #fff; border-color: var(--sk-mint); }
.sk-btn-danger { color: var(--sk-error); border-color: var(--sk-error); }
.sk-btn-danger:active { background: var(--sk-error-bg); }
.sk-btn-block { width: 100%; flex: none; }
form.sk-inline-form { flex: 1 1 auto; display: flex; min-width: 7rem; }
form.sk-inline-form .sk-btn { width: 100%; }

/* ── Badges / status pills ───────────────────────────────────────────── */
.sk-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    margin-right: 0.35rem;
}
.sk-badge-work { background: #e3f3f1; color: #146963; }
.sk-badge-sickness { background: var(--sk-error-bg); color: var(--sk-error); }
.sk-badge-pool-out { background: var(--sk-purple-soft); color: var(--sk-purple); }
.sk-badge-pool-in { background: var(--sk-warn-bg); color: var(--sk-warn); }
.sk-badge-holiday { background: #e0f4e7; color: #1f7a45; }
.sk-badge-free { background: #eee; color: #5c5768; }
.sk-badge-specialzeroday { background: #fdf0d0; color: #93590a; }
.sk-badge-none { background: #eee; color: #6f6a80; }

.sk-status {
    display: inline-flex;
    align-items: center;
    min-height: 1.6rem;
    border-radius: 0.5rem;
    padding: 0.15rem 0.6rem;
    font-size: 0.76rem;
    font-weight: 700;
}
.sk-status-created { background: var(--sk-warn-bg); color: var(--sk-warn); }
.sk-status-approved { background: var(--sk-ok-bg); color: var(--sk-ok); }
.sk-status-rejected { background: var(--sk-error-bg); color: var(--sk-error); }
.sk-status-removed { background: #eee; color: #777; }

.sk-history-list {
    border: 1px solid var(--sk-line);
    border-radius: 0.7rem;
    overflow: hidden;
    background: #fff;
}
.sk-history-row {
    display: grid;
    grid-template-columns: 5.6rem minmax(0, 1fr);
    gap: 0.6rem;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--sk-line);
}
.sk-history-row:last-child { border-bottom: none; }
.sk-history-date {
    color: var(--sk-purple);
    font-weight: 800;
    font-size: 0.82rem;
}
.sk-history-main {
    min-width: 0;
}
.sk-approval-card {
    display: grid;
    gap: 0.75rem;
}
.sk-approval-head {
    display: grid;
    grid-template-columns: 5.6rem minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.45rem;
    align-items: center;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--sk-line);
    color: var(--sk-purple);
    font-size: 0.78rem;
    font-weight: 900;
}
.sk-approval-head > div {
    min-width: 0;
    overflow-wrap: anywhere;
}
.sk-approval-head > div:nth-child(2) {
    color: var(--sk-muted);
    text-transform: capitalize;
}
.sk-approval-head > div:last-child {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.3rem;
    text-align: right;
}
.sk-approval-type {
    color: var(--sk-pink);
}
.sk-approval-change {
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.35rem 0.45rem;
    color: var(--sk-muted);
    font-size: 0.82rem;
    line-height: 1.3;
}
.sk-approval-change-label {
    color: var(--sk-purple);
    font-weight: 900;
}
.sk-approval-change-value {
    grid-column: 2 / 4;
    min-width: 0;
    color: var(--sk-ink);
    font-weight: 700;
    overflow-wrap: anywhere;
}
.sk-approval-note {
    grid-column: 2 / 4;
    min-width: 0;
    margin-top: -0.1rem;
}

/* ── Forms ───────────────────────────────────────────────────────────── */
form.sk-form label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--sk-muted);
    margin: 0.85rem 0 0.3rem;
}
.sk-form-error {
    margin: 0.85rem 0 0;
    padding: 0.65rem 0.75rem;
    border-radius: 0.55rem;
    background: var(--sk-error-bg);
    color: var(--sk-error);
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.35;
}
.sk-form-error:empty {
    display: none;
}
.sk-form-error ul {
    margin: 0;
    padding-left: 1.1rem;
}
form.sk-form input,
form.sk-form select,
form.sk-form textarea {
    width: 100%;
    min-height: 3rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--sk-line);
    border-radius: 0.6rem;
    font-family: var(--sk-font);
    font-size: 1rem; /* >=16px forhindrer iOS zoom-on-focus */
    background: #fff;
    color: var(--sk-ink);
}
form.sk-form input.sk-readonly-time {
    border-color: var(--sk-lavender);
    background: #f5f3ff;
    color: var(--sk-muted);
    cursor: not-allowed;
}
form.sk-form textarea { min-height: 4.5rem; resize: vertical; }
form.sk-diary-form {
    gap: 0.95rem;
}
.sk-diary-section {
    display: grid;
    gap: 0.35rem;
    padding: 0.8rem 0 0.95rem;
    border-bottom: 1px solid var(--sk-line);
}
.sk-diary-section:last-of-type {
    border-bottom: none;
}
form.sk-form .sk-diary-heading {
    min-height: 2.35rem;
    padding: 0.15rem 0;
    border: 0;
    border-radius: 0;
    border-bottom: 2px solid var(--sk-lavender);
    background: transparent;
    color: var(--sk-purple);
    font-size: 1.05rem;
    font-weight: 900;
}
form.sk-form .sk-diary-heading:focus {
    outline: none;
    border-bottom-color: var(--sk-pink);
}
form.sk-form .sk-diary-content {
    min-height: 5.5rem;
    border-radius: 0.45rem;
    background: #fff;
}
form.sk-form .sk-submit {
    display: block;
    width: 100%;
    margin-top: 1.2rem;
    min-height: 3.2rem;
    background: var(--sk-purple);
    color: #fff;
    border: none;
    border-radius: 0.7rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}
form.sk-form .sk-submit:active { background: var(--sk-purple-dark); }

.sk-preview {
    background: var(--sk-lavender);
    border-radius: 0.7rem;
    padding: 0.75rem 0.9rem;
    margin-top: 1rem;
    font-size: 0.88rem;
}
.sk-preview code {
    display: block;
    background: rgba(255, 255, 255, .55);
    border-radius: 0.4rem;
    padding: 0.3rem 0.5rem;
    margin-top: 0.3rem;
    font-size: 0.85rem;
}

/* ── Balances ────────────────────────────────────────────────────────── */
.sk-balance-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--sk-line);
}
.sk-balance-card:last-child { border-bottom: none; }
.sk-balance-title { font-weight: 700; }
.sk-balance-meta { color: var(--sk-muted); font-size: 0.78rem; margin-top: 0.15rem; }
.sk-balance-remaining { font-size: 1.15rem; font-weight: 800; color: var(--sk-purple); white-space: nowrap; }
.sk-year-switcher {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    margin: 0.85rem 0 1rem;
}
.sk-year-switcher label {
    color: var(--sk-muted);
    font-size: 0.78rem;
    font-weight: 900;
}
.sk-year-switcher select {
    min-width: 0;
    height: 2.4rem;
    border: 1px solid var(--sk-line);
    border-radius: 0.55rem;
    background: #fff;
    color: var(--sk-ink);
    font: inherit;
    font-weight: 900;
    padding: 0 0.55rem;
}
.sk-year-switcher button {
    height: 2.4rem;
    border: 0;
    border-radius: 0.55rem;
    background: var(--sk-pink);
    color: #fff;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 900;
    padding: 0 0.8rem;
}
.sk-pool-balance-table,
.sk-pool-account-table {
    border: 1px solid var(--sk-line);
    border-radius: 0.7rem;
    overflow: hidden;
    background: #fff;
}
.sk-pool-balance-row,
.sk-pool-account-row {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) 3.9rem 4.2rem 3.7rem;
    gap: 0.35rem;
    align-items: center;
    min-height: 2.7rem;
    padding: 0.55rem 0.55rem;
    border-bottom: 1px solid var(--sk-line);
    color: var(--sk-ink);
    font-size: 0.78rem;
    text-decoration: none;
}
.sk-pool-balance-row:last-child,
.sk-pool-account-row:last-child { border-bottom: none; }
.sk-pool-balance-header,
.sk-pool-account-header {
    min-height: 2.2rem;
    background: var(--sk-purple-soft);
    color: var(--sk-purple);
    font-size: 0.7rem;
    font-weight: 900;
}
.sk-pool-balance-row > div:not(:first-child),
.sk-pool-account-row > div:not(:first-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.sk-pool-balance-title {
    color: var(--sk-purple);
    font-weight: 900;
}
.sk-pool-balance-remaining {
    color: var(--sk-pink);
    font-weight: 900;
}
.sk-pool-account-row > div:first-child {
    min-width: 0;
    display: grid;
    gap: 0.08rem;
}
.sk-pool-account-row strong {
    color: var(--sk-purple);
    font-size: 0.8rem;
}
.sk-pool-account-row span {
    min-width: 0;
    color: var(--sk-muted);
    font-size: 0.7rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.sk-pool-account-row:not(.sk-pool-account-header):active {
    background: var(--sk-purple-soft);
}
.sk-pool-entry-table {
    border: 1px solid var(--sk-line);
    border-radius: 0.7rem;
    overflow: hidden;
    background: #fff;
}
.sk-pool-entry-row {
    display: grid;
    grid-template-columns: 5.7rem 3.3rem minmax(0, 1fr) 2.25rem;
    gap: 0.35rem;
    align-items: center;
    min-height: 2.7rem;
    padding: 0.55rem 0.55rem;
    border-bottom: 1px solid var(--sk-line);
    color: var(--sk-ink);
    font-size: 0.78rem;
}
.sk-pool-entry-row:last-child { border-bottom: none; }
.sk-pool-entry-header {
    min-height: 2.2rem;
    background: var(--sk-purple-soft);
    color: var(--sk-purple);
    font-size: 0.7rem;
    font-weight: 900;
}
.sk-pool-entry-row > div:nth-child(2) {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.sk-pool-entry-row > div:nth-child(3) {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--sk-muted);
}
.sk-pool-entry-row > div:last-child {
    display: flex;
    justify-content: flex-end;
}

/* ── Agreement / Oversigt ───────────────────────────────────────────── */
.sk-agreement h1 { margin-bottom: 0.35rem; }
.sk-section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.45rem;
}
.sk-section-title-row h2 { margin-bottom: 0; }
.sk-section-title-row a,
.sk-agreement-period-meta a,
.sk-back-link {
    color: var(--sk-pink);
    font-size: 0.78rem;
    font-weight: 900;
    text-decoration: none;
}
.sk-back-link {
    display: inline-flex;
    margin-bottom: 0.55rem;
}
.sk-agreement-period-meta {
    margin: -0.25rem 0 0.85rem;
    color: var(--sk-muted);
    font-size: 0.78rem;
    font-weight: 800;
}
.sk-agreement-lead {
    margin: -0.15rem 0 0.8rem;
    color: var(--sk-purple);
    font-size: 0.9rem;
    font-weight: 900;
}
.sk-agreement-section { margin-top: 1rem; }
.sk-agreement-section h2 {
    margin: 0 0 0.45rem;
    color: var(--sk-purple);
    font-size: 0.92rem;
    font-weight: 900;
}
.sk-agreement-matrix {
    border: 1px solid var(--sk-line);
    border-radius: 0.7rem;
    overflow: hidden;
    background: #fff;
}
.sk-agreement-row {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) repeat(3, minmax(3.65rem, 0.82fr));
    gap: 0.28rem;
    align-items: center;
    min-height: 2.55rem;
    padding: 0.5rem 0.52rem;
    border-bottom: 1px solid var(--sk-line);
    font-size: 0.76rem;
}
.sk-agreement-entitlements .sk-agreement-row {
    grid-template-columns: minmax(0, 1.1fr) repeat(4, minmax(3rem, 0.72fr));
    font-size: 0.72rem;
}
.sk-agreement-row:last-child { border-bottom: none; }
.sk-agreement-header {
    min-height: 2.45rem;
    background: var(--sk-purple-soft);
    color: var(--sk-purple);
    font-size: 0.66rem;
    font-weight: 900;
}
.sk-agreement-row > div:not(:first-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.sk-agreement-row > div:first-child {
    min-width: 0;
    color: var(--sk-ink);
    font-weight: 700;
    overflow-wrap: anywhere;
}
.sk-agreement-period-label {
    display: grid;
    gap: 0.08rem;
    line-height: 1.05;
    white-space: normal !important;
}
.sk-agreement-period-label span {
    display: block;
}
.sk-agreement-total {
    background: rgba(220, 213, 249, .34);
    font-weight: 900;
}
.sk-agreement-total > div:first-child,
.sk-agreement-group > div:first-child { color: var(--sk-purple); }
.sk-agreement-line {
    min-height: 2.25rem;
    background: rgba(235, 233, 223, .48);
}
.sk-agreement-line > div:first-child {
    padding-left: 0.45rem;
    color: var(--sk-muted);
    font-size: 0.7rem;
    font-weight: 700;
}
.sk-positive { color: var(--sk-mint); font-weight: 900; }
.sk-negative { color: var(--sk-pink); font-weight: 900; }
.sk-agreement-explain {
    display: grid;
    gap: 0.65rem;
    color: var(--sk-ink);
    font-size: 0.9rem;
    line-height: 1.42;
}
.sk-agreement-explain p { margin: 0; }

/* ── Mobile table (aftalegrundlag) ──────────────────────────────────── */
.sk-mobile-table { border: 1px solid var(--sk-line); border-radius: 0.7rem; overflow: hidden; }
.sk-mobile-table .sk-table-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--sk-line);
    font-size: 0.85rem;
    align-items: center;
}
.sk-mobile-table .sk-table-row:last-child { border-bottom: none; }
.sk-mobile-table .sk-table-header { background: var(--sk-purple-soft); color: var(--sk-purple); font-weight: 700; }
.sk-mobile-table .sk-table-row div:nth-child(2),
.sk-mobile-table .sk-table-row div:nth-child(3) { text-align: right; }

/* ── Login ───────────────────────────────────────────────────────────── */
.sk-login-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: linear-gradient(160deg, var(--sk-purple) 0%, var(--sk-mint) 100%);
}
.sk-login-card {
    width: min(24rem, 100%);
    background: #fff;
    border-radius: 1rem;
    padding: 1.75rem 1.25rem;
    box-shadow: 0 24px 60px rgba(36, 32, 46, .28);
}
.sk-login-logo {
    display: block;
    width: min(9.5rem, 62%);
    max-height: 3rem;
    height: auto;
    object-fit: contain;
    margin: 0 auto 1rem;
}
.sk-worker-list { list-style: none; padding: 0; margin: 0.9rem 0 0; display: grid; gap: 0.6rem; }
.sk-worker-list form { margin: 0; }
.sk-worker-list button {
    width: 100%;
    text-align: left;
    min-height: 3.6rem;
    padding: 0.7rem 1rem;
    border-radius: 0.7rem;
    border: 1px solid var(--sk-line);
    background: #fff;
    font-family: var(--sk-font);
    font-size: 0.95rem;
    cursor: pointer;
}
.sk-worker-list button:active { background: var(--sk-purple-soft); border-color: var(--sk-purple); }
.sk-worker-list .sk-worker-meta { display: block; color: var(--sk-muted); font-size: 0.78rem; margin-top: 0.15rem; }

.sk-empty { color: var(--sk-muted); font-size: 0.9rem; }

/* ── Small screens (reference breakpoint ~390px) ────────────────────── */
@media (max-width: 400px) {
    .sk-content { padding-left: 0.6rem; padding-right: 0.6rem; }
    .sk-quick-grid a { font-size: 0.92rem; }
    .sk-mobile-table .sk-table-row { grid-template-columns: minmax(0, 1fr) 3.6rem 3.6rem; font-size: 0.8rem; }
}