/* Designtokens — hentet fra Price Request-appen (DESIGN-REFERENCE, byg konsistent).
   Bruges af alle portalens sider. Ret KUN her, aldrig lokalt i siderne. */

/* Inter hentes her og ikke i hver enkelt side: så får ALLE sider den — også
   login.html og de ordresider, serveren selv genererer (server-node/routes/orders.js),
   som kun linker dette stylesheet. Svarer Google ikke, fejler importen stille og
   alt falder tilbage til fallback-stakken i --font nedenfor (Segoe UI på Windows). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Farver */
  --green: #01621f;        /* topnav, primærknapper, aktive tabs, links, pills */
  --nav-text: #ffffff;
  --bg: #f5f6f8;           /* sidebaggrund */
  --card: #ffffff;         /* kort, tabeller, paneler */
  --panel-subtle: #fafbfc; /* sekundære rækker, hover */
  --border: #e6e9ef;
  --border-2: #d0d4e4;
  --text: #323338;
  --muted: #676879;
  --ok-bg: #e3f2e9;        /* succes-pill */
  --ok-text: #01621f;
  --warn-bg: #fff3e0;      /* afventer/attention */
  --warn-text: #9a6700;
  --err-bg: #ffebe9;       /* blokeret / mangler */
  --err-text: #cf222e;

  /* Typografi */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Form */
  --radius: 14px;         /* som mockuppens kort/paneler */
  --pad-card: 16px 20px;

  /* Topbarens højde. Den er sticky, så alt der selv skal klæbe (fx hovedet i
     kundelisten) skal klæbe HERUNDER. Ét sted, så de to ikke glider fra
     hinanden, hvis topbarens padding ændres. */
  --nav-h: 58px;
}

* { box-sizing: border-box; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

/* Overskrifter er almindelig tekstfarve som i mockuppen (= Price Request).
   Grøn er reserveret til links, pills, primærknapper og topbaren, så den
   beholder sin betydning som "her kan du handle". */
h1, h2, h3 { color: var(--text); }
h1 { font-size: 20px; margin: 0 0 4px; }
h2 { font-size: 16px; }
a { color: var(--green); }

/* Lead-linjen under h1 */
.lead { color: var(--muted); margin: 0 0 20px; }

/* Brødkrumme som egen linje UNDER topbaren (ikke inde i den grønne bar).
   .nav .crumb i components.css er mere specifik og rører vi ikke. */
.wrap > .crumb { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.wrap > .crumb a { color: var(--green); text-decoration: none; }
.wrap > .crumb a:hover { text-decoration: underline; }

code {
  background: var(--panel-subtle);
  border: 1px solid var(--border);
  padding: 0 4px;
  border-radius: 4px;
  font-size: 12px;
}

/* ---------------------------------------------------------------------------
   Mockup-tilretninger (topbar, indholdsbredde, sprogskifter, hub-kort).
   De ligger her og ikke i siderne, fordi de gælder hele portalen.
   components.css ejes af en anden lige nu, så hvor en regel dér skal
   overskrives, gøres det med ét ekstra led i selektoren (body > .nav osv.)
   i stedet for at redigere filen. Flyt dem ind i components.css senere.
   --------------------------------------------------------------------------- */

/* Topbar: samme afstand som mockuppen + plads til undertitlen */
body > .nav { padding: 12px 24px; gap: 12px; }
.nav .sub { color: rgba(255, 255, 255, .82); font-size: 12px; }

/* Indholdsbredde som mockuppen */
body > .wrap { max-width: 1180px; margin: 0 auto; padding: 22px 20px; }

/* Sprogskifteren er ét sammenhængende segment, ikke to løse knapper */
body .nav .lang {
  display: inline-flex; border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 8px; overflow: hidden;
}
body .nav .lang button {
  background: transparent; color: rgba(255, 255, 255, .85);
  border: 0; border-radius: 0; padding: 6px 12px;
  font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer;
}
body .nav .lang button.active { background: #fff; color: var(--green); }

/* ---------------------------------------------------------------------------
   Hub: kundelisten (hub.js)

   Én kunde pr. række. Kolonnebredderne står ÉT sted (--hubcols) og bruges af
   både hovedet og hver enkelt række, så tallene altid står under deres
   overskrift. Hver celle får sin kolonne tildelt eksplicit (.c-*), så en
   kolonne kan skjules på små skærme uden at resten skrider.

   Rækkehøjden er sat med min-height + nowrap + ellipsis: lange skemanavne
   klippes i stedet for at ombryde, og alle rækker er dermed lige høje.
   --------------------------------------------------------------------------- */

/* Værktøjslinje: søgning, tælling og knappen der folder "Tilføj kunde" ud */
.hubbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.hubsearch {
  flex: 1 1 260px; min-width: 180px; max-width: 420px;
  padding: 9px 12px; font-family: var(--font); font-size: 14px; color: var(--text);
  background: var(--card); border: 1px solid var(--border-2); border-radius: 10px;
}
.hubsearch:focus { border-color: var(--green); outline: 2px solid var(--green); outline-offset: 1px; }
.hubcount { color: var(--muted); font-size: 12px; white-space: nowrap; }
.hubbar .btn { margin-left: auto; }
.hubhint { flex-basis: 100%; color: var(--muted); font-size: 12px; }

/* Selve listen */
.clist {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  /* dot · kunde(+skema) · trin · næste skridt · i kø · verificeret ·
     til bekræftelse · pil
     Trin og "næste skridt" ligger FØR tallene, fordi det er dem man læser
     rækken for. Skemaet er flyttet ind i kundekolonnen som anden linje, så de
     to nye kolonner kunne komme ind uden at listen blev for smal.
     Talkolonnerne er faste og brede nok til deres egen overskrift, så hoved og
     tal flugter uanset hvor lange kunde- og skemanavnene er. */
  --hubcols: 9px minmax(0, 2.1fr) 46px minmax(0, 2.6fr) 62px 92px 116px 14px;
}
.chead, .crow {
  display: grid; grid-template-columns: var(--hubcols);
  align-items: center; gap: 14px; padding: 0 16px;
}
.chead {
  height: 36px; background: var(--panel-subtle); border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  color: var(--muted); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px;
  position: sticky; top: var(--nav-h); z-index: 1;   /* under topbaren (z-index 10) */
}
/* Rækkehøjden er FAST (ikke min-height): kundekolonnen har to linjer — navn
   og skema — og de har hver sin faste linjehøjde, også når skemaet er tomt.
   Så er alle 100 rækker præcis lige høje, og kanterne flugter. */
.crow {
  height: 54px; border-top: 1px solid var(--border);
  color: var(--text); text-decoration: none;
}
#hub-rows > .crow:first-child { border-top: 0; }
#hub-rows > .crow:last-child { border-radius: 0 0 var(--radius) var(--radius); }
a.crow:hover { background: var(--panel-subtle); }
a.crow:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

/* Cellerne: fast kolonne hver, én linje, klip med ellipsis */
.chead > span, .crow > span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.c-dot   { grid-column: 1; }
.c-name  { grid-column: 2; }
.c-step  { grid-column: 3; }
.c-next  { grid-column: 4; }
.c-q     { grid-column: 5; }
.c-v     { grid-column: 6; }
.c-m     { grid-column: 7; }
.c-go    { grid-column: 8; }
.c-all   { grid-column: 1 / -1; }

/* Kunde + skema i to linjer i samme kolonne. Begge klippes for sig, så et
   langt skemanavn ikke skubber navnet. */
.crow .c-name { display: block; line-height: 1.25; }
.crow .c-name > b, .crow .c-name > i {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crow .c-name > b { font-weight: 600; font-size: 14px; height: 18px; }
.crow .c-name > i {
  color: var(--muted); font-size: 12px; font-style: normal; height: 16px;
}

/* Trinnet: "3/7". Tallet er det man skimmer efter, så det står i tekstfarve
   med ens ciffer-bredde — ikke som en farvet pille, for farven ligger i
   prikken og i tallene til højre. */
.chead .c-step { text-align: center; }
.crow .c-step { text-align: center; }
.crow .c-step .step {
  font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 700;
  color: var(--muted);
}

/* Næste skridt: rækkens vigtigste tekst, derfor almindelig tekstfarve og fed */
.crow .c-next .next { font-weight: 600; }
.crow .c-go { color: var(--muted); text-align: right; }
/* .crow .by og .crow .pill er væk: rækken bruger ikke længere en pille til at
   sige "beskrivelse i gang". Det er trin 1 af 7 og står som handlingstekst i
   c-next — en pille dér lignede en blindgyde. */
.crow.empty { height: 56px; color: var(--muted); }

/* Tal højrestillet med ens ciffer-bredde, så kolonnen kan skimmes lodret */
.chead .num, .crow .num { text-align: right; font-variant-numeric: tabular-nums; }
.crow .num { font-weight: 600; }
.crow .num.none { color: var(--muted); font-weight: 400; }
.crow .num.g { color: var(--ok-text); }
.crow .num.a { color: var(--warn-text); }
.crow .sub { color: var(--muted); font-size: 11px; font-weight: 400; }

/* Statusprikken. Scopet til .crow, så #decision-skinnen ikke røres. */
.crow .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.crow .dot.g { background: var(--ok-text); }
.crow .dot.a { background: var(--warn-text); }
.crow .dot.n { background: var(--border-2); }

/* "Tilføj kunde": foldet sammen bag knappen, så listen er det primære */
.addbox {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin-bottom: 12px;
}
.addbox h2 { margin: 0 0 10px; font-size: 15px; }
.addbox .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.addbox .fields .full { grid-column: 1 / -1; }
.addbox input, .addbox textarea {
  width: 100%; padding: 9px 12px; font-family: var(--font); font-size: 14px;
  color: var(--text); background: var(--card);
  border: 1px solid var(--border-2); border-radius: 10px;
}
.addbox textarea { resize: vertical; }
.addbox input:focus, .addbox textarea:focus {
  border-color: var(--green); outline: 2px solid var(--green); outline-offset: 1px;
}
.addbox .actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }

/* Smalle skærme: trinnet og næste skridt SKAL blive — det er dem rækken er
   til for. Derfor ryger kø- og verificeret-kolonnen og pilen først; kun
   "til bekræftelse" bliver af tallene. */
@media (max-width: 900px) {
  .clist { --hubcols: 9px minmax(0, 1fr) 42px minmax(0, 1.5fr) 0 0 84px 0; }
  .chead .c-q, .crow .c-q, .chead .c-v, .crow .c-v,
  .chead .c-go, .crow .c-go { display: none; }
  .chead, .crow { gap: 10px; padding: 0 12px; }
  .addbox .fields { grid-template-columns: 1fr; }
  .hubbar .btn { margin-left: 0; }
}

/* Hub (uden server): de statiske kort i index.html ligger stadig i et grid */
.cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px; align-items: start;
}
.cards > .card { margin-bottom: 0; }    /* afstanden styres af gap, ikke af margin */
.cards .note { grid-column: 1 / -1; }   /* forklaringer/formularer fylder hele bredden */

.card.hub {
  display: block; text-decoration: none; color: var(--text);
  padding: 16px; margin: 0;
  transition: border-color .15s ease, transform .15s ease;
}
.card.hub:hover { border-color: var(--green); transform: translateY(-2px); }
.card.hub:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.card.hub h3 { margin: 0 0 2px; font-size: 16px; }
.card.hub .meta { color: var(--muted); font-size: 12px; margin-bottom: 12px; }
.card.hub .pill { margin-left: 0; font-size: 11px; font-weight: 700; padding: 3px 8px; }

/* Kunder uden færdig beskrivelse: nedtonet og ikke klikbart */
.card.hub.ghost { opacity: .6; cursor: default; }
.card.hub.ghost:hover { transform: none; border-color: var(--border); }

/* Statuslinjen nederst på kortet */
.statline {
  display: flex; flex-wrap: wrap; gap: 16px;
  margin-top: 12px; font-size: 12px; color: var(--muted);
}
.statline b { color: var(--text); }
.statline .dotg { color: var(--ok-text); }
.statline .dota { color: var(--warn-text); }

/* På smalle skærme ryger undertitlen, så brand + sprogskifter bliver på én linje */
@media (max-width: 820px) {
  .nav .sub { display: none; }
}