/* =====================================================================
   Tilsynsmappe — stil
   Farver og former er de samme som i City-K's admin, så personalet
   kender det med det samme.
   ===================================================================== */

/* ===== Tokens ===== */
:root{
  --grund:#F8F9FB; --flade:#FFFFFF; --flade-2:#EDF0F5;
  --blaek:#151A22; --blaek-2:#59657A;
  --skilt:#0D4EA3; --skilt-hover:#0A3E82; --skilt-kontrast:#FFFFFF;
  --roed:#D2232A; --roed-hover:#B01B21; --roed-lys:#D2232A;
  --linje:#D9DEE7; --ok:#1E7F4F; --gul:#9A6700; --gul-flade:#FFF6DB;
  --moerk-flade:#151A22; --moerk-tekst:#F8F9FB;
  --skygge:0 10px 30px rgba(21,26,34,.09);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --grund:#14181F; --flade:#1C222C; --flade-2:#232B37;
    --blaek:#E8ECF2; --blaek-2:#9AA5B4;
    --skilt:#4A8FE0; --skilt-hover:#6BA5EA; --skilt-kontrast:#0E1521;
    --roed:#D2232A; --roed-hover:#E5424A; --roed-lys:#FF7A82;
    --linje:#303945; --ok:#4CC38A; --gul:#E3B341; --gul-flade:#2E2714;
    --moerk-flade:#0B0E13; --moerk-tekst:#E8ECF2;
    --skygge:0 10px 30px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --grund:#14181F; --flade:#1C222C; --flade-2:#232B37;
  --blaek:#E8ECF2; --blaek-2:#9AA5B4;
  --skilt:#4A8FE0; --skilt-hover:#6BA5EA; --skilt-kontrast:#0E1521;
  --roed:#D2232A; --roed-hover:#E5424A; --roed-lys:#FF7A82;
  --linje:#303945; --ok:#4CC38A; --gul:#E3B341; --gul-flade:#2E2714;
  --moerk-flade:#0B0E13; --moerk-tekst:#E8ECF2;
  --skygge:0 10px 30px rgba(0,0,0,.35);
}

/* ===== Grundstil ===== */
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--grund); color:var(--blaek);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:1.0625rem; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.display{
  font-family:"Bahnschrift","Avenir Next Condensed","Futura","Arial Narrow",Arial,sans-serif;
  font-weight:700; letter-spacing:.01em; line-height:1.08; text-wrap:balance;
}
h1,h2,h3,p{margin:0}
ul,ol{margin:0; padding:0}
:focus-visible{outline:3px solid var(--roed); outline-offset:2px; border-radius:4px}
/* [hidden] skal ALTID vinde (City-K's lektie — ramte dem tre gange) */
[hidden]{display:none !important}
.wrap{max-width:860px; margin-inline:auto; padding-inline:clamp(16px,4vw,32px)}

/* ===== Udviklings-mærkat ===== */
.udv-banner{
  background:repeating-linear-gradient(135deg, #FFD43B 0 14px, #F5C518 14px 28px);
  color:#151A22; text-align:center; font-size:.82rem; padding:5px 12px;
}

/* ===== Topbjælke ===== */
.top{background:var(--moerk-flade); color:var(--moerk-tekst); border-bottom:3px solid var(--roed)}
.top-raekke{display:flex; align-items:center; gap:12px; padding-block:12px}
.top strong{display:block; line-height:1.2}
.top small{display:block; opacity:.6; font-size:.75rem}
.tm-maerke{
  flex:none; display:grid; place-items:center; width:40px; height:40px;
  border-radius:10px; background:var(--skilt); color:#fff;
  font-family:"Bahnschrift","Avenir Next Condensed","Futura",Arial,sans-serif;
  font-weight:800; letter-spacing:.04em; border-bottom:3px solid var(--roed);
}

/* ===== Knapper ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 20px; border-radius:12px; font:inherit; font-weight:700; font-size:.98rem;
  border:2px solid transparent; cursor:pointer;
  transition:transform .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:none}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none}
.btn-blaa{background:var(--skilt); color:var(--skilt-kontrast)}
.btn-blaa:hover{background:var(--skilt-hover)}
.btn-lys{border-color:var(--linje); color:var(--blaek); background:var(--flade)}
.btn-lys:hover{border-color:var(--skilt); color:var(--skilt)}
.a-minik{
  font:inherit; font-size:.84rem; font-weight:700; cursor:pointer; white-space:nowrap;
  padding:7px 13px; border-radius:9px; border:1.5px solid var(--linje);
  background:var(--flade); color:var(--blaek);
}
.a-minik:hover{border-color:var(--skilt); color:var(--skilt)}

/* ===== Beskeder ===== */
.a-status{
  position:sticky; top:10px; z-index:60; margin:14px 0 0;
  background:var(--flade); color:var(--blaek);
  border:1px solid var(--linje); border-left:5px solid var(--ok);
  border-radius:12px; padding:12px 18px; font-size:.92rem; font-weight:600; box-shadow:var(--skygge);
}
.a-fejl{color:var(--roed-lys); font-size:.92rem; font-weight:600; margin-top:10px}
.form-note{color:var(--blaek-2); font-size:.88rem; line-height:1.5}
.felt-note{font-weight:400; color:var(--blaek-2); font-size:.82rem}

/* ===== Sektion ===== */
.sektion{padding-block:clamp(24px,4vw,40px)}
.sektion h1{font-size:clamp(1.4rem,3vw,1.9rem)}
.intro{color:var(--blaek-2); margin-top:8px; max-width:62ch}

/* ===== Filvælger ===== */
.fil-felt{
  position:relative; margin-top:20px;
  display:grid; justify-items:center; gap:4px; text-align:center;
  padding:30px 20px; border:2px dashed var(--linje); border-radius:16px;
  background:var(--flade); color:var(--skilt); cursor:pointer;
}
.fil-felt:hover{border-color:var(--skilt)}
.fil-felt:focus-within{outline:3px solid var(--roed); outline-offset:2px}
.fil-felt b{font-size:1.05rem}
.fil-felt small{color:var(--blaek-2)}
/* Selve feltet er usynligt, men stadig der for skærmlæsere og tastatur */
.fil-felt input{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%}
.laeser{margin-top:12px; color:var(--blaek-2); font-weight:600}

/* ===== Kort og formular ===== */
.kort{
  background:var(--flade); border:1px solid var(--linje); border-radius:14px;
  padding:18px; margin-top:16px;
}
.kort-top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px}
.kort-titel{font-size:.78rem; letter-spacing:.11em; text-transform:uppercase; color:var(--blaek-2); margin-bottom:12px}
.kort-top .kort-titel{margin:0}
.antal{letter-spacing:0; text-transform:none; font-weight:600}

.a-form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.a-fuldbredde{grid-column:1 / -1}
.a-form-grid label{font-weight:700; font-size:.92rem; display:grid; gap:6px; align-content:start}
.a-form-grid label small:not(.felt-note){font-weight:400; color:var(--blaek-2)}
.a-form-grid input, .a-form-grid select{
  font:inherit; padding:11px 13px; border-radius:10px; border:1.5px solid var(--linje);
  background:var(--grund); color:var(--blaek); width:100%; min-width:0;
}
.a-form-grid input:focus, .a-form-grid select:focus{border-color:var(--skilt); outline:none}
.a-form-grid input[readonly]{color:var(--blaek-2); background:var(--flade-2)}

/* ===== Advarsler fra filen ===== */
.advarsler{
  margin-top:16px; border-radius:12px; padding:12px 16px;
  background:var(--gul-flade); border:1px solid color-mix(in srgb, var(--gul) 40%, transparent);
  border-left:5px solid var(--gul); font-size:.92rem;
}
.advarsler b{display:block; margin-bottom:4px}
.advarsler ul{padding-left:18px}

/* ===== Eleverne ===== */
.elev-liste{list-style:none; display:grid}
.elev{border-top:1px solid var(--linje); padding:12px 0}
.elev:first-child{border-top:0; padding-top:0}
.elev:last-child{padding-bottom:0}
.elev.fravalgt .elev-navn, .elev.fravalgt .elev-info{opacity:.45; text-decoration:line-through}
.elev-top{display:flex; align-items:center; gap:10px; flex-wrap:wrap; cursor:pointer}
.elev-top input{width:20px; height:20px; accent-color:var(--skilt); flex:none}
.elev-navn{font-weight:700; flex:1; min-width:140px}
.elev-info{color:var(--blaek-2); font-size:.86rem; margin:2px 0 0 30px}
.elev details{margin:6px 0 0 30px; font-size:.86rem}
.elev summary{cursor:pointer; color:var(--skilt); font-weight:700}
.dage{list-style:none; display:grid; gap:4px; margin-top:6px}
.dage li{display:flex; gap:10px; flex-wrap:wrap}
.dage .dag-dato{font-weight:700; min-width:64px; font-variant-numeric:tabular-nums}
.dage .dag-note{color:var(--blaek-2); font-style:italic}

.a-pille{
  display:inline-block; white-space:nowrap;
  font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px;
}
.a-pille.ok{background:color-mix(in srgb, var(--ok) 16%, transparent); color:var(--ok)}
.a-pille.mangler{background:color-mix(in srgb, var(--roed) 14%, transparent); color:var(--roed-lys)}
.a-pille.neutral{background:color-mix(in srgb, var(--skilt) 13%, transparent); color:var(--skilt)}

.cpr-note{margin-top:14px}
.knapper{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; margin-top:18px}

/* ===== Tag billede ===== */
.vejledning{
  margin:14px 0; padding:12px 14px; border-radius:10px;
  background:color-mix(in srgb, var(--skilt) 7%, var(--flade));
  border-left:4px solid var(--skilt); font-size:.92rem;
}
.btn-roed{background:var(--roed); color:#fff; box-shadow:0 6px 20px rgba(210,35,42,.3)}
.btn-roed:hover{background:var(--roed-hover)}
.kamera-knap{position:relative; width:100%; padding:16px 20px; font-size:1.05rem}
.kamera-knap:focus-within{outline:3px solid var(--roed); outline-offset:2px}
/* Feltet er usynligt over hele knappen, så et tryk hvor som helst åbner kameraet */
.kamera-knap input{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%}
.forhaand{
  display:block; margin:16px auto 0; max-width:100%; max-height:60vh;
  border-radius:12px; border:1px solid var(--linje); background:var(--flade-2);
}
.billede-tal{list-style:none; display:grid; gap:4px; margin-top:12px; font-size:.9rem; color:var(--blaek-2)}
.billede-tal b{color:var(--blaek)}
.billede-tal .ok-linje{color:var(--ok); font-weight:700}

/* ===== Holdets skema ===== */
a.btn{text-decoration:none}
.skema-grid{list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px}
.skema-plads{position:relative; border-radius:12px; background:var(--grund); border:1.5px solid var(--linje); overflow:hidden}
.skema-plads.har{border-color:var(--ok)}
/* Tom plads: samme højde som de udfyldte i rækken (grid strækker den),
   og 3:4 når hele rækken er tom */
/* align-self:stretch skal stå eksplicit — ellers vinder 3:4-forholdet over rækkens højde */
.skema-plads:not(.har){aspect-ratio:3/4; align-self:stretch; border:0; background:none}
.skema-tom{
  position:absolute; inset:0; display:grid; place-items:center; align-content:center; gap:4px;
  border:1.5px dashed var(--linje); border-radius:12px; background:var(--grund);
  color:var(--skilt); font-weight:700; font-size:.9rem; cursor:pointer; text-align:center;
}
.skema-tom:hover{border-color:var(--skilt)}
.skema-tom-ikon{font-size:1.8rem; line-height:1}
.skema-tom input, .skema-om input{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%}
.skema-tom:focus-within, .skema-om:focus-within{outline:3px solid var(--roed); outline-offset:2px}
.skema-mini{display:block; width:100%; aspect-ratio:3/4; object-fit:cover; background:var(--flade-2)}
.skema-plads-bund{display:flex; align-items:center; gap:8px; padding:8px; font-size:.86rem}
.skema-plads-bund b{flex:1}
.skema-om{position:relative; padding:6px 10px}
.skema-fjern{
  position:absolute; top:6px; right:6px; width:30px; height:30px; border-radius:50%;
  border:1px solid var(--linje); background:var(--flade); color:var(--blaek-2);
  font-size:1.2rem; line-height:1; cursor:pointer;
}
.skema-fjern:hover{color:var(--roed-lys); border-color:var(--roed)}
.skema-bund{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px}
.pdf-klar{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-top:16px; padding:14px 16px; border-radius:12px;
  background:color-mix(in srgb, var(--ok) 9%, var(--flade)); border:1px solid color-mix(in srgb, var(--ok) 35%, var(--linje));
  border-left:5px solid var(--ok);
}
.pdf-klar b{display:block}
.pdf-klar span{color:var(--blaek-2); font-size:.9rem}

/* ===== Telefon ===== */
@media (max-width:640px){
  .a-form-grid{grid-template-columns:1fr}
  .knapper{flex-direction:column-reverse}
  .knapper .btn{width:100%}
  /* iOS zoomer ind ved felter under 16px */
  .a-form-grid input, .a-form-grid select{font-size:16px}
  .elev-info, .elev details{margin-left:0}
}