:root {
  /* ---------- Visuelt redesign (bekræftet, se IMPLEMENTERINGSPROMPT_visuelt-
     redesign_1.md) — to ÆGTE brand-kilder i stedet for opfundne farver:
     navy sampled fra firmalogoet, orange sampled fra firmabilens advarsels-
     stribe-wrap. Erstatter den tidligere generiske SaaS-blå (#1c64f2). ---------- */

  /* Neutrale flader */
  --paper: #FAF6EF;
  --paper-tint: #F1EBDF;
  --ink: #201C18;
  --muted: #6B6155;
  --border: #E4DCCB;

  /* Brand navy — ægte, fra logoet. Bruges KUN til: topbar, sidebar
     (admin/desktop), og selve blueprint-tegningslærredet — ikke generel
     "mørk UI-chrome" andre steder, så navyen bevarer sin vægt som
     brandelement. --brand-dark er en internt udledt, mørkere nuance af
     samme navy (ikke en ny farve) — bruges kun til hover/gradient-dybde,
     hvor selve --brand alene ikke giver nok kontrast (fx knap-hover,
     login-baggrundsgradient). */
  --brand: #00244F;
  --brand-dark: #001835;
  --blueprint: #00244F;          /* samme værdi, semantisk navn til tegningslærredet */
  --blueprint-line: #BFE3FF;
  --blueprint-line-dim: #6B93B8;

  /* Accent — ægte, fra firmabilen. VIGTIGT: --accent (ren #FF6600) bruges KUN
     som fritstående flade (kant, ikon, statuspunkt-nabo, stribetekstur,
     fremdriftsbjælke-fyld) — ALDRIG med hvid tekst ovenpå, den kombination
     fejler WCAG AA (2.94:1). Til knapper med hvid tekst: brug --accent-btn.
     Til orange som TEKSTFARVE på lys baggrund (fx links, hover-tekst): brug
     --accent-text. */
  --accent: #FF6600;
  --accent-btn: #C24E00;         /* 4.79:1 mod hvid tekst — bestået */
  --accent-btn-stripe: #AD4400;  /* til den forsigtige diagonale stribetekstur */
  --accent-text: #B84A00;        /* 4.85:1 på --paper — bestået */

  /* Status — ÉN vigtig regel: de "rene" farver (--ok/--warn) bruges KUN til
     fritstående statuspunkter (cirkler/dots) eller som baggrund BAG hvid
     tekst (fx G/A-knapper — begge bestået, se README). Så snart farven er
     TEKST PÅ LYS BAGGRUND (fx i en pille/badge), skal *-text-varianten
     bruges i stedet — de rene varianter fejler WCAG AA i den kombination.
     --bad består allerede som tekst (4.96:1), ingen separat *-text nødvendig. */
  --ok: #3F7D45;      --ok-bg: #E8F0E5;   --ok-text: #2B5E30;   /* 6.56:1 */
  --warn: #C99A2E;    --warn-bg: #FBF1DC; --warn-text: #8A6110; /* 4.93:1 */
  --bad: #B23A2E;     --bad-bg: #F8E7E3;                        /* 4.96:1 */

  /* Typografi: IBM Plex Sans til UI-chrome (labels, knapper, overskrifter,
     brødtekst), IBM Plex Mono til DATA (punktnumre, svejser-ID'er,
     dimensioner, datoer, chargenumre, koordinater — se .num-strong m.fl.
     nedenfor). Funktionel regel, ikke kun æstetisk: mono gør "0"/"O" og
     "1"/"l" utvetydige og linjerer tal pænt op ved hurtig aflæsning i felten. */
  --font-ui: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  /* Bevaret fra tidligere design (uændret af redesignet) */
  --shadow-sm: 0 1px 2px rgba(32,28,24,.05), 0 1px 3px rgba(32,28,24,.07);
  --shadow-md: 0 4px 10px rgba(32,28,24,.07), 0 2px 4px rgba(32,28,24,.06);
  --radius: 12px;
  --sidebar-w: 232px;
  font-family: var(--font-ui);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); line-height: 1.45; -webkit-font-smoothing: antialiased; font-family: var(--font-ui); }
h1, h2, h3 { letter-spacing: -0.01em; }

.app-shell { display: flex; align-items: stretch; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0; background: var(--paper);
  border-right: 1px solid var(--border); padding: 18px 14px; display: flex;
  flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 22px; }
.nav-section {
  font-size: 10.5px; font-weight: 800; color: var(--muted); text-transform: uppercase;
  letter-spacing: .06em; margin: 14px 10px 6px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;
  color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600;
}
.nav-item:hover { background: var(--paper-tint); }
.nav-item.active { background: var(--paper-tint); color: var(--brand); }
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
@media (max-width: 860px) {
  .sidebar { display: none; }
}

/* Admin-only sidebar (admin.html — hele siden er admin-gated, se komponent-
   mønster 4 i redesign-specen): navy PM-værktøjs-stil, KUN her. Genbruger
   samme .nav-item/.nav-section/.sidebar-brand-markup som resten af appen,
   blot med andre farveregler, så ingen DOM/JS-struktur er ændret. Bevidst
   IKKE anvendt på dashboard.html's fælles sidebar (den ses også af Basic-
   feltbrugere, som skal beholde den lyse, enkle stil). */
.sidebar.admin-sidebar { background: var(--blueprint); border-right-color: var(--blueprint); }
.admin-sidebar .brand-text strong, .admin-sidebar .brand-text span { color: white; }
.admin-sidebar .brand-text span { color: var(--blueprint-line-dim); }
.admin-sidebar .nav-section { color: var(--blueprint-line-dim); }
.admin-sidebar .nav-item { color: var(--blueprint-line); }
.admin-sidebar .nav-item:hover { background: rgba(255,255,255,.08); }
.admin-sidebar .nav-item.active { background: rgba(255,255,255,.14); color: white; }

header.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; background: var(--brand); border-bottom: 3px solid var(--accent);
  position: sticky; top: 0; z-index: 20; box-shadow: var(--shadow-sm); color: white;
}
header.topbar > div:first-child { display: flex; align-items: center; gap: 10px; }
header.topbar h1 { font-size: 17px; margin: 0; font-weight: 700; color: white; }
header.topbar a.back {
  color: rgba(255,255,255,.85); text-decoration: none; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; padding: 6px 4px; border-radius: 6px;
}
header.topbar a.back:hover { color: white; background: rgba(255,255,255,.14); }
header.topbar .sync-status, header.topbar .sync-status span { color: rgba(255,255,255,.92); }
header.topbar .dot { box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
.breadcrumb { color: var(--muted); font-size: 13px; }

.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(155deg, var(--brand), var(--brand-dark));
  color: white; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; letter-spacing: -0.02em;
  box-shadow: 0 2px 5px rgba(0,24,53,.35);
}
.brand-logo { height: 36px; width: auto; border-radius: 7px; flex-shrink: 0; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 15px; font-weight: 700; color: var(--ink); }
.brand-text span { font-size: 11.5px; color: var(--muted); font-weight: 500; }

.icon-badge {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 8px; font-size: 15px; margin-right: 9px; vertical-align: middle; flex-shrink: 0;
}
.icon-badge.green { background: var(--paper-tint); color: var(--brand); }
.icon-badge.blue { background: #eaf2ff; color: #1d5fd6; }
.icon-badge.orange { background: rgba(255,102,0,.12); color: var(--accent-text); }
.icon-badge.purple { background: #f3ecff; color: #6d28d9; }
.card h3 { display: flex; align-items: center; }

.status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.status-dot.aktiv { background: var(--ok); }
.status-dot.afsluttet { background: var(--muted); }
/* Redesign — komponentmønster 1 ("status-signaturen"): generiske ok/warn/bad-
   varianter, genbrugt af admin-oversigtsrækkerne (dashboardView.js's
   renderOrderProgress/renderTilsyn/renderCertAlerts). */
.status-dot.ok { background: var(--ok); }
.status-dot.warn { background: var(--warn); }
.status-dot.bad { background: var(--bad); }

main { padding: 24px; max-width: 1120px; margin: 0 auto; width: 100%; }

button, .btn {
  font-family: var(--font-ui);
  font-size: 14.5px; font-weight: 600; padding: 10px 16px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--paper); cursor: pointer;
  color: var(--ink); transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
button:hover, .btn:hover { border-color: var(--muted); background: var(--paper-tint); }
.btn-primary { background: var(--brand); color: white; border-color: var(--brand); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
/* Primærhandlings-/accent-knap: forsigtig diagonal stribetekstur (et ekko af
   hazard-striberne på firmabilen), KUN på denne knap-rolle — ikke sekundære/
   tertiære knapper eller andre flader, se komponentmønster 3 i redesign-specen. */
.btn-accent {
  background: repeating-linear-gradient(135deg, var(--accent-btn) 0px, var(--accent-btn) 12px, var(--accent-btn-stripe) 12px, var(--accent-btn-stripe) 14px);
  color: white; border: none; box-shadow: 0 2px 8px rgba(194,78,0,.35); font-weight: 700;
}
.btn-accent:hover { filter: brightness(1.06); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); box-shadow: none; }
.btn-ghost:hover { background: var(--paper-tint); border-color: transparent; }
button:disabled { opacity: .5; cursor: not-allowed; }

.card {
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 14px; box-shadow: var(--shadow-sm);
}
.card-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* På smalle telefonskærme klemmes knap-gruppen (fx "Åbn tegning →") ned til
   et par pixel bred og teksten knækker over 3 linjer. Lad rækken knække i to
   linjer i stedet — titel øverst, knapper i fuld bredde nedenunder. */
@media (max-width: 480px) {
  .card-row { flex-wrap: wrap; }
  .card-row > div:last-child { width: 100%; justify-content: flex-end; }
}
.card h3 { margin: 0 0 4px; font-size: 15.5px; font-weight: 700; }
.card .meta, .meta { color: var(--muted); font-size: 13px; }

/* Formular-sektioner i registreringsmodalen: let tonet baggrund så felterne
   grupperes visuelt (Materiale/Sporbarhed, Kontrol/Tæthed, Foto), med god
   afstand så man ikke rammer forkert felt med handsker på. */
.form-card {
  background: var(--paper-tint); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 16px 18px; margin: 0 0 14px;
}
.form-card > .form-card-title {
  font-size: 12px; font-weight: 800; color: var(--brand); text-transform: uppercase;
  letter-spacing: .05em; margin: 0 0 4px;
}

/* Fastholdt statusbjælke øverst i registreringsmodalen. */
.point-status-bar {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  background: var(--paper-tint); border-radius: 10px; padding: 10px 14px;
  margin: 12px 0 4px; font-size: 13px; font-weight: 700; color: var(--brand);
}
.point-status-bar .sep { color: var(--border); font-weight: 400; }
.point-status-bar .ok { color: var(--ok-text); }
.point-status-bar .pending { color: var(--warn-text); }
.point-status-bar .bad { color: var(--bad); }

/* Fed skrift på nøgletal (punktnr., Ø-mål, chargenr. osv.), så de er lette at
   aflæse på afstand/i sollys. Mono-skrift gør "0"/"O" og "1"/"l" utvetydige
   og linjerer tal pænt op ved hurtig aflæsning i felten (redesign-regel). */
.num-strong { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Fremdriftsbjælke pr. tegning i ordreoversigten. Orange = "i gang" (fritstående
   flade, ikke tekst — tilladt), grøn = færdig. */
.progress-track {
  height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; margin-top: 8px;
}
.progress-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; }
.progress-fill.complete { background: var(--ok); }
.progress-label { font-family: var(--font-mono); font-size: 12px; color: var(--muted); font-weight: 700; margin-top: 5px; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .01em; }
.badge-ok { background: var(--ok-bg); color: var(--ok-text); }
.badge-warn { background: var(--warn-bg); color: var(--warn-text); }
.badge-bad { background: var(--bad-bg); color: var(--bad); }
.badge-muted { background: var(--paper-tint); color: var(--muted); }

input, select, textarea {
  font-family: var(--font-ui);
  font-size: 14.5px; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--border);
  width: 100%; background: var(--paper); font-family: inherit; color: var(--ink);
  transition: border-color .12s ease, box-shadow .12s ease;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,36,79,.14);
}
label:not(.btn) { display: block; font-size: 12.5px; color: var(--muted); margin: 14px 0 5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* "Big button" segmented toggles — store, handske-venlige tapmål (min. 52px høje),
   tydelig farve-feedback, brugt til Rørtype (Single/Twin) m.fl. */
.toggle-group { display: flex; gap: 8px; }
.toggle-group button {
  flex: 1; border: 2px solid var(--border); border-radius: 10px; background: var(--paper);
  box-shadow: none; min-height: 52px; font-size: 15.5px; font-weight: 700; color: var(--ink);
}
.toggle-group button.active {
  background: var(--brand); color: white; border-color: var(--brand);
  box-shadow: 0 2px 8px rgba(0,36,79,.3);
}

/* G/A-knapper (Visuel, Tæthed osv.) — samme store, håndske-venlige stil, med
   markant grøn/rød feedback så status kan aflæses på afstand. Hvid tekst på
   --ok/--bad er kontroltestet (hhv. 4.96:1 og 5.94:1 — bestået). */
.checkgroup { display: flex; gap: 10px; }
.checkgroup button {
  flex: 1; min-height: 56px; font-size: 15.5px; font-weight: 800; border-width: 2px;
  border-radius: 10px; letter-spacing: .01em;
}
.checkgroup button.g.active { background: var(--ok); color: white; border-color: var(--ok); box-shadow: 0 2px 10px rgba(63,125,69,.35); }
.checkgroup button.a.active { background: var(--bad); color: white; border-color: var(--bad); box-shadow: 0 2px 10px rgba(178,58,46,.35); }

.sync-status {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700;
  color: var(--muted); background: rgba(255,255,255,.1); padding: 6px 12px; border-radius: 999px;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.dot.offline { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); animation: dot-pulse 1.4s ease-in-out infinite; }
.dot.pending { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); animation: dot-pulse 1.4s ease-in-out infinite; }
@keyframes dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(1.3); }
}

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(32,28,24,.5); backdrop-filter: blur(1px); display: flex;
  align-items: flex-end; justify-content: center; z-index: 50;
}
.modal {
  background: var(--paper); width: 100%; max-width: 640px; max-height: 92vh; overflow-y: auto;
  border-radius: 18px 18px 0 0; padding: 22px 24px 32px; box-shadow: 0 -8px 30px rgba(0,0,0,.15);
}
@media (min-width: 700px) {
  .modal-backdrop { align-items: center; }
  .modal { border-radius: 16px; box-shadow: var(--shadow-md), 0 12px 40px rgba(0,0,0,.12); }
}
.modal.modal-wide { max-width: 860px; }
.modal h2 { margin: 0 0 4px; font-size: 19px; }
.modal .close { position: absolute; }
.modal-header { display: flex; justify-content: space-between; align-items: flex-start; }

/* Fane-skift som en tydelig segmented control (i stedet for diskret underline),
   så det er soleklart hvilken fane (Svejsning/Muffe) man står i. */
.tabs {
  display: flex; gap: 6px; margin: 16px 0 18px; background: var(--paper-tint);
  border-radius: 12px; padding: 5px;
}
.tabs button {
  flex: 1; border: none; border-radius: 8px; background: none; box-shadow: none;
  padding: 12px 4px; margin: 0; font-weight: 800; color: var(--muted); font-size: 14.5px;
}
.tabs button.active { color: var(--brand); background: var(--paper); box-shadow: var(--shadow-sm); }

/* Parti-fanebjælke på order.html: dynamisk antal chips (ikke et fast 2-vejs
   segmented control som .tabs), da antallet af partier varierer pr. ordre. */
.parti-tabs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 4px 0 18px; }
.parti-tab {
  display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--border);
  border-radius: 999px; background: var(--paper); padding: 9px 16px;
  font-weight: 700; font-size: 13.5px; color: var(--ink); cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.parti-tab:hover { border-color: var(--brand); }
.parti-tab.active { background: var(--brand); color: white; border-color: var(--brand); box-shadow: var(--shadow-sm); }
.parti-tab .parti-pct { font-family: var(--font-mono); font-size: 11.5px; font-weight: 800; opacity: .7; }
.parti-tab.active .parti-pct { opacity: .9; }
.parti-tab-add {
  border: 1.5px dashed var(--border); border-radius: 999px; background: transparent;
  color: var(--muted); padding: 9px 16px; font-weight: 700; font-size: 13.5px; cursor: pointer;
}
.parti-tab-add:hover { border-color: var(--accent); color: var(--accent-text); }

/* Kompakt parti-filter i drawing.html's toolbar — den generelle select-regel
   ovenfor sætter width:100%, hvilket ikke passer i en vandret værktøjslinje. */
.toolbar select#partiFilter {
  width: auto; padding: 8px 12px; font-size: 13.5px; font-weight: 700; min-height: 40px;
}

/* Punkter der ikke matcher det aktive parti-filter dæmpes, så man stadig kan
   se dem i deres rumlige kontekst, men tydeligt ser hvilke der er "i fokus". */
.pin.dimmed { opacity: .2; filter: grayscale(65%); transition: opacity .15s ease; }
.pin { transition: opacity .15s ease; }
.point-row.dimmed { opacity: .45; }
.parti-chip {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
  color: var(--brand); background: var(--paper-tint); border-radius: 999px; padding: 2px 8px;
  margin-left: 6px; vertical-align: middle;
}

/* Tegning + punktliste side om side på desktop. På smedenes telefon (≤860px,
   samme breakpoint som sidebaren) er en fast 320px-kolonne bredere end hele
   skærmen — det klemte tegningen ned til et par pixel bred stribe og gjorde
   den reelt usynlig/ubrugelig. Stak dem i stedet lodret: tegning (fuld bredde,
   touch-zoom/pan) øverst, punktliste under. */
.drawing-layout { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
@media (max-width: 860px) {
  .drawing-layout { grid-template-columns: 1fr; }
}

/* Tegningslærred: "blueprint"-baggrund (navy + tyndt gitter) BAG selve det
   scannede tegningsbillede — redesign-specens komponentmønster 2. Denne
   mørke, tekniske streg-stil er bevidst forbeholdt netop dette skærmbillede
   og spredes ikke til resten af appen (se drawingView.js for selve gitter-
   SVG'et/pin-renderingen). */
.drawing-wrap {
  position: relative; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background-color: var(--blueprint); touch-action: none;
  height: 70vh; min-height: 420px; box-shadow: var(--shadow-sm);
  /* Tyndt "teknisk" gitter-mønster bag selve tegningsfotoet — kun synligt i
     margener/uafdækkede områder (fotoet dækker typisk det meste), se
     redesign-specens komponentmønster 2/mockup-filens #grid-pattern. */
  background-image:
    linear-gradient(rgba(191,227,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191,227,255,.08) 1px, transparent 1px);
  background-size: 24px 24px;
}
@media (max-width: 860px) {
  .drawing-wrap { height: 52vh; min-height: 340px; }
}
#zoomLayer { position: absolute; top: 0; left: 0; transform-origin: 0 0; }

/* Pin: rund plade (ikke dråbeform) så S/M-badges kan sidde i hjørnerne uden at
   blive skævvredet af rotationen. Kraftig hvid ring + mørk skygge, så pins
   skærer klart igennem både lyse og mørke/scannede tegninger. */
.pin {
  position: absolute; width: 34px; height: 34px; border-radius: 50%;
  background: var(--bad); transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.55), 0 0 0 3px white, 0 0 0 4.5px rgba(0,0,0,.35);
  transition: transform .12s ease;
}
.pin:hover { transform: translate(-50%, -50%) scale(1.08); }
.pin .pin-num { color: white; font-size: 13px; font-weight: 800; font-family: var(--font-mono); }
.pin.complete { background: var(--ok); }
.pin.partial { background: var(--warn); }

/* Skab-punkter (alarm-/husindføringsskabe) er en anden slags punkt end
   svejsning/muffe (point_type='skab') — firkantet facon i stedet for rund,
   så de er nemme at skelne fra svejsepunkter på afstand på tegningen. */
.pin.skab { border-radius: 10px; background: var(--muted); }
.pin.skab.complete { background: var(--ok); }
.pin.skab.partial { background: var(--warn); }
/* Del B.6: skab-registrering afvist (alarm_cabinets.status='A') — samme røde
   farve som "ikke startet" ville have haft af sig selv (base .pin), men sat
   eksplicit her så det ikke afhænger stiltiende af cascade-rækkefølgen. */
.pin.skab.bad { background: var(--bad); }

.pin-badge {
  position: absolute; width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 8.5px; font-weight: 800; color: white; background: var(--muted);
  box-shadow: 0 0 0 2px white; top: -3px;
}
.pin-badge.done { background: var(--ok); }
.pin-badge.s { left: -6px; }
.pin-badge.m { right: -6px; }

.sidebar-list { max-height: 70vh; overflow-y: auto; }
.empty-state { text-align: center; color: var(--muted); padding: 44px 20px; font-size: 14px; }
.file-drop {
  border: 2px dashed var(--border); border-radius: var(--radius); padding: 24px; text-align: center;
  color: var(--muted); cursor: pointer;
}
.photo-thumb { width: 100%; border-radius: 9px; margin-top: 8px; border: 1px solid var(--border); }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; align-items: center; }
.spacer { flex: 1; }
.legend-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.legend-table td, .legend-table th { border: 1px solid var(--border); padding: 6px 8px; text-align: left; }

/* ---------- Login-skærm ---------- */
.login-body { background: linear-gradient(160deg, var(--brand), var(--brand-dark)); min-height: 100vh; }
.login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card {
  background: var(--paper); border-radius: 18px; padding: 32px 28px 28px; width: 100%; max-width: 380px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.login-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.login-card h1 { font-size: 21px; margin: 0 0 2px; }
.login-submit { width: 100%; justify-content: center; margin-top: 20px; min-height: 52px; font-size: 15.5px; }
.login-error {
  background: var(--bad-bg); color: var(--bad); border-radius: 9px; padding: 10px 12px;
  font-size: 13px; font-weight: 700; margin-top: 14px;
}

/* ---------- Bruger-badge i sidebaren ---------- */
.user-badge {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; margin: -10px 0 12px; background: var(--paper-tint); border-radius: 10px;
}
.user-badge-info { display: flex; flex-direction: column; gap: 3px; line-height: 1.1; }
.user-badge-info strong { font-size: 13px; }
.role-tag {
  display: inline-block; width: fit-content; font-size: 10px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
}
.role-tag.admin { background: rgba(255,102,0,.12); color: var(--accent-text); }
.role-tag.basic { background: var(--paper-tint); color: var(--brand); }
.user-badge .btn-ghost { padding: 6px 8px; font-size: 15px; }

/* ---------- Admin-only handlinger (slet/redigér) ---------- */
.icon-action {
  border: 1px solid var(--border); background: var(--paper); border-radius: 8px;
  width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center;
  justify-content: center; font-size: 14.5px; box-shadow: none; flex-shrink: 0;
}
.icon-action.danger { color: var(--bad); }
.icon-action.danger:hover { background: var(--bad-bg); border-color: var(--bad); }
.icon-action:hover { background: var(--paper-tint); }
.photo-thumb-wrap { position: relative; display: inline-block; max-width: 100%; }
.photo-delete-btn {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(178,58,46,.92); color: white; border: 2px solid white; font-weight: 800;
  font-size: 13px; padding: 0; box-shadow: 0 2px 6px rgba(0,0,0,.35);
}

/* Låste felter for Basic-brugere (data er allerede registreret én gang —
   kun Admin kan rette tastefejl bagefter). */
.locked-note {
  background: var(--warn-bg); color: var(--warn-text); border-radius: 9px; padding: 9px 12px;
  font-size: 12.5px; font-weight: 700; margin: 10px 0;
}
fieldset.locked-fields { border: none; padding: 0; margin: 0; opacity: .62; pointer-events: none; }

/* ---------- NDT-rapporter pr. parti ---------- */
.ndt-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 4px; }
.ndt-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--paper-tint);
  font-size: 13px;
}
.ndt-row a { color: var(--accent-text); text-decoration: none; font-weight: 700; }
.ndt-row a:hover { text-decoration: underline; }

/* Statistik-modal */
/* Fase 6.5: dashboard/forside — kort-grid til "Fortsæt hvor du slap"/"Mine
   registreringer"/"Aktive ordrer" og admin-overbliksafsnittet. */
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 16px; align-items: start; }
.stats-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.stats-kpi {
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--paper-tint);
  display: flex; flex-direction: column; gap: 2px;
}
.stats-kpi strong { font-family: var(--font-mono); font-size: 20px; color: var(--ink); }
.stats-kpi span { font-size: 12px; color: var(--muted); }
.stats-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.stats-table th, .stats-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.stats-table th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .02em; }
.stats-table td:nth-child(3), .stats-table td:nth-child(4), .stats-table td:nth-child(5),
.stats-table th:nth-child(3), .stats-table th:nth-child(4), .stats-table th:nth-child(5) { text-align: right; }
.stats-table td.d-mono { font-family: var(--font-mono); }
.stats-total { font-family: var(--font-mono); margin-top: 14px; text-align: right; font-size: 17px; font-weight: 800; color: var(--ink); }

/* Prisliste (Stamdata) */
.price-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 18px; }
.price-table th, .price-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.price-table th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; }
.price-table input { width: 110px; text-align: right; font-family: var(--font-mono); }

/* ---------- Admin-overbliksrækker (dashboard.html's #adminSection — se
   redesign-specens komponentmønster 4: "tæt, ren listevisning med
   statuspunkt + mono-data + statuspille pr. række"). Bruges KUN i
   admin-kortene (Ordre-fremdrift, Tilsyn-varslet, Certifikater, Aktivitet pr.
   medarbejder), ikke i feltvisningerne. ---------- */
.admin-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 13px;
}
.admin-row:last-child { border-bottom: none; }
.admin-row:hover { background: var(--paper-tint); }
.admin-row-main { flex: 1; min-width: 0; }
.admin-row-title { font-weight: 600; }
.admin-row-sub { font-family: var(--font-mono); color: var(--muted); font-size: 11.5px; }
/* Generisk hjælpeklasse: sæt mono-skrift på et enkelt data-felt (fx et tal i
   en tabelcelle), uden at skulle indføre en helt ny row-komponent for det. */
.d-mono { font-family: var(--font-mono); }