/* ==========================================================================
   Garantiarkiv - designsystem
   ==========================================================================
   Opbygning:
     1. Designtokens (farver, afstande, typografi)
     2. Nulstilling og grundlæggende elementer
     3. Layout (sidebar, topbar, bundnavigation)
     4. Komponenter (kort, knapper, formularer, tabeller, badges, toasts)
     5. Hjælpeklasser
     6. Print

   MØRKT TEMA er ikke en invertering af det lyse. Hvert token har sin egen
   værdi i mørkt tema, så overflader, kanter og statusfarver bevarer
   læsbarhed og indbyrdes forhold. Se afsnit 1b.

   TEMAVALG følger dette hierarki:
     1. data-theme på <html>   (brugerens aktive valg)
     2. prefers-color-scheme    (enhedens indstilling)
   Derfor er :root de lyse værdier, mens @media og [data-theme] overstyrer.
   ========================================================================== */

/* ==========================================================================
   1. Designtokens - lyst tema
   ========================================================================== */

:root {
    /* --- Flader --------------------------------------------------------- */
    --bg:              #f5f6f8;
    --surface:         #ffffff;
    --surface-2:       #f8f9fb;   /* Nedtonet flade i et kort */
    --surface-raised:  #ffffff;   /* Dialoger og popovers */
    --surface-hover:   #f0f2f5;

    /* --- Navigationsflader (topbar, sidebar, bundnavigation) -------------
       Rammen om indholdet holdes en anelse mørkere end kortene. Ellers
       flyder navigationen sammen med siden, fordi begge dele er hvide.
       Teksttonerne herunder er gjort tilsvarende mørkere, så kontrasten
       på den nye flade bliver mindst lige så god som før (AA).
       I mørkt tema er adskillelsen unødvendig - dér peger alle seks
       tokens tilbage på de almindelige flade- og tekstfarver.
       ------------------------------------------------------------------- */
    --chrome:              #eaedf2;
    --chrome-hover:        #dfe4eb;
    --chrome-border:       #d4dae2;
    --chrome-active:       #dbe7fb;   /* Aktivt menupunkt */
    --chrome-text-muted:   #444c57;
    --chrome-text-subtle:  #5b6470;

    /* --- Tekst ---------------------------------------------------------- */
    --text:            #16191d;
    --text-muted:      #5b6470;
    --text-subtle:     #7a838f;
    --text-inverse:    #ffffff;

    /* --- Kanter --------------------------------------------------------- */
    --border:          #dfe3e8;
    --border-strong:   #c4cad2;

    /* --- Primærfarve ---------------------------------------------------- */
    --primary:         #1d5fd0;
    --primary-hover:   #1750b0;
    --primary-active:  #134292;
    --primary-soft:    #e8f0fd;
    --primary-text:    #14488f;

    /* --- Statusfarver ---------------------------------------------------
       Farve må ALDRIG stå alene. Hver status ledsages altid af ikon og
       tekst - se .badge og .status-dot. Farverne her er valgt, så de kan
       skelnes også ved rod-grøn farveblindhed: grøn og rød adskiller
       sig ikke kun i kulør, men også i lyshed.
       ------------------------------------------------------------------- */
    --success:         #1a7f4b;
    --success-soft:    #e3f5ea;
    --success-text:    #12603a;

    --warning:         #a8600a;
    --warning-soft:    #fdf0dc;
    --warning-text:    #7d4708;

    --danger:          #c02a2a;
    --danger-soft:     #fdeaea;
    --danger-text:     #92201f;

    --info:            #1a6a9e;
    --info-soft:       #e4f2fa;
    --info-text:       #14526f;

    --neutral:         #5b6470;
    --neutral-soft:    #eef0f3;
    --neutral-text:    #444c57;

    /* --- Skygger - diskrete ---------------------------------------------- */
    --shadow-sm:  0 1px 2px rgba(16, 24, 40, .06);
    --shadow:     0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-md:  0 4px 12px rgba(16, 24, 40, .09), 0 2px 4px rgba(16, 24, 40, .04);
    --shadow-lg:  0 12px 28px rgba(16, 24, 40, .13), 0 4px 8px rgba(16, 24, 40, .05);

    /* --- Rundinger - moderate -------------------------------------------- */
    --radius-sm:  6px;
    --radius:     10px;
    --radius-md:  12px;
    --radius-lg:  16px;
    --radius-full: 999px;

    /* --- Afstande - 4px-skala ------------------------------------------- */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* --- Typografi ------------------------------------------------------
       Systemets egne skrifttyper. Ingen webfont hentes udefra: det ville
       lække brugerens IP-adresse til tredjepart og kræve internetadgang.
       ------------------------------------------------------------------- */
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
            "Noto Sans", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;

    --text-xs:  .75rem;
    --text-sm:  .8125rem;
    --text-base: .9375rem;
    --text-md:  1rem;
    --text-lg:  1.125rem;
    --text-xl:  1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.125rem;

    --leading-tight: 1.25;
    --leading:       1.55;

    /* --- Layout ---------------------------------------------------------- */
    --sidebar-width: 260px;
    --topbar-height: 60px;
    --bottomnav-height: 60px;
    --content-max: 1400px;

    /* --- Bevægelse ------------------------------------------------------- */
    --transition: 150ms ease;

    /* Fokusring. Skal være synlig på alle flader. */
    --focus-ring: 0 0 0 3px rgba(29, 95, 208, .38);

    color-scheme: light;
}

/* ==========================================================================
   1b. Designtokens - mørkt tema
   ==========================================================================
   Bemærk at flader IKKE er ren sort. En let blålig grundtone reducerer
   den halo-effekt, hvid tekst på ren sort giver, og gør læsning i mørke
   omgivelser mere behagelig.

   Statusfarverne er lysere og mindre mættede end i lyst tema. Bruges de
   mørke varianter på en mørk flade, falder kontrasten under det
   acceptable.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:             #101317;
        --surface:        #191d23;
        --surface-2:      #20252c;
        --surface-raised: #232830;
        --surface-hover:  #262c34;

        /* Navigationen skiller sig allerede ud i mørkt tema. */
        --chrome:             #191d23;
        --chrome-hover:       #262c34;
        --chrome-border:      #2c333c;
        --chrome-active:      #17253c;
        --chrome-text-muted:  #a3aeba;
        --chrome-text-subtle: #7d8896;

        --text:           #e7eaee;
        --text-muted:     #a3aeba;
        --text-subtle:    #7d8896;
        --text-inverse:   #101317;

        --border:         #2c333c;
        --border-strong:  #3d4650;

        --primary:        #5a9bff;
        --primary-hover:  #7db0ff;
        --primary-active: #96beff;
        --primary-soft:   #17253c;
        --primary-text:   #9cc3ff;

        --success:        #3fc07d;
        --success-soft:   #142c20;
        --success-text:   #6fd6a0;

        --warning:        #e3a13c;
        --warning-soft:   #2e2312;
        --warning-text:   #f0bd6a;

        --danger:         #f2645f;
        --danger-soft:    #331819;
        --danger-text:    #ff9490;

        --info:           #4facd8;
        --info-soft:      #132833;
        --info-text:      #82c9ea;

        --neutral:        #8c96a3;
        --neutral-soft:   #232830;
        --neutral-text:   #aab4c0;

        /* Skygger virker dårligt på mørke flader. Dybde skabes i stedet
           med lysere overflader og tydeligere kanter. */
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
        --shadow:    0 2px 6px rgba(0, 0, 0, .45);
        --shadow-md: 0 6px 16px rgba(0, 0, 0, .5);
        --shadow-lg: 0 16px 36px rgba(0, 0, 0, .58);

        --focus-ring: 0 0 0 3px rgba(90, 155, 255, .48);

        color-scheme: dark;
    }
}

/* Brugerens eksplicitte valg vinder altid over enhedens indstilling. */
:root[data-theme="dark"] {
    --bg:             #101317;
    --surface:        #191d23;
    --surface-2:      #20252c;
    --surface-raised: #232830;
    --surface-hover:  #262c34;

    --chrome:             #191d23;
    --chrome-hover:       #262c34;
    --chrome-border:      #2c333c;
    --chrome-active:      #17253c;
    --chrome-text-muted:  #a3aeba;
    --chrome-text-subtle: #7d8896;

    --text:           #e7eaee;
    --text-muted:     #a3aeba;
    --text-subtle:    #7d8896;
    --text-inverse:   #101317;

    --border:         #2c333c;
    --border-strong:  #3d4650;

    --primary:        #5a9bff;
    --primary-hover:  #7db0ff;
    --primary-active: #96beff;
    --primary-soft:   #17253c;
    --primary-text:   #9cc3ff;

    --success:        #3fc07d;
    --success-soft:   #142c20;
    --success-text:   #6fd6a0;

    --warning:        #e3a13c;
    --warning-soft:   #2e2312;
    --warning-text:   #f0bd6a;

    --danger:         #f2645f;
    --danger-soft:    #331819;
    --danger-text:    #ff9490;

    --info:           #4facd8;
    --info-soft:      #132833;
    --info-text:      #82c9ea;

    --neutral:        #8c96a3;
    --neutral-soft:   #232830;
    --neutral-text:   #aab4c0;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow:    0 2px 6px rgba(0, 0, 0, .45);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, .5);
    --shadow-lg: 0 16px 36px rgba(0, 0, 0, .58);

    --focus-ring: 0 0 0 3px rgba(90, 155, 255, .48);

    color-scheme: dark;
}

/* ==========================================================================
   2. Nulstilling og grundelementer
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
    /* Rullning uden hop når man følger et ankerlink. */
    scroll-behavior: smooth;
    /* Plads til den faste topbar når man springer til et anker. */
    scroll-padding-top: calc(var(--topbar-height) + var(--space-4));
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font);
    font-size: var(--text-base);
    line-height: var(--leading);
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    /* Vandret rulning må aldrig forekomme - jf. kravet om at brugeren ikke
       skal scrolle sideværts på mobil. */
    overflow-x: hidden;
}

img, picture, svg, video {
    display: block;
    max-width: 100%;
    height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6 {
    line-height: var(--leading-tight);
    font-weight: 650;
    letter-spacing: -.011em;
    text-wrap: balance;
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }

p { text-wrap: pretty; }

a {
    color: var(--primary);
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}
a:hover { color: var(--primary-hover); }

/* --- Fokus ---------------------------------------------------------------
   Fokusmarkeringen fjernes ALDRIG. :focus-visible sikrer, at den vises ved
   tastaturnavigation, men ikke ved museklik - så den hjælper uden at
   forstyrre.
   ------------------------------------------------------------------------ */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* Spring til indhold - første tabstop på siden. */
.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -100px;
    z-index: 200;
    padding: var(--space-3) var(--space-4);
    background: var(--primary);
    color: #fff;
    border-radius: var(--radius);
    font-weight: 600;
    transition: top var(--transition);
}
.skip-link:focus { top: var(--space-4); color: #fff; }

/* Kun for skærmlæsere. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Respekter brugerens ønske om mindre bevægelse. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================================================
   3. Layout
   ========================================================================== */

.app-shell { min-height: 100dvh; }

/* --- Topbar --------------------------------------------------------------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-4);
    background: var(--chrome);
    border-bottom: 1px solid var(--chrome-border);
}

/* Knapperne i topbaren ligger på den nedtonede flade og skal have en
   hover, der kan ses dér - ikke den lyse fra kortene.
   Administratorbaren har sine egne farver længere nede i filen og holdes
   derfor uden for reglen. */
.topbar:not(.topbar--admin) .btn--ghost { color: var(--chrome-text-muted); }
.topbar:not(.topbar--admin) .btn--ghost:hover:not(:disabled) {
    background: var(--chrome-hover);
    color: var(--text);
}

.topbar__brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 680;
    font-size: var(--text-md);
    color: var(--text);
    text-decoration: none;
    letter-spacing: -.02em;
}
.topbar__brand:hover { color: var(--text); }

.topbar__spacer { flex: 1; }

.topbar__actions { display: flex; align-items: center; gap: var(--space-2); }

/* --- Sidebar (computer) --------------------------------------------------- */
.sidebar {
    display: none;
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    padding: var(--space-4) var(--space-3);
    background: var(--chrome);
    border-right: 1px solid var(--chrome-border);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.nav-section { margin-bottom: var(--space-6); }

.nav-section__title {
    padding: 0 var(--space-3) var(--space-2);
    font-size: var(--text-xs);
    font-weight: 620;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--chrome-text-subtle);
}

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    margin-bottom: 2px;
    border-radius: var(--radius);
    color: var(--chrome-text-muted);
    text-decoration: none;
    font-weight: 520;
    transition: background var(--transition), color var(--transition);
}
.nav-link:hover { background: var(--chrome-hover); color: var(--text); }

.nav-link[aria-current="page"] {
    background: var(--chrome-active);
    color: var(--primary-text);
    font-weight: 620;
}

.nav-link__icon { flex: none; width: 20px; height: 20px; }

.nav-link__badge {
    margin-left: auto;
    padding: 1px var(--space-2);
    border-radius: var(--radius-full);
    background: var(--danger);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 640;
}

/* --- Hovedindhold ---------------------------------------------------------- */
.main {
    padding: var(--space-5) var(--space-4);
    /* Plads til bundnavigationen på mobil. */
    padding-bottom: calc(var(--bottomnav-height) + var(--space-8));
    max-width: var(--content-max);
    margin: 0 auto;
}

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.page-header__title { margin-bottom: var(--space-1); }

.page-header__subtitle { color: var(--text-muted); font-size: var(--text-sm); }

.page-header__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Tilbage-link over sidetitlen.
   Ikonerne i App\Support\Icons har ingen width/height i sig selv - de henter
   deres størrelse fra CSS. Uden reglen herunder ville pilen brede sig ud i
   hele forældrebredden, fordi svg-reset'en øverst i filen sætter height:auto
   og lader bredden være fri. Linket gøres samtidig til inline-flex, så pilen
   står ved siden af teksten og ikke på sin egen linje (reset'en sætter
   display:block på alle svg). */
.backlink { display: inline-flex; align-items: center; gap: var(--space-1); }
.backlink svg { width: 16px; height: 16px; flex: none; }

/* --- Bundnavigation (mobil) ------------------------------------------------
   De vigtigste funktioner placeres her, så de kan nås med en hånd.
   ------------------------------------------------------------------------- */
.bottomnav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 50;
    display: flex;
    height: var(--bottomnav-height);
    background: var(--chrome);
    border-top: 1px solid var(--chrome-border);
    /* Plads til hjemknappen på iPhone. */
    padding-bottom: env(safe-area-inset-bottom);
}

.bottomnav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--space-2) var(--space-1);
    color: var(--chrome-text-subtle);
    text-decoration: none;
    font-size: var(--text-xs);
    font-weight: 550;
    /* Mindst 44px højt klikområde - anbefalingen for touch. */
    min-height: 48px;
}
.bottomnav__item[aria-current="page"] { color: var(--primary); }
.bottomnav__item svg { width: 22px; height: 22px; }

/* --- Skift til computerlayout --------------------------------------------- */
@media (min-width: 1024px) {
    .sidebar { display: block; }
    .bottomnav { display: none; }

    .main {
        margin-left: var(--sidebar-width);
        padding: var(--space-8);
        padding-bottom: var(--space-12);
        max-width: calc(var(--content-max) - var(--sidebar-width));
    }

    .topbar { padding: 0 var(--space-6); }

    h1 { font-size: var(--text-3xl); }
}

/* ==========================================================================
   4. Komponenter
   ========================================================================== */

/* --- Kort ------------------------------------------------------------------ */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border);
}

.card__title { font-size: var(--text-md); font-weight: 640; }

.card__body { padding: var(--space-5); }

.card__footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* --- Gitter ---------------------------------------------------------------
   auto-fit + minmax gør gitteret responsivt uden brudpunkter: kortene
   ombrydes af sig selv, når der ikke er plads.
   ------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--space-4); }
.grid--stats { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid--2     { grid-template-columns: 1fr; }

@media (min-width: 900px) {
    .grid--2 { grid-template-columns: repeat(2, 1fr); }
}

/* --- Statistikfelt ---------------------------------------------------------- */
.stat {
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.stat__label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

/* Uden en eksplicit størrelse falder ikonet tilbage til den globale
   svg-regel (max-width:100%) og fylder hele feltets bredde. Det skal
   følge etikettens tekst, ikke dominere kortet. */
.stat__label svg { flex: none; width: 16px; height: 16px; }

.stat__value {
    font-size: var(--text-2xl);
    font-weight: 680;
    letter-spacing: -.02em;
    line-height: 1.1;
}

.stat__meta { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--text-subtle); }

.stat--success .stat__value { color: var(--success-text); }
.stat--warning .stat__value { color: var(--warning-text); }
.stat--danger  .stat__value { color: var(--danger-text); }

/* --- Knapper ---------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    /* 44px mindstehøjde: komfortabelt at ramme med en finger. */
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition), border-color var(--transition),
                color var(--transition), box-shadow var(--transition);
}

.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.btn:disabled,
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.btn--primary:active:not(:disabled) { background: var(--primary-active); }

.btn--secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.btn--secondary:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); }

.btn--ghost { background: transparent; color: var(--text-muted); }
.btn--ghost:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); }

.btn--danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn--danger:hover:not(:disabled) { filter: brightness(1.08); color: #fff; }

.btn--sm { min-height: 36px; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.btn--lg { min-height: 50px; padding: var(--space-4) var(--space-6); font-size: var(--text-md); }
.btn--block { width: 100%; }

.btn--icon { padding: var(--space-2); min-width: 44px; }

/* --- Formularer -------------------------------------------------------------- */
.form-group { margin-bottom: var(--space-5); }

.label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: 580;
    font-size: var(--text-sm);
}

.label__required { color: var(--danger); margin-left: 2px; }

.label__optional { color: var(--text-subtle); font-weight: 450; margin-left: var(--space-1); }

.input, .select, .textarea {
    display: block;
    width: 100%;
    padding: var(--space-3);
    min-height: 44px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    transition: border-color var(--transition), box-shadow var(--transition);
    /* 16px på mobil forhindrer, at iOS zoomer ind når feltet får fokus. */
    font-size: max(16px, var(--text-base));
}

@media (min-width: 768px) {
    .input, .select, .textarea { font-size: var(--text-base); }
}

.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
}

.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }

.textarea { min-height: 110px; resize: vertical; line-height: var(--leading); }

.select {
    appearance: none;
    /* Pilen tegnes med en indlejret SVG. Ingen ekstern billedfil hentes. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6470' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-10);
}

/* Pilen i select skal også kunne ses på mørk baggrund. */
:root[data-theme="dark"] .select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a3aeba' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a3aeba' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    }
}

/* Felter med fejl markeres både med farve OG med tekst under feltet. */
.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
    border-color: var(--danger);
}

.field-error {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--danger-text);
    font-weight: 520;
}
.field-error svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }

.field-hint { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); }

/* --- Datofelt i brugerens format -------------------------------------------
   Browserens eget datofelt viser datoen i browserens format, ikke sidens. Se
   partials/date_field.php. Feltet er derfor et tekstfelt med en knap, der
   åbner browserens kalender.

   Knappen vises kun, når app.js har fundet showPicker() og sat
   .date-field--picker. Kan browseren ikke åbne en kalender for os, skal der
   heller ikke stå en knap, der lover det. */
.date-field { position: relative; }

.date-field__native {
    /* Skal være tegnet for at showPicker() virker - derfor ikke display:none. */
    position: absolute;
    width: 1px; height: 1px;
    bottom: 0; left: 0;
    padding: 0; margin: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.date-field__button {
    display: none;
    position: absolute;
    top: 50%;
    right: var(--space-2);
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.date-field--picker .date-field__button { display: inline-flex; }

.date-field__button svg { width: 18px; height: 18px; }

.date-field__button:hover { background: var(--surface-hover); color: var(--text); }

.date-field__button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Plads til knappen, så et langt årstal ikke løber ind under den. */
.date-field--picker .date-field__text { padding-right: var(--space-10); }

/* --- Filfelt med dansk knaptekst -------------------------------------------
   Browserens egen knap i et filfelt følger browserens sprog, ikke sidens, og
   kan ikke oversættes. Knappen tegnes derfor selv - se partials/file_field.php.

   Alt herunder træder først i kraft, når app.js har sat .file-field--enhanced.
   Uden JavaScript beholder brugeren browserens eget felt, som i det mindste
   viser, hvad der er valgt. */
.file-field__button,
.file-field__chosen { display: none; }

.file-field--enhanced .file-field__button { display: inline-flex; }

.file-field--enhanced .file-field__chosen {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-muted);
    word-break: break-word;
}

/* Feltet skjules for øjet, men beholder sin plads i tabuleringsrækkefølgen. */
.file-field--enhanced .file-field__input {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Fokus sidder på det skjulte felt, så fokusringen skal tegnes på knappen.
   Ellers ville et tastaturspring hertil se ud som om intet skete. */
.file-field--enhanced .file-field__input:focus-visible + .file-field__button {
    box-shadow: var(--focus-ring);
    border-color: var(--primary);
}

/* Feltet kan afvises af browserkontrollen i app.js. Markeringen skal følge
   med over på knappen, nu hvor selve feltet ikke kan ses. */
.file-field--enhanced .file-field__input[aria-invalid="true"] + .file-field__button {
    border-color: var(--danger);
    color: var(--danger-text);
}

/* --- Kameraknap og liste over valgte filer ---------------------------------
   Kameraet må først vises, når app.js har fastslået, at browseren kan lægge
   billederne over i det rigtige felt (.file-field--collects). Ellers ville
   knappen tage et billede, som forsvandt ved indsendelsen. */
.file-field__camera { display: none; }

.file-field--enhanced .file-field__button--camera { display: none; }

.file-field__camera-hint { display: none; }

/* Kun på telefon og tablet. På en computer åbner "Tag billede" ikke noget
   kamera - capture ignoreres der - men blot endnu en filvælger. To knapper,
   der gør det samme, er en knap for meget.

   Feltet holdes display:none uden for denne blok. Var det blot skjult for
   øjet, kunne en tastaturbruger på en computer havne i et usynligt felt
   uden knap at se fokus på. */
@media (hover: none) and (pointer: coarse) {
    .file-field--collects .file-field__button--camera {
        display: inline-flex;
        margin-left: var(--space-2);
    }

    /* Skjult for øjet, men kan stadig få fokus - som feltet ovenfor. */
    .file-field--collects .file-field__camera {
        display: block;
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .file-field--collects .file-field__camera:focus-visible + .file-field__button--camera {
        box-shadow: var(--focus-ring);
        border-color: var(--primary);
    }

    /* Hjælpeteksten er søskende til feltindpakningen, så klassen på
       indpakningen kan styre den. Den følger kameraknappen: er knappen der
       ikke, skal teksten heller ikke henvise til den. */
    .file-field--collects ~ .field-hint .file-field__camera-hint { display: inline; }
}

.file-field__count { margin: 0 0 var(--space-2); }

.file-field__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.file-field__list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.file-field__name {
    min-width: 0;
    word-break: break-word;
    color: var(--text);
}

/* Fjern-knappen skal kunne rammes med en tommelfinger - 44 px er Apples
   egen anbefaling og den grænse, hvor en liste holder op med at drille. */
.file-field__remove {
    flex: none;
    min-height: 44px;
    padding: 0 var(--space-3);
    background: none;
    border: 0;
    border-radius: var(--radius);
    color: var(--danger-text, var(--text-muted));
    font-size: var(--text-sm);
    cursor: pointer;
}

.file-field__remove:hover { background: var(--surface-hover); }

.file-field__remove:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* --- Produktbilledet ------------------------------------------------------
   Ét billede med forhåndsvisning ved siden af knapperne. Rammen står der
   altid - også uden billede - så feltet ikke hopper i højden, første gang
   der vælges et. */

.image-field {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.image-field__preview {
    flex: none;
    width: 120px;
    height: 120px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--text-subtle);
}

/* Billedet fylder rammen ud uden at blive trukket skævt. */
.image-field__preview img { width: 100%; height: 100%; object-fit: cover; }
.image-field__placeholder svg { width: 28px; height: 28px; }

/* hidden-attributten skal vinde over display:block i svg/img-reset'en øverst
   i filen. Uden denne linje ville et skjult billede stadig fylde. */
.image-field__preview img[hidden],
.image-field__placeholder[hidden] { display: none; }

.image-field__controls { min-width: 0; flex: 1; }

.image-field__buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.image-field__status {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
    word-break: break-word;
}

.image-field__remove { padding-bottom: 0; }

/* Knapperne træder først frem, når app.js har overtaget feltet - præcis som
   ved filfeltet ovenfor. Uden JavaScript er browserens egen knap den
   ærligste, for så kan der ikke vises noget valgt filnavn. */
.image-field__button { display: none; }

.image-field--enhanced .image-field__button { display: inline-flex; }

.image-field--enhanced .image-field__input {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Fokus og fejl skal kunne ses på knappen, nu hvor feltet ikke kan. */
.image-field--enhanced .image-field__input:focus-visible + .image-field__buttons .image-field__button {
    box-shadow: var(--focus-ring);
    border-color: var(--primary);
}

.image-field--enhanced .image-field__input[aria-invalid="true"] + .image-field__buttons .image-field__button {
    border-color: var(--danger);
    color: var(--danger-text);
}

/* Kameraet: samme regel som ved filfeltet. Knappen vises kun på en enhed med
   et kamera, og kun når browseren kan flytte billedet over i det rigtige
   felt. */
.image-field__camera { display: none; }

.image-field--enhanced .image-field__button--camera { display: none; }

@media (hover: none) and (pointer: coarse) {
    .image-field--collects .image-field__button--camera { display: inline-flex; }

    /* Skjult for øjet, men kan stadig få fokus. */
    .image-field--collects .image-field__camera {
        display: block;
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .image-field--collects .image-field__camera:focus-visible + .image-field__button--camera {
        box-shadow: var(--focus-ring);
        border-color: var(--primary);
    }
}

/* Produktbilledet på produktsiden. */
.product-photo { overflow: hidden; }
.product-photo a { display: block; }
.product-photo img { width: 100%; height: auto; display: block; }

/* Afkrydsningsfelter og radioknapper */
.check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    cursor: pointer;
}

.check input[type="checkbox"],
.check input[type="radio"] {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    accent-color: var(--primary);
    cursor: pointer;
}

.check__label { font-size: var(--text-base); }
.check__hint { display: block; font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; }

/* Ikoner i etiketten skal have samme faste mål som teksten ved siden af.
   Uden mål strækker svg-reset'en øverst i filen (max-width:100%, height:auto)
   dem ud til hele den plads, etiketten levner - og da pladsen afhænger af
   tekstens længde, bliver de oven i købet forskellige fra linje til linje. */
.check__label svg { flex: none; width: 18px; height: 18px; }

/* Kontakt-/kontooprettelsesformular centreret på siden */
.auth-layout {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: var(--space-4);
    padding-bottom: var(--space-10);
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-6);
}

@media (min-width: 480px) {
    .auth-card { padding: var(--space-8); }
}

.auth-card__header { text-align: center; margin-bottom: var(--space-6); }
.auth-card__title { margin-bottom: var(--space-2); }
.auth-card__subtitle { color: var(--text-muted); font-size: var(--text-sm); }

.auth-card__footer {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* --- Badges og statusvisning ------------------------------------------------
   Status formidles ALDRIG med farve alene. Hvert badge indeholder et ikon og
   en tekst, så betydningen også fremgår i sort/hvid, ved farveblindhed og
   for skærmlæsere.
   -------------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 620;
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid transparent;
}

.badge svg { width: 13px; height: 13px; flex: none; }

.badge--success { background: var(--success-soft); color: var(--success-text); border-color: var(--success); }
.badge--warning { background: var(--warning-soft); color: var(--warning-text); border-color: var(--warning); }
.badge--danger  { background: var(--danger-soft);  color: var(--danger-text);  border-color: var(--danger); }
.badge--info    { background: var(--info-soft);    color: var(--info-text);    border-color: var(--info); }
.badge--neutral { background: var(--neutral-soft); color: var(--neutral-text); border-color: var(--border-strong); }

/* Fremdriftsbjælke for garantiperiode */
.progress {
    height: 6px;
    background: var(--neutral-soft);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.progress__bar { height: 100%; border-radius: var(--radius-full); transition: width var(--transition); }
.progress__bar--success { background: var(--success); }
.progress__bar--warning { background: var(--warning); }
.progress__bar--danger  { background: var(--danger); }

/* --- Beskeder (inline) ------------------------------------------------------- */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius);
    border: 1px solid;
    font-size: var(--text-base);
    margin-bottom: var(--space-4);
}

.alert svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.alert__title { font-weight: 640; margin-bottom: var(--space-1); }

.alert--success { background: var(--success-soft); border-color: var(--success); color: var(--success-text); }
.alert--warning { background: var(--warning-soft); border-color: var(--warning); color: var(--warning-text); }
.alert--danger  { background: var(--danger-soft);  border-color: var(--danger);  color: var(--danger-text); }
.alert--info    { background: var(--info-soft);    border-color: var(--info);    color: var(--info-text); }

/* --- Toasts ------------------------------------------------------------------ */
.toast-region {
    position: fixed;
    z-index: 100;
    bottom: calc(var(--bottomnav-height) + var(--space-4));
    left: var(--space-4);
    right: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
}

@media (min-width: 640px) {
    .toast-region { left: auto; bottom: var(--space-6); right: var(--space-6); width: 380px; }
}

@media (min-width: 1024px) {
    .toast-region { bottom: var(--space-6); }
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-left: 4px solid var(--neutral);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    animation: toast-in 200ms ease-out;
}

.toast--success { border-left-color: var(--success); }
.toast--error   { border-left-color: var(--danger); }
.toast--warning { border-left-color: var(--warning); }
.toast--info    { border-left-color: var(--info); }

.toast__icon { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.toast--success .toast__icon { color: var(--success); }
.toast--error   .toast__icon { color: var(--danger); }
.toast--warning .toast__icon { color: var(--warning); }
.toast--info    .toast__icon { color: var(--info); }

.toast__message { flex: 1; font-size: var(--text-sm); }

.toast__close {
    flex: none;
    background: none;
    border: none;
    padding: var(--space-1);
    color: var(--text-subtle);
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.toast__close:hover { color: var(--text); background: var(--surface-hover); }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Tabeller -----------------------------------------------------------------
   På små skærme ruller tabellen vandret inde i sin egen beholder. Selve
   siden ruller aldrig sideværts.
   ---------------------------------------------------------------------------- */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }

.table th, .table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.table th {
    font-weight: 620;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    background: var(--surface-2);
    position: sticky;
    top: 0;
}

.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--surface-hover); }

.table td--wrap { white-space: normal; min-width: 200px; }

/* Sorterbare kolonneoverskrifter */
.table__sort {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: inherit;
    text-decoration: none;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
}
.table__sort:hover { color: var(--text); }

/* --- Tom tilstand --------------------------------------------------------------- */
.empty-state {
    text-align: center;
    padding: var(--space-12) var(--space-4);
}

.empty-state__icon {
    width: 56px; height: 56px;
    margin: 0 auto var(--space-4);
    color: var(--text-subtle);
    opacity: .7;
}

.empty-state__title { margin-bottom: var(--space-2); }
.empty-state__text { color: var(--text-muted); max-width: 44ch; margin: 0 auto var(--space-5); }

/* --- Skeleton (indlæsning) ------------------------------------------------------- */
.skeleton {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-hover) 50%, var(--surface-2) 75%);
    background-size: 200% 100%;
    animation: skeleton 1.4s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

@keyframes skeleton {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* --- Dialog ---------------------------------------------------------------------
   Bygget på <dialog>, som browseren selv håndterer fokusfælde og
   Escape-lukning for. Det er mere robust end en egen implementering.
   ------------------------------------------------------------------------------- */
.dialog {
    width: min(520px, calc(100vw - var(--space-8)));
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}

.dialog::backdrop { background: rgba(10, 13, 18, .55); backdrop-filter: blur(2px); }

.dialog__header { padding: var(--space-5) var(--space-5) var(--space-3); }
.dialog__title { font-size: var(--text-lg); }
.dialog__body { padding: 0 var(--space-5) var(--space-5); color: var(--text-muted); }
.dialog__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

@media (max-width: 479px) {
    .dialog__footer { flex-direction: column-reverse; }
    .dialog__footer .btn { width: 100%; }
}

/* --- Formatmærke i dokumentlister ------------------------------------------------
   Står, hvor et billede ville have haft sin miniature, og fylder nøjagtig det
   samme (40 px), så rækkerne flugter uanset filtype.

   Selve formatet skrives med tekst frem for et tegnet ikon. "PDF" kan læses
   med det samme, mens et ikon skal genkendes - og skulle tegnes forfra, hver
   gang allowlisten i config/uploads.php udvides.
   ------------------------------------------------------------------------------- */
/* --- Træk og slip i filfeltet ----------------------------------------------------
   Kun på en maskine med mus. På en telefon er der intet at trække med, og
   rammen ville blot være pynt, der stjæler plads. Klassen sættes af app.js,
   når browseren kan lægge de trukne filer over i feltet.
   ------------------------------------------------------------------------------- */
.file-field__drop { display: none; }

@media (hover: hover) and (pointer: fine) {
    .file-field--dropzone {
        padding: var(--space-4);
        border: 1.5px dashed var(--border-strong);
        border-radius: var(--radius);
        background: var(--surface-2);
        transition: border-color 120ms ease, background-color 120ms ease;
    }

    .file-field--dropzone .file-field__drop {
        display: block;
        margin: var(--space-2) 0 0;
        font-size: var(--text-sm);
        color: var(--text-muted);
    }

    /* Mens filen svæver over feltet: tydeligt, at den kan slippes her. */
    .file-field--dropzone.is-dragging {
        border-color: var(--primary);
        border-style: solid;
        background: var(--primary-soft);
    }

    .file-field--dropzone.is-dragging .file-field__drop { color: var(--primary-text); }
}

/* Rammen skal ikke skifte brat for den, der har bedt om mindre bevægelse. */
@media (prefers-reduced-motion: reduce) {
    .file-field--dropzone { transition: none; }
}

.file-badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    /* Små versaler tæt sammen: "WEBP" skal kunne være der. */
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    /* Et filnavn kan i teorien give en lang endelse; den skal ikke bryde ud. */
    overflow: hidden;
    background: var(--neutral-soft);
    color: var(--neutral-text);
    border: 1px solid var(--border);
}

/* Farven er en hjælp, aldrig den eneste oplysning - formatet står som tekst
   i mærket. Se noten ved statusfarverne øverst. */
.file-badge[data-format="PDF"] {
    background: var(--danger-soft);
    color: var(--danger-text);
}

.file-badge[data-format="JPG"],
.file-badge[data-format="PNG"],
.file-badge[data-format="WEBP"],
.file-badge[data-format="HEIC"],
.file-badge[data-format="HEIF"] {
    background: var(--info-soft);
    color: var(--info-text);
}

/* --- Liste til at tilknytte dokumenter fra arkivet --------------------------------
   Står i produktformularen. Kan rumme mange rækker, så den får sin egen
   rullekant frem for at skubbe Gem-knappen langt ned ad siden.
   ------------------------------------------------------------------------------- */
.attach-list {
    list-style: none;
    margin: 0;
    padding: var(--space-1) var(--space-3);
    max-height: 22rem;
    overflow-y: auto;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.attach-list li + li { border-top: 1px solid var(--border); }

/* Firkanten er 40 px høj, så afkrydsningen skal stå på midten af rækken og
   ikke i toppen som ved en almindelig afkrydsning. */
.attach-list__item { align-items: center; }

.attach-list__thumb {
    flex: none;
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.attach-list .check__label { display: block; font-size: var(--text-sm); }

/* --- Forhåndsvisning af billeder -------------------------------------------------
   Samme grundlag som dialogen ovenfor, men fylder skærmen: et billede skal
   ses stort. Bygges af app.js - findes derfor ikke i nogen skabelon.
   ------------------------------------------------------------------------------- */
.preview {
    width: min(1100px, calc(100vw - var(--space-6)));
    max-width: none;
    max-height: calc(100dvh - var(--space-6));
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}

.preview::backdrop { background: rgba(10, 13, 18, .78); backdrop-filter: blur(2px); }

.preview__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.preview__title {
    min-width: 0;
    margin: 0;
    font-weight: 600;
    word-break: break-word;
}

.preview__actions {
    display: flex;
    flex: none;
    gap: var(--space-1);
}

/* Selve billedfladen. Pilene ligger oven i kanterne, så billedet får al
   pladsen - listen bag ved er stadig synlig som en mørk ramme. */
.preview__stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
}

.preview__image {
    max-width: 100%;
    /* Plads til titellinjen og en eventuel note under billedet. */
    max-height: calc(100dvh - 12rem);
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.preview__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* 44 px: den flade, en tommelfinger kan ramme. */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
    opacity: .9;
}

.preview__nav:hover { background: var(--surface-hover); opacity: 1; }
.preview__nav:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.preview__nav--prev { left: 0; }
.preview__nav--next { right: 0; }

.preview__status,
.preview__note {
    margin: var(--space-3) 0 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-align: center;
}

/* Siden bag ved må ikke kunne rulle, mens billedet er åbent. iOS ruller
   ellers listen nedenunder, når man stryger hen over billedet. */
body.has-preview { overflow: hidden; }

/* Navnet i listen er nu et link, men skal se ud som før - det er billedet
   og teksten, der er knappen, ikke en understregning. */
.doc-name { color: inherit; text-decoration: none; }
.doc-name:hover .break-word { text-decoration: underline; }

@media (max-width: 639px) {
    .preview {
        width: 100vw;
        max-height: 100dvh;
        border-radius: 0;
        border: 0;
    }

    .preview__bar { flex-direction: column; align-items: flex-start; }
    .preview__actions { align-self: stretch; }
    .preview__actions .btn { flex: 1; justify-content: center; }
}

/* --- Segmenteret kontrol (temavælger, visningsskift) ------------------------------ */
.segmented {
    display: inline-flex;
    padding: 3px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    gap: 2px;
}

.segmented__option {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    min-height: 38px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 560;
    cursor: pointer;
    text-decoration: none;
}

.segmented__option:hover { color: var(--text); }

.segmented__option[aria-pressed="true"],
.segmented__option[aria-current="true"] {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.segmented__option svg { width: 16px; height: 16px; }

/* ==========================================================================
   5. Hjælpeklasser
   ========================================================================== */

.stack       { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--sm   { gap: var(--space-2); }
.stack--lg   { gap: var(--space-6); }

.row         { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--end    { justify-content: flex-end; }

.text-muted  { color: var(--text-muted); }
.text-subtle { color: var(--text-subtle); }
.text-sm     { font-size: var(--text-sm); }
.text-xs     { font-size: var(--text-xs); }
.text-center { text-align: center; }
.text-bold   { font-weight: 640; }
.mono        { font-family: var(--font-mono); font-size: .92em; }

.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

.hide-mobile { display: none; }
@media (min-width: 768px) { .hide-mobile { display: initial; } }

@media (min-width: 768px) { .hide-desktop { display: none; } }

/* Bryd lange ord (serienumre, URL'er) frem for at sprænge layoutet. */
.break-word { overflow-wrap: anywhere; word-break: break-word; }

/* ==========================================================================
   6. Print
   ========================================================================== */

@media print {
    .topbar, .sidebar, .bottomnav, .toast-region,
    .page-header__actions, .btn { display: none !important; }

    .main { margin: 0; padding: 0; max-width: none; }
    .card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }

    body { background: #fff; color: #000; }
}

/* ==========================================================================
   7. Opret produkt: formular med live-opsummering
   ==========================================================================
   MOBIL FØRST: opsummeringen ligger OVER formularen som et sammenklappeligt
   kort, så brugeren ser den uden at scrolle - og kan folde den væk.

   COMPUTER (fra 1100px): to spalter. Opsummeringen står til VENSTRE og
   klæber til skærmen, så den er synlig, mens man udfylder felterne til
   højre.

   Der forekommer aldrig vandret rulning: spalterne bliver til en enkelt
   kolonne, længe før pladsen slipper op.
   ========================================================================== */

.create-layout {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
}

@media (min-width: 1100px) {
    .create-layout {
        /* Opsummeringen får fast bredde, formularen resten. */
        grid-template-columns: 340px minmax(0, 1fr);
        align-items: start;
    }
}

.summary-panel {
    order: -1; /* Over formularen på mobil. */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

@media (min-width: 1100px) {
    .summary-panel {
        position: sticky;
        top: calc(var(--topbar-height) + var(--space-6));
    }
}

/* Sammenklappelig styring - kun aktiv på mobil. */
.summary-panel__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-4) var(--space-5);
    background: var(--surface-2);
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: var(--text-md);
    font-weight: 640;
    cursor: pointer;
    text-align: left;
}

.summary-panel__toggle svg { transition: transform var(--transition); flex: none; }
.summary-panel__toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }

@media (min-width: 1100px) {
    /* På computer er panelet altid åbent, og knappen er ikke interaktiv. */
    .summary-panel__toggle { cursor: default; pointer-events: none; }
    .summary-panel__toggle svg { display: none; }
}

.summary-panel__body { padding: var(--space-5); }
.summary-panel__body[hidden] { display: none; }

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    border-bottom: 1px dashed var(--border);
    font-size: var(--text-sm);
}
.summary-row:last-child { border-bottom: none; }

.summary-row__label { color: var(--text-muted); flex: none; }
.summary-row__value { text-align: right; font-weight: 560; overflow-wrap: anywhere; }

/* Endnu ikke udfyldt felt vises dæmpet, så det ikke ligner en værdi. */
.summary-row__value:empty::after,
.summary-row__value[data-empty="true"]::after {
    content: "—";
    color: var(--text-subtle);
    font-weight: 400;
}

.summary-highlight {
    margin: var(--space-4) 0;
    padding: var(--space-4);
    background: var(--primary-soft);
    border-radius: var(--radius);
    text-align: center;
}

.summary-highlight__label { font-size: var(--text-xs); color: var(--primary-text); font-weight: 620; }
.summary-highlight__value { font-size: var(--text-xl); font-weight: 700; color: var(--primary-text); margin-top: 2px; }

/* Feltgrupper i formularen */
.fieldset {
    border: none;
    padding: 0;
    margin: 0 0 var(--space-8);
}

.fieldset__legend {
    padding: 0;
    margin-bottom: var(--space-4);
    font-size: var(--text-md);
    font-weight: 640;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.fieldset__legend svg { width: 18px; height: 18px; color: var(--primary); }

/* To felter side om side, når der er plads. */
.field-pair { display: grid; gap: 0 var(--space-4); grid-template-columns: 1fr; }

@media (min-width: 640px) {
    .field-pair { grid-template-columns: 1fr 1fr; }
    .field-pair--wide { grid-template-columns: 2fr 1fr; }
}

/* Hurtigvalg af garantiperiode */
.period-choices { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.period-choice {
    padding: var(--space-2) var(--space-3);
    min-height: 40px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: 560;
    cursor: pointer;
}
.period-choice:hover { background: var(--surface-hover); color: var(--text); }

.period-choice[aria-pressed="true"] {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary-text);
}

/* Produktkort i oversigten */
.product-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.product-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }

.product-card__media {
    aspect-ratio: 16 / 10;
    background: var(--surface-2);
    display: grid;
    place-items: center;
    color: var(--text-subtle);
    overflow: hidden;
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.product-card__media svg { width: 40px; height: 40px; }

.product-card__body { padding: var(--space-4); flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }
.product-card__title { font-weight: 620; line-height: 1.3; }
.product-card__title a { color: var(--text); text-decoration: none; }
.product-card__title a:hover { color: var(--primary); }
.product-card__meta { font-size: var(--text-sm); color: var(--text-muted); }
.product-card__footer { margin-top: auto; padding-top: var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* Filterpanel */
.filters { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }

@media (min-width: 700px)  { .filters { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .filters { grid-template-columns: repeat(4, 1fr); } }

/* --- Vis/skjul filtre ---------------------------------------------------------
   Bygget på <details>, så den virker uden JavaScript. Knappen er selve
   <summary>, der låner udseende fra .btn - derfor kun de rettelser her, som
   skal til for at et <summary> opfører sig som en knap. */
.filter-toggle { margin-bottom: var(--space-4); }

.filter-toggle__button { display: inline-flex; list-style: none; cursor: pointer; }

/* Safari viser stadig sin egen trekant uden denne. */
.filter-toggle__button::-webkit-details-marker { display: none; }

.filter-toggle__button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.filter-toggle__button svg { transition: transform var(--transition); }
.filter-toggle[open] .filter-toggle__button svg { transform: rotate(180deg); }

/* Teksten skifter mellem "Vis" og "Skjul" - uden JavaScript. */
.filter-toggle__label--hide,
.filter-toggle[open] .filter-toggle__label--show { display: none; }
.filter-toggle[open] .filter-toggle__label--hide { display: inline; }

.filter-toggle__panel { margin-top: var(--space-4); }

/* Paginering */
.pagination { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; align-items: center; margin-top: var(--space-6); }

.pagination__link {
    min-width: 42px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 560;
}
/* Pilene til forrige/næste side. Uden en størrelse her ville de brede sig ud
   på samme måde som tilbage-linket over sidetitlen - se .backlink. */
.pagination__link svg { width: 16px; height: 16px; flex: none; }

.pagination__link:hover { background: var(--surface-hover); color: var(--text); }
.pagination__link[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.pagination__ellipsis { padding: 0 var(--space-2); color: var(--text-subtle); }

/* Definitionsliste til produktdetaljer */
.detail-list { display: grid; gap: 0; }
.detail-list__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border);
}
.detail-list__row:last-child { border-bottom: none; }
.detail-list__term { font-size: var(--text-sm); color: var(--text-muted); }
.detail-list__value { overflow-wrap: anywhere; }

@media (min-width: 560px) {
    .detail-list__row { grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-4); align-items: baseline; }
}

/* ==========================================================================
   8. Tidslinje på reklamationssager
   ==========================================================================
   En lodret streg med en markør ved hver hændelse. Stregen tegnes med en
   pseudo-element-kant, så der ikke skal bruges billeder, og den skalerer
   automatisk med indholdet.
   ========================================================================== */

.timeline { list-style: none; margin: 0; padding: 0; position: relative; }

.timeline__item {
    position: relative;
    padding: 0 0 var(--space-6) var(--space-8);
}

/* Selve stregen. Sidste element får ingen, så linjen ikke hænger løst. */
.timeline__item::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 26px;
    bottom: 0;
    width: 2px;
    background: var(--border);
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item:last-child::before { display: none; }

.timeline__marker {
    position: absolute;
    left: 0;
    top: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface);
    border: 2px solid var(--border-strong);
    color: var(--text-muted);
}
.timeline__marker svg { width: 13px; height: 13px; }

.timeline__marker--success { border-color: var(--success); color: var(--success); background: var(--success-soft); }
.timeline__marker--danger  { border-color: var(--danger);  color: var(--danger);  background: var(--danger-soft); }
.timeline__marker--warning { border-color: var(--warning); color: var(--warning); background: var(--warning-soft); }
.timeline__marker--info    { border-color: var(--info);    color: var(--info);    background: var(--info-soft); }

.timeline__date { font-size: var(--text-xs); color: var(--text-subtle); margin-bottom: 2px; }
.timeline__body { font-size: var(--text-sm); overflow-wrap: anywhere; white-space: pre-wrap; }

.timeline__meta { margin-top: var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ==========================================================================
   9. Administratorområde
   ==========================================================================
   Administratorfladen er visuelt adskilt fra brugerfladen med en anden
   topbar-farve og et tydeligt mærke. Det skal aldrig være i tvivl, om man
   ser sine egne data eller administrerer systemet - forvekslingen er farlig,
   når handlingerne rammer andre mennesker.
   ========================================================================== */

.topbar--admin {
    background: #1c2434;
    border-bottom-color: #2c3648;
}

:root[data-theme="dark"] .topbar--admin { background: #14192a; }

.topbar--admin .topbar__brand,
.topbar--admin .btn--ghost { color: #e7eaee; }
.topbar--admin .btn--ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }

.admin-badge {
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    background: #f2645f;
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Statuslinje i systemstatus */
.status-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border);
}
.status-row:last-child { border-bottom: none; }

.status-row__icon { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.status-row--ok   .status-row__icon { color: var(--success); }
.status-row--warn .status-row__icon { color: var(--danger); }

.status-row__label { font-weight: 600; font-size: var(--text-sm); }
.status-row__value { font-family: var(--font-mono); font-size: var(--text-sm); }
.status-row__note  { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }