/* =========================================================
   Adlure Analytics — Hub-designet

   Samme design som Adlure Hub: en rolig, naesten hvid flade med
   prikker og bloedt lys, glaspaneler, adlure.dk's blaa som eneste
   farve, og Plus Jakarta Sans til overskrifter og tal.

   Ligger ovenpaa styles.css og aendrer kun udseendet. Hele
   designet staar i denne fil.

   Skrifttyperne er Inter og Plus Jakarta Sans, begge under SIL
   Open Font License. De ligger i assets/fonts, fordi sidens
   sikkerhedspolitik kun tillader skrifttyper fra eget domaene.
   ========================================================= */

/* ---------- Skrifttyper ---------- */
@font-face {
  font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2-variations'), url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(../fonts/inter-latin.woff2) format('woff2-variations'), url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-display: swap; font-weight: 600;
  src: url(../fonts/jakarta-latin-ext-600.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-display: swap; font-weight: 600;
  src: url(../fonts/jakarta-latin-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-display: swap; font-weight: 700;
  src: url(../fonts/jakarta-latin-ext-700.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-display: swap; font-weight: 700;
  src: url(../fonts/jakarta-latin-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Farver og maal ---------- */
:root {
  --sans: 'Inter Variable', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --display: 'Plus Jakarta Sans', 'Inter Variable', -apple-system, BlinkMacSystemFont, sans-serif;

  --bg: #F5F5F3;
  --ink: #17171A;
  --ink-strong: #44444B;
  --ink-2: #55555D;
  --ink-3: #63636B;
  --line: rgba(23, 23, 26, .07);
  --line-strong: rgba(23, 23, 26, .12);
  --dots: rgba(23, 23, 26, .14);
  --glow-1: #FFFFFF;
  --glow-2: #E6E6EC;

  /* Glas og papir */
  --surface: rgba(255, 255, 255, .62);
  --surface-2: rgba(23, 23, 26, .035);
  --paper: #FFFFFF;
  --glass-edge: rgba(255, 255, 255, .9);
  --night: #17171A;

  /* adlure.dk's blaa. --blue fylder flader og grafer; --accent-ink er
     den nuance, der kan laeses som tekst. */
  --blue: #0B8FCB;
  --accent-ink: #0B7EAF;
  --accent-fill: #0B7EAF;
  --accent-fill-hover: #0A6A94;
  --blue-soft: #EAF6FD;
  --blue-line: rgba(11, 143, 203, .28);

  --green: #2E9B57;
  --green-ink: #1E6B3A;
  --green-soft: #E6F4EA;
  --green-line: rgba(46, 155, 87, .30);
  --red: #D93025;
  --red-ink: #A3342B;
  --red-soft: #FDE8E6;
  --red-line: rgba(217, 48, 37, .28);
  --warn-ink: #8A5A00;
  --warn-soft: #FBF1DE;
  --warn-dot: #C98A0C;
  --purple-ink: #5B3FA8;
  --purple-soft: #F0ECFB;

  --shadow-rest: 0 0 0 1px rgba(23, 23, 26, .05), 0 16px 40px -28px rgba(23, 23, 26, .35);
  --shadow-lift: 0 0 0 1px rgba(23, 23, 26, .06), 0 28px 56px -30px rgba(23, 23, 26, .45);

  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 10px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.3, 1.25, .5, 1);
}

[data-theme="dark"] {
  --bg: #0E0F12;
  --ink: #ECECF0;
  --ink-strong: #C9C9D1;
  --ink-2: #A6A6B0;
  --ink-3: #8E8E98;
  --line: rgba(236, 236, 240, .07);
  --line-strong: rgba(236, 236, 240, .12);
  --dots: rgba(255, 255, 255, .06);
  --glow-1: #1B1D24;
  --glow-2: #0B0C0F;

  --surface: rgba(32, 33, 39, .62);
  --surface-2: rgba(236, 236, 240, .045);
  --paper: #1C1D22;
  --glass-edge: rgba(255, 255, 255, .07);
  --night: #22232A;

  --accent-ink: #5CC6F5;
  --accent-fill: #1586BB;
  --accent-fill-hover: #1A97D1;
  --blue-soft: #0F2733;
  --blue-line: rgba(92, 198, 245, .30);

  --green: #4CC27F;
  --green-ink: #7AD9A0;
  --green-soft: #12281B;
  --green-line: rgba(122, 217, 160, .28);
  --red: #FF5B4D;
  --red-ink: #FF8F85;
  --red-soft: #3A1815;
  --red-line: rgba(255, 143, 133, .28);
  --warn-ink: #F2C46B;
  --warn-soft: #2D2311;
  --warn-dot: #F2C46B;
  --purple-ink: #C0AEF7;
  --purple-soft: #261E3D;

  --shadow-rest: 0 0 0 1px rgba(236, 236, 240, .05), 0 16px 40px -28px rgba(0, 0, 0, .55);
  --shadow-lift: 0 0 0 1px rgba(236, 236, 240, .06), 0 28px 56px -30px rgba(0, 0, 0, .7);
}

/* ---------- Grundlaget ---------- */
html, body { background-color: var(--bg); }
body { font-family: var(--sans); font-size: 15px; line-height: 1.45; }
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 8px; }
::selection { background: var(--blue-soft); }

.topbar__title, .card__title, .kpi__value, .summary__hero, .hstat b, .adminhead__name,
.gate__title, .plan__value, .band b, .notal__t, .ask__t, .rail__brandtext, .kpi__value small {
  font-family: var(--display);
}

/* ---------- Baggrunden: prikker og bloedt lys, ingen farve ----------
   Staar helt stille. Hvert glaspanel sloerer det, der ligger bag det,
   saa en baggrund i bevaegelse tvinger browseren til at tegne alle
   sloeringer om i hvert billede. */
.ambience {
  background-color: var(--bg);
  background-image: radial-gradient(var(--dots) 1px, transparent 1.4px);
  background-size: 22px 22px;
}
.ambience__blob { display: none; }
.ambience::before, .ambience::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.ambience::before {
  left: -160px; top: -220px; width: 640px; height: 640px;
  background: var(--glow-1); filter: blur(80px); opacity: .95;
}
.ambience::after {
  right: -140px; top: 360px; width: 540px; height: 540px;
  background: var(--glow-2); filter: blur(90px); opacity: .9;
}

/* ---------- Glasflader ---------- */
.card {
  background: var(--surface);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-rest);
  padding: 20px 22px;
}
@media (hover: hover) {
  .card:hover { border-color: var(--glass-edge); box-shadow: var(--shadow-lift); transform: translateY(-3px); }
  /* Store kort med grafer skal ikke hoppe, mens man laeser dem. */
  .card.col-12:hover, .card.col-8:hover, .card.col-9:hover { transform: none; }
}
.grid { gap: 20px; }

/* ---------- Menuen (computer): en glasbjaelke oeverst ---------- */
@media (min-width: 861px) {
  .rail {
    inset: 18px auto auto 50%;
    transform: translateX(-50%);
    width: min(1264px, calc(100vw - 56px)); height: auto;
    flex-direction: row; align-items: center; gap: 12px;
    padding: 8px 8px 8px 12px; border-radius: 999px; overflow: visible;
    background: var(--surface);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid var(--glass-edge);
    box-shadow: var(--shadow-rest);
  }
  .rail:hover, .rail:focus-within { width: min(1264px, calc(100vw - 56px)); box-shadow: var(--shadow-rest); }

  .rail__brand { flex: none; padding: 0; gap: 10px; }
  .mark { width: 32px; height: 32px; border-radius: 10px; box-shadow: none; }
  .rail__brandtext {
    display: flex; align-items: baseline; gap: 5px; white-space: nowrap;
    opacity: 1; transform: none;
    font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  }
  .rail__brandtext strong, .rail__brandtext small {
    font: inherit; color: var(--ink); letter-spacing: inherit; text-transform: none;
  }

  .rail__nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
  .rail__item {
    width: auto; height: 40px; padding: 0 15px; gap: 8px; border-radius: 999px;
    color: var(--ink-strong); font-size: 14px;
  }
  .rail__item:hover { background: rgba(23, 23, 26, .05); color: var(--ink); }
  [data-theme="dark"] .rail__item:hover { background: rgba(236, 236, 240, .06); }
  .rail__item.is-active { color: var(--ink); font-weight: 600; background: transparent; }
  .rail__item .rail__label, .rail__user .rail__label { opacity: 1; transform: none; }
  /* Som i Hubben: menupunkterne er rene ord. */
  .rail__nav .rail__icon { display: none; }

  /* Det valgte punkt: en hvid kapsel, der glider hen til punktet. */
  .rail__marker {
    top: 0; left: 0; height: 40px; border-radius: 999px;
    background: var(--paper);
    border: 1px solid rgba(23, 23, 26, .08);
    box-shadow: 0 2px 8px -4px rgba(23, 23, 26, .30);
  }
  [data-theme="dark"] .rail__marker { border-color: rgba(236, 236, 240, .08); box-shadow: 0 2px 8px -4px rgba(0, 0, 0, .6); }
  .rail__marker::before { display: none; }

  .rail__foot { margin: 0 0 0 auto; display: flex; align-items: center; gap: 6px; }
  .rail__foot .rail__item { width: 40px; padding: 0; justify-content: center; }
  .rail__foot .rail__item .rail__label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .rail__user { padding: 0; }
  .rail__label--user { display: none; }
  .rail .avatar {
    width: 40px; height: 40px; border-radius: 50%; border: 0;
    background: var(--blue-soft); color: var(--accent-ink); font-size: 13px; font-weight: 600;
  }

  .shell { margin: 0 auto; max-width: 1320px; padding: 96px 28px 72px; }
}
/* Mellemstore skaerme: ikoner i stedet for ord, saa bjaelken kan vaere der. */
@media (min-width: 861px) and (max-width: 1100px) {
  .rail__nav .rail__icon { display: grid; }
  .rail__nav .rail__label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .rail__nav .rail__item { padding: 0 13px; }
  .rail__brandtext { display: none; }
}

/* ---------- Toppen ---------- */
.topbar::before { display: none; }
.topbar { padding: 8px 4px 18px; }
.eyebrow {
  color: var(--accent-ink); font-size: 13px; font-weight: 600;
  letter-spacing: 0; text-transform: none; margin-bottom: 4px;
}
.topbar__title { font-size: clamp(30px, 4vw, 40px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.period__label { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-3); }

/* Hvilken kunde man kigger paa */
.client {
  height: 44px; padding: 0 16px 0 6px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-rest);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
}
.client__logo { width: 32px; height: 32px; border-radius: 50%; background: var(--blue-soft); color: var(--accent-ink); }
.iconbtn, .devbtn { border-radius: 999px; background: var(--surface); border-color: var(--glass-edge); }

/* ---------- Segmentkontrollen ---------- */
.segmented {
  padding: 4px; gap: 0; border: 0; border-radius: 12px;
  background: rgba(23, 23, 26, .05);
}
[data-theme="dark"] .segmented { background: rgba(236, 236, 240, .06); }
.segmented button {
  height: 34px; padding: 0 16px; border-radius: 9px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  transition: color .2s, background-color .3s var(--spring), box-shadow .3s;
}
.segmented button:hover { color: var(--ink); }
.segmented button.is-active {
  background: var(--paper); color: var(--ink);
  box-shadow: 0 1px 2px rgba(23, 23, 26, .08), 0 4px 12px -6px rgba(23, 23, 26, .30);
}

/* ---------- Kort: titel, ikon og (i) ---------- */
.card__head { margin-bottom: 16px; }
.card__titlerow { display: flex; align-items: center; gap: 10px; min-width: 0; }
.card__title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.card__ico {
  flex: none; width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--blue-soft); color: var(--accent-ink);
}
.card__ico svg { width: 17px; height: 17px; }
.card__ico--g { background: var(--green-soft); color: var(--green-ink); }
.card__ico--r { background: var(--red-soft); color: var(--red-ink); }
.card__ico--v { background: var(--purple-soft); color: var(--purple-ink); }

.info {
  position: relative; flex: none; width: 26px; height: 26px; border-radius: 999px;
  display: grid; place-items: center; color: var(--ink-3);
  transition: color .2s, background-color .2s;
}
.info::after { content: ""; position: absolute; inset: -9px; }
.info svg { width: 18px; height: 18px; }
.info:hover, .info[aria-expanded="true"] { color: var(--accent-ink); background: var(--blue-soft); }

.card__note:not([hidden]) {
  margin-top: 10px; padding: 10px 12px; border-radius: 12px; max-width: none;
  background: var(--surface-2); color: var(--ink-2); font-size: 13px;
  animation: fold 220ms var(--ease);
}
@keyframes fold { from { opacity: 0; transform: translateY(-4px); } }

/* Opsummeringer: en bloed boks med et farvet punkt foran. */
.card__insight:not(:empty) {
  position: relative; margin-top: 14px;
  padding: 10px 12px 10px 30px; border-radius: 12px;
  background: var(--surface-2); color: var(--ink-2);
}
.card__insight:not(:empty)::before {
  content: ""; position: absolute; left: 13px; top: 17px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3);
}
.card__insight.insight--good { background: var(--green-soft); color: var(--green-ink); }
.card__insight.insight--good::before { background: var(--green); }
.card__insight.insight--bad { background: var(--red-soft); color: var(--red-ink); }
.card__insight.insight--bad::before { background: var(--red); }
.card__insight.insight--warn { background: var(--warn-soft); color: var(--warn-ink); }
.card__insight.insight--warn::before { background: var(--warn-dot); }

/* ---------- Maerkater, chips og avatarer ---------- */
.pill {
  min-height: 24px; padding: 3px 11px; gap: 6px; border: 0; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: var(--green-soft); color: var(--green-ink);
}
.pill--down { background: var(--red-soft); color: var(--red-ink); }
.pill--info { background: var(--blue-soft); color: var(--accent-ink); }
.pill--mute { background: rgba(23, 23, 26, .06); color: var(--ink-strong); }
[data-theme="dark"] .pill--mute { background: rgba(236, 236, 240, .08); }
.chip { border-radius: 999px; }
.chipflag { border: 0; background: var(--blue-soft); color: var(--accent-ink); }
.chipflag--warn { background: var(--warn-soft); color: var(--warn-ink); }
.chipflag--bad { background: var(--red-soft); color: var(--red-ink); }
.chipflag--mute { background: rgba(23, 23, 26, .06); color: var(--ink-strong); }

.avatar, .avatar--client {
  border: 0; border-radius: 11px;
  background: var(--blue-soft); color: var(--accent-ink); font-weight: 700;
}

/* ---------- Knapper ---------- */
.btn-primary {
  min-height: 44px; padding: 0 20px; border-radius: 999px;
  background: var(--accent-fill); color: #fff; font-size: 14px; font-weight: 600;
  box-shadow: 0 8px 18px -10px rgba(11, 126, 175, .7);
  transition: background-color .2s, transform .15s var(--ease), box-shadow .2s;
}
.btn-primary:hover { background: var(--accent-fill-hover); transform: none; box-shadow: 0 10px 22px -10px rgba(11, 126, 175, .8); }
.btn-primary:active { transform: scale(.96); }
.btn-primary:disabled { opacity: .55; transform: none; }

.btn-white {
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--paper); color: var(--ink); font-weight: 600;
  border: 1px solid rgba(23, 23, 26, .08);
  box-shadow: 0 2px 8px -6px rgba(23, 23, 26, .3);
  transition: transform .15s var(--ease), background-color .2s;
}
[data-theme="dark"] .btn-white { border-color: rgba(236, 236, 240, .08); }
.btn-white:active { transform: scale(.96); }

.linkbtn { color: var(--accent-ink); font-weight: 600; }
.linkbtn:hover { color: var(--accent-fill-hover); }

.ghostbtn { border-radius: 999px; color: var(--ink-2); }
.ghostbtn:hover { background: rgba(23, 23, 26, .05); border-color: transparent; color: var(--ink); }
.ghostbtn.is-active {
  background: var(--paper); color: var(--ink); font-weight: 600;
  border-color: rgba(23, 23, 26, .08);
  box-shadow: 0 2px 8px -4px rgba(23, 23, 26, .30);
}

.impbar { border-radius: 18px; border: 0; background: var(--red-soft); color: var(--red-ink); }
.impbar__back { border-radius: 999px; background: var(--red); }
.warnbar { border-color: var(--glass-edge); background: var(--red-soft); color: var(--red-ink); }

/* ---------- Noegletal ---------- */
.kpi__lbl { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.kpi__label { color: var(--ink-2); font-weight: 600; letter-spacing: .02em; }
.kpi__ico {
  flex: none; width: 30px; height: 30px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--blue-soft); color: var(--accent-ink);
}
.kpi__ico svg { width: 16px; height: 16px; }
.kpi--green .kpi__ico { background: var(--green-soft); color: var(--green-ink); }
.kpi--red .kpi__ico { background: var(--red-soft); color: var(--red-ink); }
.kpi__value {
  margin-top: 8px; font-size: 40px; font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.kpi__value small { font-size: 17px; font-weight: 600; }
.kpi__foot { margin-top: 10px; }
.kpi__note:not([hidden]) { margin: 10px 0 0; }

/* Minigrafen fylder hele bredden. Prikken for enden ville blive til
   en oval, naar grafen straekkes — den er vaek. Stregen tegnes ikke
   ind: stiplingen er regnet til grafens oprindelige bredde og ville
   stoppe ved ca. 60 %. */
.card.kpi .sparkhost, .card.kpi .spark { display: block; width: 100%; }
.card.kpi .spark { height: 44px; }
.card.kpi .spark ellipse { display: none; }
.card.kpi .spark .line { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; }

/* ---------- Overskriften: konklusion og tal ---------- */
.summary {
  padding: 30px 32px; align-items: center;
  background: var(--surface); border-color: var(--glass-edge);
}
.summary__mark {
  width: 52px; height: 52px; border-radius: 15px;
  background: var(--ink); color: var(--bg); box-shadow: none;
}
.summary__mark svg { width: 24px; height: 24px; }
.summary__main { display: grid; gap: 14px; min-width: 0; }
.summary__hero {
  display: flex; align-items: center; gap: 8px;
  font-size: clamp(26px, 3.2vw, 34px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1;
}
.summary__note .summary__line { font-size: 13.5px; line-height: 1.55; }
.summary__stats { display: flex; flex-wrap: wrap; gap: 10px; }
.hstat {
  display: flex; align-items: baseline; gap: 8px;
  padding: 10px 16px; border-radius: 14px;
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  border: 1px solid var(--line);
}
.hstat b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hstat small { font-size: 13px; color: var(--ink-2); }

/* ---------- Serviceaftalen: det moerke kort ---------- */
.plan {
  background: var(--night); color: #fff; border: 0;
  box-shadow: 0 24px 50px -30px rgba(23, 23, 26, .7);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.plan .card__title, .plan .kpi__value, .plan .plan__value { color: #fff; }
.plan .card__ico { background: rgba(255, 255, 255, .1); color: #8FD3F5; }
.plan__meta { color: #C8C8D0; opacity: 1; }
.plan__value small { color: #C8C8D0; }
.plan__bar { background: rgba(255, 255, 255, .12); }
.plan__bar i { background: linear-gradient(90deg, #0B8FCB, #2EB3EF); box-shadow: 0 0 12px rgba(46, 179, 239, .55); }
.plan .card__insight { background: rgba(255, 255, 255, .1); color: #E8E8EE; }
.plan .card__insight::before { background: #2EB3EF; }
.plan .btn-white { background: #fff; color: #17171A; border: 0; }
.plan .info { color: #C8C8D0; }

/* ---------- Lister, raekker og soejler ---------- */
.clientrow:hover, .attn:hover { background: rgba(11, 143, 203, .07); border-color: transparent; }
.clientrow:hover .clientrow__go { color: var(--accent-ink); }
.setrow { border-bottom-color: var(--line); }
.linje:nth-child(odd) { background: var(--surface-2); }
.band { background: var(--line); border-radius: 14px; }
.band > div { background: color-mix(in srgb, var(--paper) 85%, transparent); }
.band b { font-weight: 700; letter-spacing: -.02em; }

.rank__track { background: rgba(23, 23, 26, .05); border: 0; }
[data-theme="dark"] .rank__track { background: rgba(236, 236, 240, .06); }
.rank__fill, .rank__fill--warn {
  background: linear-gradient(90deg, #0B8FCB, #2EB3EF);
  box-shadow: 0 0 10px rgba(11, 143, 203, .35);
}
.rank__fill--good { background: linear-gradient(90deg, #2E9B57, #4CC27F); box-shadow: 0 0 10px rgba(46, 155, 87, .3); }
.rank__fill--bad { background: linear-gradient(90deg, #D93025, #FF6B5E); box-shadow: 0 0 10px rgba(217, 48, 37, .3); }

/* ---------- Felter ---------- */
.frm__input, .gate__row input {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
}
.frm__input:focus, .gate__row input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 18%, transparent);
}

/* ---------- Pop-ups: papir, ikke glas, saa teksten staar skarpt ---------- */
.tip, .devmenu {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  box-shadow: 0 24px 50px -22px rgba(23, 23, 26, .45);
}
.tip { border-radius: 12px; }
.devmenu { border-radius: 16px; }
.ask {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 22px; padding: 24px 24px 20px;
  box-shadow: 0 30px 70px -30px rgba(23, 23, 26, .5);
}
.ask::backdrop { background: rgba(15, 15, 18, .28); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- Login ---------- */
.gate {
  background-color: var(--bg);
  background-image: radial-gradient(var(--dots) 1px, transparent 1.4px);
  background-size: 22px 22px;
}
.gate__card {
  background: var(--surface);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--glass-edge);
  border-radius: 26px; padding: 32px 28px 28px;
  box-shadow: var(--shadow-lift);
}
.gate__mark { border-radius: 14px; box-shadow: none; }
.gate__title { font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
.gate__link { color: var(--accent-ink); }

/* ---------- Ingen tal ---------- */
.notal { display: flex; align-items: flex-start; gap: 14px; }
.notal__ico {
  flex: none; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--warn-soft); color: var(--warn-ink);
}
.notal__ico svg { width: 20px; height: 20px; }
.notal__text { display: grid; gap: 6px; min-width: 0; }
.notal__t { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.notal__d { font-size: 14px; color: var(--ink-2); line-height: 1.5; max-width: 62ch; }
.notal__why {
  margin-top: 4px; padding: 9px 12px; border-radius: 10px;
  background: var(--surface-2); color: var(--ink-strong);
  font-size: 13px; line-height: 1.5; word-break: break-word;
}
.notal--henter { align-items: center; gap: 12px; }

/* ---------- Bevaegelse ---------- */
@keyframes cardIn { from { opacity: 0; transform: translateY(18px) scale(.985); } }
.stagger > * { animation-duration: 550ms; animation-timing-function: var(--ease); }

/* ---------- Telefon ---------- */
@media (max-width: 860px) {
  .shell { padding-left: 12px; padding-right: 12px; }
  .grid { gap: 12px; }
  .card { padding: 18px; border-radius: 20px; }
  .summary { padding: 22px 20px; }
  .summary__mark { width: 44px; height: 44px; border-radius: 13px; }
  .summary__hero { font-size: 24px; }
  .hstat { padding: 8px 12px; }
  .hstat b { font-size: 20px; }
  .card.kpi .kpi__value { font-size: 30px; }
  .topbar__title { font-size: 28px; }

  /* Menuen i bunden, inden for tommelfingerens raekkevidde. */
  .rail {
    inset: auto 10px calc(10px + env(safe-area-inset-bottom)) 10px;
    padding: 6px; border-radius: 24px;
    background: color-mix(in srgb, var(--paper) 84%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--glass-edge);
    box-shadow: 0 0 0 1px rgba(23, 23, 26, .05), 0 16px 40px -18px rgba(23, 23, 26, .5);
  }
  .rail__item { border-radius: 18px; color: var(--ink-3); }
  .rail__item.is-active { color: var(--accent-ink); }
  .rail__item .rail__label { font-weight: 600; }
  .rail__marker { border-radius: 18px; background: var(--blue-soft); border: 0; box-shadow: none; }
  .rail__item.is-active .rail__icon { transform: translateY(-1px) scale(1.08); transition: transform .35s var(--spring); }
}
@media (max-width: 380px) {
  .topbar__title { font-size: 24px; }
}

/* ---------- Naar glas ikke kan eller ikke maa bruges ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --surface: rgba(255, 255, 255, .95); }
  [data-theme="dark"] { --surface: rgba(32, 33, 39, .96); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --surface: rgba(255, 255, 255, .96); }
  [data-theme="dark"] { --surface: rgba(32, 33, 39, .97); }
}

/* =========================================================
   Bokse, der kan trykkes paa, og kundens undersider
   ========================================================= */

/* ---------- Fliserne oeverst paa en kunde ---------- */
.fliser { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.flise {
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  width: 100%; min-width: 0; padding: 16px 16px 16px 16px; text-align: left;
  background: var(--surface);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--glass-edge); border-radius: 18px; box-shadow: var(--shadow-rest);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.flise:active { transform: scale(.98); }
@media (hover: hover) { .flise:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); } }
.flise .card__ico { margin-top: 1px; }
.flise__tekst { display: grid; gap: 1px; min-width: 0; flex: 1; }
.flise__titel { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.flise__vaerdi {
  font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.flise__under { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flise__pil, .cardlink__pil {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--blue-soft); color: var(--accent-ink);
}
.flise__pil svg, .cardlink__pil svg { width: 13px; height: 13px; }

/* ---------- Et helt kort, der kan trykkes paa ----------
   En usynlig knap ligger over kortet; (i)-knappen ligger over den. */
.cardlink {
  position: absolute; inset: 0; z-index: 1; border-radius: inherit;
  background: none; border: 0; cursor: pointer;
}
.cardlink:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.cardlink__pil { position: absolute; top: 16px; right: 16px; opacity: .8; transition: opacity .2s, transform .3s var(--ease); }
.kpi--link:hover .cardlink__pil { opacity: 1; transform: translate(1px, -1px); }
.kpi--link .kpi__top { padding-right: 36px; }
.kpi--link .info { z-index: 2; }
.kpi--link { cursor: pointer; }

/* Det kort, man lige er landet paa, blinker kort. */
.card { scroll-margin-top: 100px; }
@media (max-width: 860px) { .card { scroll-margin-top: 16px; } }
.card.is-flash { animation: flash 1.2s var(--ease); }
@keyframes flash {
  0%, 40% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 45%, transparent), var(--shadow-lift); }
  100% { box-shadow: var(--shadow-rest); }
}

/* ---------- Underside: tilbage-linjen ---------- */
.subtop { padding: 0 4px; }
.subtop .adminhead__back { margin: 0; }

/* ---------- Formularer, der folder ud ---------- */
.addbox { margin-top: 14px; }
.addbox__knap {
  display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 600;
  border: 1px solid rgba(23, 23, 26, .08); box-shadow: 0 2px 8px -6px rgba(23, 23, 26, .3);
  transition: transform .15s var(--ease);
}
[data-theme="dark"] .addbox__knap { border-color: rgba(236, 236, 240, .08); }
.addbox__knap::-webkit-details-marker { display: none; }
.addbox__knap:active { transform: scale(.96); }
.addbox__knap svg { width: 16px; height: 16px; color: var(--accent-ink); transition: transform .3s var(--spring); }
.addbox[open] > .addbox__knap svg { transform: rotate(45deg); }
.addbox__indhold {
  margin-top: 12px; padding: 16px; border-radius: 16px;
  background: var(--surface-2); border: 1px solid var(--line);
  animation: fold 220ms var(--ease);
}
.addbox__indhold .frm__actions { margin-top: 14px; }

/* ---------- Oekonomi ---------- */
.card.kpi--tone-good .kpi__value { color: var(--green-ink); }
.card.kpi--tone-warn .kpi__value { color: var(--warn-ink); }
.card.kpi--tone-bad .kpi__value { color: var(--red-ink); }
.linjer { margin: 4px 0 0; }
.linje { border-radius: 12px; }
button.linje { width: 100%; text-align: left; cursor: pointer; transition: background-color .2s; }
.linje--link { background: var(--blue-soft) !important; color: var(--ink); }
.linje--link:hover { background: color-mix(in srgb, var(--blue) 14%, transparent) !important; }
.linje__pil { display: grid; place-items: center; color: var(--accent-ink); }
.linje__pil svg { width: 13px; height: 13px; }
.linje--sum { margin-top: 8px; background: none !important; border-top: 1px solid var(--line); border-radius: 0; padding-top: 12px; }
.linje--sum .linje__navn { font-weight: 600; }

/* ---------- Systemer: et kort pr. system ---------- */
.sysstat { display: flex; flex-wrap: wrap; gap: 8px; }
.syskort { display: flex; flex-direction: column; gap: 14px; }
.syskort__top { display: flex; align-items: flex-start; gap: 12px; }
.syskort__ikon {
  flex: none; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--blue-soft); color: var(--accent-ink);
  font-family: var(--display); font-size: 17px; font-weight: 700;
}
.syskort__navn { flex: 1; min-width: 0; }
.syskort__navn h3 { font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
.syskort__navn p { font-size: 13.5px; color: var(--ink-2); margin-top: 1px; }
.syskort__fakta { display: grid; gap: 8px; margin: 0; }
.syskort__fakta > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.syskort__fakta dt { font-size: 12.5px; color: var(--ink-3); }
.syskort__fakta dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.syskort__note {
  padding: 10px 12px; border-radius: 12px; background: var(--surface-2);
  font-size: 13.5px; line-height: 1.5; color: var(--ink-2); white-space: pre-wrap;
}
.syskort__knapper { display: flex; gap: 8px; margin-top: auto; }
.syskort__knapper .btn-white { margin-top: 0; min-height: 38px; padding: 0 14px; font-size: 13px; }

/* ---------- Telefon ---------- */
@media (max-width: 1100px) {
  .fliser { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .fliser { gap: 10px; }
  .flise { flex-direction: column; gap: 10px; padding: 14px; }
  .flise__pil { position: absolute; top: 12px; right: 12px; }
  .flise__vaerdi { font-size: 17px; }
  .card.kpi--tone-good, .card.kpi--tone-warn, .card.kpi--tone-bad { grid-column: span 12; }
  .syskort__fakta > div { grid-template-columns: 1fr; gap: 1px; }
  .addbox__knap { width: 100%; justify-content: center; }
}