/* Serviceportal — stilark.
   Mobil først: portalen bruges stående med én hånd, foran en automat der ikke virker.
   Derfor store trykflader, høj kontrast og ingen vandret scroll. */

:root {
  --bg:        #faf9f7;
  --flade:     #ffffff;
  --kant:      #e2e0d8;
  --kant-kraftig: #c9c6bb;
  --tekst:     #24241f;
  --daempet:   #64635c;
  --svag:      #8d8c84;

  --accent:      #4b45a8;
  --accent-mork: #37327f;
  --accent-svag: #eeedfe;

  --ok:      #0f6e56;
  --ok-svag: #e1f5ee;
  --fejl:      #a32d2d;
  --fejl-svag: #fceaea;
  --advar:      #854f0b;
  --advar-svag: #faeeda;

  --radius: 10px;
  --skygge: 0 1px 2px rgba(0,0,0,.05);
  --maks: 40rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17171a; --flade: #202024; --kant: #33333a; --kant-kraftig: #45454e;
    --tekst: #ececee; --daempet: #a6a5a0; --svag: #7e7d78;
    --accent: #9a94ee; --accent-mork: #b5b0f5; --accent-svag: #262340;
    --ok: #5dcaa5; --ok-svag: #14352c;
    --fejl: #f09595; --fejl-svag: #3a1c1c;
    --advar: #efaf57; --advar-svag: #3a2a10;
    --skygge: 0 1px 2px rgba(0,0,0,.3);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tekst);
  background: var(--bg);
  overflow-wrap: break-word;
}

h1, h2, h3 { font-weight: 600; line-height: 1.3; margin: 0 0 .5rem; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.175rem; margin-top: 2rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 1rem; }
a  { color: var(--accent); }
a:hover { color: var(--accent-mork); }

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

.top {
  background: var(--flade);
  border-bottom: 1px solid var(--kant);
  position: sticky; top: 0; z-index: 10;
}
.top-inder {
  max-width: var(--maks); margin: 0 auto; padding: .75rem 1rem;
  display: flex; align-items: center; gap: .75rem;
}
.brand {
  font-weight: 600; font-size: .95rem; color: var(--tekst);
  text-decoration: none; margin-right: auto;
}
.brand span { color: var(--svag); font-weight: 400; }

.top nav { display: flex; gap: .25rem; flex-wrap: wrap; }
.top nav a {
  font-size: .875rem; text-decoration: none; color: var(--daempet);
  padding: .4rem .6rem; border-radius: var(--radius);
}
.top nav a:hover { background: var(--bg); color: var(--tekst); }
.top nav a[aria-current] { background: var(--accent-svag); color: var(--accent-mork); font-weight: 500; }

/* Log ud er en formular, ikke et link, saa en fremmed side ikke kan logge brugeren
   ud med et billede-tag. Knappen skal alligevel se ud som de oevrige punkter. */
.log-ud { display: inline; margin: 0; }
.log-ud button {
  font: inherit; font-size: .875rem; color: var(--daempet);
  background: none; border: 0; padding: .4rem .6rem;
  border-radius: var(--radius); cursor: pointer;
}
.log-ud button:hover { background: var(--bg); color: var(--tekst); }

main { max-width: var(--maks); margin: 0 auto; padding: 1.5rem 1rem 4rem; }

footer {
  max-width: var(--maks); margin: 0 auto; padding: 0 1rem 2rem;
  color: var(--svag); font-size: .8125rem;
}

/* ── Kort og lister ──────────────────────────────────────────────── */

.kort {
  background: var(--flade); border: 1px solid var(--kant);
  border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--skygge);
  margin-bottom: 1rem;
}
.kort > :last-child { margin-bottom: 0; }

.noegletal { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .75rem; }
.noegletal div { background: var(--bg); border: 1px solid var(--kant); border-radius: var(--radius); padding: .75rem; }
.noegletal b { display: block; font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.noegletal span { font-size: .8125rem; color: var(--daempet); }

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

.besked {
  border-left: 3px solid; border-radius: 0 var(--radius) var(--radius) 0;
  padding: .75rem 1rem; margin-bottom: 1rem; font-size: .9375rem;
}
.besked.ok   { border-color: var(--ok);    background: var(--ok-svag);    color: var(--ok); }
.besked.fejl { border-color: var(--fejl);  background: var(--fejl-svag);  color: var(--fejl); }
.besked.info { border-color: var(--advar); background: var(--advar-svag); color: var(--advar); }

/* ── Formularer ──────────────────────────────────────────────────── */

.felt { margin-bottom: 1.125rem; }
.felt > label { display: block; font-weight: 500; font-size: .9375rem; margin-bottom: .3rem; }
.felt .hjaelp { display: block; font-size: .8125rem; color: var(--daempet); margin-bottom: .4rem; }

input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=search], select, textarea {
  width: 100%; padding: .7rem .75rem;
  font: inherit; font-size: 1rem;   /* 16px forhindrer at iOS zoomer ved fokus */
  color: var(--tekst); background: var(--flade);
  border: 1px solid var(--kant-kraftig); border-radius: var(--radius);
}
textarea { min-height: 7rem; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.felt.har-fejl input, .felt.har-fejl select, .felt.har-fejl textarea { border-color: var(--fejl); }
.feltfejl { display: block; color: var(--fejl); font-size: .8125rem; margin-top: .3rem; }

.afkryds { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; }
.afkryds input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }

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

.knap {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.9rem; padding: .7rem 1.2rem;
  font: inherit; font-size: 1rem; font-weight: 500;
  border: 1px solid transparent; border-radius: var(--radius);
  background: var(--accent); color: #fff;
  text-decoration: none; cursor: pointer;
}
.knap:hover { background: var(--accent-mork); color: #fff; }
.knap:disabled { opacity: .55; cursor: not-allowed; }
.knap.bred { width: 100%; }
.knap.sekundaer { background: var(--flade); color: var(--tekst); border-color: var(--kant-kraftig); }
.knap.sekundaer:hover { background: var(--bg); color: var(--tekst); }
.knap.stor { min-height: 3.5rem; font-size: 1.0625rem; }

@media (prefers-color-scheme: dark) {
  .knap { color: #14121f; }
  .knap:hover { color: #14121f; }
}

/* ── Tabeller ────────────────────────────────────────────────────── */

.tabelramme { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
th { text-align: left; font-weight: 600; color: var(--daempet); font-size: .8125rem; }
th, td { padding: .6rem .5rem; border-bottom: 1px solid var(--kant); }
tr:last-child td { border-bottom: 0; }

/* ── Småting ─────────────────────────────────────────────────────── */

.maerkat {
  display: inline-block; padding: .15rem .5rem; border-radius: 99px;
  font-size: .75rem; font-weight: 500;
  background: var(--bg); border: 1px solid var(--kant); color: var(--daempet);
}
.maerkat.ok   { background: var(--ok-svag);   border-color: transparent; color: var(--ok); }
.maerkat.fejl { background: var(--fejl-svag); border-color: transparent; color: var(--fejl); }
.daempet { color: var(--daempet); }
.lille   { font-size: .8125rem; }

/* ── Administration ──────────────────────────────────────────────── */

.undernav { display: flex; gap: .25rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.undernav a {
  font-size: .875rem; text-decoration: none; color: var(--daempet);
  padding: .4rem .7rem; border-radius: var(--radius); border: 1px solid var(--kant);
  background: var(--flade);
}
.undernav a:hover { color: var(--tekst); border-color: var(--kant-kraftig); }
.undernav a[aria-current] { background: var(--accent-svag); border-color: transparent; color: var(--accent-mork); font-weight: 500; }

.filter { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.filter input[type=search] { flex: 1 1 12rem; }
.filter select { flex: 0 1 10rem; }
.filter .knap { flex: 0 0 auto; }

.sidevisning { display: flex; gap: .5rem; }

input[type=file] {
  width: 100%; padding: .6rem; font: inherit; font-size: .9375rem;
  border: 1px dashed var(--kant-kraftig); border-radius: var(--radius); background: var(--flade);
}

code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .875em; }

/* ── Indmelding ──────────────────────────────────────────────────── */

/* Valglisten er den vigtigste flade paa mobilen: personalet staar foran en automat
   og skal ramme den rigtige raekke med tommelfingeren. Derfor hele raekken som maal. */
.vaelgeliste { list-style: none; margin: 0; padding: 0; }
.vaelgeliste li + li { border-top: 1px solid var(--kant); }
.vaelgeliste a {
  display: block; padding: .85rem .75rem; text-decoration: none; color: var(--tekst);
  border-radius: var(--radius);
}
.vaelgeliste a:hover { background: var(--bg); }
.vaelgeliste span { display: block; font-weight: 500; }
.vaelgeliste small { display: block; color: var(--daempet); font-size: .8125rem; margin-top: .1rem; }

.valg { display: grid; gap: .5rem; }
.valgmulighed {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .8rem .85rem; border: 1px solid var(--kant-kraftig);
  border-radius: var(--radius); background: var(--flade); cursor: pointer;
}
.valgmulighed:hover { border-color: var(--accent); }
.valgmulighed input { margin-top: .2rem; width: 1.15rem; height: 1.15rem; accent-color: var(--accent); flex: 0 0 auto; }
.valgmulighed input:checked ~ span { font-weight: 500; }
.valgmulighed:has(input:checked) { border-color: var(--accent); background: var(--accent-svag); }

.oplysninger { margin: 0; }
.oplysninger dt {
  font-size: .8125rem; color: var(--daempet); margin-top: .9rem;
}
.oplysninger dt:first-child { margin-top: 0; }
.oplysninger dd { margin: .15rem 0 0; }

.billeder { display: grid; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: .5rem; }
.billeder img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--kant); display: block;
}

/* ── Brugere ─────────────────────────────────────────────────────── */

/* Koden vises kun én gang og skal kunne laeses op i telefonen uden tvivl. */
.kodevisning {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.25rem; letter-spacing: .03em; font-weight: 500;
  background: var(--flade); border: 1px solid var(--kant-kraftig);
  border-radius: var(--radius); padding: .7rem .9rem; margin: 0;
  user-select: all; word-break: break-all; color: var(--tekst);
}

.handlinger { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0; }
.handlinger .knap { flex: 1 1 auto; }

.valgmulighed small { font-weight: 400; font-size: .8125rem; line-height: 1.4; display: block; margin-top: .15rem; }