/*
 * Kapacitetsstatus v2 – Moderne, tilgængeligt, responsivt
 * Farver og spacing styres via CSS-variabler.
 */
:root {
  --bg: #0b0c0f;
  --panel: #12141a;
  --txt: #e6e8ed;
  --muted: #a6adbb;
  --primary: #4da3ff;
  --border: #21242c;
  --green: #2ecc71;
  --amber: #f1c40f;
  --red: #e74c3c;
  --chip: #1a1d25;
  --radius: 12px;
}

/* Lys tilstand (system eller valgt) */
@media (prefers-color-scheme: light) {
  :root { --bg:#f7f8fb; --panel:#ffffff; --txt:#131722; --muted:#5b6475; --border:#e8eaf0; --chip:#f1f3f8; }
}

/* Tving manuelt tema via data-theme */
:root[data-theme="light"] { --bg:#f7f8fb; --panel:#ffffff; --txt:#131722; --muted:#5b6475; --border:#e8eaf0; --chip:#f1f3f8; }
:root[data-theme="dark"] { --bg:#0b0c0f; --panel:#12141a; --txt:#e6e8ed; --muted:#a6adbb; --border:#21242c; --chip:#1a1d25; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color: var(--txt); background: radial-gradient(80% 120% at 80% -10%, #1a2a40 0%, var(--bg) 35%), var(--bg); }

.container { max-width: 1200px; margin: 0 auto; padding: 1rem; }

.topbar { display:flex; align-items:center; justify-content:space-between; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); backdrop-filter: saturate(120%) blur(8px); position: sticky; top:0; background: color-mix(in oklab, var(--bg) 80%, transparent); z-index:10; }
.brand { display:flex; align-items:center; gap:0.75rem; }
.logo { width: 28px; height:28px; display:grid; place-items:center; border-radius:8px; background: linear-gradient(135deg, #3b82f6, #22d3ee); color:white; font-weight:700; }
.topbar h1 { font-size: 1.25rem; margin:0; }
.meta { display:flex; align-items:center; gap:0.5rem; color: var(--muted); }

.btn { border: 1px solid var(--border); background: var(--panel); color: var(--txt); padding: 0.5rem 0.75rem; border-radius: 10px; cursor:pointer; transition: transform .05s ease, background .2s ease, border-color .2s ease; }
.btn:hover { border-color: color-mix(in oklab, var(--border), var(--txt)); }
.btn:active { transform: translateY(1px); }
.btn-ghost { background: transparent; }

.filters { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; display:flex; flex-direction:column; gap:0.75rem; margin: 1rem 0; }
.filters__row { display:flex; flex-wrap:wrap; align-items:center; gap:0.75rem; }
.legend { margin-left:auto; display:flex; align-items:center; gap:0.75rem; color: var(--muted); font-size: 0.9rem; }
.dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.dot--green{ background: var(--green); }
.dot--amber{ background: var(--amber); }
.dot--red{ background: var(--red); }

.field { display:flex; flex-direction:column; gap:0.25rem; min-width: 220px; }
.field--search { flex: 1 1 320px; }
.field__label { font-size:0.8rem; color: var(--muted); }
.field input, .field select { padding: 0.6rem 0.75rem; border-radius: 10px; border:1px solid var(--border); background: var(--bg); color: var(--txt); }

.chipgroup { display:flex; gap:0.5rem; flex-wrap:wrap; }
.chip { background: var(--chip); border: 1px solid var(--border); color: var(--txt); padding: 0.4rem 0.6rem; border-radius: 999px; cursor:pointer; user-select:none; font-size: 0.9rem; }
.chip[aria-pressed="true"] { outline: 2px solid color-mix(in oklab, var(--primary), white 20%); background: color-mix(in oklab, var(--chip), var(--primary) 20%); }

.cards { list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.9rem; }
.card { background: var(--panel); border:1px solid var(--border); border-radius: var(--radius); padding:0.9rem; display:flex; flex-direction:column; gap:0.6rem; }
.card__row { display:flex; justify-content:space-between; align-items:center; gap:0.75rem; }
.card__title { font-weight:600; margin:0; }
.card__meta { color: var(--muted); font-size:0.9rem; }

.progress { height: 10px; background: #0d1117; border-radius: 999px; border:1px solid var(--border); overflow:hidden; }
.progress__slider {margin-bottom: 5.5em;}
.progress__bar { height:15%; width:0%; transition: width .6s ease; }
.progress__bar--green { background: linear-gradient(90deg, #16a34a, #22c55e); }
.progress__bar--amber { background: linear-gradient(90deg, #ca8a04, #f59e0b); }
.progress__bar--red { background: linear-gradient(90deg, #dc2626, #ef4444); }

.tags { display:flex; flex-wrap:wrap; gap:0.4rem; }
.tag { font-size:0.8rem; color: var(--muted); background: transparent; border:1px dashed var(--border); padding:0.15rem 0.45rem; border-radius: 999px; }

.empty { text-align:center; color: var(--muted); padding: 1.5rem; background: var(--panel); border:1px dashed var(--border); border-radius: var(--radius); }
.hidden { display:none; }

.footer { display:flex; justify-content:space-between; align-items:center; padding: 1rem; color: var(--muted); border-top: 1px solid var(--border); margin-top: 2rem; }
.footer a { color: inherit; text-decoration: underline; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }