/* Rådgiver-sitet — samme visuelle sprog som Delebørn-appen.
   Ét stylesheet, ingen eksterne afhængigheder: CSP'en tillader kun 'self',
   og siden skal virke på en langsom kontor-pc.

   Brandfarverne er appens to: blå rgb(134,189,252) og pink rgb(239,145,182).
   De bruges til gradienter, baggrunde og accenter præcis som i appen. Til
   TEKST bruges mørkere nuancer af samme blå — hvid tekst på den lyse
   brand-blå giver kun 1,9:1 i kontrast, og formularer skal kunne læses. */

:root {
    --brand-blaa:    #86bdfc;   /* appens blå — rgb(134,189,252) */
    --brand-pink:    #ef91b6;   /* appens pink — rgb(239,145,182) */
    --blaa-tekst:    #2f7ad6;   /* samme kulør, mørk nok til hvid tekst (4,6:1) */
    --blaa-hover:    #2665b4;
    --pink-tekst:    #c2456f;

    --tekst:         #1a2733;
    --tekst-svag:    #5b6b7c;
    --linje:         #e3eaf2;
    --kort:          #ffffff;

    --fejl:          #b02a37;
    --fejl-bg:       #fdecee;
    --fejl-linje:    #f3c3c8;
    --ok-bg:         #eef6ff;
    --ok-linje:      #c9e0fa;

    --radius-kort:   24px;   /* appen bruger 25-30 på sine kort */
    --radius-felt:   15px;   /* appen bruger 15 på inputfelter */
    --radius-knap:   16px;
    --skygge:        0 6px 20px rgba(26, 39, 51, .13);
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
    margin: 0;
    min-height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: var(--tekst);
    display: flex;
    flex-direction: column;

    /* Samme baggrundsbillede som appen bruger på næsten alle skærme.
       WebP hvor browseren kan (29 KB), ellers JPG (130 KB). */
    background-color: #a9d6f5;
    background-image: url("images/background.jpg");
    background-image: image-set(url("images/background.webp") type("image/webp"),
                                url("images/background.jpg") type("image/jpeg"));
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Appen lægger et sort slør på 10-15% over baggrunden, så indhold træder frem. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .10);
    pointer-events: none;
    z-index: 0;
}

body > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- topbar --
   Kun på sider hvor man er logget ind. */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, .93);
    border-bottom: 1px solid rgba(255, 255, 255, .6);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 12px rgba(26, 39, 51, .10);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--tekst);
}

.brand img.logo {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: block;
}

.brand img.ordmaerke {
    height: 22px;
    width: auto;
    display: block;
}

.brand .rolle {
    font-size: 13px;
    color: var(--tekst-svag);
    border-left: 1px solid var(--linje);
    padding-left: 10px;
    margin-left: 2px;
}

.topnav { display: flex; align-items: center; gap: 14px; }
.who { color: var(--tekst-svag); font-size: 14px; }
.inline { display: inline; margin: 0; }

.linkbtn {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 14px;
    color: var(--blaa-tekst);
    cursor: pointer;
    text-decoration: underline;
}
.linkbtn:hover { color: var(--blaa-hover); }

/* ---------------------------------------------------------------- layout -- */

.wrap {
    flex: 1;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 28px 20px 48px;
}

/* Login/opret: ordmærket over kortet, som på appens velkomstskærm. */
.wrap.auth {
    max-width: 480px;
    padding-top: 40px;
}

.ordmaerke-stor {
    display: block;
    width: 232px;
    max-width: 70%;
    height: auto;
    margin: 0 auto 26px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .18));
}

/* ------------------------------------------------------------------ kort -- */

.card {
    background: var(--kort);
    border-radius: var(--radius-kort);
    box-shadow: var(--skygge);
    overflow: hidden;
}

/* Gradientbåndet er appens signatur: blå til pink, øverste venstre mod
   nederste højre. Overskriften står mørk — hvid ville ikke kunne læses. */
.card > h1 {
    margin: 0;
    padding: 20px 28px;
    font-size: 21px;
    background: linear-gradient(135deg, var(--brand-blaa), var(--brand-pink));
    color: #14212e;
}

.card-body { padding: 24px 28px 28px; }

.muted { color: var(--tekst-svag); font-size: 14px; }
a { color: var(--blaa-tekst); }
a:hover { color: var(--blaa-hover); }

.foot {
    padding: 18px 20px 30px;
    text-align: center;
    color: #ffffff;
    font-size: 13px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

/* -------------------------------------------------------------- beskeder -- */

.notice, .error {
    border-radius: 12px;
    padding: 12px 15px;
    margin: 0 0 20px;
    font-size: 15px;
}
.notice { background: var(--ok-bg);   border: 1px solid var(--ok-linje); }
.error  { background: var(--fejl-bg); border: 1px solid var(--fejl-linje); color: var(--fejl); }

/* Beskeder der ligger over kortet (fx "du blev logget ud"). */
.wrap > .notice, .wrap > .error {
    background: rgba(255, 255, 255, .95);
    box-shadow: var(--skygge);
    border: 0;
    border-left: 5px solid var(--brand-blaa);
    border-radius: 14px;
}
.wrap > .error { border-left-color: var(--fejl); color: var(--fejl); }

.fielderror { color: var(--fejl); font-size: 14px; margin: -8px 0 0; }

/* ------------------------------------------------------------ formularer -- */

.stack { display: flex; flex-direction: column; gap: 15px; margin: 20px 0 0; }

.row { display: flex; gap: 15px; }
.row > div { flex: 1; }

label { font-weight: 600; font-size: 14px; display: block; }
label .muted { font-weight: 400; }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"] {
    width: 100%;
    margin-top: 5px;
    padding: 12px 14px;
    font: inherit;
    color: var(--tekst);
    background: #fff;
    border: 1px solid #c3d3e3;
    border-radius: var(--radius-felt);
}

input::placeholder { color: #9aabbd; }

input:focus {
    outline: 3px solid rgba(134, 189, 252, .55);
    outline-offset: 0;
    border-color: var(--blaa-tekst);
}

button[type="submit"] {
    align-self: flex-start;
    min-height: 52px;              /* appen bruger 55 */
    padding: 12px 26px;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: var(--blaa-tekst);
    border: 0;
    border-radius: var(--radius-knap);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(47, 122, 214, .3);
}
button[type="submit"]:hover { background: var(--blaa-hover); }

button.secondary {
    color: var(--blaa-tekst);
    background: #fff;
    border: 1.5px solid var(--brand-blaa);
    box-shadow: none;
    min-height: 46px;
}
button.secondary:hover { background: var(--ok-bg); }

/* ------------------------------------------------------------ sagsliste -- */

.cases { list-style: none; margin: 18px 0 0; padding: 0; }

.cases li {
    padding: 15px 0;
    border-top: 1px solid var(--linje);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cases a {
    font-weight: 600;
    text-decoration: none;
    font-size: 17px;
}
.cases a:hover { text-decoration: underline; }

.tag {
    font-size: 12px;
    font-weight: 600;
    color: var(--pink-tekst);
    background: rgba(239, 145, 182, .16);
    border-radius: 20px;
    padding: 3px 11px;
}

.empty {
    color: var(--tekst-svag);
    margin: 18px 0 0;
    padding: 18px;
    background: linear-gradient(135deg, rgba(134, 189, 252, .12), rgba(239, 145, 182, .12));
    border-radius: 16px;
}

@media (max-width: 520px) {
    .row { flex-direction: column; }
    .card > h1 { padding: 18px 20px; font-size: 19px; }
    .card-body { padding: 20px; }
    body { background-attachment: scroll; }
}

@media (prefers-reduced-motion: no-preference) {
    .card { animation: op .25s ease-out both; }
    @keyframes op { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* ============================================================= sagssiden ==
   Tilføjet i fase 2: sagsliste med farveprik, forældre/rådgivere,
   invitationer, historik og bekræftelsessider. */

.card-body h2 {
    font-size: 17px;
    margin: 28px 0 6px;
    padding-top: 18px;
    border-top: 1px solid var(--linje);
}
.card-body h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 22px; }

/* Barnets farve — samme ARGB-værdi som appen viser i kalenderen. */
.prik {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
}
.card > h1 .prik { width: 16px; height: 16px; margin-right: 4px; vertical-align: -1px; }

/* --- Lister over forældre, rådgivere og invitationer --- */
.liste { list-style: none; margin: 10px 0 0; padding: 0; }

.liste li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 0;
    border-top: 1px solid var(--linje);
}
.liste li:first-child { border-top: 0; }

.liste .navn { font-weight: 600; }

/* --- Historik --- */
.historik { list-style: none; margin: 10px 0 0; padding: 0; font-size: 15px; }

.historik li {
    display: flex;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--linje);
}
.historik li:first-child { border-top: 0; }

.historik time {
    flex: 0 0 108px;
    color: var(--tekst-svag);
    font-variant-numeric: tabular-nums;
    font-size: 14px;
}

/* --- Trinliste på invitationssiden --- */
.trin { margin: 10px 0 0; padding-left: 22px; }
.trin li { padding: 4px 0; }

/* --- Knapper og handlingsrækker --- */
.handlinger {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin: 26px 0 0;
}

/* .knap og .knap-sekundaer er <a>-elementer der ser ud som knapper.
   Bekræftelser sker på egne sider, så destruktive handlinger nås via
   almindelige links — CSP'en tillader ingen inline JavaScript. */
.knap, .knap-sekundaer {
    display: inline-block;
    padding: 12px 22px;
    border-radius: var(--radius-knap);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    line-height: 1.3;
}

.knap {
    color: #fff;
    background: var(--blaa-tekst);
    box-shadow: 0 2px 6px rgba(47, 122, 214, .3);
}
.knap:hover { background: var(--blaa-hover); color: #fff; }

.knap-sekundaer {
    color: var(--blaa-tekst);
    background: #fff;
    border: 1.5px solid var(--brand-blaa);
}
.knap-sekundaer:hover { background: var(--ok-bg); }

.knap-sekundaer.farlig { color: var(--fejl); border-color: var(--fejl-linje); }
.knap-sekundaer.farlig:hover { background: var(--fejl-bg); }

button.farlig-knap {
    align-self: auto;
    min-height: 52px;
    padding: 12px 26px;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: var(--fejl);
    border: 0;
    border-radius: var(--radius-knap);
    cursor: pointer;
}
button.farlig-knap:hover { background: #8f2029; }

/* Handlingsrækken inde i en formular skal ikke arve .stack's kolonne. */
.stack .handlinger { margin-top: 6px; }

/* --- Kompakt formular (inviter forælder) --- */
.stack.kompakt { gap: 12px; margin-top: 12px; }

/* --- Feltgrupper --- */
fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

legend {
    font-weight: 600;
    font-size: 14px;
    padding: 0;
}

fieldset .muted { margin: 2px 0 8px; }

/* --- Mor/far-valg --- */
.valg { display: flex; gap: 10px; }

.valgboks {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1.5px solid #c3d3e3;
    border-radius: var(--radius-felt);
    cursor: pointer;
    font-weight: 500;
}

.valgboks:has(input:checked) {
    border-color: var(--blaa-tekst);
    background: var(--ok-bg);
    font-weight: 600;
}

/* --- Farvevælger: samme palet som appens opret-skærm --- */
.farver {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.farve {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px 4px;
    border: 1.5px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    text-align: center;
}

.farve span {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

.farve em {
    font-size: 11px;
    font-style: normal;
    color: var(--tekst-svag);
    line-height: 1.2;
}

/* Radioknappen skjules visuelt, men er stadig i tastatur-rækkefølgen
   og læses stadig af skærmlæsere. */
.farve input, .valgboks input { position: absolute; opacity: 0; width: 0; height: 0; }

.farve:has(input:checked) {
    border-color: var(--blaa-tekst);
    background: var(--ok-bg);
}
.farve:has(input:checked) em { color: var(--tekst); font-weight: 600; }

.farve:has(input:focus-visible), .valgboks:has(input:focus-visible) {
    outline: 3px solid rgba(134, 189, 252, .55);
}

@media (max-width: 520px) {
    .farver { grid-template-columns: repeat(4, 1fr); }
    .historik li { flex-direction: column; gap: 2px; }
    .historik time { flex: none; }
}

/* Fallback for browsere uden :has() — inputtet står lige før sit <span>,
   så en søskende-selector kan markere valget. Uden dette ville et valgt
   felt være helt usynligt, når radioknappen er skjult. */
.farve input:checked + span   { box-shadow: 0 0 0 3px var(--blaa-tekst), inset 0 0 0 1px rgba(0,0,0,.12); }
.valgboks input:checked + span { font-weight: 700; color: var(--blaa-tekst); }

/* ========================================================= samværsplanen ==
   Tilføjet i fase 3: ugeskema, skiftedag, særlige aftaler og stamdata. */

/* select og textarea skal se ud som input-felterne. */
select, textarea {
    width: 100%;
    margin-top: 5px;
    padding: 11px 12px;
    font: inherit;
    color: var(--tekst);
    background: #fff;
    border: 1px solid #c3d3e3;
    border-radius: var(--radius-felt);
}

textarea { resize: vertical; min-height: 72px; line-height: 1.5; }

select:focus, textarea:focus {
    outline: 3px solid rgba(134, 189, 252, .55);
    border-color: var(--blaa-tekst);
}

select:disabled, textarea:disabled, input:disabled {
    background: #f5f7fa;
    color: var(--tekst-svag);
    cursor: not-allowed;
}

/* --- Ugeskemaet: to tabeller, én pr. uge --- */
.skema {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0 0;
}

.skema caption {
    text-align: left;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 0 6px;
    color: var(--tekst);
}

.skema th[scope="row"] {
    text-align: left;
    font-weight: 500;
    font-size: 15px;
    padding: 6px 10px 6px 0;
    width: 8.5em;
    border-top: 1px solid var(--linje);
}

.skema td {
    padding: 5px 0;
    border-top: 1px solid var(--linje);
}

/* Mor/far-valget for én dag. Brand-farverne bærer betydningen, men aldrig
   alene: teksten "Mor"/"Far" står altid der, så valget også kan læses uden
   at kunne skelne farverne. */
.dagvalg {
    display: inline-block;
    cursor: pointer;
    padding: 7px 16px;
    margin-right: 6px;
    font-size: 14px;
    font-weight: 500;
    border: 1.5px solid #c3d3e3;
    border-radius: 20px;
    color: var(--tekst-svag);
    background: #fff;
}

.dagvalg input { position: absolute; opacity: 0; width: 0; height: 0; }

/* Fallback uden :has(): markér valget med vægt og understregning.
   Farven må IKKE sættes her — uden :has() ændres baggrunden ikke, og
   hvid tekst ville blive usynlig. */
.dagvalg input:checked + span { font-weight: 700; text-decoration: underline; }

.dagvalg.mor:has(input:checked) {
    background: var(--pink-tekst);
    border-color: var(--pink-tekst);
    color: #fff;
    font-weight: 700;
}

.dagvalg.far:has(input:checked) {
    background: var(--brand-blaa);
    border-color: var(--blaa-tekst);
    color: #14212e;
    font-weight: 700;
}

.dagvalg:has(input:focus-visible) { outline: 3px solid rgba(134, 189, 252, .55); }
.dagvalg:has(input:disabled) { cursor: not-allowed; opacity: .75; }

/* --- Skabelon-knapper --- */
.skabeloner { margin-top: 18px; }

button.lille {
    min-height: 40px;
    padding: 8px 15px;
    font-size: 14px;
    font-weight: 600;
    color: var(--blaa-tekst);
    background: #fff;
    border: 1.5px solid var(--brand-blaa);
    border-radius: 20px;
    cursor: pointer;
    box-shadow: none;
}
button.lille:hover { background: var(--ok-bg); }

/* --- Særlige aftaler --- */
.aftaler { list-style: none; margin: 12px 0 0; padding: 0; }

.aftaler li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid var(--linje);
}
.aftaler li:first-child { border-top: 0; }

.aftaler p { margin: 0; flex: 1; }

@media (max-width: 520px) {
    .skema th[scope="row"] { width: auto; }
    .dagvalg { padding: 7px 13px; }
}

/* ============================================================== ferierne ==
   Tilføjet i fase 4: de fem ens ferier, sommerferie og jul/nytår. */

/* Navnet på en helligdag ud for datoen — hjælper med at se hvad der fordeles. */
.helligdag {
    display: inline-block;
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
    color: var(--pink-tekst);
    background: rgba(239, 145, 182, .14);
    border-radius: 20px;
    padding: 1px 9px;
    margin-left: 6px;
}

.skema th[scope="row"] { width: auto; min-width: 12em; }

/* Markerer den valgte gren i jul/nytår-guiden. */
.knap-sekundaer.aktiv {
    background: var(--blaa-tekst);
    border-color: var(--blaa-tekst);
    color: #fff;
}
.knap-sekundaer.aktiv:hover { background: var(--blaa-hover); color: #fff; }

/* --- Sommerferiens ugevalg --- */
.uger {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
    margin: 12px 0 0;
}

.uge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 9px 4px;
    border: 1.5px solid #c3d3e3;
    border-radius: 12px;
    cursor: pointer;
    background: #fff;
}

.uge span { font-weight: 700; font-size: 16px; }
.uge em   { font-style: normal; font-size: 11px; color: var(--tekst-svag); }

.uge input { position: absolute; opacity: 0; width: 0; height: 0; }

/* Fallback uden :has() — markerer valget med vægt, aldrig med farve alene. */
.uge input:checked + span { text-decoration: underline; }

.uge:has(input:checked) {
    background: var(--ok-bg);
    border-color: var(--blaa-tekst);
    border-width: 2px;
}
.uge:has(input:checked) span { color: var(--blaa-hover); }

/* Uger den anden forælder har taget: tydeligt utilgængelige. */
.uge.taget {
    background: #f2f4f7;
    border-style: dashed;
    color: var(--tekst-svag);
    cursor: not-allowed;
}
.uge.taget span { color: var(--tekst-svag); text-decoration: line-through; }

.uge:has(input:focus-visible) { outline: 3px solid rgba(134, 189, 252, .55); }

/* --- Ferieoversigten på plansiden --- */
.ferier li { align-items: center; }
.ferier a { font-weight: 600; text-decoration: none; min-width: 11em; }
.ferier a:hover { text-decoration: underline; }

/* ======================================================= opsætningsguiden ==
   Fase 5: trin-for-trin når en sag oprettes. */

.guide {
    background: rgba(255, 255, 255, .93);
    border-radius: 18px;
    padding: 16px 20px 14px;
    margin-bottom: 18px;
    box-shadow: var(--skygge);
}

.guide-hvor {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--tekst-svag);
}

/* Fremdriftsbjælken i brandets gradient. */
.bjaelke {
    height: 8px;
    background: #e3eaf2;
    border-radius: 20px;
    overflow: hidden;
}

.bjaelke span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--brand-blaa), var(--brand-pink));
    border-radius: 20px;
}

/* Trinlisten. Man kan hoppe frit — guiden er en hjælp, ikke en spærring. */
.guide-trin {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 0;
    padding: 0;
    counter-reset: trin;
}

.guide-trin li { counter-increment: trin; }

.guide-trin a {
    display: inline-block;
    font-size: 13px;
    text-decoration: none;
    color: var(--tekst-svag);
    background: #f2f5f9;
    border: 1px solid transparent;
    border-radius: 20px;
    padding: 4px 11px;
}
.guide-trin a:hover { background: var(--ok-bg); color: var(--blaa-hover); }

.guide-trin a::before {
    content: counter(trin) ". ";
    font-variant-numeric: tabular-nums;
}

/* Udfyldt trin: flueben, så det kan læses uden farve. */
.guide-trin .klar a {
    color: var(--blaa-hover);
    background: var(--ok-bg);
    border-color: var(--ok-linje);
}
.guide-trin .klar a::after { content: " ✓"; font-weight: 700; }

.guide-trin .nu a {
    color: #fff;
    background: var(--blaa-tekst);
    font-weight: 700;
}

.guide-intro {
    margin: 0 0 4px;
    color: var(--tekst-svag);
}

/* Navigation nederst. "Spring over" står lige så tydeligt som at gemme:
   alt bliver sjældent aftalt i ét møde. */
.guide-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin: 28px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--linje);
}

.guide-nav .spring {
    font-size: 15px;
    font-weight: 600;
    color: var(--blaa-tekst);
}

.guide-ud { margin: 14px 0 0; font-size: 13px; }

@media (max-width: 520px) {
    .guide { padding: 14px 16px 12px; }
    .guide-trin a { font-size: 12px; padding: 3px 9px; }
}