/* ============================================================
   Status-optælling · Lav Et System
   Blueprint-identitet: monokrom blæk på papir, én rust-accent,
   hårfine linjer, mono-labels, serif-overskrifter.
   Lys/mørk følger prefers-color-scheme.
   ============================================================ */

/* ---------- IBM Plex (selv-hostet, ingen CDN) ---------- */
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }

:root {
  --paper: #f4f4ef;
  --ink: #1a1a1a;
  --ink-soft: #565656;
  --line: rgba(26, 26, 26, 0.30);
  --line-faint: rgba(26, 26, 26, 0.16);
  --accent: #a63a24;
  --accent-svag: rgba(166, 58, 36, 0.08);
  --ok: #1d6b34;
  --ok-svag: rgba(29, 107, 52, 0.10);
  --flade: rgba(26, 26, 26, 0.055);
  --grid-minor: rgba(26, 26, 26, 0.04);
  --grid-major: rgba(26, 26, 26, 0.07);
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  /* serif droppet — display-elementer (titler, store tal, valgt vare) bruger nu IBM Plex Sans */
  --serif: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0e0e10;
    --ink: #e8e8e6;
    --ink-soft: #9b9b98;
    --line: rgba(232, 232, 230, 0.30);
    --line-faint: rgba(232, 232, 230, 0.14);
    --accent: #ff9670;
    --accent-svag: rgba(255, 150, 112, 0.12);
    --ok: #8fd19b;
    --ok-svag: rgba(143, 209, 155, 0.12);
    --flade: rgba(232, 232, 230, 0.07);
    --grid-minor: rgba(232, 232, 230, 0.04);
    --grid-major: rgba(232, 232, 230, 0.07);
  }
}

/* ---------- grund ---------- */

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background-color: var(--paper);
  /* diskret millimeter-net som på lavetsystem-forsiden */
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px, 8px 8px, 8px 8px;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: var(--paper); }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------- inline-ikoner (erstatter emojis, arver currentColor) ---------- */

.ikon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  display: inline-block;
  vertical-align: -0.15em;
}
.nav .ikon { width: 1em; height: 1em; vertical-align: -0.12em; }
.tile .ikon { width: 26px; height: 26px; }
button .ikon, .scan-knap .ikon, .excel-knap .ikon { vertical-align: -0.18em; margin-right: 2px; }
h1 .ikon, h2 .ikon, h3 .ikon, h4 .ikon { vertical-align: -0.1em; }
.chevron .ikon { width: 1em; height: 1em; vertical-align: -0.1em; }
/* status-ikon "åben/kører" fremhæves med accent */
.ikon-aaben { color: var(--accent); }

.wrap { max-width: 640px; margin: 0 auto; padding: 16px 16px 40px; }
.wrap.bred { max-width: 1100px; }

/* ---------- formular-grundelementer ---------- */

input, select, textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 10px 12px;
  /* nulstil arv fra mono-uppercase labels, så indtastede værdier vises normalt */
  text-transform: none;
  letter-spacing: normal;
}
input::placeholder { color: var(--ink-soft); opacity: 0.85; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }

input[type="checkbox"] {
  width: 18px; height: 18px; padding: 0;
  accent-color: var(--accent);
}

button {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 11px 16px;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}
button:hover { color: var(--accent); border-color: var(--accent); }

button.lille { padding: 7px 12px; font-size: 0.7rem; }

button.fare { color: var(--accent); border-color: var(--accent); background: transparent; }
button.fare:hover { color: var(--paper); background: var(--accent); }

button.primary {
  flex: 1;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 15px 18px;
  font-size: 0.9rem;
}
button.primary:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }

button.sekundaer {
  border-color: var(--line);
  color: var(--ink-soft);
  padding: 15px 18px;
}
button.sekundaer:hover { color: var(--ink); border-color: var(--ink); }

/* ---------- topbjælke ---------- */

.topbar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: calc(14px + env(safe-area-inset-top, 0px)) 18px 18px;
}
.topbar h1 { margin: 12px 0 0; font-size: 1.35rem; }
.topbar .sub { margin: 6px 0 0; color: var(--ink-soft); font-size: 0.92rem; max-width: 70ch; }

.nav {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nav .spacer { flex: 1; }
.nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }

/* brand-kicker: "Lav Et System" */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.brand::before {
  content: "";
  width: 9px; height: 9px;
  border: 1.5px solid var(--accent);
  flex: none;
}

/* ---------- forside: afdelinger og rum ---------- */

.afd-kort {
  background: var(--paper);
  border: 1px solid var(--line);
  margin-bottom: 14px;
}
.afd-hoved {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  background: none; border: none; cursor: pointer;
  padding: 18px 16px;
  font-family: var(--sans);
  font-size: 1.05rem; font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink); text-align: left;
}
.afd-hoved:hover { background: var(--flade); color: var(--ink); }
.afd-navn { flex: 1; }
.afd-antal {
  font-family: var(--mono);
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft);
}
.chevron { transition: transform 200ms ease; color: var(--ink-soft); font-size: 0.85em; }
.afd-hoved.aaben .chevron { transform: rotate(180deg); color: var(--accent); }

.rum-liste {
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column;
}
/* [hidden] skal vinde over display:flex ovenfor, ellers folder menuen ikke sammen */
.rum-liste[hidden] { display: none; }
.rum {
  display: block; text-decoration: none; color: var(--ink);
  padding: 14px 16px; font-size: 1rem;
  border-bottom: 1px solid var(--line-faint);
}
.rum:last-child { border-bottom: none; }
.rum:hover, .rum:active { background: var(--flade); }
.sektion-navn {
  font-family: var(--mono);
  font-size: 0.68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-soft);
  margin: 14px 16px 4px;
}
.rum-liste > .sektion-navn:first-child { margin-top: 12px; }
.tom, .note { color: var(--ink-soft); font-size: 0.9rem; }
.note { margin-top: 18px; text-align: center; }
.tom { padding: 12px 16px; }

.placeholder {
  background: var(--paper);
  border: 1px dashed var(--line);
  padding: 22px;
}
.placeholder ul { line-height: 1.9; }

/* ---------- login ---------- */

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-kort {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 30px 24px 26px;
  width: 100%; max-width: 380px;
  display: flex; flex-direction: column; gap: 14px;
}
.login-kort .brand { margin-bottom: 4px; }
.login-kort h1 { margin: 0; font-size: 1.3rem; }
.login-kort .sub { margin: -8px 0 4px; color: var(--ink-soft); }
.login-kort label {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--mono);
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.login-kort button { margin-top: 4px; padding: 13px 16px; font-size: 0.85rem; }

.fejl {
  background: var(--accent-svag);
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 10px 12px; margin: 0; font-size: 0.9rem;
}
.flash {
  background: var(--ok-svag);
  color: var(--ok);
  border: 1px solid var(--ok);
  padding: 10px 14px; margin: 0 0 14px; font-size: 0.92rem;
}

/* ---------- blokke / admin / tabeller ---------- */

.blok {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 18px 16px 20px;
  margin-bottom: 16px;
}
.blok h2 {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
}

.raekke-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.raekke-form input, .raekke-form select { padding: 9px 11px; font-size: 0.95rem; }
.raekke-form .checkbox, .checkbox {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft);
}

table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th {
  font-family: var(--mono);
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft);
  text-align: left; padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line-faint); }
th.hnr, td.nr { text-align: right; font-variant-numeric: tabular-nums; }
tr.inaktiv { opacity: 0.55; }
.raekke-form + table td form { display: inline; }

.nulstil-form { display: flex; gap: 6px; align-items: center; }
.nulstil-form input { padding: 6px 9px; font-size: 0.82rem; }

.retur {
  font-family: var(--mono);
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none; text-align: center;
  align-self: center;
}
.retur:hover { color: var(--accent); }

/* ---------- optalt-oversigt ---------- */

.runde-vaelg {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft);
}
.runde-vaelg label { display: inline-flex; align-items: center; gap: 8px; }
.runde-vaelg select { padding: 8px 10px; font-size: 0.95rem; }
.total { font-size: 1.05rem; margin: 4px 0 18px; }
.kat { margin-bottom: 26px; }
.kat > h2 {
  font-size: 1.35rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  margin: 0 0 6px;
}
.land { margin: 12px 0 12px 8px; }
.land > h3 { margin: 10px 0 6px; font-size: 1.05rem; }
.omraade { margin-left: 14px; margin-bottom: 12px; }
.omraade > h4 {
  margin: 8px 0 4px;
  font-family: var(--mono);
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.subtotal {
  font-family: var(--mono);
  font-size: 0.7rem; font-weight: 400;
  letter-spacing: 0.04em; text-transform: none;
  color: var(--ink-soft);
  margin-left: 8px;
}

.opt-soeg { padding: 8px 10px; min-width: 200px; font-size: 0.95rem; }
.ryd-link {
  font-family: var(--mono); font-size: 0.72rem;
  color: var(--ink-soft); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.ryd-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.excel-knap {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  border: 1px solid var(--ink);
  padding: 8px 12px;
  margin-left: 10px;
  transition: color 150ms ease, border-color 150ms ease;
}
.excel-knap:hover { color: var(--accent); border-color: var(--accent); }

.ikke-talt {
  background: var(--paper);
  border: 1px dashed var(--line);
  padding: 12px 16px; margin-top: 18px;
}
.ikke-talt summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.ikke-talt-liste { list-style: none; padding: 0; margin: 10px 0 0; columns: 2; }
.ikke-talt-liste li { padding: 3px 0; break-inside: avoid; }
@media (max-width: 600px) { .ikke-talt-liste { columns: 1; } }

/* ---------- forside-dashboard ---------- */

.dash { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.dash-kort {
  flex: 1; min-width: 130px;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 14px 16px;
}
.dash-kort.stor {
  flex: 2; min-width: 220px;
  border-color: var(--ink);
  border-left: 3px solid var(--accent);
}
.dash-kort span {
  display: block;
  font-family: var(--mono);
  font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.dash-kort strong {
  display: block; margin-top: 4px;
  font-family: var(--serif);
  font-size: 1.6rem; font-weight: 600; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.dash-kort.stor strong { font-size: 1.9rem; }
.dash-kort small { font-family: var(--mono); color: var(--ink-soft); font-size: 0.72rem; }

.dash-grafer { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 16px; }
.bar-rk { display: flex; align-items: center; gap: 10px; margin: 7px 0; font-size: 0.85rem; }
.bar-navn { width: 110px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar { flex: 1; background: var(--line-faint); height: 12px; overflow: hidden; }
.bar-fyld { display: block; height: 100%; background: var(--ink); }
.bar-val {
  width: 80px; text-align: right; flex-shrink: 0;
  font-family: var(--mono); font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

/* ---------- admin flise-menu ---------- */

.genveje { margin-bottom: 18px; }
.genvej-gruppe { margin-bottom: 16px; }
.genvej-gruppe h3 {
  font-family: var(--mono);
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 16px 8px;
  text-decoration: none; color: var(--ink);
  font-size: 1.4rem;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.tile span {
  font-family: var(--mono);
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-align: center;
}
.tile:hover { border-color: var(--accent); background: var(--flade); }

/* ---------- katalog / vare-formularer ---------- */

.vare-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 12px; align-items: end; }
.vare-form label {
  display: flex; flex-direction: column; gap: 5px;
  font-family: var(--mono);
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft);
}
.vare-form input { padding: 9px 10px; font-size: 0.95rem; }
.vare-form button { align-self: end; height: 42px; }

.soege-linje { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.soege-linje input[name=q] { flex: 1; min-width: 220px; padding: 9px 11px; }
.antal-note { color: var(--ink-soft); font-size: 0.85rem; margin: 4px 0 10px; }
.handlinger { display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.handlinger form { display: inline; }
.lille-link {
  font-size: 0.82rem;
  color: var(--ink-soft); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.lille-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
code {
  font-family: var(--mono);
  background: var(--line-faint);
  padding: 1px 6px;
  font-size: 0.82rem;
}

.vision-rk { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pris-felt { width: 90px; padding: 6px 8px; text-align: right; font-variant-numeric: tabular-nums; }
tr.mangler-pris { background: var(--accent-svag); }
.dato-felt { padding: 6px 8px; }
.alder-celle { white-space: nowrap; color: var(--ink-soft); font-size: 0.85rem; }

.gem-baand {
  position: sticky; bottom: 0;
  background: var(--paper);
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
  margin-top: 8px;
  border-top: 1px solid var(--line);
}

/* ---------- sammenlign runder ---------- */

.sml-vaelg { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-top: 12px; }
.sml-vaelg label {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--mono);
  font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.sml-vaelg select { padding: 8px 10px; font-size: 0.95rem; }
.sml-vaelg .pil { align-self: center; font-size: 1.2rem; padding-bottom: 6px; color: var(--ink-soft); }
.sml-vaelg button { padding: 10px 16px; }

.sml-total { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 16px; }
.sml-kort {
  flex: 1; min-width: 150px;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 14px;
}
.sml-kort span {
  display: block;
  font-family: var(--mono);
  font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.sml-kort strong {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}
.sml-kort.forbrug strong { color: var(--accent); }
.sml-kort.tilgang strong { color: var(--ok); }
td.neg { color: var(--accent); font-weight: 600; }
td.pos { color: var(--ok); font-weight: 600; }

/* ---------- QR-ark og tælleliste ---------- */

.qr-vaelg {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft);
}
.qr-vaelg label { display: inline-flex; align-items: center; gap: 8px; }
.qr-vaelg select { padding: 8px 10px; font-size: 0.95rem; }
.qr-vaelg button { padding: 9px 14px; }

.qr-ark { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 16px; max-width: 1100px; margin: 0 auto; }
/* labels holdes altid sorte på hvidt, så QR-koderne kan scannes og printes */
.qr-label {
  border: 1px solid var(--line);
  padding: 10px; text-align: center;
  background: #fff; color: #1a1a1a;
  break-inside: avoid;
}
.qr-label img { width: 100%; max-width: 120px; height: auto; }
.qr-navn { font-size: 0.82rem; font-weight: 600; margin-top: 4px; line-height: 1.2; }
.qr-kode { font-size: 0.7rem; color: #565656; font-family: var(--mono); }

.rum-hoved { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rum-hoved select { padding: 8px 10px; font-size: 0.95rem; }
.kun-print { display: none; }
.taelle-tabel .antal-kol { width: 90px; }

.kode-blok {
  background: #1a1a1a; color: #e8e8e6;
  font-family: var(--mono);
  padding: 14px 16px;
  border: 1px solid var(--line);
  overflow-x: auto;
  font-size: 0.82rem; line-height: 1.6;
}

/* ---------- tælle-flade ---------- */

.net {
  font-family: var(--mono);
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.net.online { color: var(--ok); }
.net.offline { color: var(--accent); font-weight: 700; }

.runde-linje {
  display: inline-flex; gap: 8px; align-items: center;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft);
}
.runde-linje select { padding: 8px 10px; font-size: 0.95rem; }
.advarsel { color: var(--accent); }

.scan-knap {
  display: block; width: 100%;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink);
  padding: 16px;
  font-size: 0.9rem; letter-spacing: 0.1em;
}
.scan-knap:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
#video {
  width: 100%; max-height: 300px;
  margin-top: 10px;
  background: #000; object-fit: cover;
  border: 1px solid var(--line);
}
.manuel-rk, .soeg-rk { display: flex; gap: 8px; margin-top: 10px; }
.manuel-rk input, .soeg-rk input { flex: 1; min-width: 0; padding: 12px; }
.manuel-rk button { padding: 0 18px; }
.soeg-rk { position: relative; display: block; }
.soeg-resultat {
  list-style: none; margin: 6px 0 0; padding: 0;
  border: 1px solid var(--line);
  background: var(--paper);
}
.soeg-resultat li { padding: 13px 14px; cursor: pointer; border-bottom: 1px solid var(--line-faint); }
.soeg-resultat li:last-child { border-bottom: none; }
.soeg-resultat li:hover, .soeg-resultat li:active { background: var(--flade); }
.scan-besked { color: var(--accent); font-size: 0.9rem; margin: 8px 0 0; min-height: 1em; }

.foto-rk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.foto-rk .antal-note { margin: 0; }

/* rum-lås banner: fremhævet med rust-accent (status "låst") */
.laast-banner { border: 1px solid var(--accent); border-left: 3px solid var(--accent); background: var(--accent-svag); }
.laast-banner .valgt-navn { display: flex; align-items: center; gap: 8px; }
.laast-banner .valgt-meta { margin: 6px 0 14px; }

.valgt-blok { border: 1px solid var(--ink); border-left: 3px solid var(--accent); }
.opret-blok { border: 1px dashed var(--accent); }
.opret-rk { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.opret-rk input { padding: 12px; }

.valgt-navn { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; }
.valgt-meta { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-soft); margin-bottom: 12px; }
.antal-rk { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 14px; }
.antal-rk input {
  width: 96px; text-align: center;
  font-family: var(--mono); font-size: 1.6rem;
  padding: 8px;
}
.stepper {
  width: 54px; height: 54px;
  font-family: var(--mono); font-size: 1.5rem; font-weight: 400;
  border: 1px solid var(--line);
  background: var(--paper); color: var(--ink);
  padding: 0;
}
.stepper:hover { border-color: var(--ink); color: var(--ink); }
.gem-rk { display: flex; gap: 10px; }

.total-badge {
  font-family: var(--mono);
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 3px 10px;
  margin-left: 8px;
}
.ko-note {
  background: var(--accent-svag);
  border: 1px dashed var(--accent);
  color: var(--ink);
  padding: 9px 12px;
  font-size: 0.85rem;
}
.tael-liste { list-style: none; margin: 0; padding: 0; }
.tael-linje { display: flex; align-items: center; gap: 10px; padding: 11px 2px; border-bottom: 1px solid var(--line-faint); }
/* når rummet er låst: skjul fortryd-knapperne i talt-listen (serveren blokerer også) */
.rum-laast .tael-linje .fare { display: none; }
.tael-linje > div { flex: 1; min-width: 0; }
.tl-navn { display: block; font-weight: 600; }
.tl-meta { display: block; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft); }
.genaaben-form { display: flex; gap: 6px; }
.genaaben-form input { padding: 6px 9px; font-size: 0.82rem; }

/* ---------- print ---------- */

@media print {
  :root {
    --paper: #fff;
    --ink: #000;
    --ink-soft: #444;
    --line: rgba(0, 0, 0, 0.5);
    --line-faint: rgba(0, 0, 0, 0.25);
    --accent: #000;
    --accent-svag: transparent;
    --flade: transparent;
  }
  body { background: #fff; background-image: none; color: #000; }
  .skjul-print { display: none !important; }
  .kun-print { display: block; }
  .qr-ark { gap: 6px; padding: 0; }
  .qr-label { border-color: #ccc; }
  .taelle-tabel .antal-kol { border-bottom: 1px solid #333; }
  .taelle-tabel td, .taelle-tabel th { padding: 7px 8px; }
}

/* ---------- responsivt ---------- */

@media (max-width: 600px) {
  .topbar { padding-left: 16px; padding-right: 16px; }
  .nav { flex-wrap: wrap; row-gap: 8px; }
  .bar-navn { width: 92px; }
  table { font-size: 0.88rem; }
  th, td { padding: 7px 8px; }
}