/* Kom/Gå – fælles stil for kiosk (10" lodret / mobil) og dashboard */
:root {
  --navy: #0d2a4d;
  --navy-moerk: #091e38;
  --groen: #1a9b4f;
  --groen-lys: #d9f2e3;
  --roed: #e53935;
  --roed-lys: #fde3e2;
  --gul: #f5d54a;
  --gul-lys: #fff6cc;
  --graa: #9aa5b1;
  --graa-lys: #eef1f5;
  --blaa: #2f6fd6;
  --blaa-lys: #e3edfb;
  --lilla: #7b4fc9;
  --lilla-lys: #ede6fa;
  --tekst: #10243d;
  --tekst-svag: #5b6b7d;
  --flade: #fff;
  --baggrund: #f3f5f8;
  --radius: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  color: var(--tekst);
  background: var(--baggrund);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; cursor: pointer; border: 0; }
button:disabled { opacity: .6; cursor: default; }

/* ---------- kiosk ---------- */
.kiosk {
  display: flex; flex-direction: column;
  height: 100dvh; max-width: 560px; margin: 0 auto;
  background: var(--flade);
  box-shadow: 0 0 40px rgba(0,0,0,.08);
}
.kiosk-hoved, .kiosk-fod {
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 18px 20px; flex: 0 0 auto;
}
.kiosk-hoved { border-radius: 0 0 50% 50% / 0 0 22px 22px; padding-bottom: 26px; }
.kiosk-fod { border-radius: 50% 50% 0 0 / 22px 22px 0 0; padding-top: 24px; font-size: 14px; }
.kiosk-hoved img { height: clamp(44px, 9vw, 64px); width: auto; max-width: 80%; }
.kiosk-fod img { height: 22px; width: auto; }
.kiosk-fod span { opacity: .85; }

.kiosk-indhold { flex: 1 1 auto; overflow: auto; display: flex; flex-direction: column; }
.skaerm { display: none; flex: 1; flex-direction: column; align-items: center; padding: 22px 20px; gap: 14px; }
.skaerm.aktiv { display: flex; }
.skaerm[data-skaerm="start"] { justify-content: center; }
h1 { margin: 6px 0 0; font-size: clamp(24px, 6vw, 30px); }
h1.lille { font-size: 22px; }
.under { margin: 0; color: var(--tekst-svag); font-size: clamp(14px, 3.6vw, 17px); text-align: center; }

.nr-felt {
  width: 100%; max-width: 360px; min-height: 56px;
  background: var(--graa-lys); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; letter-spacing: 4px; font-variant-numeric: tabular-nums;
}
.nr-felt.tom { color: var(--graa); font-size: 17px; letter-spacing: 0; }
.nr-felt.fejl { animation: ryst .35s; outline: 2px solid var(--roed); }
@keyframes ryst { 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } }

.tastatur {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  width: 100%; max-width: 360px;
}
.tastatur button {
  height: clamp(58px, 11vh, 76px); font-size: 26px; font-weight: 600;
  background: var(--graa-lys); border-radius: 10px; color: var(--tekst);
}
.tastatur button:active { background: #dde3ea; }
.knap-ok {
  width: 100%; max-width: 360px; height: 60px; border-radius: 10px;
  background: var(--navy); color: #fff; font-size: 20px; font-weight: 700;
}
.fejlbesked {
  width: 100%; max-width: 360px; background: var(--roed-lys); color: #a12421;
  border-radius: 10px; padding: 12px 14px; font-size: 15px; text-align: center;
  display: none;
}
.fejlbesked.vis { display: block; }

.medarbejder { text-align: center; margin-top: 4px; }
.medarbejder small { color: var(--tekst-svag); font-size: 14px; }
.medarbejder .nr { font-size: 28px; font-weight: 700; }
.medarbejder .navn { font-size: 20px; font-weight: 600; }
.medarbejder .afd { color: var(--tekst-svag); font-size: 14px; }

.valg { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 12px; }
.valg button {
  display: flex; align-items: center; gap: 16px; text-align: left;
  padding: 18px 20px; border-radius: var(--radius); color: #fff; min-height: 78px;
}
.valg button .ikon {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px;
  background: rgba(255,255,255,.22); display: grid; place-items: center; font-size: 22px;
}
.valg button b { display: block; font-size: 20px; }
.valg button small { display: block; opacity: .9; font-size: 14px; margin-top: 2px; }
.valg .groen { background: var(--groen); }
.valg .navy { background: var(--navy); }
.valg .roed { background: var(--roed); }
.valg .gul { background: var(--gul); color: var(--tekst); }
.valg .gul .ikon { background: rgba(0,0,0,.08); }
.valg .blaa { background: var(--blaa); }
.valg .lilla { background: var(--lilla); }
.valg .graa { background: var(--graa); }
.knap-tilbage {
  width: 100%; max-width: 380px; height: 54px; border-radius: 10px; margin-top: auto;
  background: var(--graa-lys); color: var(--tekst); font-size: 16px; font-weight: 600;
}

.tak-ikon {
  width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center;
  font-size: 58px; margin-top: 10px;
}
.tak-ikon.groen { background: var(--groen-lys); color: var(--groen); }
.tak-ikon.roed { background: var(--roed-lys); color: var(--roed); }
.tak-ikon.gul { background: var(--gul-lys); color: #b58900; }
.tak-ikon.blaa { background: var(--blaa-lys); color: var(--blaa); }
.tak-ikon.lilla { background: var(--lilla-lys); color: var(--lilla); }
.tak-ikon.graa { background: var(--graa-lys); color: var(--tekst-svag); }
.tak-tekst { text-align: center; }
.tak-tekst h1 { font-size: 30px; line-height: 1.15; }
.tak-tekst p { margin: 10px 0 0; color: var(--tekst-svag); font-size: 17px; }
.tak-tekst .tid { margin-top: 18px; color: var(--tekst); font-weight: 600; font-size: 18px; }
.tak-tekst .dato { color: var(--tekst-svag); font-size: 15px; }
.nedtaelling { color: var(--graa); font-size: 13px; }

/* ---------- dashboard ---------- */
.dash { display: grid; grid-template-columns: 240px 1fr; min-height: 100dvh; }
.dash-side {
  background: var(--navy); color: #fff; padding: 22px 18px;
  display: flex; flex-direction: column; gap: 22px;
}
.dash-side .logo img { width: 100%; max-width: 200px; display: block; }
.dash-side nav a {
  display: block; color: #fff; text-decoration: none; padding: 10px 12px; border-radius: 8px; opacity: .85;
}
.dash-side nav a.aktiv { background: rgba(255,255,255,.14); opacity: 1; }
.dash-side .fod { margin-top: auto; font-size: 13px; opacity: .85; }
.dash-side .fod img { display: block; height: 24px; margin-top: 6px; }
.dash-hoved { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dash-hoved h1 { margin: 0; font-size: 26px; }
.dash-hoved p { margin: 2px 0 0; color: var(--tekst-svag); }
.dash-main { padding: 26px 30px; display: flex; flex-direction: column; gap: 22px; }
.soeg { padding: 10px 14px; border: 1px solid #d5dbe3; border-radius: 10px; font-size: 15px; min-width: 240px; }
.live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tekst-svag); }
.live i { width: 10px; height: 10px; border-radius: 50%; background: var(--graa); }
.live.ok i { background: var(--groen); box-shadow: 0 0 0 4px var(--groen-lys); }

.fliser { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.flise { background: var(--flade); border-radius: var(--radius); padding: 16px 18px; display: flex; align-items: center; gap: 14px; border: 1px solid #e3e8ee; text-align: left; font: inherit; color: var(--tekst); cursor: pointer; transition: transform .1s, box-shadow .1s; }
.flise:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(13,42,77,.10); }
.flise.aktiv { outline: 3px solid var(--navy); outline-offset: -1px; box-shadow: 0 4px 14px rgba(13,42,77,.15); }
.filter-maerke { font-weight: 500; font-size: 13px; color: var(--tekst-svag); }
.flise .prik { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 44px; display: grid; place-items: center; font-size: 22px; }
.flise b { font-size: 28px; display: block; line-height: 1; }
.flise span { font-size: 13px; color: var(--tekst-svag); }
.flise.groen { background: #f1faf4; } .flise.groen .prik { background: var(--groen); color: #fff; }
.flise.gul { background: #fffbea; } .flise.gul .prik { background: var(--gul); }
.flise.roed { background: #fff3f2; } .flise.roed .prik { background: var(--roed); color: #fff; }
.flise.graa .prik { background: var(--graa-lys); }
.flise.navy .prik { background: var(--navy); color: #fff; }

.kort { background: var(--flade); border-radius: var(--radius); border: 1px solid #e3e8ee; overflow: auto; }
.kort h2 { margin: 0; padding: 14px 18px; font-size: 16px; border-bottom: 1px solid #e3e8ee; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid #eef1f5; vertical-align: middle; }
th { background: #f7f9fb; color: var(--tekst-svag); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
tr:last-child td { border-bottom: 0; }
.status { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--graa); }
.status.groen::before { background: var(--groen); }
.status.gul::before { background: var(--gul); }
.status.roed::before { background: var(--roed); }
.status.blaa::before { background: var(--blaa); }
.status.lilla::before { background: var(--lilla); }
.status.graa { color: var(--tekst-svag); }
.tom-raekke td { color: var(--tekst-svag); text-align: center; padding: 26px; }
.haendelser { list-style: none; margin: 0; padding: 0; }
.haendelser li { display: flex; gap: 14px; padding: 10px 18px; border-bottom: 1px solid #eef1f5; font-size: 14px; }
.haendelser li:last-child { border-bottom: 0; }
.haendelser time { color: var(--tekst-svag); font-variant-numeric: tabular-nums; flex: 0 0 48px; }
.to-kolonner { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); gap: 22px; align-items: start; }

@media (max-width: 900px) {
  .dash { grid-template-columns: 1fr; }
  .dash-side { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 14px; padding: 14px 16px; }
  .dash-side nav { display: flex; gap: 4px; }
  .dash-side .fod { margin: 0 0 0 auto; display: flex; align-items: center; gap: 8px; }
  .dash-side .fod img { margin: 0; height: 18px; }
  .dash-main { padding: 18px 16px; }
  .to-kolonner { grid-template-columns: 1fr; }
  th:nth-child(3), td:nth-child(3) { display: none; }
}

/* ---------- dashboard: visninger og formularer ---------- */
.visning { display: none; flex-direction: column; gap: 22px; }
.visning.aktiv { display: flex; }
.dash-vaerktoej { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.to-kolonner.omvendt { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.formular { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.formular label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--tekst-svag); font-weight: 600; }
.formular label.raekke { flex-direction: row; align-items: center; gap: 8px; color: var(--tekst); font-weight: 500; }
.formular input:not([type=checkbox]), .formular select {
  padding: 9px 11px; border: 1px solid #d5dbe3; border-radius: 8px; font: inherit; color: var(--tekst); background: #fff;
}
.formular input[readonly] { background: var(--graa-lys); }
.formular .to { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.knapper { display: flex; gap: 8px; }
button.primaer { background: var(--navy); color: #fff; padding: 10px 18px; border-radius: 8px; font-weight: 600; }
button.sekundaer { background: var(--graa-lys); color: var(--tekst); padding: 10px 14px; border-radius: 8px; }
select.lille { max-width: 130px; }
button.lille, select.lille, a.lille { font-size: 13px; padding: 5px 9px; border-radius: 6px; background: var(--graa-lys); color: var(--tekst); border: 1px solid #d5dbe3; }
button.lille:hover, a.lille:hover { background: #dde3ea; }
.periodevalg .lille { background: #fff; }
td.handlinger { white-space: nowrap; }
td.handlinger button + button { margin-left: 6px; }
tr.inaktiv td { color: var(--graa); }
tr.inaktiv td b { color: var(--graa); }
.formfejl { color: #a12421; font-size: 13px; min-height: 1em; }
.svag { color: var(--tekst-svag); }
.haendelser em { font-style: normal; font-size: 11px; color: var(--tekst-svag); background: var(--graa-lys); padding: 1px 6px; border-radius: 6px; margin-left: auto; align-self: center; }
.eksempel { font-size: 13px; color: var(--tekst-svag); display: flex; flex-direction: column; gap: 6px; }
.valg-eksempel {
  display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border-radius: 12px; color: #fff; cursor: default;
}
.valg-eksempel .ikon { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 32px; background: rgba(255,255,255,.22); display: grid; place-items: center; font-size: 17px; }
.valg-eksempel b { display: block; font-size: 16px; color: inherit; }
.valg-eksempel small { display: block; opacity: .9; font-size: 12px; }
.valg-eksempel.groen { background: var(--groen); } .valg-eksempel.roed { background: var(--roed); }
.valg-eksempel.blaa { background: var(--blaa); } .valg-eksempel.lilla { background: var(--lilla); }
.valg-eksempel.graa { background: var(--graa); }
.valg-eksempel.gul { background: var(--gul); color: var(--tekst); } .valg-eksempel.gul .ikon { background: rgba(0,0,0,.08); }
.besked { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #a12421; color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
@media (max-width: 900px) {
  .to-kolonner.omvendt { grid-template-columns: 1fr; }
  .dash-side .logo img { max-width: 150px; }
  th:nth-child(6), td:nth-child(6) { display: none; }
}

/* ---------- rapport ---------- */
.periodevalg { display: flex; gap: 6px; flex-wrap: wrap; }
.datofelt { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tekst-svag); font-weight: 600; }
.datofelt input { padding: 6px 9px; border: 1px solid #d5dbe3; border-radius: 8px; font: inherit; color: var(--tekst); }
.knap-link { text-decoration: none; display: inline-block; font-weight: 600; color: var(--navy); background: var(--navy) !important; color: #fff !important; border-color: var(--navy) !important; }
#rapportTabel th, #rapportTabel td { padding: 8px 10px; }
#rapportTabel th { white-space: normal; font-size: 11px; line-height: 1.2; }
td.tal, th.tal { text-align: right; font-variant-numeric: tabular-nums; }
th.tal .status { justify-content: flex-end; }
tr.klikbar { cursor: pointer; }
tr.klikbar:hover td { background: #f7f9fb; }