/* ───────────────────────────────────────────────────────────────────────────
   Fors selvbetjening — borgervendt.

   Tonen er en anden end i Fors.Web.Desktop: det her er folk der står med en
   trailer og en telefon i hånden, ofte i regnvejr. Derfor store trykflader,
   stor tekst, ét spørgsmål ad gangen og god luft. Farverne er husets
   (orange #ee6a2c, mørk navy), men lysere og roligere.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
    --fors-accent: #ee6a2c;
    --fors-accent-dark: #d4571c;
    /* Dæmpet udgave af accenten til kanter. Fuld styrke ville skrige, når der står
       seksten nummerplader og numre under hinanden. */
    --fors-accent-line: #f0bd9d;
    --fors-ink: #1f2937;
    --fors-muted: #6b7280;
    --fors-line: #e3e8ee;
    --fors-bg: #f4f6f8;
    --fors-nav: #1f2937;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    background: var(--fors-bg);
    color: var(--fors-ink);
}

body { display: flex; flex-direction: column; min-height: 100vh; }

/* ─── Ramme ──────────────────────────────────────────────────────────────── */

/* Bjælken følger med ned. Siderne bliver lange — otte pladefelter, quizspørgsmål med
   fire udførlige svar — og ellers forsvinder både logo og "Log ud" helt op i toppen.
   sticky frem for fixed: så skal body ikke have kompenserende padding, og bjælken
   opfører sig ordentligt hvis indholdet er kortere end skærmen. */
.fors-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--fors-nav);
    border-bottom: 4px solid var(--fors-accent);
    box-shadow: 0 2px 8px rgba(16, 24, 40, .12);
}

.fors-header-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.fors-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.fors-brand img { height: 32px; }
.fors-brand span { color: #fff; font-weight: 600; letter-spacing: .5px; }

.fors-logout {
    background: transparent;
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: .95rem;
    cursor: pointer;
}
.fors-logout:hover { background: rgba(255,255,255,.12); }

.fors-main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }

.fors-footer {
    background: var(--fors-nav);
    border-top: 4px solid var(--fors-accent);
    color: #cbd5e1;
    font-size: .9rem;
    text-align: center;
    padding: 24px 16px;
}
.fors-footer strong { color: #fff; }
.fors-footer a { color: #cbd5e1; }
.fors-footer a:hover { color: #fff; }

/* ─── Kort ───────────────────────────────────────────────────────────────── */

.fors-card {
    background: #fff;
    border: 1px solid var(--fors-line);
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 1px 3px rgba(16,24,40,.04);
}
@media (max-width: 575px) { .fors-card { padding: 20px 16px; border-radius: 12px; } }

.fors-card h1 { font-size: 1.6rem; font-weight: 700; margin: 0 0 6px; }
.fors-card h2 { font-size: 1.25rem; font-weight: 700; margin: 0 0 6px; }
.fors-lead { color: var(--fors-muted); margin-bottom: 24px; }

/* ─── Felter ─────────────────────────────────────────────────────────────── */

.form-label { font-weight: 600; margin-bottom: 6px; }

.form-control, .form-select {
    font-size: 1.05rem;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #cfd6de;
}
.form-control:focus, .form-select:focus {
    border-color: var(--fors-accent);
    box-shadow: 0 0 0 .2rem rgba(238,106,44,.18);
}
.form-text { color: var(--fors-muted); }

.required { color: var(--fors-accent); font-weight: 700; }

/* ─── Knapper ────────────────────────────────────────────────────────────── */

.btn {
    font-size: 1.05rem;
    padding: 13px 22px;
    border-radius: 10px;
    font-weight: 600;
}
.btn-fors { background: var(--fors-accent); border-color: var(--fors-accent); color: #fff; }
.btn-fors:hover, .btn-fors:focus { background: var(--fors-accent-dark); border-color: var(--fors-accent-dark); color: #fff; }
.btn-quiet { background: #fff; border: 1px solid #cfd6de; color: var(--fors-ink); }
.btn-quiet:hover { background: #f1f3f6; color: var(--fors-ink); }

.fors-actions { display: flex; gap: 12px; margin-top: 28px; }
.fors-actions .btn { flex: 1; }
.fors-actions--end { justify-content: flex-end; }

/* ─── Beskeder ───────────────────────────────────────────────────────────── */

.fors-alert {
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}
.fors-alert-error { background: #fdf0ed; border-color: #f3c6ba; color: #8c2d10; }
.fors-alert-ok    { background: #eef7f0; border-color: #bcdfc6; color: #1e5b32; }
.fors-alert-info  { background: #eef3fa; border-color: #c3d5ee; color: #1d3f6d; }
.fors-alert p:last-child { margin-bottom: 0; }

/* Knap inde i en besked — fx "send mailen igen" */
.fors-alert .btn { margin-top: 12px; font-size: .95rem; padding: 9px 16px; }

/* ─── Oplysning ──────────────────────────────────────────────────────────────
   Vejledning der hører til trinnet — ikke en fejl, men skal stadig kunne ses.
   Uden en ramme drukner den i brødteksten og hele siden bliver flad.           */

.fors-note {
    background: #f7f9fc;
    border: 1px solid #d9e2ef;
    border-left: 4px solid var(--fors-accent);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 24px;
}
.fors-note p:last-child, .fors-note ul:last-child { margin-bottom: 0; }
.fors-note ul { padding-left: 22px; }

.fors-note-ok {
    background: #eef7f0;
    border-color: #bcdfc6;
    border-left-color: #2f8a4d;
}

/* Karantæne fra pladsen. Rødt frem for gult: det er ikke et forbehold, det er en
   afgørelse med en dato. Intet advarselsikon — farven og "er lukket" siger det samme,
   og tre signaler om det samme bliver til råben. */
.fors-note-warn {
    background: #fdf0ed;
    border-color: #f0c4b4;
    border-left-color: #c0392b;
}
.fors-note-warn strong { color: #8c2d10; }

/* Låst felt: tydeligt at det ikke kan redigeres, uden at blive ulæseligt. */
.form-control[readonly] { background: #f1f3f6; color: #4b5563; }

/* ─── Trinviser ──────────────────────────────────────────────────────────── */

.fors-steps {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    list-style: none;
    padding: 0;
}
.fors-steps li { flex: 1; height: 6px; border-radius: 3px; background: var(--fors-line); }
.fors-steps li.done    { background: var(--fors-accent); }
.fors-steps li.current { background: var(--fors-accent); opacity: .55; }
.fors-step-label { color: var(--fors-muted); font-size: .9rem; margin-bottom: 20px; }

/* ─── Miniuddannelse ─────────────────────────────────────────────────────── */

/* Svarmulighed = en rigtig radioknap i et kort man kan trykke hvor som helst på.
   Vælgeren SKAL være '>' og ikke bare 'span': ellers får den indre .key-span sin egen
   ramme, så bogstavet kommer til at stå i en kasse for sig. */
.quiz-option { display: block; position: relative; margin-bottom: 12px; }

.quiz-option > input {
    position: absolute;
    top: 20px;
    left: 18px;
    margin: 0;
    width: 20px;
    height: 20px;
    accent-color: var(--fors-accent);
}

.quiz-option > span {
    display: block;
    border: 2px solid var(--fors-line);
    border-radius: 12px;
    padding: 16px 18px 16px 52px;
    cursor: pointer;
    background: #fff;
}
.quiz-option > input:checked + span { border-color: var(--fors-accent); background: #fff7f3; }
.quiz-option > input:focus-visible + span { box-shadow: 0 0 0 .2rem rgba(238,106,44,.25); }
.quiz-option > span:hover { border-color: #c9d1da; }
.quiz-option .key { font-weight: 700; margin-right: 6px; }

.quiz-images { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.quiz-images figure { margin: 0; }
.quiz-images img { width: 100%; border-radius: 10px; border: 1px solid var(--fors-line); }
.quiz-images figcaption { text-align: center; font-weight: 600; margin-top: 6px; }
@media (max-width: 575px) { .quiz-images { grid-template-columns: 1fr; } }

/* Selve spørgsmålet rammes ind, så det er tydeligt hvad man bliver spurgt om,
   når svarmulighederne fylder resten af skærmen. */
.quiz-prompt {
    background: #fff7f3;
    border: 1px solid #f6d3bf;
    border-left: 4px solid var(--fors-accent);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 22px;
    font-size: 1.05rem;
}

/* Rigtigt/forkert skal kunne aflæses på et halvt sekund — farve på hele kortet,
   ikke bare på teksten. */
.quiz-result {
    border-radius: 12px;
    padding: 18px 20px;
    border: 2px solid transparent;
}
.quiz-result.right { background: #eef7f0; border-color: #6ab887; }
.quiz-result.wrong { background: #fdf0ed; border-color: #e79b80; }

.quiz-verdict { font-weight: 700; font-size: 1.15rem; margin-bottom: 10px; }
.quiz-result.right .quiz-verdict { color: #1e5b32; }
.quiz-result.wrong .quiz-verdict { color: #8c2d10; }

/* ─── Lister (plader, numre, oversigt) ───────────────────────────────────── */

.fors-rows { display: grid; gap: 12px; }

/* Feltnavne står i samme sorte som på login-siden. Grå på grå bliver svært at læse,
   og de her er rigtige etiketter — ikke sekundær tekst. */
.fors-row-index { color: var(--fors-ink); font-size: .95rem; }

.fors-summary { width: 100%; table-layout: fixed; }
.fors-summary th {
    text-align: left;
    font-weight: 600;
    color: var(--fors-ink);
    padding: 10px 16px 10px 0;
    vertical-align: top;
    width: 34%;
}
.fors-summary td {
    padding: 10px 0;
    border-bottom: 1px solid var(--fors-line);
    overflow-wrap: anywhere;   /* lange e-mailadresser må ikke skubbe tabellen ud over kanten */
}
.fors-summary tr:last-child td { border-bottom: 0; }

/* På telefon får værdien hele bredden: ellers er der kun plads til én chip pr. række,
   og otte nummerplader plus otte numre bliver til seksten rækker. */
@media (max-width: 575px) {
    .fors-summary, .fors-summary tbody, .fors-summary tr,
    .fors-summary th, .fors-summary td { display: block; width: auto; }

    .fors-summary tr { border-bottom: 1px solid var(--fors-line); padding: 10px 0; }
    .fors-summary tr:last-child { border-bottom: 0; }
    .fors-summary th { padding: 0 0 2px; font-size: .9rem; }
    .fors-summary td { padding: 0; border-bottom: 0; }
}

/* Chips pakkes side om side og brydes til næste linje når der ikke er mere plads. */
.fors-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.fors-chip {
    background: #fffaf7;
    border: 1px solid var(--fors-accent-line);
    border-radius: 6px;
    padding: 3px 10px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}