/* Designtokens. Paletten «Strand» (oktober 2026) erstatter den grønne fra designgjennomgangen i
   august: lysere og roligere, nesten svart-hvit med ÉN farge for det brukeren har valgt.

   Rollene fra august står fast - de er grunnen til at et palettbytte kan gjøres her alene:
   - Aksent = HANDLING (knapper, aktivt menyvalg, fremdrift). Nå nesten svart, ikke grønn.
   - Markering = det brukeren har VALGT (dager i perioden, valgt rad). Solgult. Ny rolle.
   - Ok = POSITIV TILSTAND (ledig plass, lagret, ankommet, «Reservert»). Grønn, og bare det.
   - Venter/blokkerer = oransje/rød som før. Venter-tonen er dratt mot oransje så den ikke
     forveksles med markeringsgult - to nesten like gultoner for «valgt» og «ikke tildelt» ville
     gjort begge meningsløse.

   Før dette byttet gjorde den grønne aksenten to jobber (handling OG positiv tilstand: --accent-ink
   var både lenkefarge og tekstfarge på «ok»-merker). Med svart aksent måtte de skilles, ellers
   ble alle ok-merker svarte. Bruk --ok-* for tilstand, --accent-* for handling.

   De GAMLE tokennavnene (--wash, --blue, --green ...) er beholdt som aliaser nederst, slik at
   eksisterende bruksteder skifter samlet. Nye regler skal bruke de semantiske navnene. */
:root {
    color-scheme: light;

    /* Flater */
    --bg: #faf9f6;                         /* sidebakgrunn, så vidt varm */
    --bg-nav: #ffffff;                     /* sidemeny */
    --bg-subtle: #f6f5f1;                  /* tabellhode, kortoverskrift, grupperad */
    --panel: #ffffff;                      /* kort, tabellrader */

    /* Tekst */
    --ink: #1c1c1a;                        /* primærtekst, titler */
    --ink-2: #3a3834;                      /* sekundærtekst */
    --ink-3: #55524c;                      /* brødtekst i beskrivelser */
    --muted: #6b6862;                      /* etiketter, metatekst */
    --muted-2: #7e7a72;                    /* gruppeoverskrift i meny (4.2:1 på hvitt) */

    /* Linjer */
    --line: #e6e3dd;                       /* kortkant, tabellkant */
    --line-soft: #f0eeea;                  /* radskille */
    --line-strong: #d9d6cf;                /* inputfelt, knappekant */

    /* Aksent = handling */
    --accent: #1c1c1a;                     /* primærknapp, aktiv meny, fremdrift */
    --accent-ink: #1c1c1a;                 /* lenketekst (understreken er markeringsgul) */
    --accent-soft: #fff8dd;                /* valgt tilstand: nettene i perioden, valgt rad */
    --accent-bar: #d9d6cf;                 /* inaktive stolper i graf */

    /* Markering = det brukeren har valgt */
    --highlight: #ffd95a;                  /* ankomst/avreise, lenkestrek, aktiv fanekant */
    --highlight-line: #f2c230;             /* understrek på lenker - mørk nok til å synes */

    /* Tilstand: ok */
    --ok: #2e8a5e;                         /* prikk, stolpe, «god plass» */
    --ok-ink: #22704b;                     /* tekst på lys grønn (5.6:1) */
    --ok-soft: #e5f3eb;                    /* merke «Reservert», lagret */
    --ok-line: #c7e3d3;
    --ok-bar: #8fcbaa;                     /* stolpe «god plass» - lys nok til at oransje/rød stikker seg ut */

    /* Tilstand: venter på noen */
    --warn: #d9822b;                       /* advarselsprikk */
    --warn-ink: #8a4a12;                   /* tekst på oransje bakgrunn */
    --warn-soft: #fbe9d6;                  /* merke «Ikke tildelt» */
    --warn-row: #fff8f1;                   /* radbakgrunn, sak som venter */

    /* Tilstand: blokkerer */
    --danger: #c0442f;                     /* blokkerende varselsprikk */
    --danger-ink: #93331f;                 /* tekst på rød bakgrunn */
    --danger-soft: #fbe8e4;                /* bakgrunn blokkerende merke */

    /* Tilstand: nøytral (kansellert) */
    --neutral-soft: #f0eeea;               /* merke «Kansellert» */
    --neutral-ink: #5f5c56;                /* tekst på nøytralt merke */

    --r-sm: 7px;   /* statusmerke */
    --r-md: 10px;  /* knapp, inputfelt, menypunkt */
    --r-lg: 14px;  /* kort, tabellcontainer */

    /* --- Aliaser for eksisterende regler (skal ikke brukes i ny CSS) --------------------- */
    --slate: var(--ink-3);
    --faint: var(--muted-2);
    --wash: var(--bg);
    --line-2: var(--line-soft);

    /* Blått ble aksent i august. --blue-bg/-bd brukes bare til GRUPPERING (telleverk,
       type-skillerad i ukeoversikten), ikke til tilstand - derfor nøytral, ikke markeringsgul. */
    --blue: var(--accent);
    --blue-bg: var(--bg-subtle);
    --blue-bd: var(--line);
    --teal: var(--highlight);

    /* Grønt betyr nå bare «ok» - pekte tidligere på aksenten. */
    --green: var(--ok);
    --green-bg: var(--ok-soft);
    --green-bd: var(--ok-line);
    --green-text: var(--ok-ink);

    --amber: var(--warn);
    --amber-bg: var(--warn-soft);
    --amber-bd: #f3d3b2;
    --amber-text: var(--warn-ink);

    --red: var(--danger);
    --red-bg: var(--danger-soft);
    --red-bd: #f1c9c0;
    --red-text: var(--danger-ink);
}

* { box-sizing: border-box; }

/* Kompakt tetthet (2026-08-09): hele skalaen under (rem-baserte mål i resten av filen) var tunet
   for en markedsførings-/forbrukerside (dette designsystemet ble portet inn fra en Next.js-app
   sin globals.css, se README) - for luftig/stort for et tett admin-verktøy brukt hver dag.
   15px i stedet for nettleserstandarden 16px krymper alle rem-baserte mål ~6% i ett grep, i
   tillegg til de mer målrettede reduksjonene i px-baserte regler (overskrifter, knapper,
   bryteren) lenger ned i filen. */
html {
    font-size: 15px;
}

body {
    margin: 0;
    font-family: 'Schibsted Grotesk', system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif;
    background: var(--bg);
    color: var(--ink-3);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    /* Native avkryssingsbokser/radioknapper tegnes av nettleseren og er blå som standard -
       accent-color er den ene egenskapen som farger dem uten å måtte bygge dem om fra bunnen. */
    accent-color: var(--accent);
}

/* Typeskala med TYDELIGE sprang (32 / 17 / 15). Tidligere lå sidetittel og seksjonstittel så
   nær hverandre (24 / 17 / 14, alle i vekt 800-900) at lange sider ikke lot seg skumme - alt
   så like viktig ut. Vektene er også senket fra 800/900 til 600: Work Sans i 600 er tyngre
   optisk enn Mulish i 800, og sprangene bærer nå hierarkiet i stedet for fetheten. */
h1, h2, h3 { color: var(--ink); font-weight: 600; letter-spacing: -0.01em; margin-top: 0; }
h1 { font-size: 32px; letter-spacing: -0.02em; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }

/* Alle tall, datoer, beløp og telleverk skal ha samme bredde per siffer, slik at kolonner med
   beløp/antall står rett under hverandre og ikke "hopper" når et tall endres. */
table, .stat-value, .stat-number, time, .amount, .tabular { font-variant-numeric: tabular-nums; }

/* Lenker hadde INGEN egen regel før - de sto igjen i nettleserens standardblå, som var den
   eneste gjenværende blåfargen etter palettbyttet og dermed så ut som en feil. Understreken er
   en dempet kantlinje i stedet for text-decoration, slik at den ikke kutter gjennom
   nedstrekene i g/j/p. */
a {
    color: var(--accent-ink);
    text-decoration: none;
    border-bottom: 2px solid var(--highlight-line);
}
a:hover {
    color: var(--ink-2);
    border-bottom-color: var(--ink);
}

/* Tastaturfokus. Uten denne regelen brukte felt og knapper nettleserens EGEN fokusring, som er
   blå - den siste gjenværende blåfargen etter palettbyttet, og godt synlig siden innsjekk- og
   søkefelt har autofocus. :focus-visible (ikke :focus) gjør at ringen kun vises ved tastatur-
   navigasjon, ikke ved museklikk. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Elementer som TILFELDIGVIS er <a> men leses som knapper/menypunkter/kort skal ikke ha
   lenkestrek under. Listen holdes eksplisitt (ikke en :not()-kjede) så det er lett å se hva
   som er unntatt og hvorfor. */
.admin-nav-link,
.button,
.button-primary,
.button-secondary,
.button-icon-danger,
.brand,
.pagination a,
.user-bar-name {
    border-bottom: none;
}

/* h2/h3 markerer en NY seksjon når de følger annet innhold på siden (en knapp, en tabell, et
   skjema) - uten luft over ser de ut som en fortsettelse av det forrige i stedet for en egen
   overskrift (f.eks. "Admin-interne (Hjelpeleder)" rett under "Legg til"-knappen i
   admin-volunteer-options.php). :first-child nullstiller dette når overskriften ER det første i
   sin beholder (f.eks. i .form-section, som selv har luft over) - samme etablerte mønster som
   .location-type-section:first-child under, nå brukt direkte på selve overskriftene i stedet for
   på en wrapper-klasse rundt hver forekomst. */
h2 { margin-top: 1.5rem; }
h3 { margin-top: 1.1rem; }
h2:first-child, h3:first-child { margin-top: 0; }

.h1 { font-size: 24px; font-weight: 900; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 0.4rem; }
.h2 { font-size: 14px; font-weight: 800; color: var(--ink); margin: 0 0 0.4rem; }
.label { font-size: 11px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }

/* <code> brukes til lenker/kodesnutter som er ÉN lang streng uten mellomrom (innsjekk-lenken i
   admin-overview.php/admin-dashboard.php, booking-lenken og iframe-snutten i admin-periods.php).
   Uten dette er hele strengen ett ubrytelig "ord": den kan ikke brekke, så den presser sin
   beholder bredere enn siden. I en tabellcelle blir resultatet at HELE tabellen vokser forbi
   containeren - de andre kolonnene klemmes sammen (overskrifter brekker til ett ord per linje) og
   siste kolonne klippes utenfor skjermkanten. Oppdaget via skjermbilde av Ukeoversikt fra bruker,
   og deretter målt på alle sider (body.scrollWidth vs clientWidth) i nettleser.
   overflow-wrap:anywhere (ikke break-word) fordi break-word IKKE bryter et ord som står alene i
   sin egen boks - nettopp tilfellet her.

   p/li/dd av samme grunn, men for GJESTE-oppgitte verdier: en lang e-postadresse uten mellomrom
   (målt tilfelle: 68 tegn) i "Fakturaopplysninger"-blokken fløt 189px forbi skjermkanten på mobil
   både på bekreftelsessiden og admin sin bestillingsdetalj. Bevisst ikke satt globalt på body
   (som ville arvet ned overalt): da kan også knappe-/menytekst brekke midt i et ord når plassen er
   trang, siden anywhere også senker elementers min-content-bredde til ett tegn. */
code,
p, li, dd {
    overflow-wrap: anywhere;
}

.site-header {
    background: var(--panel);
    padding: 0.9rem 1.5rem;
    border-bottom: 1px solid var(--line);
}

.site-header .brand {
    color: var(--ink);
    font-weight: 800;
    font-size: 1.1rem;
    text-decoration: none;
}

.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.25rem;
}

/* Iframe-innbygging (Layout::header($title, embed: true)) - ingen site-header over å gi luft
   til, og siden typisk vises smalere enn 1120px inni en ekstern nettsides <iframe>. */
body.is-embed .container {
    padding: 1rem;
    max-width: none;
}

.banner {
    padding: 0.75rem 1rem;
    border-radius: var(--r-md);
    margin-bottom: 1rem;
    border: 1px solid transparent;
}

.banner-ok { background: var(--green-bg); border-color: var(--green-bd); color: var(--green-text); }
.banner-error { background: var(--red-bg); border-color: var(--red-bd); color: var(--red-text); }
.banner ul { margin: 0; padding-left: 1.2rem; }

.card {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--r-lg); overflow: hidden;
    transition: transform .16s cubic-bezier(.3,.8,.4,1), box-shadow .16s, border-color .16s;
}
.card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 18px 30px -20px rgb(28 28 26 / 0.25); }

.chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border-radius: 999px;
    font-size: 13px; font-weight: 500;
    background: var(--panel); border: 1px solid var(--line); color: var(--ink-2);
    cursor: pointer; text-decoration: none; border-bottom-width: 1px;
}
.chip:hover { border-color: var(--muted-2); color: var(--ink); }

/* Aktiv brikke er FYLT mørk, ikke bare kantmarkert - et filter som er på må være synlig med et
   blikk, ellers står man og lurer på hvorfor lista er kortere enn ventet. */
.chip.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}
.chip.is-active:hover { color: #fff; border-color: var(--ink); }

.status { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; }
.status .dot { width: 7px; height: 7px; border-radius: 50%; }
.status--live { color: var(--green-text); }
.status--live .dot { background: var(--green); box-shadow: 0 0 0 3px rgb(46 138 94 / 0.2); }
.status--plan { color: var(--amber-text); }
.status--plan .dot { background: var(--amber); }
.status--draft { color: var(--slate); }
.status--draft .dot { background: var(--faint); }

/* Fjerde tilstand for arrangement-status på dashboardet (planlagt/åpent/pågår/avsluttet, se
   DashboardData::periodStatus()) - de tre andre gjenbruker de eksisterende .status--plan/live/
   draft-variantene rett over. */
.status--open { color: var(--blue); }
.status--open .dot { background: var(--accent); box-shadow: 0 0 0 3px rgb(28 28 26 / 0.15); }

/* --- Av/på-bryter (svevebryter) ------------------------------------------------------------
   Gjenbrukbar vippebryter for boolske valg, tydeligere enn en knapp/vanlig avkrysningsboks fordi
   selve posisjonen (venstre=av/grå, høyre=på/grønn) viser status. Ren CSS på en ekte
   <input type="checkbox"> - fungerer uten JS og under CSP. To bruksmåter:
   1) Handlingsbryter: input har data-autosubmit og ligger i et lite AJAX-skjema (se admin-ajax.js)
      - å flippe den sender skjemaet med en gang (Brukere aktiv/deaktivert, Skjul/vis lokasjon).
   2) Skjemabryter: vanlig avkrysningsboks i et skjema som lagres med en «Lagre»-knapp - da bare
      erstatter bryteren utseendet, oppførselen er uendret (arrangement-flagg, kategori synlig,
      enhet skjult). */
.switch {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    margin: 0;
    font-weight: 700;
    font-size: 0.87rem;
    color: var(--ink-2);
    -webkit-user-select: none;
    user-select: none;
}

/* Skjult, men fokuserbar (clip, ikke display:none) - selve tastaturmålet er avkrysningsboksen. */
.switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.switch-track {
    position: relative;
    flex-shrink: 0;
    width: 34px;
    height: 19px;
    border-radius: 999px;
    background: var(--faint, #cbd5df);
    border: 1px solid var(--line);
    transition: background .15s ease, border-color .15s ease;
}

.switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgb(28 28 26 / 0.3);
    transition: transform .15s ease;
}

.switch-input:checked + .switch-track {
    background: var(--accent);
    border-color: var(--accent);
}

.switch-input:checked + .switch-track .switch-thumb {
    transform: translateX(15px);
}

.switch-input:focus-visible + .switch-track {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.switch-input:disabled + .switch-track {
    opacity: 0.5;
}

.switch:has(.switch-input:disabled) {
    cursor: default;
}

/* Tekstetiketten ved siden av bryteren - fargelegges etter tilstand for ekstra tydelighet. */
.switch-text { color: var(--slate); }
.switch-input:checked ~ .switch-text { color: var(--ink); }

/* Liten fremdriftslinje for kapasitet per lokasjon (§7) - støtter tallene, erstatter dem aldri:
   prosent og antall vises alltid som tekst ved siden av (se admin-dashboard.php). */
.capacity-bar {
    display: block;
    width: 100%;
    height: 8px;
    border-radius: 99px;
    background: var(--line);
    overflow: hidden;
}

.capacity-bar-fill {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: var(--green);
}

.capacity-bar-fill--low { background: var(--amber); }
.capacity-bar-fill--full { background: var(--red); }

.period-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.period-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 0.85rem;
    transition: transform .16s cubic-bezier(.3,.8,.4,1), box-shadow .16s, border-color .16s;
}
.period-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 18px 30px -20px rgb(28 28 26 / 0.25); }

/* Prisen på forsiden (velg leirperiode) var tidligere en helt umerket <p> - samme visuelle vekt
   som datoene rett over, selv om prisen er den mest handlingsrelevante opplysningen på kortet. */
.price-span {
    font-weight: 800;
    color: var(--ink);
}

/* Grunnformen er SEKUNDÆR (hvit med kantlinje). Tidligere var den svakt fylt, og siden regelen
   treffer ALLE button[type=submit] ble hver eneste "Lagre"/"Filtrer"/"Legg til" like uthevet -
   ingen side pekte på sin egen hovedhandling (funn 40). Nå må en primærhandling merkes
   eksplisitt med class="button", og da er det den ene fylte knappen på siden.
   14px/500 i stedet for 12.5px/800 med sperring: knappetekst i nesten-fet versalsperring leste
   som etiketter, ikke som noe man trykker på. */
.button, .button-secondary, .button-danger, .button-icon-danger, .button-icon-secondary, .richtext-btn, button[type="submit"] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px; border-radius: var(--r-md);
    border: 1px solid var(--line); background: var(--panel); color: var(--ink-2);
    text-decoration: none; font-weight: 500; font-size: 14px;
    cursor: pointer; transition: background .15s, filter .15s;
}

/* Primærhandlingen - den ene fylte knappen per side. */
.button.button, button[type="submit"].button {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}
.button.button:hover, button[type="submit"].button:hover { filter: brightness(1.08); }

button[type="submit"]:hover { background: var(--bg); filter: none; }

/* Liten sekundær - brukes der knappen står inne i en seksjonsoverskrift eller tabellrad og ikke
   skal konkurrere med selve innholdet. */
.button-small.button-small {
    padding: 6px 12px;
    font-size: 13px;
}

/* display:inline-flex over vinner ellers over nettleserens [hidden]{display:none} siden
   forfatterstiler alltid slår brukeragent-stiler uansett spesifisitet - oppdaget da
   "Fullfør booking"-knappen (button[type=submit], skjult av book-form.js sin stegveiviser)
   fortsatt viste seg på steg 1. Disse fem trenger derfor en eksplisitt egen [hidden]-regel. */
.button[hidden], .button-secondary[hidden], .button-danger[hidden],
.button-icon-danger[hidden], .button-icon-secondary[hidden], button[type="submit"][hidden] {
    display: none;
}

/* Doblet klasseselektor (.button-secondary.button-secondary) for å garantert vinne over
   button[type="submit"] sin spesifisitet over - ellers taper disse to overstyringene mot
   basestilen når elementet er en <button type="submit"> (som de nesten alltid er). */
.button-secondary.button-secondary { border-color: var(--line); background: var(--panel); }
.button-secondary.button-secondary:hover { background: var(--wash); filter: none; }

/* Samme padding/font-størrelse som .button-secondary (ikke en egen, mindre størrelse som før) -
   "Slett"/"Fjern"/"Deaktiver" står ofte rett ved siden av eller stablet over en annen knapp
   (f.eks. Lagre+Slett, Blokker+Slett), og ulik knappestørrelse så ut som en visningsfeil. */
.button-danger.button-danger {
    border-color: var(--red-bd); background: var(--red-bg); color: var(--red-text);
}
.button-danger.button-danger:hover { filter: brightness(.97); }

/* Kompakt ikonknapp-variant (kun ikon, ingen synlig tekst) - brukt for alle "Slett"/"Fjern"-
   knappene (se Partials::confirmDeleteButton()) og "×"-fjernknappen i ukeoversikten for oppgaver
   (admin-tasks.php), som ellers ville tatt like mye plass som en vanlig tekstknapp rett ved siden
   av andre radhandlinger. */
.button-icon-danger.button-icon-danger {
    border-color: var(--red-bd); background: var(--red-bg); color: var(--red-text);
    padding: 2px 8px; font-size: 12px;
}
.button-icon-danger.button-icon-danger:hover { filter: brightness(.97); }

/* Samme kompakte ikonknapp-form som .button-icon-danger over, men i den nøytrale
   .button-secondary-fargen - brukt for "Kopier"-knappen ved innsjekk-lenkene
   (admin-overview.php) der en hel tekstknapp tok unødig plass ved siden av selve lenketeksten. */
.button-icon-secondary.button-icon-secondary {
    border-color: var(--line); background: var(--panel); color: var(--slate);
    padding: 2px 8px; font-size: 12px;
}
.button-icon-secondary.button-icon-secondary:hover { background: var(--wash); filter: none; }

fieldset {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    margin-bottom: 1.25rem;
    padding: 1rem;
    background: var(--panel);
}

legend { color: var(--ink); font-weight: 800; padding: 0 0.4rem; }

label {
    display: block;
    margin-bottom: 0.6rem;
    color: var(--slate);
}

/* font-size/line-height er satt eksplisitt (ikke bare font-family: inherit) fordi <select> ellers
   arver nettleserens egen kontrollskrift i stedet for sidens - det gjorde at <select> rendret
   synlig lavere enn <input type="text"> ved siden av (f.eks. Periode-nedtrekk vs. Søk på navn i
   .filter-form) selv med identisk padding. min-height er et ekstra sikkerhetsnett mot samme
   nettleser-forskjell i beregnet innholdshøyde. */
input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="number"], input[type="password"], textarea, select {
    display: block;
    min-height: 2.3rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    margin-top: 0.25rem;
    background: var(--panel);
    color: var(--ink-2);
    font-family: inherit;
    font-size: 0.93rem;
    line-height: 1.4;
}

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="number"], input[type="password"], textarea {
    width: 100%;
    max-width: 420px;
}

/* select bevisst UTEN width:100% - inne i smale tabellceller (f.eks. status-endring per rad)
   ville det klippet av teksten i valgt option; select sin egen bredde-basert-på-innhold
   (auto) er riktigere for disse korte, inline dropdownene. */
select {
    width: auto;
}

/* Riktekst-editor for fellesmail (admin-bulk-mail.php, se bulk-mail-editor.js) - verktøylinje
   over en contenteditable-div som visuelt skal ligne resten av skjemafeltene (samme border/
   radius/farger som textarea over), bare med en egen topplinje for formateringsknappene.
   Den faktiske <textarea name="body" hidden data-richtext-output> som sendes med skjemaet skal
   ALDRI vises - samme spesifisitetsproblem som .button[hidden] over (den generiske
   textarea-regelen sin display:block vinner ellers over nettleserens [hidden]). */
textarea[data-richtext-output] {
    display: none;
}

.richtext-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.25rem;
    padding: 0.4rem;
    background: var(--wash);
    border: 1px solid var(--line);
    border-bottom: none;
    border-radius: var(--r-md) var(--r-md) 0 0;
}

.richtext-toolbar-separator {
    width: 1px;
    align-self: stretch;
    background: var(--line);
    margin: 0.15rem 0.15rem;
}

.richtext-btn.richtext-btn {
    padding: 0.3rem 0.55rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: normal;
    border-color: var(--line);
    background: var(--panel);
    color: var(--ink-2);
}
.richtext-btn.richtext-btn:hover { background: var(--wash); filter: none; }

.richtext-editor {
    min-height: 12rem;
    max-width: 640px;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 0 0 var(--r-md) var(--r-md);
    background: var(--panel);
    color: var(--ink-2);
    line-height: 1.5;
    overflow-y: auto;
}

.richtext-editor:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: -1px;
}

.richtext-editor p { margin: 0 0 0.75em; }
.richtext-editor ul, .richtext-editor ol { margin: 0 0 0.75em; padding-left: 1.5em; }
.richtext-editor a { color: var(--blue); }
.richtext-editor h2 { font-size: 1.3rem; margin: 0 0 0.5em; }
.richtext-editor h3 { font-size: 1.1rem; margin: 0 0 0.5em; }

.richtext-btn.richtext-btn:disabled {
    opacity: 0.4;
    cursor: default;
}
.richtext-btn.richtext-btn:disabled:hover { background: var(--panel); }

/* Ren tekst-bryteren dyttes til høyre i verktøylinjen (margin-left:auto på en flex-rad), med
   litt luft til knappene foran - egen switch-instans (se .switch over), bare mindre skrift for å
   passe inn ved siden av de kompakte formateringsknappene. */
.richtext-plaintext-toggle.richtext-plaintext-toggle {
    margin-left: auto;
    font-size: 0.8rem;
}

/* Samme spesifisitetsproblem som .richtext-output over - textarea sin display:block vinner
   ellers over [hidden] når feltet er skjult (ren tekst-bryteren av, se bulk-mail-editor.js). */
textarea.richtext-plaintext[hidden] {
    display: none;
}

.richtext-plaintext {
    min-height: 12rem;
    max-width: 640px;
    font-family: inherit;
}

.bulk-mail-attachments {
    margin-top: 0.5rem;
}

.bulk-mail-attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.bulk-mail-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.5rem;
    background: var(--wash);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--ink-2);
}

.bulk-mail-attachment-remove.bulk-mail-attachment-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--slate);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.bulk-mail-attachment-remove.bulk-mail-attachment-remove:hover { color: var(--red-text); filter: none; background: transparent; }

/* Fellesmail-filteret (admin-bulk-mail.php): én flat rad av avkrysningsbokser i stedet for to
   separate boks-inndelte fieldset-seksjoner ("bolker") - gruppenavnene (Booking/Venteliste)
   vises som en liten diskret etikett i selve raden, ikke som en boks rundt hver gruppe. */
.bulk-mail-status-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}

.bulk-mail-status-group-label {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate);
}
.bulk-mail-status-group-label:not(:first-child) {
    margin-left: 0.5rem;
    padding-left: 0.6rem;
    border-left: 1px solid var(--line);
}

.bulk-mail-recipients-row td {
    background: var(--wash);
}

.bulk-mail-recipients-inline {
    columns: 2;
    margin: 0;
    padding-left: 1.2rem;
}

/* Vis/skjul-knapp på passordfelt, satt inn av assets/js/password-toggle.js (progressiv
   forbedring - .password-field-wrapperen finnes ikke i selve HTML-malene). */
.password-field {
    display: block;
    position: relative;
    max-width: 420px;
    margin-top: 0.25rem;
}

.password-field input[type="password"], .password-field input[type="text"] {
    width: 100%;
    max-width: none;
    margin-top: 0;
    padding-right: 3.2rem;
}

.password-toggle-btn {
    position: absolute;
    top: 50%;
    right: 0.4rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.2rem 0.4rem;
    color: var(--slate);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.password-toggle-btn:hover {
    color: var(--ink);
}

.unit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.unit-checkbox {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 0.4rem 0.6rem;
    margin: 0;
}

.unit-checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Beskrivelse er felles for HELE lokasjonen (satt via "Flere valg" på gruppen i
   admin-locations.php), vises derfor kun én gang under kategorioverskriften - ikke gjentatt per
   enkelt enhet-avkrysning slik den var før. */
.category-description {
    font-size: 0.85rem;
    color: var(--muted);
    margin: 0 0 0.5rem;
}

.unit-checkbox.is-unavailable {
    opacity: 0.6;
    background: var(--wash);
}

/* Kapasitet som en liten farget tallrute til høyre i raden i stedet for "(kap. X)"-parentestekst -
   raskere å skanne visuelt på tvers av mange rader. margin-left:auto skyver den (og
   .unavailable-label, som følger rett etter) helt til høyre i raden. */
.unit-capacity-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 0.35rem;
    flex-shrink: 0;
    margin-left: auto;
    border: 1px solid var(--blue-bd);
    border-radius: var(--r-sm);
    background: var(--blue-bg);
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 800;
}

/* Funn 42: på korte sider (innlogging, tomme lister) fløt bunnteksten langt nede i et stort tomt
   felt fordi den bare fulgte innholdet. body som flex-kolonne med min-height:100dvh og
   margin-top:auto på bunnteksten fester den til vindusbunnen når innholdet er kort, og lar den
   følge innholdet når siden er lang. 100dvh (ikke 100vh) siden mobilnettlesere endrer
   viewport-høyden når adresselinjen skjules - med vh fikk man en bunntekst som lå litt utenfor
   skjermen. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

/* Inni en <iframe> er 100dvh = rammens høyde. Da kunne body aldri bli lavere enn rammen, og
   embed-resize.js (som måler body) ville bare latt rammen vokse - aldri krympe igjen, f.eks. fra
   det lange skjemaet til den korte bekreftelsessiden. */
body.is-embed {
    min-height: 0;
}

/* To ting må settes på body sine flex-barn, ellers sprenger sider med brede tabeller viewporten
   på mobil så snart body ble en flex-kolonne over (målt 1180px dokumentbredde på 390px skjerm):
   1. min-width: flex-elementer har min-width:auto, altså "aldri smalere enn innholdets
      min-content" - en bred tabell ville dratt <main> med seg i stedet for å scrolle inne i sin
      egen .table-scroll.
   2. width: .container har margin:0 auto, og AUTO-MARGER I TVERRAKSEN slår av align-items:
      stretch. Uten stretch ble <main> innholdsbredt og traff sin egen max-width (1180px) i
      stedet for å følge skjermbredden. */
body > * {
    min-width: 0;
    width: 100%;
}

.site-footer {
    max-width: 1180px;
    width: 100%;
    margin: 2rem auto 1rem;
    margin-top: auto;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.9rem;
}

.unavailable-label {
    font-size: 0.8rem;
    color: var(--red-text);
}

/* Kategori+antall-varianten av rom/plassvalget (periods.manual_unit_assignment=TRUE) - samme
   boks-oppskrift som .unit-checkbox over, men med et number-felt i stedet for avkrysning. */
/* Funn 35: antallsfeltet lå i FØRSTE kolonne - "0" i en boks foran "Gamlebygget (450 kr/natt)",
   altså tallet før man visste hva det gjaldt. Nå står kategorien først og antallet til høyre,
   sammen med linjetotalen. */
/* «Strand» (oktober 2026): én liste med skillelinjer i stedet for ett kort per kategori - ni
   kort etter hverandre ga ni rammer å lese forbi før man kom til «Neste». */
.category-quantity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: none;
    border-bottom: 1px solid var(--line);
    padding: 14px 2px;
}

.category-quantity-main { flex: 1; min-width: 180px; }

.category-quantity-label {
    display: block;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}

.category-quantity-meta { font-size: 13px; color: var(--muted); }
/* margin-left:auto: på mobil bryter kontrollen til egen linje, og står da til høyre under
   prisen i stedet for å flyte midt på linjen. */
.category-quantity-control { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.category-line-total {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    min-width: 4.5rem;
    text-align: right;
}

/* Antallsvelger: -/+ på hver side av tallet, som én sammenhengende kontroll. */
.stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    overflow: hidden;
}
.stepper-btn {
    width: 44px;
    min-height: 44px;
    border: none;
    background: var(--panel);
    color: var(--ink);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}
.stepper-btn:hover { background: var(--bg-subtle); }

.category-quantity .stepper input[type="number"] {
    width: 46px;
    margin: 0;
    border: none;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    border-radius: 0;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    padding: 8px 0;
    -moz-appearance: textfield;
    appearance: textfield;
}
/* Nettleserens egne spinner-piler er overflødige når -/+ står rett ved siden av, og de gjør
   feltet smalere enn tallet trenger. */
.category-quantity .stepper input[type="number"]::-webkit-outer-spin-button,
.category-quantity .stepper input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.date-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
/* book-form.js skjuler datofeltene med hidden-attributtet når kalenderen tar over - forfatterstiler
   overstyrer ELLERS alltid nettleserens egen [hidden]{display:none} uansett spesifisitet (samme
   snublefelle som .wizard-step[hidden]/.participant-checkin-list li[hidden] andre steder i denne
   filen), og .date-fields{display:grid} rett over ville da vunnet og latt feltene stå synlige. */
.date-fields[hidden] { display: none; }
.accommodation-block { margin-top: 1.5rem; }

/* --- Kart over området: lenken ved «Hva vil dere bo i?» og kartvinduet -----------------------
   Lenken står i overskriftsraden og er bevisst liten - kartet er en hjelp til å velge, ikke en del
   av selve valget. Vinduet er en <dialog> (åpnes av camp-map.js): Esc, fokusfelle og at fokus
   går tilbake til lenken ved lukking får man dermed gratis.
   .map-dialog har bevisst ingen display-regel selv - en forfatterregel ville overstyre nettleserens
   display:none for en LUKKET dialog (samme snublefelle som [hidden] andre steder i denne filen). */
.accommodation-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
}
.map-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 500;
}
.map-link svg { flex-shrink: 0; }

.map-dialog {
    width: min(72rem, calc(100vw - 1.5rem));
    max-width: none;
    max-height: calc(100dvh - 1rem);
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--panel);
    color: var(--ink);
    box-shadow: 0 24px 64px -24px rgba(28, 28, 26, 0.5);
    overflow: hidden;
}
.map-dialog::backdrop { background: rgba(28, 28, 26, 0.5); }
/* Uten dette ruller siden bak vinduet når man scroller over bakteppet. */
html:has(.map-dialog[open]) { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
    .map-dialog[open] { animation: map-dialog-in 0.16s ease-out; }
}
@keyframes map-dialog-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.map-dialog-panel {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 1rem);
}
.map-dialog-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 1.25rem;
    border-bottom: 1px solid var(--line-soft);
}
.map-dialog-head h2 { margin: 0; font-size: 1.1rem; }
.map-dialog-close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--panel);
    color: var(--ink-2);
    cursor: pointer;
}
.map-dialog-close:hover { background: var(--bg-subtle); color: var(--ink); }

.map-dialog-body {
    overflow: auto;
    padding: 1rem 1.25rem 1.25rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14rem;
    gap: 1.5rem;
    align-items: start;
}
.map-dialog-figure { margin: 0; }
/* Kartet vises først i sin helhet (så høyt vinduet tillater), og kan forstørres til full størrelse
   - da blir viewport en rullbar flate man panorerer i. Etikettene i bildet er små når hele kartet
   skal få plass i et vindu. */
.map-dialog-viewport {
    /* Bredden settes her (ikke på bildet): så høyt som vinduet tillater, aldri bredere enn kolonnen.
       Definert fra første stund (bildet er 1404x1606, forholdet 0,874), så vinduet ikke hopper når
       bildet er ferdig lastet. */
    width: min(100%, calc((100dvh - 10rem) * 0.874));
    margin: 0 auto;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
}
.map-dialog-viewport img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1404 / 1606;
    -webkit-user-drag: none;
}
.map-dialog-figure.is-zoomed .map-dialog-viewport {
    width: 100%;
    overflow: auto;
    max-height: calc(100dvh - 10rem);
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}
.map-dialog-figure.is-zoomed .map-dialog-viewport.is-dragging { cursor: grabbing; }
.map-dialog-figure.is-zoomed .map-dialog-viewport img {
    width: 1404px;
    max-width: none;
}
.map-dialog-figure figcaption { margin-top: 0.5rem; text-align: center; }
.map-zoom {
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--panel);
    color: var(--ink-2);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
}
.map-zoom:hover { background: var(--bg-subtle); color: var(--ink); }

.map-legend-title {
    margin: 0 0 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}
.map-legend dl { margin: 0; }
.map-legend-group { padding: 0.55rem 0; border-top: 1px solid var(--line-soft); }
.map-legend-group:first-child { padding-top: 0; border-top: 0; }
/* Ett faktum per linje («Bibeltimer  Møtesal»); lange par brytes til to linjer av seg selv. */
.map-legend-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.6rem;
    padding: 0.1rem 0;
}
.map-legend dt { font-size: 0.8rem; color: var(--muted); }
.map-legend dd { margin: 0; font-size: 0.9rem; font-weight: 500; }

@media (max-width: 720px) {
    .map-dialog-body { grid-template-columns: minmax(0, 1fr); padding: 1rem; gap: 1.25rem; }
}

/* Funn 34: datoen står nå I stolpen. Uten den var stripen sju umerkede felt der man måtte holde
   musepekeren over hver enkelt for å vite hvilken dag den gjaldt - og på mobil finnes ingen
   musepeker i det hele tatt. Fargeforklaringen i teksten under er dermed overflødig. */
/* Bug rapportert 2026-08-30: denne stripen dekker HELE arrangementet, ikke bare valgte netter -
   for en 14-dagers periode (og sommerleirer kan vare enda lengre) tvang den vanlige
   .availability-day{flex:1; min-width:3px} alle dagene inn i ÉN rad på mobil. Ved 375px viewport
   ga det ~20px per celle mens "04.07." + "god plass" trenger minst 36px - datoen og
   statusteksten overlappet hverandre i praksis ubrukelig.
   flex-wrap + en flex-basis-gulv løser det: cellene brekker til flere rader i stedet for å
   klemmes tynnere enn teksten tåler. 64px er valgt slik at "Karl Erik"-lengde datoer+"god plass"
   fortsatt får plass på to linjer uten å klippes, verifisert på 375px (6 per rad, 3 rader for
   14 dager) opp til 1280px (én rad). */
.availability-strip--labelled { gap: 4px; flex-wrap: wrap; }
.availability-strip--labelled .availability-day {
    flex: 1 1 64px;
    min-width: 64px;
    height: auto;
    padding: 8px 2px;
    border-radius: 6px;
    text-align: center;
    line-height: 1.25;
}
.availability-date { display: block; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.availability-level { display: block; font-size: 11px; }
.availability-strip--labelled .availability-day--high { background: var(--ok-soft); color: var(--ok-ink); }
.availability-strip--labelled .availability-day--low { background: var(--warn-soft); color: var(--warn-ink); }
.availability-strip--labelled .availability-day--full { background: var(--danger-soft); color: var(--danger-ink); }

/* Klikk-i-kalenderen for å velge datoer, i stedet for de to datofeltene (erstatter funn 34-
   stripen med en interaktiv en). .is-interactive/tabindex/role settes KUN av book-form.js når JS
   faktisk kjører - se book-form-booking-fields.php for hvorfor cellene er <span>, ikke <button>,
   i selve markupen. */
.availability-strip--labelled .availability-day.is-interactive {
    cursor: pointer;
    transition: background .1s ease, color .1s ease;
}

/* Valgt ankomst/avreise: fylt med aksentfargen og VINNER over tilgjengelighetsfargen over -
   to klasser i selektoren (samme spesifisitet-triks som .button-secondary.button-secondary
   andre steder i filen) er nok her siden --high/--low/--full også har to klasser hver, og
   kildeordenen (denne regelen kommer SENERE i filen) avgjør uavhengig ved lik spesifisitet. */
.availability-strip--labelled .availability-day.is-start,
.availability-strip--labelled .availability-day.is-end {
    background: var(--highlight);
    color: var(--ink);
}

/* Nettene MELLOM valgt ankomst og avreise. --accent-soft alene viste seg IKKE nok til å skille
   seg fra --availability-day--high sin lyse grønnfarge under uttesting - begge er lyse grønntoner
   i samme fargefamilie, så tinten alene så ut som "fortsatt bare god plass", ikke som et bevisst
   valg. En tydelig kant over/under gir et mye sterkere signal enn en subtil fyllforskjell, og
   binder start-cellen, nettene mellom og slutt-cellen sammen som ett synlig bånd. */
.availability-strip--labelled .availability-day.is-in-range {
    background: var(--accent-soft);
    color: var(--ink);
    border-top: 2px solid var(--highlight);
    border-bottom: 2px solid var(--highlight);
    /* Kompenserer for kantens tykkelse slik at cellen ikke blir 4px høyere enn naboene og
       forskyver teksten i den vertikalt. */
    padding-top: 6px;
    padding-bottom: 6px;
}

/* --- Løpende sum (funn 32) ---------------------------------------------------------------- */
.wizard-nav-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.running-total { display: flex; flex-direction: column; gap: 2px; }
.running-total[hidden] { display: none; }
.running-total-empty { font-size: 15px; color: var(--ink-2); }
.running-total-empty[hidden] { display: none; }
.running-total-desc { font-size: 13px; color: var(--muted); }
.running-total-sum { font-size: 20px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.running-total-note { font-size: 13px; font-weight: 400; color: var(--muted); }

/* Ledighetsstripen og "fullt"-varselet skal ligge på EGEN linje under navn/antall, i full bredde.
   grid-column: 1/-1 gjorde den jobben da .category-quantity var et grid; nå som den er flex må de
   tvinges til ny linje med flex-basis, ellers klemmes stripen inn som en smal kolonne ved siden
   av antallsvelgeren. */
.category-quantity .availability-strip,
.category-quantity .category-full-notice {
    flex: 0 0 100%;
    width: 100%;
}

.category-remaining {
    font-size: 0.8rem;
    color: var(--muted);
    white-space: nowrap;
}

/* Vist når en kategori er fullbooket for valgte datoer - se renderCategoryFullNotice() i
   partials/book-form-booking-fields.php og #waitlist-form-section under. */
/* <details> - se renderCategoryFullNotice() i book-form-booking-fields.php. <summary> er
   kollapset som standard (kun "Fult. Meld deg på venteliste." synlig) til gjesten klikker den,
   som da åpner de innebygde ventelistefeltene (.category-waitlist-fields) rett i raden. */
.category-full-notice {
    margin: 0.3rem 0 0;
    font-size: 0.85rem;
}

.category-full-notice summary {
    color: var(--red-text);
    font-weight: 700;
    cursor: pointer;
}

.category-waitlist-fields {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--line);
}

/* Vanlig romvalg (unit-grid) grupperer enhetene sin ledighetsstripe/full-varsel per kategori i
   denne wrapperen - samme visuelle luft som .category-quantity-varianten over. */
.unit-category-group {
    margin-bottom: 1rem;
}

/* --- Overnattingstype-faner (Internat/Camping/...) på bookingskjemaet ------------------------
   Rene CSS-faner: en visuelt skjult (men fokuserbar) radio per type + :checked-regler lenger
   ned styrer hvilken .acc-tabpanel som vises og hvilken .acc-tab som er aktiv. Ingen JS - de
   fungerer derfor både uten JS (som resten av skjemaet degraderer) og under CSP-en (script-src
   'self', ingen inline-JS). Se renderAccommodationSection() i
   src/pages/partials/book-form-booking-fields.php. Nth-child-reglene dekker opptil 6 typer
   (acc-tab-0..5) - langt over de 2-3 som er realistisk; en 7. type ville fortsatt vist, men uten
   fane-veksling (panelet ville forblitt skjult), derfor det romslige taket. */
.accommodation-tabs {
    margin: 0 0 1rem;
}

/* Skjult, men fortsatt i tab-rekkefølgen og fokuserbar (clip i stedet for display:none) - lar
   tastaturbrukere flytte mellom fanene med piltaster slik native radioknapper fungerer. */
.acc-tab-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.acc-tablist {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    border-bottom: 2px solid var(--line);
    margin-bottom: 1.1rem;
}

.acc-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 -2px;
    padding: 0.55rem 1rem;
    cursor: pointer;
    border: 1px solid var(--line);
    border-bottom: 2px solid var(--line);
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    background: var(--wash);
    color: var(--ink-2);
    font-weight: 800;
}

.acc-tab:hover {
    color: var(--ink);
    border-color: var(--blue-bd);
}

.acc-tab svg {
    flex-shrink: 0;
}

.acc-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--line);
    color: var(--ink-2);
    font-size: 11px;
    font-weight: 800;
}

.acc-tabpanel {
    display: none;
}

/* Aktiv fane «løftes» opp på hvitt med en rolig blå topp-aksent (box-shadow inset), og dens
   panel vises. En regel per fane-indeks siden typene er dynamiske (fritekst) - se taket over. */
#acc-tab-0:checked ~ .acc-tabpanels > .acc-tabpanel:nth-child(1),
#acc-tab-1:checked ~ .acc-tabpanels > .acc-tabpanel:nth-child(2),
#acc-tab-2:checked ~ .acc-tabpanels > .acc-tabpanel:nth-child(3),
#acc-tab-3:checked ~ .acc-tabpanels > .acc-tabpanel:nth-child(4),
#acc-tab-4:checked ~ .acc-tabpanels > .acc-tabpanel:nth-child(5),
#acc-tab-5:checked ~ .acc-tabpanels > .acc-tabpanel:nth-child(6) {
    display: block;
}

#acc-tab-0:checked ~ .acc-tablist > .acc-tab:nth-child(1),
#acc-tab-1:checked ~ .acc-tablist > .acc-tab:nth-child(2),
#acc-tab-2:checked ~ .acc-tablist > .acc-tab:nth-child(3),
#acc-tab-3:checked ~ .acc-tablist > .acc-tab:nth-child(4),
#acc-tab-4:checked ~ .acc-tablist > .acc-tab:nth-child(5),
#acc-tab-5:checked ~ .acc-tablist > .acc-tab:nth-child(6) {
    background: var(--panel);
    color: var(--ink);
    border-color: var(--line);
    border-bottom-color: var(--panel);
    box-shadow: inset 0 3px 0 var(--highlight);
}

/* Fokus-ring på den aktive fanen når dens (skjulte) radio har tastaturfokus. */
#acc-tab-0:focus-visible ~ .acc-tablist > .acc-tab:nth-child(1),
#acc-tab-1:focus-visible ~ .acc-tablist > .acc-tab:nth-child(2),
#acc-tab-2:focus-visible ~ .acc-tablist > .acc-tab:nth-child(3),
#acc-tab-3:focus-visible ~ .acc-tablist > .acc-tab:nth-child(4),
#acc-tab-4:focus-visible ~ .acc-tablist > .acc-tab:nth-child(5),
#acc-tab-5:focus-visible ~ .acc-tablist > .acc-tab:nth-child(6) {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

/* Samme boks-oppskrift som .unit-checkbox rett over i skjemaet (avkrysningsliste for frivillig
   innsats) - var tidligere en helt umerket <label> uten noen av disse stilene, som gjorde at to
   like avkrysningslister på samme skjema så helt forskjellige ut. */
.volunteer-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 0.4rem 0.6rem;
    margin: 0 0 0.5rem;
}

/* flex-wrap fordi raden inneholder flere felt side om side, og et <input type="date"> har en
   innebygd minstebredde fra nettleseren (målt ~178px) som IKKE kan krympes bort. Uten wrap kunne
   ikke raden brytes på en telefonskjerm, så feltene dyttet i stedet hele siden 112px vannrett
   (målt på /admin/booking/{id} med "Rediger bestilling"-panelet åpent, 375px bredde). */
.participant-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    margin-bottom: 0.5rem;
}

/* "Hvem kan vi kontakte om dette?" under Frivillig innsats (se book-form-booking-fields.php) -
   samme kompakte avkrysningsboks-form som .volunteer-option over, men i en rad med et
   mobilnummer-felt som slår seg på ved siden av når raden er krysset av og personen er gammel
   nok (se renderVolunteerContacts() i book-form.js). */
#volunteer-contacts .label {
    display: block;
    margin-bottom: 0.4rem;
}

.volunteer-contact-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}

.volunteer-contact-checkbox {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 0.4rem 0.6rem;
}

.volunteer-contact-phone {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

.volunteer-contact-phone input {
    width: auto;
    margin: 0;
}

.booking-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.booking-table th, .booking-table td {
    border-bottom: 1px solid var(--line);
    padding: 0.6rem 0.75rem;
    text-align: left;
}

/* Samme begrunnelse som code-regelen øverst i filen, men for celleinnhold: en e-post, referanse
   eller loggdetalj uten mellomrom setter cellens minstebredde, og en tabell kan ikke bli smalere
   enn summen av kolonnenes minstebredder - da vokser den forbi containeren og skyver hele siden
   vannrett i stedet for å krympe kolonnene. Målt på smal skjerm (375px): Logg +282px,
   Medlemmer +12px sideoverflyt før dette.
   KUN td, bevisst IKKE th: overskriftene er korte, faste etiketter, og med anywhere på dem brakk
   de midt i ordet ("ARRANGEMEN/T", "RAB/ATT", "DIFFER/ANSE") så snart tabellen ble litt trang -
   like ødelagt som overflyten, bare på en annen måte (sett i skjermbilde av Fakturagrunnlag).
   En tabell som er FOR bred selv med brytende celler hører i .overview-scroll i stedet (se
   under) - der slår white-space:nowrap denne regelen, som er meningen: de skal scrolles vannrett. */
.booking-table td {
    overflow-wrap: anywhere;
}

/* Minstebredde på en lenke/kodesnutt i en tabellcelle: uten den kan kolonnen krympes helt ned
   (målt 36px = ~4 tegn per linje på 375px) fordi brytningen over gjør at cellen "godtar" nesten
   hvilken som helst bredde - lenken ble en høy, ulesbar sliver på én bokstavgruppe per linje.
   Med denne blir tabellen i stedet litt bredere enn wrapperen og scrolles vannrett (se
   .table-scroll), som er langt mer lesbart: ~24 tegn per linje. Rører ikke skrivebordsvisningen,
   der kolonnen allerede er bredere enn dette. */
.booking-table td code {
    display: inline-block;
    min-width: 22ch;
}

.booking-table th {
    font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--muted); background: var(--bg-subtle);
}

/* Tallkolonner høyrejusteres med fast siffbredde (funn 18). Venstrejusterte beløp og antall er
   umulige å sammenligne nedover en kolonne - "9" og "1302" starter da på samme sted. */
.booking-table th.num, .booking-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --- Verktøylinje og filterbrikker over en liste ------------------------------------------ */
.list-toolbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
}
.list-search {
    flex: 1;
    min-width: 240px;
    padding: 8px 13px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--panel);
    color: var(--ink);
}
.list-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

/* Sju kolonner får ikke plass på en telefon: tabellen krevde 508px i en 353px bred beholder, og
   siden endte med å scrolle vannrett 88px (målt på 390px skjerm). Deltakerantall og beløp er de
   to som lettest kan vente til man åpner bestillingen - navn, datoer, enhet og status er det man
   skanner etter i lista. */
@media (max-width: 760px) {
    .booking-table--rows th:nth-child(2),
    .booking-table--rows td:nth-child(2),
    .booking-table--rows th:nth-child(5),
    .booking-table--rows td:nth-child(5) {
        display: none;
    }
}

.list-footer { font-size: 13px; color: var(--muted); margin-top: 12px; }

/* --- Rad som helhet er lenken (funn 16) --------------------------------------------------- */
/* <a> fyller cellen, men strekker seg ikke over hele raden: en <a> rundt <tr> er ikke gyldig
   HTML, og en JS-basert "klikk på raden" ville brutt midtklikk/åpne-i-ny-fane. Navnet er
   lenketeksten, og resten av raden peker samme vei via menyen. */
.row-link {
    display: block;
    border-bottom: none;
    color: inherit;
}
.row-link-name { display: block; font-weight: 600; color: var(--accent-ink); }
.row-link:hover .row-link-name { text-decoration: underline; }
.row-link-sub { display: block; font-size: 12px; color: var(--muted); }
.cell-sub { display: block; font-size: 12px; color: var(--muted); }

/* Rad som venter på tildeling / er kansellert (funn 15). Kansellert tones ned OG får
   gjennomstreket navn - status alene i en kolonne var for lett å overse. */
.booking-table tr.row-pending td { background: var(--warn-row); }
.booking-table tr.row-cancelled td { color: var(--muted-2); }
.booking-table tr.row-cancelled .row-link-name {
    color: var(--muted-2);
    text-decoration: line-through;
    text-decoration-color: var(--highlight-line);
}

/* --- "..."-meny per rad (funn 14) --------------------------------------------------------- */
.row-menu { position: relative; }
.row-menu > summary {
    list-style: none;
    cursor: pointer;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--panel);
    color: var(--ink-3);
    text-align: center;
    line-height: 1;
    width: 36px;
}
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu[open] > summary { border-color: var(--muted-2); }

.row-menu-panel {
    position: absolute;
    right: 0;
    z-index: 10;
    min-width: 210px;
    margin-top: 4px;
    padding: 5px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.row-menu-panel form { margin: 0; }
.row-menu-panel a,
.row-menu-panel button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: none;
    border-radius: 6px;
    background: none;
    font-size: 14px;
    font-weight: 400;
    color: var(--ink-2);
    cursor: pointer;
}
.row-menu-panel a { border-bottom: none; }
.row-menu-panel a:hover,
.row-menu-panel button:hover { background: var(--bg-subtle); color: var(--ink); }
.row-menu-panel button.is-danger { color: var(--danger-ink); }
.row-menu-panel button.is-danger:hover { background: var(--danger-soft); }

/* Skjult for øyet, men lest av skjermlesere - brukt på etiketter der den visuelle konteksten
   (plassering, plassholdertekst) allerede sier hva feltet er. */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Dra-håndtak-rader (admin-volunteer-options.php, se data-sortable-list i admin-ajax.js) - egen
   smal kolonne helt til venstre for grep-ikonet, og radhandlinger (slett-ikonet) samlet til
   høyre, slik at de to radkontrollene (sortering vs. sletting) ikke lenger klistrer seg sammen. */
.drag-handle-cell {
    width: 1px;
    white-space: nowrap;
}

.drag-handle {
    display: inline-flex;
    color: var(--muted);
    cursor: grab;
    user-select: none;
}
.drag-handle:hover { color: var(--slate); }
.drag-handle:active { cursor: grabbing; }

.row-actions {
    text-align: right;
}

.sortable-row.is-dragging {
    opacity: 0.4;
}

.price-table td {
    padding: 0.25rem 1rem 0.25rem 0;
    color: var(--slate);
}

.price-table .total td {
    font-weight: 800;
    color: var(--ink);
    border-top: 1px solid var(--line);
}

/* Kvitteringen etter fullført bestilling (confirmation.php), «Strand» (oktober 2026): takk og
   neste steg til venstre, selve bestillingen i en tonet boks til høyre - på mobil under
   hverandre. */
.receipt-hero { max-width: 44rem; margin-bottom: 2rem; }
.receipt-hero h1 { margin: 0.75rem 0 0.5rem; line-height: 1.1; }
.receipt-check {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--highlight);
    color: var(--ink);
}
.receipt-lead { font-size: 17px; color: var(--ink-3); margin: 0; }

.receipt-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-start;
}
.receipt-main { flex: 999 1 26rem; min-width: 0; }
.receipt-summary {
    flex: 1 1 20rem;
    background: var(--bg-subtle);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.25rem;
}
.receipt-summary h2 { margin-top: 0; }

.receipt-section { border-top: 1px solid var(--ink); padding-top: 1rem; margin-bottom: 1.75rem; }
.receipt-section h2 { margin: 0 0 0.75rem; }
.receipt-list { margin: 0; padding-left: 1.1rem; }
.receipt-muted { color: var(--muted); }

/* Tidslinje: fullført steg er fylt svart med gul hake, kommende har bare kant - samme grep som
   .wizard-progress i skjemaet, så gjesten kjenner igjen formen. */
.receipt-steps { list-style: none; margin: 0; padding: 0; counter-reset: receipt-step; }
.receipt-steps li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 0 1.1rem 44px;
    counter-increment: receipt-step;
}
.receipt-steps li::before {
    content: counter(receipt-step);
    position: absolute;
    left: 0;
    top: -2px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--line-strong);
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}
.receipt-steps li.is-done::before {
    content: '✓';
    background: var(--ink);
    border-color: var(--ink);
    color: var(--highlight);
}
.receipt-steps strong { color: var(--ink); font-weight: 600; }
.receipt-steps span { color: var(--muted); font-size: 14px; }

.receipt-dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; margin: 0 0 1rem; }
.receipt-dl dt { color: var(--muted); }
.receipt-dl dd { margin: 0; color: var(--ink); }
.receipt-prices { width: 100%; }
.receipt-prices td:last-child { text-align: right; padding-right: 0; white-space: nowrap; }
.receipt-prices .total td { padding-top: 0.5rem; font-size: 17px; }

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

/* Ledighetsindikator natt for natt i perioden, på bookingskjemaet (book.php) - hjelper gjesten å
   se hvilke datoer som har mest plass FØR datoene faktisk velges (i motsetning til
   grå-ut-mekanismen på selve rom-/plassvalget, som først virker ETTER datoene er satt). */
.availability-strip {
    display: flex;
    gap: 2px;
    margin: 0.75rem 0 0.4rem;
}

.availability-day {
    flex: 1;
    min-width: 3px;
    height: 14px;
    border-radius: 3px;
}

.availability-day--high { background: var(--ok-bar); }
.availability-day--low { background: var(--amber); }
.availability-day--full { background: var(--red); }

/* Kompakt variant - én per lokasjon i steg 2 (romvalget), i motsetning til den store,
   ett-per-side stripen for hele perioden i steg 1. Lavere og med mindre luft rundt, siden det
   fort blir mange av disse etter hverandre (én per kategori/lokasjon). */
.availability-strip--compact {
    margin: 0.3rem 0 0.6rem;
}

.availability-strip--compact .availability-day {
    height: 8px;
    border-radius: 2px;
}

.category-quantity .availability-strip .availability-day {
    height: 6px;
}

/* Rammer inn "legg til ny X"-skjema under en tabell (rabattkategorier, rom/plasser, brukere,
   perioder, årshjul) i et tydelig kort, med luft over til tabellen - i stedet for at overskrift
   og felt fløt fritt rett på sidebakgrunnen rett under tabellen. */
.form-section {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1rem;
    margin-top: 1.25rem;
}

.form-section h2 {
    margin-top: 0;
}

/* admin-locations.php sin gruppeoverskrift-rad gjenbruker .overview-category-row (samme stil som
   ukeoversikten) - se der. Legger her kun til plass til en "Slett lokasjon"-knapp ved siden av
   selve toggle-knappen i samme rad. */
.category-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* Sjeldnere brukte gruppehandlinger (bytt type, slett lokasjon - se admin-locations.php), skjult
   bak tannhjulet i .category-toggle-row over til den faktisk åpnes (data-toggle-panel). Egen
   delelinje + luft for å skille den tydelig fra selve kategori-raden. */
.category-settings-panel {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
}

/* display:flex over vinner ellers over nettleserens [hidden]{display:none} siden forfatterstiler
   alltid slår brukeragent-stiler uansett spesifisitet - samme kjente snublefelle som
   button[hidden]-regelen lenger opp i denne filen. */
.category-settings-panel[hidden] {
    display: none;
}

/* Type-feltet på gruppenivå (én verdi for HELE lokasjonen, se admin-locations.php) - inline
   skjema i tannhjul-panelet, i stedet for et identisk felt gjentatt på hver enkelt rad under. */
.category-type-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.category-type-form label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--slate);
}

.category-type-form input {
    width: 10rem;
    max-width: 10rem;
    margin: 0;
}

.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--panel);
    border: 1px dashed var(--line);
    border-radius: var(--r-lg);
    color: var(--slate);
}
.empty-state p:first-child { font-weight: 700; color: var(--ink-2); margin: 0 0 0.4rem; }
.empty-state .hint { margin: 0; }

.admin-link {
    margin-top: 2rem;
    font-size: 0.9rem;
    color: var(--muted);
}

.period-filter-form {
    margin-bottom: 1rem;
}

.inline-form {
    margin: 0;
}

/* Når to handlingsskjema stables i samme tabellcelle (f.eks. Blokker+Slett i admin-locations.php,
   Deaktiver+Sett passord i admin-users.php) - konsekvent luft mellom dem i stedet for at de
   klistrer seg tett inntil hverandre. Rammer ikke sider med kun ett enkelt inline-form per celle,
   siden regelen bare treffer når et .inline-form faktisk følger et annet. */
.inline-form + .inline-form {
    margin-top: 0.4rem;
}

/* Sidemenyen. På smale skjermer (under 768px, se @media lenger ned) er dette en vanlig
   loddrett liste øverst på siden; fra 768px og opp legger .admin-shell den som fast venstre
   kolonne. Selve grupperingen er den samme i begge tilfeller. */
.admin-nav {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.nav-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-group-title {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-2);
    padding: 0 10px 6px;
}

/* Innstillinger er et annet nivå enn daglig drift - skilt fra gruppene over med en linje, og
   skjøvet til bunnen av menyen når det er plass (margin-top:auto virker kun når .admin-nav er
   en flex-kolonne med høyde, altså i sidemeny-oppsettet). */
.nav-group--settings {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.nav-subgroup {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 10px;
}

.admin-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 400;
    color: var(--ink-2);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.admin-nav-link:hover { background: var(--bg-subtle); color: var(--ink); }

/* Aktivt punkt er FYLT med aksentfargen, ikke bare svakt tonet - det skal være mulig å se hvor
   man er med et blikk, også midt i en lang meny. */
.admin-nav-link.is-active {
    background: var(--accent);
    color: #fff;
    font-weight: 500;
}
.admin-nav-link.is-active:hover { background: var(--accent); color: #fff; }

/* Foreldrepunkt for en åpen seksjon (Innstillinger) - IKKE fylt, siden det er underpunktet som
   er den aktive siden. Se Layout::adminNav(). */
.admin-nav-link.is-section-open {
    font-weight: 500;
    color: var(--ink);
}

.admin-nav-link--sub {
    font-size: 13px;
    padding: 7px 12px 7px 20px;
}

.user-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin: 0;
    color: var(--slate);
}

.user-bar form { margin: 0; }

.user-bar-name {
    font-weight: 700;
    color: var(--ink-2);
    text-decoration: none;
}
.user-bar-name:hover { text-decoration: underline; }

.filter-form {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.filter-form label {
    margin-bottom: 0;
}

/* Fellesmail (admin-bulk-mail.php): mottakerlisten kan bli lang (mange gjester) - begrenset
   høyde med scroll i stedet for å skyve resten av siden langt ned. */
.bulk-mail-recipients {
    margin-bottom: 1rem;
}

.bulk-mail-recipients ul {
    max-height: 220px;
    overflow-y: auto;
    margin: 0.5rem 0 0;
    padding-left: 1.2rem;
}

.pagination {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 1rem;
    color: var(--slate);
}

.pagination a { color: var(--blue); text-decoration: none; font-weight: 700; }
.pagination a:hover { text-decoration: underline; }

.overview-scroll {
    overflow-x: auto;
    margin-top: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

/* Enkel vannrett scroll for BRED, KUN-LESBAR tabell (Fakturagrunnlag: 10 kolonner). Bevisst en
   egen, minimal klasse i stedet for .overview-scroll: den drar med seg white-space:nowrap på alle
   celler, minstebredder på tekstfelt OG en position:sticky siste kolonne - alt tilpasset de
   REDIGERBARE admin-listene, der siste kolonne er handlingsknapper som alltid må være synlige.
   Brukt på en tabell uten handlingskolonne limte den i stedet en helt vanlig tallkolonne
   ("Differanse") over de tre kolonnene til venstre for seg, så det så ut som kolonner manglet i
   stedet for at tabellen kunne scrolles (sett i skjermbilde). Her trengs bare selve scrollingen:
   width:auto + min-width:100% av samme grunn som dokumentert på .overview-scroll > .booking-table
   under (tabellens egen width:100% ville ellers krympe den til wrapperen og gjøre scroll umulig). */
.table-scroll {
    overflow-x: auto;
}

.table-scroll > .booking-table {
    width: auto;
    min-width: 100%;
}

/* Modifikator for tabeller der verdiene er korte og "udelelige" (tall, beløp, datoer, navn):
   der ser brytning ødelagt ut - "Kari Nordma/nn-Testesen" og datoen midt i årstallet
   ("04.07.2/026"). Så lenge cellene KAN brekke, finner nettleseren alltid en måte å presse
   tabellen inn i wrapperen på, så uten dette blir det aldri scroll. Bevisst en modifikator og
   ikke standard for .table-scroll: tabeller med lange fritekstkolonner (Logg sin "Detalj",
   Feillogg sin melding) skal tvert imot fortsette å bryte teksten over flere linjer i stedet for
   å bli superbrede med vannrett scroll. */
.table-scroll--nowrap > .booking-table td {
    overflow-wrap: normal;
    white-space: nowrap;
}

/* Flere admin-tabeller (arrangementer/rom-plasser/brukere/papirkurv) har en siste kolonne med
   2-3 fulle handlingsknapper ved siden av redigerbare tekstfelt - uten en scroll-container ville
   nettleserens auto-layout-algoritme presset kolonnene sammen på moderat brede skjermer i stedet
   for å vise en scrollbar, som klipper navnefelt og tvinger knappene til å brekke over flere
   linjer (oppdaget via skjermbilde av /admin/innstillinger/arrangementer). .booking-table sin
   EGEN kant/avrunding fjernes når den ligger inni .overview-scroll - ellers får man en dobbel
   ramme (wrapperens kant + tabellens egen), siden begge klassene normalt brukes hver for seg. */
.overview-scroll > .booking-table {
    border: none;
    border-radius: 0;
    /* .booking-table sin egen width:100% gjorde .overview-scroll virkningsløs - width:100% betyr
       "fyll akkurat wrapperens bredde", så tabellen bare krympet kolonnene for å passe i stedet
       for å flyte over og trigge scroll (oppdaget ved faktisk test i nettleser, IKKE fanget opp
       av bare å lese CSS-en). width:auto lar tabellen bruke sin naturlige innholdsbredde,
       min-width:100% strekker den likevel til å fylle wrapperen når det er nok plass. */
    width: auto;
    min-width: 100%;
    /* .booking-table sin egen overflow:hidden (kun ment for å klippe rundede hjørner i normal,
       ikke-scrollet bruk) gjorde sticky-kolonnen under VIRKNINGSLØS - en overflow!=visible-
       forfar blir selv nærmeste "scrolling ancestor" for sticky-formål, så position:sticky på
       siste kolonne regnet seg mot TABELLENS egen (ikke-scrollende) boks i stedet for
       .overview-scroll sin faktiske scroll-viewport. Også dette kun oppdaget ved faktisk
       nettleser-test av selve klistringen (getBoundingClientRect() før/etter scroll), ikke ved
       å lese CSS-en eller bare sjekke at scrollWidth > clientWidth. */
    overflow: visible;
}

/* white-space:nowrap alene (som .overview-table lenger ned bruker) hindrer flere
   handlingsknapper i samme celle fra å brekke over flere linjer - men et <input> sitt
   width:100% har INGEN egen naturlig innholdsbredde å bidra med til auto-layout-algoritmen
   uten dette, og ble likevel klemt til nesten ingenting (oppdaget ved samme nettleser-test).
   Kun type=text/number - date/checkbox-felt har allerede en fornuftig egen minstebredde fra
   nettleseren. */
.overview-scroll > .booking-table td {
    white-space: nowrap;
}

.overview-scroll > .booking-table input[type="text"],
.overview-scroll > .booking-table input[type="number"],
.overview-scroll > .booking-table input[type="email"] {
    min-width: 11rem;
}

/* Selve scrollingen (over) unngår at kolonner klemmes sammen, men gjorde i praksis
   handlingsknappene ("Lagre"/"Del/bygg inn"/Slett) utilgjengelige uten å scrolle helt til høyre
   først - oppdaget ved faktisk skjermbilde av admin i nettleser, IKKE fanget opp av forrige
   nettleser-test (som kun sjekket AT scrolling fungerte mekanisk, ikke om resultatet faktisk var
   brukbart). Siste kolonne klistres derfor til høyre kant i stedet - samme mønster som
   .overview-row-label bruker for VENSTRE kant i ukeoversikten - slik at knappene alltid er
   synlige og resten av raden scroller under dem. :not([colspan]) utelater
   "Del/bygg inn"-panelraden i admin-periods.php (spenner over hele tabellen, skal ikke klistres). */
.overview-scroll > .booking-table th:last-child,
.overview-scroll > .booking-table td:last-child:not([colspan]) {
    position: sticky;
    right: 0;
    z-index: 1;
}

.overview-scroll > .booking-table td:last-child:not([colspan]) {
    background: var(--panel);
}

.overview-table {
    border-collapse: collapse;
    white-space: nowrap;
}

.overview-table th, .overview-table td {
    border: 1px solid var(--line);
    padding: 0;
    text-align: center;
}

.overview-row-label {
    position: sticky;
    left: 0;
    background: var(--panel);
    padding: 0.3rem 0.6rem !important;
    text-align: left !important;
    z-index: 1;
    color: var(--ink-2);
    font-weight: 700;
}

.overview-period-header, .overview-day-header {
    background: var(--wash);
    font-size: 0.75rem;
    padding: 0.2rem 0.3rem !important;
    color: var(--muted);
    font-weight: 800;
}

.overview-category-row td {
    background: var(--line-2);
    font-weight: 800;
    padding: 0.2rem 0.6rem !important;
    text-align: left !important;
    color: var(--ink);
}

/* Type-skille-rad i ukeoversikten (Internat/Camping/...) - ett nivå over kategori-radene, samme
   gruppering som bookingsiden. Tydeligere enn .overview-category-row (blå tone + topplinje) for
   å markere overgangen mellom overnattingsformene. */
.overview-type-row td {
    background: var(--blue-bg) !important;
    border-top: 2px solid var(--blue-bd);
    padding: 0.4rem 0.6rem !important;
    text-align: left !important;
}

.overview-type-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 15px;
    font-weight: 900;
    color: var(--ink);
}

.overview-type-label svg {
    color: var(--blue);
    flex-shrink: 0;
}

.overview-type-count {
    font-size: 12px;
    font-weight: 800;
    color: var(--muted);
}

.category-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    /* flex:1 + min-width:0 (i stedet for width:100%) slik at knappen krymper og deler raden med
       status-merket til høyre i stedet for å skyve det ut over kanten og klippe det på smal
       skjerm - selve teksten kan da brekke innenfor sin egen andel av raden. */
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    padding: 0.3rem 0;
    margin: 0;
    font: inherit;
    font-weight: 800;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.category-toggle-chevron {
    display: inline-block;
    transition: transform .12s;
}

.category-toggle.is-open .category-toggle-chevron {
    transform: rotate(90deg);
}

.overview-cell {
    width: 2rem;
    height: 1.6rem;
    position: relative;
}

.overview-cell a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Belegg-fargekodingen under er BEVISST IKKE endret av redesignet - dette er spec-bestemte
   semantiske tilstander som må forbli identiske med fargekodene i Excel-eksporten
   (src/PeriodExport.php), verifisert celle for celle mot denne ukeoversikten tidligere. */
.overview-cell.cell-available { background: #fff; }
.overview-cell.cell-occupied { background: #f5e07a; }
.overview-cell.cell-checked-in { background: #8fca8f; }
.overview-cell.cell-blocked { background: #cfcfcf; }

.overview-cell.stripe-arrival::after,
.overview-cell.stripe-departure::after,
.overview-cell.stripe-both::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
}

.overview-cell.stripe-arrival::after { background: #2f6fb0; }
.overview-cell.stripe-departure::after { background: #b03030; }
.overview-cell.stripe-both::after {
    background: linear-gradient(to right, #2f6fb0 50%, #b03030 50%);
}

/* --- Statusmerke ------------------------------------------------------------------------- */
/* Status var tidligere ren tekst ("Status: Kansellert") midt i en grå metalinje, og en
   kansellert bestilling så dermed nesten identisk ut som en aktiv. */
.status-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: var(--r-sm);
    /* Et merke er ett ord - Schibsted Grotesk er bredere enn Work Sans, og "Reservert" brakk
       til "Reserv/ert" i den smale statuskolonnen på Bestillinger. */
    white-space: nowrap;
}
.status-badge--ok { background: var(--ok-soft); color: var(--ok-ink); }
.status-badge--warn { background: var(--warn-soft); color: var(--warn-ink); }
.status-badge--neutral { background: var(--neutral-soft); color: var(--neutral-ink); }

.booking-status-line {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 1rem;
}
.booking-period-name { font-size: 13px; color: var(--muted); }

/* --- Banner for en tilstand som endrer hva man har lov til å gjøre ------------------------ */
.booking-banner {
    padding: 12px 16px;
    border-radius: var(--r-lg);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 1rem;
}
.booking-banner--cancelled { background: var(--danger-soft); color: var(--danger-ink); }

/* --- Sammendragsstripe -------------------------------------------------------------------- */
/* Fire celler med 1px mellomrom mot en linjefarget bakgrunn - gir skillelinjer mellom cellene
   uten å tegne kantlinjer per celle (som ville doblet seg i midten). */
.summary-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.summary-cell { background: var(--panel); padding: 15px 18px; }
.summary-label { font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.summary-value { font-size: 16px; font-weight: 500; color: var(--ink); }
.summary-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.summary-sub--warn { color: var(--warn-ink); font-weight: 500; }
.summary-sub--ok { color: var(--ok-ink); font-weight: 500; }

/* Kansellert: tallene skal fortsatt kunne leses, men de er historikk - ikke noe å handle på. */
.summary-strip.is-muted .summary-value { color: var(--muted); font-weight: 400; }

@media (max-width: 700px) {
    .summary-strip { grid-template-columns: repeat(2, 1fr); }
}

/* --- Sidetittel med handlinger til høyre -------------------------------------------------- */
.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.page-head h1 { margin: 0; }
.page-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* --- Varselrader på dashbordet (funn 10) -------------------------------------------------- */
/* Kompakte rader i stedet for store, fargefylte bokser. Fargen ligger i PRIKKEN og har fast
   betydning: rød = blokkerer bestilling eller fakturering, gul = venter på admin. */
.alert-rows {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--panel);
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.alert-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    flex-wrap: wrap;
}
.alert-row + .alert-row { border-top: 1px solid var(--line-soft); }
.alert-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.alert-dot--danger { background: var(--danger); }
.alert-dot--warn { background: var(--warn); }
.alert-title { font-size: 14px; font-weight: 500; color: var(--ink); flex: 1; min-width: 180px; }
.alert-action { font-size: 14px; font-weight: 500; }

/* --- Tre hovedtall (funn 7) --------------------------------------------------------------- */
.today-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    margin-bottom: 1.75rem;
}
.today-card {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--panel);
    padding: 18px 20px;
}
.today-label { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.today-figure { display: flex; align-items: baseline; gap: 6px; }
.today-figure strong {
    font-size: 38px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.today-figure span { font-size: 18px; color: var(--muted); font-variant-numeric: tabular-nums; }
.today-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--line-soft);
    overflow: hidden;
    margin-top: 14px;
}
.today-bar-fill { height: 100%; background: var(--accent); }
.today-sub { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.today-sub--warn { color: var(--warn-ink); font-weight: 500; }
.today-sub--ok { color: var(--ok-ink); font-weight: 500; }

/* --- Tallstripe (resten av nøkkeltallene) ------------------------------------------------- */
/* Erstatter 13 like store kort. Skillelinjene lages med outline på CELLENE, ikke med
   "1px gap mot linjefarget containerbakgrunn" slik .summary-strip gjør: her er antall celler
   variabelt (avhenger av om arrangementet pågår), og med auto-fit blir siste rad ofte ikke full -
   da lyste containerbakgrunnen gjennom de tomme sporene som et grått felt. outline tegnes utenfor
   boksen og legger seg oppå gap-en, så tilstøtende celler deler én strek, og tomme spor får
   ingenting. */
.figure-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: 1.75rem;
}
.figure-cell { background: var(--panel); padding: 14px 16px; outline: 1px solid var(--line); }
.figure-cell--warn { background: var(--warn-row); }
.figure-value {
    display: block;
    font-size: 22px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.figure-label { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

/* --- Beleggkolonne i kapasitetstabellen --------------------------------------------------- */
/* Stolpen var tidligere umerket - man så en lengde, men ikke hvilket tall den var. */
.capacity-cell { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.capacity-cell .capacity-bar { flex: 1; }
.capacity-pct {
    font-size: 13px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    width: 34px;
    text-align: right;
}

/* --- Del innsjekk-lenke (funn 8) ---------------------------------------------------------- */
.checkin-share-row { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 14px; }
.checkin-share-input {
    flex: 1;
    min-width: 240px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg-subtle);
    color: var(--ink-2);
    font-size: 13px;
}

/* --- Skjema skjult bak en sammenleggbar overskrift ---------------------------------------- */
/* <details> i stedet for JS: skjemaet lar seg fortsatt åpne uten JavaScript, og nettleseren
   håndterer tastaturtilgang og aria-expanded selv. */
.inline-details {
    margin: 1.1rem 0;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--panel);
}
.inline-details > summary {
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-2);
    cursor: pointer;
    list-style: none;
}
.inline-details > summary::-webkit-details-marker { display: none; }
.inline-details > summary::before {
    content: '+';
    display: inline-block;
    width: 14px;
    color: var(--muted);
    font-weight: 600;
}
.inline-details[open] > summary::before { content: '–'; }
.inline-details[open] > summary { border-bottom: 1px solid var(--line-soft); }
.inline-details > *:not(summary) { padding-inline: 16px; }
.inline-details > form { padding-bottom: 14px; }

/* --- To kolonner på bestillingsdetaljen (funn 26) ------------------------------------------ */
/* Siden brukte bare venstre halvdel av bredden og ble ca. 2200 px lang. align-items:start så
   kolonnene ikke strekkes til samme høyde (den korteste ville ellers fått mye tom luft). */
.detail-columns { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1000px) {
    .detail-columns { grid-template-columns: 1.15fr 1fr; }
}
.detail-column { min-width: 0; }
.detail-column > h2:first-child { margin-top: 0; }

/* Tabellene (rabatter, fakturaer) står nå i en halvt så bred kolonne. Uten en minstebredde lar
   .booking-table td sin overflow-wrap:anywhere dem krympe forbi det lesbare - "Barn under 6 år"
   ble brutt til fem linjer med ett ord hver. Med minstebredde scroller de vannrett inne i
   .table-scroll i stedet, som er langt mer lesbart. */
.detail-column .table-scroll > .booking-table { min-width: 420px; }

/* --- Seksjonsoverskrift med handling til høyre -------------------------------------------- */
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    margin-bottom: 0.6rem;
}
.section-head h2 { margin: 0; }
.section-head-actions { display: flex; align-items: center; gap: 12px; }
.section-head-meta { font-size: 13px; color: var(--muted); }
.section-head form { margin: 0; }

/* Navn og bryter i to felles kolonner over HELE gruppen (ikke bare per rad) - <ul> og hver <li>
   blir display:contents og gir fra seg sine barn direkte til dette grid-et. Uten det landet
   bryteren rett etter navnet i en vanlig flex-rad, så et kort navn ("Aina") og et langt navn
   ("Karl Erik Granberg") ga bryteren en helt annen horisontal posisjon fra rad til rad.
   Gjelder KUN admin sin bestillingsdetalj: den offentlige innsjekksiden bruker samme <ul>, men
   der er hver rad en egen trykkflate i full bredde (.checkin-row), ikke celler i et grid -
   derfor er alle reglene her scopet under .participant-checkin-grid. */
.participant-checkin-grid {
    display: grid;
    grid-template-columns: minmax(auto, max-content) auto;
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.3rem;
}

.participant-checkin-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.participant-checkin-grid .participant-checkin-list,
.participant-checkin-grid .participant-checkin-list li,
.participant-checkin-all-row {
    display: contents;
}

/* [hidden] uten dette overstyres av display:contents over - forfatterstiler slår alltid
   brukeragent-stiler uansett spesifisitet (samme snublefelle som .wizard-step[hidden]/
   .unit-edit-row[hidden] andre steder i denne filen). checkin-search.js skjuler ved å sette
   .hidden direkte på både <li> og "Alle ankommet"-raden, og begge må faktisk forsvinne - ikke
   bare miste sin egen boks-oppførsel. */
.participant-checkin-list li[hidden],
.participant-checkin-all-row[hidden] {
    display: none;
}

.participant-name {
    color: var(--ink-2);
    font-weight: 700;
}

.participant-birth-year {
    color: var(--muted);
    font-weight: 400;
    font-size: 0.85rem;
}

/* =========================================================================================
   INNSJEKK I RESEPSJONEN (/checkin/{token})
   Den eneste siden i appen med reelt tidspress, hansker, sollys og ustabilt nett - og den var
   tegnet for skrivebord. Alt her er dimensjonert for tommel på nettbrett, ikke for musepeker.
   ========================================================================================= */
.checkin-page {
    max-width: 840px;
    margin: 0 auto;
}

/* Toppen følger med når man blar: fremdrift, lagringsstatus, søk og filter må være tilgjengelig
   uansett hvor langt ned i lista man har kommet. */
.checkin-top {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 18px 20px 16px;
    margin-bottom: 18px;
}

.checkin-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.checkin-context {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}

.checkin-figure { display: flex; align-items: baseline; gap: 8px; }
.checkin-figure strong {
    font-size: 34px;
    font-weight: 600;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.checkin-figure span { font-size: 18px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Lagringsindikator (funn 27). Tre tilstander, satt av checkin-ajax.js. */
.save-indicator {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    background: var(--ok-soft);
    color: var(--ok-ink);
}
.save-indicator[hidden] { display: none; }
.save-indicator-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.save-indicator.is-saving { background: var(--warn-soft); color: var(--warn-ink); }
.save-indicator.is-saving .save-indicator-dot { background: var(--warn); }
.save-indicator.is-failed { background: var(--danger-soft); color: var(--danger-ink); }
.save-indicator.is-failed .save-indicator-dot { background: var(--danger); }

.checkin-progressbar {
    height: 8px;
    border-radius: 4px;
    background: var(--line-soft);
    overflow: hidden;
    margin: 14px 0;
}
.checkin-progressbar-fill {
    height: 100%;
    background: var(--accent);
    transition: width .25s ease;
}

.checkin-controls { display: flex; gap: 10px; flex-wrap: wrap; }
.checkin-search-input {
    flex: 1;
    min-width: 180px;
    font-size: 16px;      /* under 16px zoomer iOS inn automatisk når feltet får fokus */
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--panel);
    color: var(--ink);
}
.checkin-filters { display: flex; gap: 8px; }
.checkin-filters .chip {
    font-size: 15px;
    font-weight: 500;
    padding: 12px 18px;
    border-radius: var(--r-lg);
}

.checkin-footnote {
    font-size: 13px;
    color: var(--muted);
    text-align: center;
    margin: 20px 0 0;
}

/* --- Familiekort ------------------------------------------------------------------------- */
.booking-block {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    margin-bottom: 14px;
    overflow: hidden;
}

.booking-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 18px;
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--line-soft);
}
.booking-block-name { font-size: 18px; font-weight: 600; margin: 0; color: var(--ink); }
.booking-block-meta { font-size: 13px; color: var(--muted); margin: 2px 0 0; }
.booking-block-actions { display: flex; align-items: center; gap: 12px; }
.booking-block-count { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.booking-block-head form { margin: 0; }

/* Feltvariant av knappen: større trykkflate og grønn kant, så den skiller seg fra
   skrivebordsknappene ellers i appen. */
.button-field.button-field {
    padding: 11px 16px;
    font-size: 15px;
    font-weight: 500;
    border: 1px solid var(--accent);
    color: var(--accent-ink);
    background: var(--panel);
}

/* --- Personrad --------------------------------------------------------------------------- */
/* HELE raden er trykkflate (funn 28) - bryteren alene var 34px høy, mot 44px som er minimum for
   noe som treffes med tommel. <label> rundt hele raden gjør at et trykk hvor som helst på
   navnet, statusteksten eller bryteren slår den om. */
.checkin-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 11px 18px;
    margin: 0;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.checkin-row .participant-name {
    flex: 1;
    font-size: 19px;
    font-weight: 500;
    color: var(--ink);
}
.checkin-row .switch-text { font-size: 15px; color: var(--muted); font-weight: 400; }

.participant-checkin-list li.is-arrived { background: var(--ok-soft); }
.participant-checkin-list li.is-arrived .switch-text { color: var(--ok-ink); font-weight: 500; }
.participant-checkin-list li + li { border-top: 1px solid var(--line-soft); }

/* Feltstor bryter: 56×32 med 26px knott, mot 34×19 på skrivebordssidene. */
.switch-track--field { width: 56px; height: 32px; }
.switch-track--field .switch-thumb { top: 2px; left: 2px; width: 26px; height: 26px; }
.switch-input:checked + .switch-track--field .switch-thumb { transform: translateX(24px); }

/* Kort per arrangement (src/pages/admin-periods.php) - erstatter en bred tabellrad som uansett
   trengte sidescroll for å romme navn + 2 datoer + 3 avkryssingsbokser + 3 handlingsknapper
   samtidig (prøvd med .overview-scroll + fast høyrekolonne først, men selv da måtte man
   scrolle bort fra navnet for å nå knappene - reell brukbarhetsbrist, ikke bare en visuell
   detalj). Alle felt kan brekke over flere linjer vertikalt her i stedet, helt uten sidescroll,
   siden hvert kort har all bredden for seg selv i stedet for å dele en tabellkolonne. */
.period-edit-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.period-edit-name {
    flex: 1 1 200px;
    font-size: 1rem;
    font-weight: 800;
    margin: 0;
}

.period-edit-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* Datoer og av/på-valg er to SEPARATE flex-rader (ikke én felles, som før) - to datofelt (hver
   ~150-180px) konkurrerte med tre fullt utskrevne bryter-etiketter om samme linje, slik at den
   siste bryteren nesten alltid brakk ned på en egen linje for seg selv selv på brede skjermer.
   Brytergruppen alene trenger langt mindre bredde og holder seg samlet på én linje uten å måtte
   forkorte etikettene. */
.period-edit-fields {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.period-edit-dates, .period-edit-switches {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.period-edit-switches {
    align-items: center;
}

.period-edit-fields label {
    margin-bottom: 0;
}

.period-embed-panel {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--line);
}

/* "Priser" er en native <details> (samme bunnstilte pil+tekst som "Arkiverte arrangementer"
   nederst på siden, se .bulk-mail-recipients) i stedet for en av knappene i
   .period-edit-actions - luften og streken over matcher de andre panelene sitt utseende, men
   selve summary-raden får IKKE knappe-utseende (ingen bakgrunn/ramme), kun fet skrift + pekercursor. */
.period-prices-details {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--line);
}

.period-prices-details summary {
    cursor: pointer;
    font-weight: 800;
    color: var(--ink);
}

.period-prices-details summary + * {
    margin-top: 0.6rem;
}

/* Kort per bruker (src/pages/admin-users.php) - samme oppskrift/begrunnelse som
   .period-edit-header/.period-edit-fields over, bare med to skjema ved siden av hverandre
   (navn/e-post/rolle-skjemaet og status/handlinger) i stedet for ett felt-sett.
   .user-edit-details er kollapset som standard (data-toggle-panel) - siden ble uoversiktlig
   lang med alle brukerne fullt utvidet samtidig, og .category-toggle-row rett over (samme
   sammendrags-rad-oppskrift som Rom/plasser bruker) viser nok til å kjenne igjen brukeren uten
   å måtte åpne den. */
.user-edit-details {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
}

.user-edit-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.user-edit-details-form {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    flex: 1 1 320px;
}

.user-edit-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* Slett-ikonknappen står her ved siden av fullhøyde-knapper (Lagre/Send ny invitasjon) og
   av/på-bryteren. Den kompakte tabellvarianten (padding 2px, brukt i Rom/plasser og oppgaver)
   flyter da for lavt og for smått, så raden ser ujevn ut - her gir vi den samme høyde som
   naboene slik at hele handlingsraden står på én linje. Kun scopet til denne siden. */
.user-edit-actions .button-icon-danger.button-icon-danger {
    padding: 10px 11px;
}

/* "Siste innlogginger" står på egen full-bredde-linje under handlingsraden (se admin-users.php)
   i stedet for inne i .user-edit-actions - ellers presses den lange teksten inn mellom bryteren
   og slett-knappen og stabler handlingskolonnen ujevnt. */
.user-edit-details .login-history {
    margin: 0.6rem 0 0;
}

.user-edit-password-form {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--line);
}

/* Rom/plasser (src/pages/admin-locations.php) - kategorier kan ha mange enheter (16+), så hver
   enhet er en kompakt RAD (ikke et fullt .booking-block-kort som periods/users - det ville gjort
   en lang kategori uforholdsmessig høy) atskilt med en tynn delelinje, i stedet for en tabellrad
   som uansett trengte sidescroll for navn+kapasitet+beskrivelse+status+3 handlinger samtidig. */
/* Seksjon per overnattingstype (Internat/Camping/...) i admin sin Rom/plasser-oversikt - samme
   gruppering som bookingsiden, men her stablet med en tydelig overskrift i stedet for faner
   (admin vil se alt samtidig). Se Availability::groupCategoriesByType() og admin-locations.php. */
.location-type-section {
    margin-top: 2.5rem;
}

.location-type-section:first-child {
    margin-top: 0;
}

.location-type-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--blue-bd);
    font-size: 20px;
}

.location-type-heading svg {
    color: var(--blue);
    flex-shrink: 0;
}

.location-type-count {
    margin-left: auto;
    font-size: 13px;
    font-weight: 800;
    color: var(--muted);
}

.location-category-group {
    margin-top: 1.5rem;
}

.location-category-group:first-child {
    margin-top: 0;
}

.location-category-header {
    background: var(--line-2);
    padding: 0.5rem 0.75rem;
    border-radius: var(--r-sm);
}

.unit-edit-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--line-2);
}

/* display:flex over vinner ellers over nettleserens [hidden]{display:none} siden forfatterstiler
   alltid slår brukeragent-stiler uansett spesifisitet - samme kjente snublefelle som
   .category-settings-panel[hidden]/.wizard-step[hidden] lenger opp i denne filen. Oppdaget ved
   faktisk klikk-test av kategori-kollapsen (data-toggle-category, se admin-ajax.js) - enhetene
   forble synlige til tross for at JS satte hidden=true riktig. */
.unit-edit-row[hidden] {
    display: none;
}

.unit-edit-row:last-child {
    border-bottom: none;
}

.unit-edit-fields {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.unit-edit-fields label {
    margin-bottom: 0;
}

/* "Skjult"-avkrysningsboksen (se admin-locations.php) - egne label/input, ikke .status-pillen
   den erstattet, siden en avkrysningsboks skal se ut og oppføre seg som resten av
   .unit-edit-fields sine felt, ikke som en frittstående statusindikator. */
.unit-hidden-checkbox {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-bottom: 0.6rem;
    white-space: nowrap;
}

.unit-edit-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Papirkurv (src/pages/admin-trash.php) - kun lesbare tekstfelt + "Slettet ..."-detalj + to fulle
   handlingsknapper (+ ev. en "Detaljer"-lenke), samme kompakte rad-oppskrift som
   .unit-edit-row over - erstatter en tabellrad som uansett trengte sidescroll for alt dette
   samtidig. */
.trash-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--line-2);
}

.trash-row:last-child {
    border-bottom: none;
}

.trash-row-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    color: var(--slate);
}

.trash-row-info strong {
    color: var(--ink-2);
}

.trash-row-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.task-table .overview-row-label {
    white-space: normal;
    max-width: 14rem;
}

.task-cell {
    min-width: 8rem;
    padding: 0.25rem !important;
    vertical-align: middle;
}

.task-cell form {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.task-assigned {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--ink-2);
}

.task-interest-list li {
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.task-interest-list li.task-resolved {
    color: var(--muted);
}

.assignee-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-right: 0.75rem;
    margin-bottom: 0;
    font-size: 0.85rem;
    color: var(--slate);
}

/* Venstre sidemeny for admin-navigasjonen på brede skjermer - .admin-shell er kun en
   flex-container over denne breddegrensen, så på smale skjermer faller layouten tilbake til
   vanlig blokk-stabling (kategori-rad øverst, så innhold). Eneste sted som skriver ut
   .admin-shell/.admin-sidebar/.admin-content er AdminLayout::render(). */
/* Sidemenyen er en egen FLATE (svakt grønn bakgrunn + kantlinje mot innholdet), ikke et kort
   som svever. Kortmønsteret er reservert for innhold som faktisk er en enhet.
   Elementet er et <details> (se AdminLayout::render()): under 768px kan menyen legges sammen
   bak "Meny", over den bredden er den alltid åpen. */
.admin-sidebar {
    margin-bottom: 1.5rem;
    padding: 20px 14px;
    background: var(--bg-nav);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

/* Funn 6: menyen hadde ingen mobiltilpasning - alle 13 punktene lå utbrettet øverst, så på
   telefon måtte man bla forbi hele menyen for å komme til innholdet på hver eneste side. */
.admin-sidebar-toggle {
    list-style: none;
    cursor: pointer;
    padding: 6px 12px;
    margin: -6px -6px 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-2);
    border-radius: var(--r-md);
}
.admin-sidebar-toggle::-webkit-details-marker { display: none; }
.admin-sidebar-toggle::before {
    content: '☰';
    margin-right: 8px;
    color: var(--muted);
}
.admin-sidebar[open] > .admin-sidebar-toggle::before { content: '✕'; }

/* .admin-nav har display:flex, og en forfatterstil slår ALLTID brukeragentens
   details:not([open]) > *:not(summary){display:none} uansett spesifisitet - uten denne regelen
   ble menyen stående synlig selv når <details> var lukket, altså gjorde "Meny"-knappen
   tilsynelatende ingenting. Samme snublefelle som .wizard-step[hidden] og
   .participant-checkin-list li[hidden] andre steder i denne filen. */
.admin-sidebar:not([open]) > .admin-nav,
.admin-sidebar:not([open]) > .user-bar {
    display: none;
}

/* 768px (ikke 900px som før): admin brukes mest fra PC, men oppslag skjer også fra nettbrett i
   stående format - de landet tidligere på den stablede mobilvarianten helt unødvendig. */
@media (min-width: 768px) {
    .admin-shell {
        display: flex;
        align-items: flex-start;
        gap: 2rem;
    }

    /* Over 768px skjules "Meny"-knappen. Selve åpningen kan ikke tvinges med CSS - et lukket
       <details> skjuler innholdet uansett display-verdi - men markupen rendres alltid med
       open-attributtet (se AdminLayout::render()), så menyen er åpen ved hver sidelast. En
       lukking brukeren gjør på telefon gjelder derfor kun den ene sidevisningen. */
    .admin-sidebar-toggle { display: none; }

    .admin-sidebar {
        flex: 0 0 240px;
        margin-bottom: 0;
        position: sticky;
        top: 1.5rem;
        display: flex;
        flex-direction: column;
        /* Nok høyde til at Innstillinger + .user-bar faktisk kan skyves ned til bunnen med
           margin-top:auto, i stedet for å henge rett under gruppene - omtrentlig verdi
           (header + containerpolstring), ikke pikselnøyaktig. */
        min-height: calc(100vh - 7.5rem);
    }

    /* flex:1 er det som gir margin-top:auto på .nav-group--settings noe å dytte MOT. Uten dette
       er menyen bare så høy som innholdet, og Innstillinger havner rett under Økonomi. */
    .admin-sidebar .admin-nav {
        flex: 1;
    }

    /* Brukernavn (lenke til profil) + logg ut, nederst i sidemenyen. */
    .admin-sidebar .user-bar {
        padding-top: 1rem;
        margin-top: 1rem;
        border-top: 1px solid var(--line);
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }

    .admin-sidebar .user-bar-name {
        font-size: 14px;
    }

    .admin-sidebar .user-bar .button-secondary {
        width: 100%;
        justify-content: center;
    }

    .admin-content {
        flex: 1;
        min-width: 0;
    }
}

/* Bookingskjemaets trinnvise veiviser (book.php/book-form-booking-fields.php/book-form.js) - se
   .wizard-step under for selve steg-skjulingen. Fremdriftsindikatoren er en enkel <ol> med fire
   piller, stablet på mobil (default) og i én rad på bredere skjermer (@media-blokken under). */
.wizard-progress {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0 0 0.3rem;
    padding: 0;
    counter-reset: wizard-step;
}

/* Funn 33: stegene så ut som fire like knapper der bare den aktive var markert - man kunne ikke
   se hva som var GJORT og hva som gjensto. Nå har hvert steg en nummersirkel: fullført er fylt
   med hake, aktivt er fylt med tall og uthevet etikett, kommende er nedtonet. */
.wizard-progress li {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.4rem 0;
    color: var(--muted);
    font-size: 14px;
    font-weight: 400;
    /* Egen teller, ikke den innebygde list-item: med list-style:none leser counter(list-item)
       i ::before verdien FØR elementets eget inkrement i Chromium, så alle fire sirklene viste
       "0". En eksplisitt teller inkrementeres når vi sier den skal. */
    counter-increment: wizard-step;
}

.wizard-progress li::before {
    content: counter(wizard-step);
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--neutral-soft);
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.wizard-progress li.is-active {
    color: var(--ink);
    font-weight: 600;
}
.wizard-progress li.is-active::before {
    background: var(--accent);
    color: #fff;
}

.wizard-progress li.is-done {
    color: var(--ink-2);
    font-weight: 500;
}
.wizard-progress li.is-done::before {
    content: '✓';
    background: var(--accent);
    color: #fff;
}

/* Skjuler steg som ikke er aktive - forfatterstiler kan ellers trumfe brukeragent-[hidden]
   (samme kjente snublefelle som .category-settings-panel[hidden] over), derfor spesifisert
   eksplisitt her selv om ingen annen regel treffer .wizard-step i dag. */
.wizard-step[hidden] {
    display: none;
}

.wizard-step-error {
    margin-top: 0;
}

/* "Neste"/"Fullfør booking" ligger til høyre som standard (flex-end) - når "Tilbake" også er
   synlig (alle steg unntatt steg 1) skyver margin-right:auto PÅ DEN til venstre kant i stedet.
   Skjult "Tilbake" (steg 1, eller uten JS - se book.php) tar da ikke plass i det hele tatt, og
   resten forblir høyrejustert av seg selv - enklere og mer robust enn å style via
   søskenselektorer på [hidden]-attributtet. */
.wizard-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* «Strand»: summen og Neste ligger i en gul stripe som står fast nederst mens man blar - på
   mobil er de ni byggene lengre enn skjermen, og før måtte man bla helt ned for å se hva valget
   kostet eller komme videre. sticky (ikke fixed), så stripen legger seg på plass på slutten av
   skjemaet i stedet for å dekke bunnteksten. */
#booking-form .wizard-nav {
    position: sticky;
    bottom: 12px;
    z-index: 5;
    background: var(--accent-soft);
    border: 1px solid var(--highlight);
    border-radius: var(--r-lg);
    padding: 12px 12px 12px 20px;
    box-shadow: 0 10px 24px -14px rgb(28 28 26 / 0.35);
}
#booking-form .wizard-nav-buttons { margin-left: auto; }
#booking-form .running-total-sum { font-size: 22px; }

.wizard-nav #wizard-back {
    margin-right: auto;
}

.weekday-label {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 0.85rem;
    color: var(--muted);
}

/* «Strand»: fakturaskjema og oppsummering side om side på bred skjerm, så man ser hva man
   bekrefter mens man fyller ut. :not([hidden]) fordi display:grid ellers ville trumfet
   .wizard-step[hidden] over og vist steg 4 hele tiden. */
@media (min-width: 900px) {
    .wizard-step[data-step="4"]:not([hidden]) {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        gap: 1.25rem;
        align-items: start;
    }
}
.wizard-step[data-step="4"] > .form-section:last-child { background: var(--bg-subtle); }
/* Fieldset-rammen inni skjemakortet ga ramme i ramme - kortet rammer allerede inn feltene. */
.wizard-step[data-step="4"] fieldset { border: none; padding: 0; margin: 0; background: none; }

.summary-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 1rem;
    margin: 0 0 1rem;
}

.summary-list dt {
    font-weight: 700;
    color: var(--ink);
}

.summary-list dd {
    margin: 0;
    color: var(--slate);
}

@media (min-width: 900px) {
    .wizard-progress li {
        flex: 1 1 0;
    }
}