/* Solcelle-app · Organic-tema (terracotta/sage, lokale systemskrifter).
   Erstatter public/static/app.css. Gamle klassenavne er bevaret, så øvrige
   sider stadig virker — de arver blot det varme tema. */
:root {
  color-scheme: light;
  --color-bg: #f5ead8;
  --color-surface: #ebddc5;
  --color-text: #201e1d;
  --color-accent: #c67139;
  --color-accent-2: #7a8a5e;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);
  --color-neutral-200: #eee7db; --color-neutral-300: #dcd3c4; --color-neutral-400: #c0b6a5;
  --color-neutral-600: #82796a; --color-neutral-700: #645c50; --color-neutral-800: #474238;
  --color-accent-100: #fff2eb; --color-accent-300: #ffc6a5; --color-accent-400: #f6a06b;
  --color-accent-500: #d67f48; --color-accent-600: #b2622d; --color-accent-800: #643312; --color-accent-900: #402310;
  --color-accent-2-100: #f0fae1; --color-accent-2-200: #e1eecc; --color-accent-2-300: #ccdbb2;
  --color-accent-2-500: #8fa073; --color-accent-2-600: #728157; --color-accent-2-700: #56633f;
  --color-accent-2-800: #3d472b; --color-accent-2-900: #272e1b;
  --font-heading: ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius-md: 16px; --radius-lg: 28px;
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);

  /* Bagudkompatible aliaser (bruges af de øvrige sider) */
  --surface-1: var(--color-surface);
  --page: var(--color-bg);
  --text-primary: var(--color-text);
  /* Læsbarhed frem for finhed (Claus, 16/8-2026: "dine tekster står med
     grå skrift, som næsten ikke kan læses").
     Målt kontrast mod kortbaggrunden #ebddc5 efter WCAG:
        før:  --text-muted  #82796a = 3,21  — UNDER minimumskravet 4,5
              --text-secondary #645c50 = 4,92 — lige akkurat
        nu:   #2b2823 = 11,4 og #33302a = 9,8 — begge "god"
     Hierarkiet bæres nu af skriftstørrelse og -vægt, ikke af lys grå. */
  --text-secondary: #2b2823;
  --text-muted: #33302a;
  --gridline: var(--color-neutral-300);
  --baseline: var(--color-neutral-400);
  --border: var(--color-divider);
  /* Seriefarver: stærke og tydeligt forskellige (Claus, 9/8-2026 — de gamle
     jordfarver kunne ikke skelnes fra hinanden i graferne). Gul er gjort
     gylden frem for ren gul, ellers drukner den i den beige baggrund. */
  --series-1: #f0a400;  /* Produktion — stærk gul */
  --series-2: #d92020;  /* Forbrug — stærk rød */
  --series-3: #1a9e37;  /* Eksport — stærk grøn */
  --series-4: #1f6ce8;  /* Import — stærk blå */
  --series-5: #8f2fd4;  /* Femte serie — stærk lilla */
  --good: #1a9e37;
  /* --bad manglede, mens flere skabeloner rakte ud efter den (pool.twig med
     reservefarve, og jeg selv uden). En variabel, halvdelen af koden tror
     findes, er værre end ingen: den fejler stille til "arv fra forælderen".
     Samme røde som forbrugsserien, så farven betyder det samme overalt. */
  --bad: #d92020;

  /* ADVARSELSFARVEN MANGLEDE OGSÅ. Jeg skrev først var(--warn) i poolvarslet
     og opfandt dermed en variabel, ligesom med --bad. Samme gule som
     produktionsserien: en farve skal betyde det samme overalt i appen. */
  --warn: #f0a400;
}

/* ---------------------------------------------------------------------------
   [hidden] SKAL VINDE OVER LAYOUT.
   Browserens egen regel for hidden er display:none, men den kommer fra
   UA-stylesheet'et og taber til enhver klasse, der selv sætter display. Skrev
   man .pool-varsel { display:flex } og satte hidden på elementet, var det
   derfor SYNLIGT alligevel.
   Claus 25/8-2026: "Nu står der et gult felt med alarm, men der står ingen
   tekst i feltet." Feltet var aldrig skjult; det viste sin hårdkodede
   ALARM-overskrift og en tom liste, mens serveren sagde alarm: false.
   Samme fælde lå i .vejr på forsiden, som har display:flex og hidden — den
   har stået synlig med "–" i felterne, indtil JavaScript nåede at fylde den.
   Én regel dækker alle nuværende og fremtidige tilfælde. !important er her
   ikke dovenskab: hidden betyder "dette er ikke relevant lige nu", og dét
   skal slå enhver layoutregel.
   --------------------------------------------------------------------------- */
[hidden] { display: none !important; }

.logout-form { margin: 0; }
.logout-link {
  appearance: none;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--page); color: var(--text-primary);
  font-family: var(--font-body); font-size: 15px; line-height: 1.55;
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 400; letter-spacing: -0.015em; line-height: 1.12; }
a { color: var(--color-accent); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-600); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
main { max-width: 1080px; margin: 0 auto; padding: 16px; }

/* ── Gammel topbar (øvrige sider) ── */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; background: var(--surface-1); border-bottom: 1px solid var(--border);
}
.brand { font-family: var(--font-heading); font-weight: 400; font-size: 18px; }
.topbar nav a { color: var(--text-secondary); text-decoration: none; margin-left: 16px; }
.topbar nav a.active { color: var(--color-accent); font-weight: 600; }
.topbar nav a.muted { color: var(--text-muted); }

.page-date { font-size: 20px; font-family: var(--font-heading); margin: 4px 0 14px; }

/* ── Live-sidens sidebar-layout ── */
.layout { display: grid; grid-template-columns: 210px 1fr; min-height: 100vh; }
.sidebar {
  background: var(--color-accent-2-900); color: var(--color-accent-2-100);
  padding: 26px 18px; display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0; height: 100vh;
}
.sidebar .brand {
  color: #fff; display: inline-flex; align-items: center; gap: 8px;
  font-size: 20px; margin-bottom: 26px;
}
.sidebar nav { display: flex; flex-direction: column; gap: 4px; }
.sidebar nav a {
  color: inherit; text-decoration: none; font-size: 14px;
  padding: 9px 14px; border-radius: 999px;
}
.sidebar nav a:hover { background: var(--color-accent-2-800); color: #fff; }
.sidebar nav a.active { background: var(--color-accent-2-700); color: #fff; }
.sidebar .foot { margin-top: auto; font-size: 12px; opacity: 0.92; }
.content { padding: 26px; min-width: 0; }
.content-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.content-head h2 { margin: 0; font-size: 32px; }

@media (max-width: 800px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .sidebar .brand { margin-bottom: 0; margin-right: auto; }
  .sidebar nav { flex-direction: row; flex-wrap: wrap; }
  .sidebar .foot { display: none; }
}

/* ── Kort, tiles, tags ── */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 13px; margin-bottom: 18px; }
.tile, .card {
  background: var(--color-surface); border: none;
  border-radius: calc(var(--radius-lg) * 1.15); padding: 14px 16px;
}
.card { margin-bottom: 18px; }
.card.elev { box-shadow: var(--shadow-sm); }
.tile .label, .card-kicker {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-800);
}
.tile .label.sage, .card-kicker.sage { color: var(--color-accent-2-700); }
.tile .value { font-family: var(--font-heading); font-size: 26px; margin-top: 2px; }
.tile .sub, .card-meta { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.tile.saving { background: var(--color-accent-2-200); }
.tile.saving .label { color: var(--color-accent-2-800); }
.tile.saving .value, .tile.saving .sub { color: var(--color-accent-2-900); }
.card h2 { margin: 0 0 8px; font-size: 17px; color: var(--text-primary); }
.chart { width: 100%; height: 320px; }
.chart.small { height: 200px; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.duo > .card { margin-bottom: 0; }
@media (max-width: 1000px) { .duo { grid-template-columns: 1fr; } }

.tag {
  display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em;
  padding: 3px 10px; border-radius: 999px;
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-200); color: var(--color-neutral-800); }

.devgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px 26px; font-size: 13px; }
.devgrid .dev { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
@media (max-width: 1000px) { .devgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .devgrid { grid-template-columns: 1fr; } }

/* ── Kontroller, login m.m. (bevaret fra før, Organic-toner) ── */
.controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.controls button, .controls input[type=date] {
  background: var(--color-surface); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px;
  font: inherit; cursor: pointer;
}
.controls button:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.controls button.active { border-color: var(--color-accent); color: var(--color-accent-800); background: var(--color-accent-100); font-weight: 600; }
.controls button:disabled { opacity: 0.45; cursor: wait; }
.controls textarea {
  background: var(--color-surface); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 6px 12px; font: inherit;
}

.login-box {
  max-width: 340px; margin: 12vh auto; background: var(--color-surface);
  border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-md);
}
.login-box h1 { font-size: 22px; margin: 0 0 16px; }
.login-box input[type=password] {
  width: 100%; padding: 10px 14px; font: inherit; border-radius: 999px;
  border: 1px solid var(--baseline); background: var(--page); color: var(--text-primary);
}
.login-box button {
  width: 100%; margin-top: 12px; padding: 10px; font: inherit;
  font-family: var(--font-heading); border: 0; border-radius: 999px;
  background: var(--color-accent); color: var(--color-bg); cursor: pointer;
}
.login-box button:hover { background: var(--color-accent-600); }
.error { color: #a33b2b; font-size: 13px; margin-top: 8px; }
.stale { color: var(--color-accent-600); font-size: 13px; }

/* Ordbog */
.ordbog-q {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-left: 3px; vertical-align: super;
  font-size: 10px; font-weight: 700; line-height: 1; cursor: pointer;
  color: var(--text-muted); border: 1px solid var(--border); border-radius: 50%; user-select: none;
}
.ordbog-q:hover, .ordbog-q:focus { color: var(--color-accent); border-color: var(--color-accent); outline: none; }
#ordbog-tip {
  position: fixed; z-index: 999; max-width: 340px; max-height: 70vh; overflow-y: auto;
  right: 12px; bottom: 12px;
  padding: 12px 14px; background: var(--color-surface); color: var(--text-primary);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  font-size: 13px; line-height: 1.55; opacity: 0; visibility: hidden; transition: opacity 0.12s ease;
}
#ordbog-tip.vis { opacity: 1; visibility: visible; }
#ordbog-tip strong { display: block; margin-bottom: 4px; font-size: 13px; }
#ordbog-tip p { margin: 0; color: var(--text-secondary); }
#ordbog-tip hr { border: 0; border-top: 1px solid var(--gridline); margin: 10px 0; }

/* Markdown-svar fra AI-analysen */
.md-body { line-height: 1.6; }
.md-body h1, .md-body h2, .md-body h3 { color: var(--text-primary); margin: 16px 0 6px; }
.md-body h1 { font-size: 17px; } .md-body h2 { font-size: 15px; } .md-body h3 { font-size: 14px; }
.md-body p, .md-body ul, .md-body ol { margin: 8px 0; }
.md-body li { margin: 3px 0; }
.md-body code { background: rgba(128,128,128,0.15); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }
.md-body table { border-collapse: collapse; margin: 10px 0; }
.md-body th, .md-body td { border: 1px solid var(--border); padding: 5px 10px; text-align: left; }
.md-body th { color: var(--text-secondary); }
.md-body blockquote { border-left: 3px solid var(--border); margin: 8px 0; padding: 2px 12px; color: var(--text-muted); }

/* main ligger nu inde i .content (sidebar-layout) — lad indholdet fylde bredden. */
main.content { max-width: none; margin: 0; }

/* ====================================================================
   Anvisninger — "hvad skal jeg gøre nu"
   ==================================================================== */

#raad-kort { border-left: 4px solid var(--accent, #c7752a); }

.raad {
  padding: 12px 14px; margin-bottom: 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--page);
}
/* Et råd, der kræver en handling, skal skille sig ud fra et, der kun
   oplyser. Farven er kun et supplement — overskriften siger det også,
   så det virker uden farvesyn. */
.raad-gor { border-left: 4px solid #b3541e; }
.raad-obs { border-left: 4px solid #4a6b4a; }

.raad h3 {
  margin: 0 0 6px; font-size: 16px; font-weight: 650;
  color: var(--text-primary);
}
/* Al brødtekst i anvisningerne er PRIMÆR tekstfarve, ikke dæmpet.
   Claus 16/8-2026: "SKRIV alle tekster med sort skrift, så de træder
   klart frem." Et forbehold, man ikke gider læse, er intet forbehold. */
.raad p { margin: 0 0 6px; color: var(--text-primary); line-height: 1.5; }
.raad p:last-child { margin-bottom: 0; }
.raad-saadan { padding-top: 2px; }
.raad-forbehold {
  font-size: 13px; padding: 8px 10px; margin-top: 8px;
  background: var(--color-surface); border-radius: 6px;
  color: var(--text-primary);
}
.raad-intet { color: var(--text-primary); margin: 0; }

.dosering-boks {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
}
.dosering-boks h3 { margin: 0 0 4px; font-size: 15px; color: var(--text-primary); }
.dosering-boks .sub { color: var(--text-secondary); margin: 0 0 10px; }
.log-grid label.bred { grid-column: 1 / -1; }

.knap-primaer {
  grid-column: 1 / -1; padding: 11px 16px; font-size: 15px; font-weight: 650;
  letter-spacing: 0.02em; cursor: pointer; border-radius: 8px;
  border: 1px solid #8f4218; background: #b3541e; color: #fff;
}
.knap-primaer:hover { background: #9c4818; }
.knap-primaer:disabled { opacity: 0.55; cursor: default; }

/* ---- Dagens vejr, allerøverst på forsiden ---------------------------- */
/* Claus 17/8-2026: sol, skyer eller sky med regn — ét blik skal række.  */
.vejr {
  display: flex; align-items: center; gap: 18px;
  background: var(--surface-1); border-radius: var(--radius-lg);
  padding: 16px 22px; margin-bottom: 18px; box-shadow: var(--shadow-sm);
}
.vejr-ikon { flex: 0 0 auto; width: 72px; height: 72px; }
.vejr-tekst { min-width: 0; }
.vejr-tekst h3 {
  margin: 0; font-family: var(--font-heading); font-size: 26px;
  color: var(--text-primary); line-height: 1.15;
}
.vejr-tekst .vejr-detalje { color: var(--text-secondary); font-size: 14px; margin-top: 3px; }
.vejr-tal { margin-left: auto; text-align: right; flex: 0 0 auto; }
.vejr-tal .grader { font-family: var(--font-heading); font-size: 26px; color: var(--text-primary); }
.vejr-tal .sub { color: var(--text-muted); font-size: 12px; }

/* To smaastilarter, der foer stod som style="..." direkte i skabelonen.
   SecurityRenderingTest forbyder det: sidens CSP er nonce-baseret, og en
   inline-attribut er netop dét, en angriber ville proeve at smugle ind.
   Reglen er derfor, at stil hoerer hjemme her — ikke i HTML'en. */
.kort-intro { color: var(--text-muted); margin: -4px 0 12px; }
.fejltekst  { color: var(--bad); margin-top: 10px; }

/* Knappen til femdøgnsprognosen. Den sidder i vejrblokken, men efter
   .vejr-tal, så den ikke skubber til temperaturen — margin-left: auto på
   .vejr-tal holder stadig tallene til højre. */
.vejr-knap {
  flex: 0 0 auto; margin-left: 14px; align-self: center;
  background: var(--color-neutral-200); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
.vejr-knap:hover { background: var(--color-neutral-300); color: var(--text-primary); }
.vejr-knap[aria-expanded="true"] {
  background: var(--color-accent-500); color: #fff; border-color: var(--color-accent-500);
}

/* Én række pr. døgn. Ikon, dag, sætning, tal — samme læseretning som
   blokken ovenfor, så øjet ikke skal lære et nyt mønster. */
.vejr-dag {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.vejr-dag:last-child { border-bottom: none; }
.vejr-dag-idag { background: var(--color-neutral-200); border-radius: var(--radius-md); padding: 12px 10px; }
.vejr-dag-ikon { flex: 0 0 auto; width: 38px; height: 38px; }
.vejr-dag-navn { flex: 0 0 96px; display: flex; flex-direction: column; }
.vejr-dag-navn strong { color: var(--text-primary); font-size: 14px; }
.vejr-dag-navn .sub { color: var(--text-muted); font-size: 12px; }
.vejr-dag-tekst {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
  color: var(--text-primary); font-size: 14px;
}
.vejr-dag-tekst .sub { color: var(--text-secondary); font-size: 12.5px; line-height: 1.35; margin-top: 2px; }
.vejr-dag-tal { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; }
.vejr-dag-tal strong { font-family: var(--font-heading); font-size: 20px; color: var(--text-primary); }
.vejr-dag-tal .sub { color: var(--text-muted); font-size: 12px; }

@media (max-width: 640px) {
  /* På en telefon får sætningen hele bredden i stedet for at blive presset
     ned i to ord pr. linje. */
  .vejr-dag { flex-wrap: wrap; }
  .vejr-dag-tekst { flex: 1 1 100%; order: 3; }
  .vejr-dag-navn { flex: 1 1 auto; }
}

/* Solen får accentfarven, skyerne den neutrale, regnen den blå serie-
   farve — de samme farver som resten af appen, så intet er opfundet her. */
.vejr-sol      { fill: var(--color-accent-500); }
.vejr-sky      { fill: var(--color-neutral-400); }
.vejr-sky-moerk{ fill: var(--color-neutral-600); }
.vejr-regn     { stroke: var(--series-4); stroke-width: 5; stroke-linecap: round; }

@media (max-width: 560px) {
  .vejr { gap: 12px; padding: 13px 15px; }
  .vejr-ikon { width: 54px; height: 54px; }
  .vejr-tekst h3 { font-size: 21px; }
  .vejr-tal { display: none; }   /* pladsen bruges bedre på teksten */
}

/* Godt/skidt-farver til tal i tabeller og felter. Defineret ÉT sted:
   de stod før i battery.twig, control.twig og status.twig, og manglede
   derfor på live.twig, da de samme klasser blev taget i brug der. */
.ok  { color: var(--good); font-weight: 600; }
.bad { color: #d03b3b;     font-weight: 600; }

/* CSP-sikre layoutklasser. Layout må kun vælges blandt disse kendte regler;
   templates og browserkode skriver derfor aldrig vilkårlige style-attributter. */
.is-hidden { display: none !important; }
.is-clickable { cursor: pointer; }
.is-stale { opacity: 0.5; }
.is-offline { opacity: 0.55; }
.u-opacity-70 { opacity: 0.7; }
.u-muted { color: var(--text-muted); }
.u-series-1 { color: var(--series-1); }
.u-series-2 { color: var(--series-2); }
.u-series-3 { color: var(--series-3); }
.u-series-4 { color: var(--series-4); }
.u-series-5 { color: var(--series-5); }
.u-danger { color: #d03b3b; }
.u-flex-spacer { flex: 1; }
.u-flex-between { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.u-flex-between-wrap { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-wrap: wrap; gap: 8px; }
.u-live-summary { display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-start; }
.u-live-total { min-width: 150px; }
.u-live-devices { flex: 1; min-width: 280px; }
.u-heading-value { font-family: var(--font-heading); font-size: 30px; }
.u-scroll-x { overflow-x: auto; }
.u-scroll-ledger { overflow: auto; max-height: 520px; }
.u-day-single { grid-template-columns: 1fr; }
.u-text-center { text-align: center; }
.u-normal-wrap { white-space: normal; }
.u-line-15 { line-height: 1.5; }
.u-line-16 { line-height: 1.6; }
.u-controls-stretch { margin-top: 8px; align-items: stretch; }
.u-editor { flex: 1; min-width: 260px; resize: vertical; }
.u-input-kwh { width: 70px; }
.u-chart-280 { height: 280px; }
.u-chart-340 { height: 340px; }
.u-chart-420 { height: 420px; }
.u-fw-600 { font-weight: 600; }
.u-button-danger { border-color: #d03b3b !important; color: #d03b3b !important; }
.u-button-accent { border-color: var(--series-1) !important; color: var(--series-1) !important; font-weight: 600; }
.u-m-0 { margin: 0; }
.u-m-8-0 { margin: 8px 0; }
.u-m-neg4-0-10 { margin: -4px 0 10px; }
.u-mb-4 { margin-bottom: 4px; }
.u-mb-6 { margin-bottom: 6px; }
.u-mb-8 { margin-bottom: 8px; }
.u-mb-10 { margin-bottom: 10px; }
.u-mt-0 { margin-top: 0; }
.u-mt-4 { margin-top: 4px; }
.u-mt-6 { margin-top: 6px; }
.u-mt-8 { margin-top: 8px; }
.u-mt-10 { margin-top: 10px; }
.u-mt-12 { margin-top: 12px; }

/* ---------------------------------------------------------------------------
   POOLVARSEL — feltet øverst på Poolstyring (Claus 25/8-2026)
   Claus: "der er et felt i toppen af Poolstyring-skærmen, der fortæller mig
   præcis, hvad jeg skal." Det skal kunne læses på afstand, mens man står med
   spanden — derfor stor skrift og en farve, der ikke kan overses.
   --------------------------------------------------------------------------- */
.pool-varsel {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--surface-1);
  border: 2px solid var(--warn);
  border-left-width: 8px;
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 18px;
}
.pool-varsel-haster { border-color: var(--bad); }

.pool-varsel-mærke {
  flex: 0 0 auto;
  background: var(--warn); color: #fff;
  font-weight: 700; font-size: 12px; letter-spacing: 0.08em;
  padding: 5px 10px; border-radius: 6px; white-space: nowrap;
}
.pool-varsel-haster .pool-varsel-mærke { background: var(--bad); }

.pool-varsel-krop { flex: 1 1 auto; min-width: 0; }

.pool-varsel-tid {
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
  margin-bottom: 4px;
}
.pool-varsel-liste {
  list-style: none; margin: 0; padding: 0;
}
.pool-varsel-liste li {
  font-size: 20px; font-weight: 700; line-height: 1.35;
  color: var(--text-primary);
}
.pool-varsel-liste li + li { margin-top: 6px; }
.pool-varsel-note { margin-top: 8px; color: var(--text-muted); }

@media (max-width: 560px) {
  .pool-varsel { flex-direction: column; gap: 10px; }
  .pool-varsel-liste li { font-size: 18px; }
}

/* ---------------------------------------------------------------------------
   MÆRKATER (.pill) — brugt 14 steder i pool.twig og har aldrig haft styling.
   "pill warn" og "pill ok" har derfor stået som almindelig tekst: Claus kunne
   ikke se forskel på "klar til at starte" og "brugt sin start i dag".
   Fundet 25/8-2026, da jeg selv rakte ud efter en advarselsfarve, der heller
   ikke fandtes.
   --------------------------------------------------------------------------- */
.pill {
  display: inline-block;
  font-size: 12px; font-weight: 600; line-height: 1.4;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-1); color: var(--text-secondary);
  white-space: nowrap;
}
/* LOGGET UD — beskeden øverst på siden, når et kald er afvist, fordi login er
   udløbet (base.twig: visLoggetUd). Farverne fra paletten, ingen style-attribut. */
.logget-ud {
  position: sticky; top: 0; z-index: 1000;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--bad) 14%, var(--page));
  border-bottom: 2px solid var(--bad);
  color: var(--text-primary); font-weight: 600;
}
.logget-ud a { color: inherit; text-decoration: underline; white-space: nowrap; }
.pill.warn {
  border-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  color: color-mix(in srgb, var(--warn) 72%, #000);
}
/* "stoppet" havde ingen styling — kun .pill, .pill.warn og .pill.ok fandtes.
   Samme hul som --bad havde: halvdelen af koden regnede med en klasse, der
   ikke var der, og den fejlede stille. */
.pill.off {
  background: color-mix(in srgb, var(--text-muted) 14%, transparent);
  color: var(--text-muted);
}

.pill.ok {
  border-color: var(--good);
  background: color-mix(in srgb, var(--good) 14%, transparent);
  color: color-mix(in srgb, var(--good) 72%, #000);
}