/* Cleantech BI */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/plex-sans-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/plex-sans-600.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --side: #eef2f2;
  --flade: #ffffff;
  --flade-2: #f4f7f7;
  --tekst: #16252b;
  --tekst-2: #4b5c62;
  --daempet: #66777d;
  --linje: #d8e0e2;
  --linje-staerk: #b4c2c5;
  --accent: #0b6e78;
  --accent-flade: #e0f0f1;
  --paa-accent: #ffffff;
  --bar: #00909f;
  --top: #123540;
  --top-tekst: #ffffff;
  --top-tekst-2: #a7c4c9;
  --top-markering: #7fd0d8;
  --advar: #fab219;
  --advar-flade: #fff3d4;
  --advar-tekst: #6b4a00;
  --kritisk: #d03b3b;
  --kritisk-flade: #fbe7e7;
  --kritisk-tekst: #a12424;
  --skygge: 0 10px 28px rgba(12, 35, 44, 0.16);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --side: #0e171b;
    --flade: #152126;
    --flade-2: #1b2a30;
    --tekst: #e6eef0;
    --tekst-2: #b2c1c6;
    --daempet: #8a9ba0;
    --linje: #26363c;
    --linje-staerk: #3a4d54;
    --accent: #5bbcc6;
    --accent-flade: #173a40;
    --paa-accent: #0b1d22;
    --bar: #109cad;
    --top: #0a1a20;
    --top-tekst: #ffffff;
    --top-tekst-2: #8fb3b9;
    --top-markering: #5bbcc6;
    --advar-flade: #3a2e10;
    --advar-tekst: #f5c75a;
    --kritisk-flade: #3d1a1a;
    --kritisk-tekst: #f19494;
    --skygge: 0 10px 28px rgba(0, 0, 0, 0.45);
  }
}

* { box-sizing: border-box; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--tekst);
  background: var(--side);
  line-height: 1.45;
}
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.indlaeser { padding: 3rem 1.5rem; color: var(--tekst-2); }

/* ---------- Topbjælke ---------- */

.top {
  background: var(--top);
  color: var(--top-tekst);
  display: flex;
  align-items: stretch;
  gap: 2.25rem;
  padding: 0 1.5rem;
  min-height: 3.6rem;
}
.maerke {
  display: flex; align-items: center; gap: 0.6rem;
  font-weight: 600; font-size: 1.07rem; letter-spacing: 0.01em; white-space: nowrap;
}
.maerke svg { width: 1.45rem; height: 1.45rem; flex: none; }
.faner { display: flex; gap: 1.5rem; }
.fane {
  display: flex; align-items: center;
  padding-top: 3px; border-bottom: 3px solid transparent;
  color: var(--top-tekst-2); text-decoration: none; font-weight: 500;
}
.fane:hover { color: var(--top-tekst); }
.fane[aria-current="page"] { color: var(--top-tekst); border-bottom-color: var(--top-markering); }
.bruger { margin-left: auto; position: relative; display: flex; align-items: center; }
.bruger-knap {
  height: 2.1rem; min-width: 2.6rem; padding: 0 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 999px;
  background: transparent; color: var(--top-tekst); font-weight: 600; cursor: pointer;
}
.bruger-knap:hover { background: rgba(255, 255, 255, 0.08); }
.menu {
  position: absolute; right: 0; top: calc(100% - 0.25rem); z-index: 40;
  min-width: 15rem; padding: 0.35rem;
  background: var(--flade); color: var(--tekst);
  border: 1px solid var(--linje-staerk); border-radius: 8px; box-shadow: var(--skygge);
}
.menu-navn { padding: 0.5rem 0.65rem 0.6rem; border-bottom: 1px solid var(--linje); margin-bottom: 0.3rem; }
.menu-navn small { display: block; color: var(--tekst-2); }
.menu button {
  display: block; width: 100%; text-align: left; padding: 0.5rem 0.65rem;
  border: 0; border-radius: 5px; background: none; cursor: pointer;
}
.menu button:hover { background: var(--flade-2); }

/* ---------- Filtre ---------- */

.filtre {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.8rem 1rem;
  padding: 0.9rem 1.5rem 1rem;
  background: var(--flade); border-bottom: 1px solid var(--linje);
}
.felt { display: flex; flex-direction: column; gap: 0.25rem; }
.felt > label, .felt > .etiket { font-size: 0.8rem; font-weight: 500; color: var(--tekst-2); }
.felt select { min-width: 11rem; max-width: 16rem; }
.felt-soeg input { width: 15rem; }
select, input[type="search"], input[type="text"], input[type="password"] {
  height: 2.3rem; padding: 0 0.6rem;
  background: var(--flade); color: var(--tekst);
  border: 1px solid var(--linje-staerk); border-radius: 6px;
}
input::placeholder { color: var(--daempet); }
.valg { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.valg label { position: relative; cursor: pointer; }
.valg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.valg span {
  display: inline-flex; align-items: center; gap: 0.4rem; height: 2.3rem; padding: 0 0.75rem;
  border: 1px solid var(--linje-staerk); border-radius: 6px; background: var(--flade);
  font-size: 0.9rem; white-space: nowrap;
}
.valg span::before {
  content: ""; width: 0.8rem; height: 0.8rem; border: 1.5px solid var(--linje-staerk); border-radius: 3px; flex: none;
}
.valg input:checked + span { background: var(--accent-flade); border-color: var(--accent); }
.valg input:checked + span::before {
  background: var(--accent); border-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--flade);
}
.valg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.filtre-knap { display: none; }
.nulstil {
  height: 2.3rem; padding: 0 0.4rem; border: 0; background: none;
  color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* Lokationsvælger */
.vaelger { position: relative; }
.vaelger-knap {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  height: 2.3rem; min-width: 14rem; padding: 0 0.6rem;
  background: var(--flade); border: 1px solid var(--linje-staerk); border-radius: 6px;
  text-align: left; cursor: pointer;
}
.vaelger-knap::after {
  content: ""; border: 5px solid transparent; border-top-color: var(--tekst-2); margin-top: 5px;
}
.vaelger-panel {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0;
  width: min(23rem, calc(100vw - 2rem)); max-height: min(30rem, 70vh); overflow: auto;
  padding: 0.6rem; background: var(--flade);
  border: 1px solid var(--linje-staerk); border-radius: 8px; box-shadow: var(--skygge);
}
.genveje { display: flex; flex-wrap: wrap; gap: 0.35rem; padding-bottom: 0.5rem; }
.genveje button {
  padding: 0.25rem 0.6rem; border: 1px solid var(--linje-staerk); border-radius: 999px;
  background: var(--flade); font-size: 0.85rem; cursor: pointer;
}
.genveje button:hover { border-color: var(--accent); }
.lok-gruppe { border-top: 1px solid var(--linje); padding: 0.35rem 0; }
.lok-gruppe label { display: flex; align-items: center; gap: 0.55rem; padding: 0.22rem 0.35rem; border-radius: 4px; cursor: pointer; }
.lok-gruppe label:hover { background: var(--flade-2); }
.lok-gruppe .gruppe-navn { font-weight: 600; }
.lok-gruppe .lok-nr { margin-left: auto; color: var(--daempet); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.lok-gruppe .lok-punkt { padding-left: 1.5rem; }
.lok-gruppe input { width: 1rem; height: 1rem; accent-color: var(--accent); margin: 0; }

/* ---------- Oversigtslinje ---------- */

.oversigt {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 2.5rem;
  padding: 1.4rem 1.5rem 0.4rem;
}
.hovedtal { min-width: 0; }
.hovedtal-vaerdi { font-size: 3rem; font-weight: 600; line-height: 1; letter-spacing: -0.015em; }
.hovedtal-tekst { margin-top: 0.4rem; color: var(--tekst-2); }
.hovedtal-rb { margin-top: 0.15rem; color: var(--daempet); font-size: 0.87rem; }
.fakta { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.fakt {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.8rem; border: 1px solid var(--linje-staerk); border-radius: 999px;
  background: var(--flade); font-size: 0.9rem; white-space: nowrap;
}
button.fakt { cursor: pointer; }
button.fakt:hover { border-color: var(--accent); }
.fakt[aria-pressed="true"] { background: var(--accent-flade); border-color: var(--accent); }
.fakt b { font-weight: 600; }
.hentet { margin-left: auto; text-align: right; color: var(--tekst-2); font-size: 0.87rem; max-width: 28rem; }
.hentet.gammel { color: var(--advar-tekst); }
.advarsler { margin: 0.6rem 1.5rem 0; padding: 0.6rem 0.8rem; border-radius: 6px; background: var(--advar-flade); color: var(--advar-tekst); font-size: 0.9rem; }
.advarsler p { margin: 0.15rem 0; }

/* ---------- Visningsbjælke ---------- */

.visningsbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; padding: 1rem 1.5rem 0.75rem; }
.segment { display: inline-flex; padding: 3px; gap: 3px; border: 1px solid var(--linje-staerk); border-radius: 8px; background: var(--flade); }
.segment button {
  padding: 0.38rem 0.95rem; border: 0; border-radius: 5px; background: transparent;
  color: var(--tekst-2); font-weight: 500; cursor: pointer;
}
.segment button:hover { color: var(--tekst); }
.segment button[aria-pressed="true"] { background: var(--accent); color: var(--paa-accent); }
.knap {
  display: inline-flex; align-items: center; gap: 0.45rem; height: 2.3rem; padding: 0 0.9rem;
  border: 1px solid var(--linje-staerk); border-radius: 6px; background: var(--flade);
  font-weight: 500; cursor: pointer; white-space: nowrap;
}
.knap:hover { border-color: var(--accent); }
.knap-primaer { background: var(--accent); border-color: var(--accent); color: var(--paa-accent); }
.knap-primaer:hover { filter: brightness(1.08); }
.knap-fare { color: var(--kritisk-tekst); }
.knap:disabled { opacity: 0.55; cursor: default; }
.visningsbar .knap-eksport { margin-left: auto; }
.antal { color: var(--tekst-2); font-size: 0.9rem; }

/* ---------- Indhold ---------- */

.indhold { padding: 0 1.5rem 2.5rem; }
.panel { background: var(--flade); border: 1px solid var(--linje); border-radius: 10px; }
.tom { padding: 3rem 1.5rem; text-align: center; color: var(--tekst-2); }
.tom strong { display: block; color: var(--tekst); font-size: 1.07rem; margin-bottom: 0.3rem; }

/* Overblik */
.overblik { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
.overblik > section { padding: 1.1rem 1.25rem 1.25rem; min-width: 0; }
.overblik > section + section { border-left: 1px solid var(--linje); }
.overblik h2 { margin: 0 0 0.15rem; font-size: 1rem; font-weight: 600; }
.overblik h2 + p { margin: 0 0 0.75rem; color: var(--tekst-2); font-size: 0.85rem; }
.overblik .del + .del { margin-top: 1.5rem; }
.bar-liste { list-style: none; margin: 0; padding: 0; }
.bar-raekke {
  display: grid; grid-template-columns: minmax(7rem, 11.5rem) minmax(0, 1fr) auto;
  align-items: center; gap: 0.75rem; width: 100%; padding: 0.32rem 0.45rem;
  border: 0; border-radius: 6px; background: none; text-align: left;
}
button.bar-raekke { cursor: pointer; }
button.bar-raekke:hover, button.bar-raekke:focus-visible { background: var(--flade-2); }
.bar-navn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-spor { height: 14px; min-width: 0; }
.bar { height: 14px; max-width: 100%; background: var(--bar); border-radius: 0 4px 4px 0; }
.bar-oevrige .bar { background: var(--linje-staerk); }
.bar-oevrige .bar-navn { color: var(--tekst-2); }
.bar-vaerdi { text-align: right; font-variant-numeric: tabular-nums; font-size: 0.9rem; white-space: nowrap; }
.bar-vaerdi small { color: var(--daempet); font-size: 0.82rem; margin-left: 0.4rem; }

/* Tabeller */
.tabel-ramme {
  position: relative; overflow: auto; max-height: calc(100vh - 17rem); min-height: 16rem;
  background: var(--flade); border: 1px solid var(--linje); border-radius: 10px;
}
table.data { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
table.data th, table.data td { padding: 0.42rem 0.65rem; border-bottom: 1px solid var(--linje); white-space: nowrap; text-align: left; background: var(--flade); }
table.data thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--flade-2); color: var(--tekst-2); font-size: 0.82rem; font-weight: 500;
  border-bottom-color: var(--linje-staerk); vertical-align: bottom;
}
table.data tbody tr:hover td { background: var(--flade-2); }
table.data .t { text-align: right; }
table.data th.t { text-align: right; }
table.data .fast1 { position: sticky; left: 0; z-index: 1; width: 8rem; min-width: 8rem; max-width: 8rem; overflow: hidden; text-overflow: ellipsis; }
table.data .fast2 { position: sticky; left: 8rem; z-index: 1; min-width: 12rem; max-width: 20rem; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid var(--linje); }
table.data thead .fast1, table.data thead .fast2 { z-index: 3; }
table.data .navn-celle { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; }
table.data .lok-kol { min-width: 5.5rem; }
table.data .sum-kol { border-left: 1px solid var(--linje); }
table.data tfoot td { position: sticky; bottom: 0; background: var(--flade-2); font-weight: 600; border-top: 1px solid var(--linje-staerk); border-bottom: 0; }
.sorter {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem;
  white-space: normal; line-height: 1.25;
}
.sorter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.sorter::after { content: ""; width: 0.55rem; flex: none; }
th[aria-sort="ascending"] .sorter::after { content: "\25B2"; font-size: 0.6rem; }
th[aria-sort="descending"] .sorter::after { content: "\25BC"; font-size: 0.6rem; }
.lok-kol .sorter small { display: block; color: var(--daempet); font-size: 0.75rem; }
td.ingen { color: var(--daempet); }
td.udenfor { color: var(--daempet); }
td.st-under, td.st-daekket { background: var(--advar-flade) !important; }
td.st-neg { background: var(--kritisk-flade) !important; color: var(--kritisk-tekst); }
.mark { display: inline-block; width: 0.6rem; height: 0.6rem; margin-right: 0.35rem; vertical-align: 0.02em; }
.mark-under { background: var(--advar); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mark-daekket { border: 2px solid var(--advar); border-radius: 50%; }
.mark-neg { background: var(--kritisk); border-radius: 1px; }
.status-tekst { display: inline-flex; align-items: center; }
.mere { display: flex; justify-content: center; align-items: center; gap: 1rem; padding: 0.9rem; color: var(--tekst-2); font-size: 0.9rem; }

/* ---------- Login og formularer ---------- */

.adgang { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: var(--top); }
.adgang-kort { width: min(25rem, 100%); padding: 2rem 2rem 1.75rem; background: var(--flade); border-radius: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); }
.adgang-kort .maerke { color: var(--tekst); }
.adgang-kort .maerke svg rect:first-child { fill: var(--top); }
.adgang-kort h1 { margin: 1.4rem 0 0.35rem; font-size: 1.5rem; font-weight: 600; }
.adgang-kort > p { margin: 0 0 1.25rem; color: var(--tekst-2); }
.formfelt { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.95rem; }
.formfelt label { font-size: 0.85rem; font-weight: 500; color: var(--tekst-2); }
.formfelt input, .formfelt select { width: 100%; }
.formfelt small { color: var(--daempet); }
.fejltekst { margin: 0 0 1rem; padding: 0.55rem 0.75rem; border-radius: 6px; background: var(--kritisk-flade); color: var(--kritisk-tekst); font-size: 0.9rem; }
.oktekst { margin: 0 0 1rem; padding: 0.55rem 0.75rem; border-radius: 6px; background: var(--accent-flade); color: var(--tekst); font-size: 0.9rem; }
.adgang-kort .knap { width: 100%; justify-content: center; height: 2.6rem; margin-top: 0.4rem; }

.side { max-width: 62rem; padding: 1.5rem; }
.side h1 { margin: 0 0 0.3rem; font-size: 1.5rem; font-weight: 600; }
.side > p { margin: 0 0 1.25rem; color: var(--tekst-2); }
.side h2 { margin: 0 0 0.9rem; font-size: 1.07rem; font-weight: 600; }
.side .panel { padding: 1.25rem; margin-bottom: 1.25rem; }
.side .panel.tabel { padding: 0; overflow: auto; }
.formraekke { display: flex; flex-wrap: wrap; gap: 0.9rem 1rem; align-items: flex-end; }
.formraekke .formfelt { margin: 0; flex: 1 1 11rem; }
.handlinger { display: flex; gap: 0.4rem; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.handlinger input { width: 13rem; }

@media (max-width: 900px) {
  .overblik { grid-template-columns: minmax(0, 1fr); }
  .overblik > section + section { border-left: 0; border-top: 1px solid var(--linje); }
}
@media (max-width: 640px) {
  html { font-size: 14px; }
  .filtre-knap { display: inline-flex; }
  .filtre.lukket > :not(.filtre-knap) { display: none; }
  .filtre.lukket { padding-bottom: 0.9rem; }
  .top { gap: 1rem; padding: 0 1rem; flex-wrap: wrap; }
  .filtre, .oversigt, .visningsbar { padding-left: 1rem; padding-right: 1rem; }
  .indhold { padding: 0 1rem 2rem; }
  .felt, .felt select, .felt-soeg input, .vaelger, .vaelger-knap { width: 100%; max-width: none; }
  .hovedtal-vaerdi { font-size: 2.3rem; }
  .hentet { margin-left: 0; text-align: left; }
  .bar-raekke { grid-template-columns: minmax(6rem, 8rem) minmax(0, 1fr) auto; }
  .bar-vaerdi small { display: none; }
  table.data .fast2 { min-width: 9rem; max-width: 11rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}