/*
 * Maskinrummet: husets stilark. Alt udseende ligger i den her ene fil.
 *
 * TIL DESIGNEREN
 * --------------
 * De fleste ændringer kan klares i blokken :root lige herunder:
 *
 *   Farver      --farve-accent     lime: knapper, aktive faner, ledige vagter, sidehovedet
 *               --farve-signal     husrød: links, fejl, farlige knapper, AFLYST
 *               --farve-tekst      sort: tekst, rammer og streger
 *               --farve-baggrund   hvid: sidens baggrund og felter
 *               --farve-flade      lysegrøn: rolige flader (beskeder, nøgle-værdi, tomme lister)
 *               --farve-daempet    grå tekst til hjælpetekster og metadata
 *   Skrifter    --skrift-overskrift (Chewy), --skrift-kicker (Patrick Hand), --skrift-brod (systemets)
 *   Luft        --luft-1 … --luft-5 (afstande), --bredde-tekst (formularer og tekst), --bredde-side (lister)
 *   Form        --hjoerne (afrunding), --streg (rammetykkelse), --trykflade (mindste højde på knapper og links)
 *
 * Regler, der skal holde, når farverne skiftes:
 *   - Husrød tekst står aldrig på lime (kontrasten er 2:1). Tekst på lime er altid sort.
 *   - Al tekst skal have mindst 4,5:1 mod baggrunden (WCAG AA); rammer og knapkanter mindst 3:1.
 *   - Patrick Hand bruges kun til kickeren over sidetitlen. Ikke til beskeder, fejl eller knapper.
 *   - Knapper og links skal være mindst --trykflade høje (44 px), og intet må flyde ud i 375 px.
 *
 * Komponenterne ligger i resources/views/components/. Klassenavnene her svarer til dem
 * (x-knap → .knap, x-kort → .kort osv.), så man kan finde hinanden.
 */

@font-face {
    font-family: 'Chewy';
    src: url('../fonts/Chewy-Regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Patrick Hand';
    src: url('../fonts/PatrickHand-Regular.ttf') format('truetype');
    font-display: swap;
}

:root {
    /* Husfarverne */
    --lime: #CBDC41;
    --husroed: #B84347;
    --sort: #231F20;
    --hvid: #FFFFFF;
    --lysegroen: #EFF4C6;

    /* Roller: skift her, ikke længere nede */
    --farve-accent: var(--lime);
    --farve-paa-accent: var(--sort);
    --farve-signal: var(--husroed);
    --farve-paa-signal: var(--hvid);
    --farve-tekst: var(--sort);
    --farve-baggrund: var(--hvid);
    --farve-flade: var(--lysegroen);
    --farve-daempet: #57534F;
    --farve-ramme: var(--sort);
    --farve-fokus: var(--sort);

    --skrift-overskrift: 'Chewy', 'Arial Rounded MT Bold', system-ui, sans-serif;
    --skrift-kicker: 'Patrick Hand', 'Segoe Print', 'Comic Sans MS', cursive;
    --skrift-brod: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    --tekst-str: 1.0625rem;
    --tekst-lille: .9375rem;

    --luft-1: .25rem;
    --luft-2: .5rem;
    --luft-3: 1rem;
    --luft-4: 1.5rem;
    --luft-5: 2.5rem;

    --bredde-tekst: 42rem;
    --bredde-side: 72rem;

    --hjoerne: 0;
    --streg: 2px;
    --trykflade: 2.75rem;
}

/* ---------- Grundlag ---------- */

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--farve-baggrund);
    color: var(--farve-tekst);
    font-family: var(--skrift-brod);
    font-size: var(--tekst-str);
    line-height: 1.5;
    overflow-wrap: break-word;
}

h1, h2, h3 {
    font-family: var(--skrift-overskrift);
    font-weight: normal;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0 0 var(--luft-3);
}
h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); }
h2 { font-size: 1.5rem; margin-top: var(--luft-5); }
h3 { font-size: 1.2rem; }

p, ul, ol, dl { margin: 0 0 var(--luft-3); }

a { color: var(--farve-signal); text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }

img { max-width: 100%; height: auto; }

:focus-visible { outline: 3px solid var(--farve-fokus); outline-offset: 2px; }

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

/* Skjult for mennesker, synligt for robotter */
.lokkefelt { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lille { font-size: var(--tekst-lille); }
.daempet { color: var(--farve-daempet); }
.link { overflow-wrap: anywhere; }

/* ---------- Sidehoved (x-sidehoved) ---------- */

.hus-top {
    background: var(--farve-accent);
    color: var(--farve-paa-accent);
    border-bottom: var(--streg) solid var(--farve-ramme);
}
.hus-top-indre {
    max-width: var(--bredde-side);
    margin: 0 auto;
    padding: var(--luft-2) var(--luft-3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 var(--luft-4);
}
.hus-navn {
    font-family: var(--skrift-overskrift);
    font-size: 1.5rem;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--farve-paa-accent);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: var(--trykflade);
}
.hus-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--luft-3);
}
.hus-menu a, .hus-menu button {
    display: inline-flex;
    align-items: center;
    min-height: var(--trykflade);
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--farve-paa-accent);
    background: none;
    border: 0;
    text-decoration: none;
    cursor: pointer;
}
.hus-menu a:hover, .hus-menu button:hover { text-decoration: underline; }
.hus-menu a[aria-current] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .3em; }
.hus-menu form { margin: 0; }
.hus-hvem {
    flex-basis: 100%;
    margin: 0;
    padding-bottom: var(--luft-1);
    font-size: var(--tekst-lille);
}

/* ---------- Sidens indhold ---------- */

.hus-indhold {
    max-width: var(--bredde-side);
    margin: 0 auto;
    padding: var(--luft-3) var(--luft-3) var(--luft-5);
}
/* Tekst og formularer holdes i en læsbar bredde; lister og spalter må bruge hele siden. */
.hus-indhold > * { max-width: var(--bredde-tekst); }
.hus-indhold > .bred, .hus-indhold > .tabel-ramme, .hus-indhold > .spalter, .hus-indhold > .faner, .hus-indhold > .kortliste { max-width: none; }

.tilbage { margin: 0 0 var(--luft-2); }
.tilbage a { display: inline-flex; align-items: center; min-height: var(--trykflade); }

/* ---------- Sidetitel (x-sidetitel) ---------- */

.sidetitel { margin: var(--luft-2) 0 var(--luft-4); }
.sidetitel h1 { margin: 0; }
.kicker {
    font-family: var(--skrift-kicker);
    font-size: 1.3rem;
    line-height: 1.2;
    color: var(--farve-signal);
    margin: 0 0 var(--luft-1);
}
.undertekst { margin: var(--luft-2) 0 0; font-weight: 600; }
.sidetitel .maerker { margin-top: var(--luft-2); }

/* Afsnit med overskrift og streg */
.sektion { margin: 0 0 var(--luft-5); }
.sektion > h2 {
    margin-top: 0;
    padding-bottom: var(--luft-2);
    border-bottom: var(--streg) solid var(--farve-ramme);
}

/* To spalter på bred skærm, én på telefonen */
.spalter { display: grid; gap: 0 var(--luft-5); }
@media (min-width: 60rem) {
    .spalter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

/* ---------- Beskeder (x-besked) og fejl (x-fejlopsummering) ---------- */

.besked {
    border: var(--streg) solid var(--farve-ramme);
    border-left-width: .5rem;
    background: var(--farve-flade);
    padding: var(--luft-3);
    margin: 0 0 var(--luft-4);
    font-weight: 600;
}
.besked > :last-child { margin-bottom: 0; }
.besked--fejl { background: var(--farve-baggrund); border-color: var(--farve-signal); }

.fejlopsummering {
    border: 3px solid var(--farve-signal);
    padding: var(--luft-3);
    margin: 0 0 var(--luft-4);
}
.fejlopsummering h2 { font-size: 1.25rem; margin: 0 0 var(--luft-2); border: 0; padding: 0; }
.fejlopsummering ul { margin: 0; padding-left: 1.2rem; }
.fejlopsummering a { font-weight: 600; }

/* ---------- Formularer (x-felt, x-afkrydsning, x-valg) ---------- */

form { margin: 0 0 var(--luft-3); }
.felt { margin: 0 0 var(--luft-4); }
.felt > label, .afkrydsning > legend { display: block; font-weight: 700; margin-bottom: var(--luft-1); }
.hjaelp { display: block; color: var(--farve-daempet); font-size: var(--tekst-lille); margin: 0 0 var(--luft-2); }
.fejl-tekst {
    display: block;
    color: var(--farve-signal);
    font-weight: 700;
    margin: 0 0 var(--luft-2);
}
.felt--fejl { border-left: 4px solid var(--farve-signal); padding-left: var(--luft-3); }
.felt--fejl input, .felt--fejl select, .felt--fejl textarea { border-color: var(--farve-signal); }

.felt input:not([type=checkbox]):not([type=radio]):not([type=file]),
.felt select,
.felt textarea,
.soeg input {
    display: block;
    width: 100%;
    min-height: var(--trykflade);
    font: inherit;
    padding: .55rem .7rem;
    border: var(--streg) solid var(--farve-ramme);
    border-radius: var(--hjoerne);
    background: var(--farve-baggrund);
    color: var(--farve-tekst);
}
.felt input[type=date], .felt input[type=datetime-local], .felt input[type=number] { max-width: 16rem; }
.felt textarea { min-height: 7rem; resize: vertical; }
.felt input[type=file] {
    display: block;
    width: 100%;
    font: inherit;
    padding: var(--luft-2);
    border: var(--streg) dashed var(--farve-ramme);
    background: var(--farve-baggrund);
}
.felt input[type=file]::file-selector-button {
    font: inherit;
    font-weight: 600;
    min-height: var(--trykflade);
    margin-right: var(--luft-3);
    padding: .4rem 1rem;
    border: var(--streg) solid var(--farve-ramme);
    border-radius: var(--hjoerne);
    background: var(--farve-baggrund);
    color: var(--farve-tekst);
    cursor: pointer;
}

.afkrydsning { border: 0; padding: 0; margin: 0 0 var(--luft-4); min-width: 0; }
.afkrydsning > legend { padding: 0; }
.afkrydsning-valg { border-left: var(--streg) solid var(--farve-ramme); padding-left: var(--luft-3); }
.valg {
    display: flex;
    align-items: center;
    gap: var(--luft-2);
    min-height: var(--trykflade);
    padding: var(--luft-1) 0;
    cursor: pointer;
}
.valg input { width: 1.4rem; height: 1.4rem; flex: none; margin: 0; accent-color: var(--farve-tekst); }

/* ---------- Knapper (x-knap, x-knapraekke) ---------- */

.knap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--trykflade);
    padding: .55rem 1.3rem;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: var(--streg) solid var(--farve-ramme);
    border-radius: var(--hjoerne);
    background: var(--farve-accent);
    color: var(--farve-paa-accent);
}
.knap:hover { box-shadow: 3px 3px 0 var(--farve-ramme); }
.knap--sekundaer { background: var(--farve-baggrund); color: var(--farve-tekst); }
.knap--farlig { background: var(--farve-signal); color: var(--farve-paa-signal); border-color: var(--farve-signal); }
.knap--farlig:hover { box-shadow: 3px 3px 0 var(--farve-ramme); }
.knap--link {
    background: none;
    border-color: transparent;
    color: var(--farve-signal);
    font-weight: 600;
    text-decoration: underline;
    padding-inline: 0;
}
.knap--link:hover { box-shadow: none; text-decoration-thickness: 2px; }
.knap--link { justify-content: flex-start; text-align: left; }
.knap--fuld { display: flex; width: 100%; }

.knapraekke {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--luft-3);
    margin: var(--luft-4) 0;
}
.knapraekke form { margin: 0; }
@media (max-width: 30rem) {
    .knapraekke > .knap:not(.knap--link), .knapraekke > form, .knapraekke > form > .knap:not(.knap--link) { width: 100%; }
}

/* ---------- Kort (x-kort) ---------- */

.kortliste { list-style: none; padding: 0; margin: 0 0 var(--luft-4); display: grid; gap: var(--luft-3); }
@media (min-width: 48rem) {
    .kortliste--gitter { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
}
.kort {
    border: var(--streg) solid var(--farve-ramme);
    border-radius: var(--hjoerne);
    background: var(--farve-baggrund);
    padding: var(--luft-3);
    margin: 0 0 var(--luft-3);
}
.kortliste > .kort { margin: 0; }
.kort-hoved { display: flex; flex-direction: column; align-items: flex-start; gap: var(--luft-2); margin-bottom: var(--luft-2); }
.kort-hoved .maerker { margin: 0; }
.kort-titel { font-family: var(--skrift-brod); text-transform: none; font-size: 1.15rem; font-weight: 700; margin: 0; }
.kort-meta { color: var(--farve-daempet); margin: 0 0 var(--luft-2); }
.kort > :last-child, .kort-krop > :last-child { margin-bottom: 0; }
.kort .knapraekke { margin: var(--luft-3) 0 0; }
.kort--ledig { border-left: .6rem solid var(--farve-accent); }
.kort--daekket { opacity: .8; }
details > summary { cursor: pointer; font-weight: 700; min-height: var(--trykflade); display: flex; align-items: center; gap: var(--luft-2); }
details > summary::marker { content: ''; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: '+'; display: inline-block; width: 1rem; font-weight: 700; }
details[open] > summary::before { content: '\2212'; }
details[open] > summary { margin-bottom: var(--luft-2); }

/* ---------- Status-mærker (x-maerke) ---------- */

.maerker { list-style: none; padding: 0; margin: 0 0 var(--luft-2); display: flex; flex-wrap: wrap; gap: var(--luft-1) var(--luft-2); }
.maerke {
    display: inline-block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    line-height: 1.2;
    padding: .2rem .5rem;
    border: var(--streg) solid var(--farve-ramme);
    border-radius: var(--hjoerne);
    background: var(--farve-baggrund);
    color: var(--farve-tekst);
    white-space: nowrap;
}
.maerke--signal { background: var(--farve-signal); border-color: var(--farve-signal); color: var(--farve-paa-signal); }
.maerke--accent { background: var(--farve-accent); color: var(--farve-paa-accent); }
.maerke--flade { background: var(--farve-flade); }
.maerke--stor, .aflyst {
    font-family: var(--skrift-overskrift);
    font-weight: normal;
    font-size: 1.6rem;
    letter-spacing: 0;
    padding: .2rem .8rem;
}

/* ---------- Tabel, der bliver til kort på telefonen (x-tabel) ---------- */

.tabel-ramme { margin: 0 0 var(--luft-4); }
.tabel { width: 100%; border-collapse: collapse; }
.tabel caption { text-align: left; font-weight: 700; margin-bottom: var(--luft-2); }
.tabel th, .tabel td { text-align: left; vertical-align: middle; padding: var(--luft-2) var(--luft-3) var(--luft-2) 0; }
.tabel thead th { border-bottom: var(--streg) solid var(--farve-ramme); font-size: var(--tekst-lille); }
.tabel tbody tr { border-bottom: 1px solid var(--farve-daempet); }
.tabel td .maerker { margin-top: 0; }
.tabel .tal { text-align: right; white-space: nowrap; }
.tabel .handling { text-align: right; padding-right: 0; }
.tabel .handling .knap { white-space: nowrap; }
.tabel-titel { font-weight: 700; }
.tabel time { white-space: nowrap; }
.tabel td a.tabel-titel { display: inline-flex; align-items: center; min-height: var(--trykflade); }
@media (max-width: 47.99rem) {
    .tabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .tabel caption { display: block; }
    .tabel, .tabel tbody, .tabel td { display: block; width: 100%; }
    .tabel tbody { display: grid; gap: var(--luft-3); }
    .tabel tbody tr {
        display: flex;
        flex-direction: column;
        border: var(--streg) solid var(--farve-ramme);
        border-radius: var(--hjoerne);
        padding: var(--luft-2) var(--luft-3);
    }
    /* Hver celle står som "etiket  værdi" på én linje; titelcellen (.hoved) står øverst uden etiket. */
    .tabel td { position: relative; padding: var(--luft-1) 0 var(--luft-1) 6.5rem; min-height: 1.75rem; }
    .tabel td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        top: var(--luft-1);
        width: 6rem;
        font-size: var(--tekst-lille);
        font-weight: 700;
        color: var(--farve-daempet);
    }
    .tabel td.hoved, .tabel td[data-label=""] { padding-left: 0; }
    .tabel td.hoved::before, .tabel td[data-label=""]::before { content: none; }
    .tabel td.hoved { order: -1; font-size: 1.1rem; font-weight: 700; }
    .tabel td.tom-celle { display: none; }
    .tabel .tal, .tabel .handling { text-align: left; }
}

/* ---------- Nøgle-værdi (x-oplysninger, x-oplysning) ---------- */

.oplysninger {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0 0 var(--luft-4);
}
.oplysning { padding: var(--luft-2) 0; border-bottom: 1px solid var(--farve-daempet); }
.oplysning dt { font-size: var(--tekst-lille); font-weight: 700; color: var(--farve-daempet); }
.oplysning dd { margin: 0; }
@media (min-width: 36rem) {
    .oplysning { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--luft-3); }
    .oplysning dt { font-size: inherit; }
}

/* ---------- Tom liste (x-tom) ---------- */

.tom {
    border: var(--streg) dashed var(--farve-ramme);
    background: var(--farve-flade);
    padding: var(--luft-3);
    margin: 0 0 var(--luft-4);
}
.tom > :last-child { margin-bottom: 0; }
.tom .knapraekke { margin: var(--luft-2) 0 0; }

/* ---------- Søgning (x-soeg) ---------- */

.soeg { margin: 0 0 var(--luft-4); }
.soeg > label { display: block; font-weight: 700; margin-bottom: var(--luft-1); }
.soeg-raekke { display: flex; gap: var(--luft-2); }
.soeg-raekke input { flex: 1 1 auto; min-width: 0; }
.soeg-raekke .knap { flex: none; }
.soeg-ekstra { margin-top: var(--luft-3); }
.soeg-ekstra .felt { margin-bottom: 0; }

/* ---------- Del et link (x-del-link) ---------- */

.del-link {
    border: var(--streg) solid var(--farve-ramme);
    background: var(--farve-flade);
    padding: var(--luft-3);
    margin: 0 0 var(--luft-4);
}
.del-link > label { display: block; font-weight: 700; margin-bottom: var(--luft-1); }
.del-link-raekke { display: flex; flex-wrap: wrap; gap: var(--luft-2); }
.del-link input {
    flex: 1 1 14rem;
    min-width: 0;
    min-height: var(--trykflade);
    font: inherit;
    font-size: var(--tekst-lille);
    padding: .5rem .6rem;
    border: var(--streg) solid var(--farve-ramme);
    border-radius: var(--hjoerne);
    background: var(--farve-baggrund);
    color: var(--farve-tekst);
}
.del-link .hjaelp { margin: var(--luft-2) 0 0; }
.del-link [data-kopier][hidden] { display: none; }

/* ---------- Fremdrift (x-fremdrift) ---------- */

.fremdrift { margin: 0 0 var(--luft-3); font-weight: 700; }
.fremdrift-bjaelke {
    display: block;
    height: .6rem;
    margin-top: var(--luft-1);
    max-width: 16rem;
    border: var(--streg) solid var(--farve-ramme);
    background: var(--farve-baggrund);
}
.fremdrift-bjaelke > span { display: block; height: 100%; background: var(--farve-accent); }

/* ---------- Faner for én ting med flere undersider (x-faner) ---------- */

.faner { margin: 0 0 var(--luft-4); border-bottom: var(--streg) solid var(--farve-ramme); }
.faner ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--luft-1); }
.faner a {
    display: inline-flex;
    align-items: center;
    min-height: var(--trykflade);
    padding: 0 var(--luft-3);
    font-weight: 600;
    color: var(--farve-tekst);
    text-decoration: none;
    border: var(--streg) solid transparent;
    border-bottom: 0;
}
.faner a:hover { text-decoration: underline; }
.faner a[aria-current] {
    background: var(--farve-accent);
    color: var(--farve-paa-accent);
    border-color: var(--farve-ramme);
}
/* På telefonen brydes fanerne, så de står som knapper med ramme i stedet for faneblade. */
@media (max-width: 47.99rem) {
    .faner { border-bottom: 0; }
    .faner ul { gap: var(--luft-2); }
    .faner a { border: var(--streg) solid var(--farve-ramme); }
}

/* ---------- Lange tekster ---------- */

.indholdsfortegnelse { background: var(--farve-flade); padding: var(--luft-3); margin: 0 0 var(--luft-4); }
.indholdsfortegnelse ul { margin: 0; padding-left: 1.2rem; }
.indholdsfortegnelse a { display: inline-block; padding: .35rem 0; }
.tekst li { margin-bottom: var(--luft-2); }

/* ---------- Plakat og billede ---------- */

.billede { margin: 0 0 var(--luft-4); }
.billede img { display: block; max-height: 24rem; width: auto; border: var(--streg) solid var(--farve-ramme); }

/* ---------- Bred skærm ---------- */

@media (min-width: 48rem) {
    .hus-indhold { padding: var(--luft-4) var(--luft-4) var(--luft-5); }
    .hus-top-indre { padding: var(--luft-2) var(--luft-4); }
    .hus-navn { font-size: 1.8rem; }
}

/* ---------- Undtagelse til en fast aften: kun de felter, der passer til valget ---------- */
/* Uden :has() (ældre browsere) står alle felter fremme, og hjælpeteksten siger, hvornår de bruges. */
.undtagelse-form:has(input[name=type][value=aflyst]:checked) :is(.kun-flyttet, .kun-aendret, .kun-aendret-flyttet),
.undtagelse-form:has(input[name=type][value=aendret]:checked) .kun-flyttet,
.undtagelse-form:has(input[name=type][value=flyttet]:checked) .kun-aendret { display: none; }