/* ═══════════════════════════════════════════════════════════════════════
   websideskraper — designsystem (dobbelt tema)
   Lys (A) er standard; mørk marine (B) slår inn automatisk via
   prefers-color-scheme. ALT farge går via tokens — ingen komponent skal
   hardkode en flate- eller tekstfarge.
   Struktur: 1 Tokens · 2 Base · 3 Rammeverk · 4 Komponenter ·
             5 Side-spesifikt · 6 Verktøyklasser
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
  color-scheme: light dark;

  /* flater — LYS (standard) */
  --bg: #f4f4f1;
  --card: #ffffff;
  --card2: #ecece7;
  --line: rgba(20,20,15,.10);
  --line2: rgba(20,20,15,.07);
  --hover: rgba(20,20,15,.03);
  --ring-fokus: rgba(42,120,214,.45);

  /* tekst */
  --fg: #1a1915;
  --mut: #5f5e57;
  --mut2: #7a786f;

  /* aksent */
  --acc: #2a78d6;
  --acc2: #2a78d6;
  --acc-svak: rgba(42,120,214,.12);
  --acc-ring: rgba(42,120,214,.32);
  --acc-tekst: #1c5cab;

  /* status (reservert; validert par per tema) */
  --good: #0a8a0a;
  --warn: #b97e00;
  --serious: #c05621;
  --bad: #c22f2f;
  --grey: #8a897f;

  /* fargevask — status i FLATEN (fliser, bannere) */
  --vask-god: #eef8ee;      --vaskring-god: rgba(10,138,10,.25);
  --vask-varsel: #fdf8ec;   --vaskring-varsel: rgba(185,126,0,.30);
  --vask-alvor: #fdf3ee;    --vaskring-alvor: rgba(192,86,33,.30);
  --vask-rod: #fdf0f0;      --vaskring-rod: rgba(194,47,47,.30);
  --vask-info: #eef4fd;     --vaskring-info: rgba(42,120,214,.30);

  /* tonede spesialflater */
  --flate-amber: #fdf6e8;   --ring-amber: rgba(185,126,0,.35);  --amber: #8a5f00;
  --fare-tekst: #b02a2a;

  /* form */
  --r-sm: 8px; --r-md: 10px; --r-lg: 12px;
  --skygge: 0 1px 3px rgba(20,20,15,.07);
  --header-bg: rgba(255,255,255,.85);
  --bg-glod: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) {
    /* flater — MØRK MARINE */
    --bg: #0e1424;
    --card: #171f33;
    --card2: #212b44;
    --line: rgba(150,180,240,.13);
    --line2: rgba(150,180,240,.09);
    --hover: rgba(150,180,240,.05);

    --fg: #eaeef8;
    --mut: #9aa7c2;
    --mut2: #8290ad;

    --acc: #5aa2f0;
    --acc2: #2f7fdc;
    --acc-svak: rgba(90,162,240,.16);
    --acc-ring: rgba(90,162,240,.40);
    --acc-tekst: #a9cdf7;

    --good: #2ebd4e;
    --warn: #f5b826;
    --serious: #f08653;
    --bad: #ef5350;
    --grey: #8b96ab;

    --vask-god: rgba(46,189,78,.10);     --vaskring-god: rgba(46,189,78,.30);
    --vask-varsel: rgba(245,184,38,.09); --vaskring-varsel: rgba(245,184,38,.32);
    --vask-alvor: rgba(240,134,83,.09);  --vaskring-alvor: rgba(240,134,83,.32);
    --vask-rod: rgba(239,83,80,.09);     --vaskring-rod: rgba(239,83,80,.35);
    --vask-info: rgba(47,127,220,.12);   --vaskring-info: rgba(90,162,240,.35);

    --flate-amber: rgba(245,184,38,.08); --ring-amber: rgba(245,184,38,.35); --amber: #e8bf6a;
    --fare-tekst: #f28b8b;

    --skygge: 0 1px 3px rgba(0,0,0,.4);
    --header-bg: rgba(14,20,36,.85);
    --bg-glod: radial-gradient(1200px 500px at 70% -10%, rgba(47,127,220,.14), transparent 60%);
  }
}
/* Manuell overstyring (tema-knappen) — HOLD I SYNK med blokken over */
:root[data-tema="dark"] {
    /* flater — MØRK MARINE */
    --bg: #0e1424;
    --card: #171f33;
    --card2: #212b44;
    --line: rgba(150,180,240,.13);
    --line2: rgba(150,180,240,.09);
    --hover: rgba(150,180,240,.05);

    --fg: #eaeef8;
    --mut: #9aa7c2;
    --mut2: #8290ad;

    --acc: #5aa2f0;
    --acc2: #2f7fdc;
    --acc-svak: rgba(90,162,240,.16);
    --acc-ring: rgba(90,162,240,.40);
    --acc-tekst: #a9cdf7;

    --good: #2ebd4e;
    --warn: #f5b826;
    --serious: #f08653;
    --bad: #ef5350;
    --grey: #8b96ab;

    --vask-god: rgba(46,189,78,.10);     --vaskring-god: rgba(46,189,78,.30);
    --vask-varsel: rgba(245,184,38,.09); --vaskring-varsel: rgba(245,184,38,.32);
    --vask-alvor: rgba(240,134,83,.09);  --vaskring-alvor: rgba(240,134,83,.32);
    --vask-rod: rgba(239,83,80,.09);     --vaskring-rod: rgba(239,83,80,.35);
    --vask-info: rgba(47,127,220,.12);   --vaskring-info: rgba(90,162,240,.35);

    --flate-amber: rgba(245,184,38,.08); --ring-amber: rgba(245,184,38,.35); --amber: #e8bf6a;
    --fare-tekst: #f28b8b;

    --skygge: 0 1px 3px rgba(0,0,0,.4);
    --header-bg: rgba(14,20,36,.85);
    --bg-glod: radial-gradient(1200px 500px at 70% -10%, rgba(47,127,220,.14), transparent 60%);
}

/* ── 2. Base ───────────────────────────────────────────────────────────── */
* { box-sizing: border-box }
body {
  margin: 0;
  font: 15px/1.5 -apple-system, system-ui, Segoe UI, Roboto, sans-serif;
  background: var(--bg-glod), var(--bg); background-color: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
}
/* iOS auto-zoomer når fokusert felt har skrift < 16px — tving 16px på mobil (beholder knipe-zoom). */
@media (max-width: 640px) { input, textarea, select { font-size: 16px !important } }

h2 {
  font-size: 12.5px; margin: 22px 0 8px; color: var(--mut2);
  text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
h2::after { content: ""; flex: 1; height: 1px; background: var(--line); order: 1 }
a.dom { color: var(--acc); text-decoration: none }
a.dom:hover { text-decoration: underline }

/* ── 3. Rammeverk ──────────────────────────────────────────────────────── */
header {
  position: sticky; top: 0; z-index: 9;
  background: var(--header-bg); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; flex-wrap: nowrap }
.bar > b { font-size: 15px; flex: 0 0 auto }
.topsearch { flex: 0 1 300px; display: flex; gap: 6px; align-items: center; min-width: 130px }
.topsearch input { flex: 1; min-width: 0; padding: 8px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font-size: 14px }
.topsearch button { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 8px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--fg); cursor: pointer }
nav { display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; overflow: visible; padding: 2px 0 }
nav a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; color: var(--mut); text-decoration: none; font-size: 14px; border: 1px solid transparent }
nav a.on { background: var(--acc-svak); color: var(--acc-tekst); border-color: var(--acc-ring) }
nav a:hover { color: var(--fg) }
.navdd { position: relative; flex: 0 0 auto }
.navdd > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; color: var(--mut); font-size: 14px; border: 1px solid transparent; white-space: nowrap }
.navdd > summary::-webkit-details-marker { display: none }
.navdd > summary.on, .navdd[open] > summary { background: var(--card2); color: var(--fg); border-color: var(--line) }
.navdd-meny {
  position: absolute; top: calc(100% + 6px); left: auto; right: 0;
  min-width: 185px; max-width: min(280px, calc(100vw - 24px));
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.14); padding: 6px; z-index: 50;
  display: flex; flex-direction: column;
}
.navdd-meny a { padding: 8px 12px; border-radius: var(--r-sm) }
.navdd-meny a:hover { background: var(--card2) }
@media (max-width: 759px) {
  .bar { flex-wrap: wrap; row-gap: 6px; padding: 8px 10px }
  .topsearch { order: 2; margin-left: auto; flex: 1 1 140px; min-width: 0 }
  .topsearch input { padding: 7px 10px; font-size: 13px }
  nav { order: 3; flex-basis: 100%; width: 100%; gap: 0 }
  nav a svg, .navdd > summary svg { display: none }
  nav a, .navdd > summary { padding: 6px 7px; font-size: 12.5px }
}
main { padding: 14px; max-width: 1500px; margin: 0 auto }

/* ── 4. Komponenter ────────────────────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px; box-shadow: var(--skygge) }
.kpi { transition: border-color .15s }
.kpi:hover { border-color: var(--acc-ring) }
.kpi .n { font-size: 28px; font-weight: 650; letter-spacing: -.01em }
.kpi .l { color: var(--mut); font-size: 12px; margin-top: 3px }

/* Knapper: .btn = primær. Varianter kombineres: «btn btn-soft btn-sm». */
.btn { display: inline-block; padding: 9px 14px; border-radius: var(--r-md); border: 1px solid transparent; background: var(--acc2); color: #fff; font-weight: 600; text-decoration: none; font-size: 14px; transition: filter .12s; cursor: pointer; font-family: inherit }
.btn:hover { filter: brightness(1.08) }
.btn-soft { background: var(--card2); color: var(--fg) }
.btn-ghost { background: var(--card2); color: var(--mut) }
.btn-ok { background: var(--vask-god); border-color: var(--vaskring-god); color: var(--good) }
.btn-danger { background: var(--vask-rod); border-color: var(--vaskring-rod); color: var(--fare-tekst) }
.btn-amber { background: var(--flate-amber); border-color: var(--ring-amber); color: var(--amber) }
.btn-sm { padding: 5px 11px; font-size: 13px }
.btn-xs { padding: 4px 10px; font-size: 12px }
.ikon-knapp { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 34px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--card2); color: var(--fg); text-decoration: none; font-size: 15px; cursor: pointer }
.ikon-knapp:hover { border-color: var(--acc-ring) }
.ikon-knapp.gjort { background: var(--vask-god); border-color: var(--vaskring-god) }

/* Piller + status */
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: var(--card2); color: var(--mut); border: 1px solid var(--line2) }
.pill.live { color: var(--good) } .pill.dead { color: var(--bad) } .pill.park { color: var(--warn) }
.pill-xs { font-size: 10px; padding: 1px 6px }
.ball { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; margin-right: 7px; flex: 0 0 auto }
.ball.st-green { background: var(--good) } .ball.st-yellow, .ball.st-orange { background: var(--warn) }
.ball.st-red { background: var(--bad) } .ball.st-grey { background: var(--grey) }
/* selskapsstatus som tekstfarge */
.os-aktiv { color: var(--good) } .os-konkurs { color: var(--bad) }
.os-avvikling { color: var(--serious) } .os-slettet, .os-ugyldig { color: var(--grey) }

/* Tabeller */
table { width: 100%; border-collapse: collapse; font-size: 14px }
.tablewrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg) }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top }
td { white-space: normal; word-break: break-word }
th { white-space: nowrap; color: var(--mut2); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em }
tr:last-child td { border-bottom: 0 }
tbody tr:hover td { background: var(--hover) }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums }
.cellwrap { white-space: normal; word-break: break-word; line-height: 1.6; max-width: 62ch }

/* Skjema */
.felt { width: 100%; padding: 9px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--card); color: var(--fg); font: inherit }
.felt-sm { padding: 7px 9px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--card); color: var(--fg); font-size: 13px; font-family: inherit }
select.felt-sm { padding: 6px }
.search { display: flex; gap: 8px; margin: 6px 0 12px }
.search input { flex: 1; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--card); color: var(--fg); font-size: 16px }
.search button { padding: 10px 14px; border-radius: var(--r-md); border: 1px solid transparent; background: var(--acc2); color: #fff; font-weight: 600; cursor: pointer }

/* Bannere (tonet flate + ring) */
.banner { border-radius: var(--r-lg); padding: 12px; border: 1px solid var(--line); display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.banner-ok { background: var(--vask-god); border-color: var(--vaskring-god) }
.banner-info { background: var(--vask-info); border-color: var(--vaskring-info) }
.banner-amber { background: var(--flate-amber); border-color: var(--ring-amber) }
.banner-rod { background: var(--vask-rod); border-color: var(--vaskring-rod) }

/* ── 5. Side-spesifikt ─────────────────────────────────────────────────── */
/* Forside: «I dag»-panel */
.idag { border: 1px solid var(--acc-ring); background: linear-gradient(180deg, var(--acc-svak), transparent); border-radius: 14px; padding: 14px 16px; margin: 14px 0 6px }
.idag-titel { font-size: 12.5px; color: var(--acc-tekst); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; margin: 0 0 10px; display: flex; gap: 8px; align-items: center }
.idag-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px }
.handling { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 14px; text-decoration: none; color: var(--fg); transition: border-color .15s; box-shadow: var(--skygge) }
.handling:hover { border-color: var(--acc-ring) }
.handling .tall { font-size: 26px; font-weight: 650; letter-spacing: -.01em; min-width: 34px }
.handling .hva { font-size: 13px; color: var(--mut); line-height: 1.35 }
.handling .hva b { display: block; color: var(--fg); font-size: 13.5px; font-weight: 600 }
.handling.tom { opacity: .5 }
.handling.varsle { border-color: var(--vaskring-varsel); background: var(--vask-varsel) }
.handling.varsle .tall { color: var(--warn) }
.handling.roed { border-color: var(--vaskring-rod); background: var(--vask-rod) }
.handling.roed .tall { color: var(--bad) }
/* Forside: trakt */
.trakt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 11px 16px; margin-top: 10px; box-shadow: var(--skygge) }
.trakt .steg { display: flex; flex-direction: column }
.trakt .steg .v { font-size: 19px; font-weight: 650; letter-spacing: -.01em }
.trakt .steg .k { font-size: 11.5px; color: var(--mut) }
.trakt .pilr { color: var(--mut2); font-size: 15px }
/* Forside: mini-fliser med fargevask */
.mgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px }
.mini { display: flex; align-items: center; gap: 9px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 9px 12px; text-decoration: none; color: var(--fg) }
.mini:hover { border-color: var(--acc-ring) }
.mini .v { font-size: 17px; font-weight: 650 }
.mini .k { font-size: 12px; color: var(--mut) }
.mini.v-god { background: var(--vask-god); border-color: var(--vaskring-god) }
.mini.v-varsel { background: var(--vask-varsel); border-color: var(--vaskring-varsel) }
.mini.v-alvor { background: var(--vask-alvor); border-color: var(--vaskring-alvor) }
.mini.v-rod { background: var(--vask-rod); border-color: var(--vaskring-rod) }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) .mini.v-god .v { color: #5fd97b } :root:not([data-tema="light"]) .mini.v-varsel .v { color: #f5c85a }
  :root:not([data-tema="light"]) .mini.v-alvor .v { color: #f39a70 } :root:not([data-tema="light"]) .mini.v-rod .v { color: #f47f7d }
}
  :root[data-tema="dark"] .mini.v-god .v { color: #5fd97b } :root[data-tema="dark"] .mini.v-varsel .v { color: #f5c85a }
  :root[data-tema="dark"] .mini.v-alvor .v { color: #f39a70 } :root[data-tema="dark"] .mini.v-rod .v { color: #f47f7d }
.delta { font-size: 11px; color: var(--warn); background: var(--vask-varsel); border: 1px solid var(--vaskring-varsel); border-radius: 999px; padding: 1px 7px; margin-left: auto }

/* Byrå-lista: hurtigfilter-chips + kort-rader */
.hurtigfilter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0 }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--mut); font-size: 13px; text-decoration: none; cursor: pointer }
.chip.on { border-color: var(--acc-ring); background: var(--acc-svak); color: var(--acc-tekst) }
.chip .n { color: var(--fg); font-weight: 600 }
.brad { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 14px; margin-bottom: 8px; box-shadow: var(--skygge) }
.brad:hover { border-color: var(--acc-ring) }
.brad .navn { font-weight: 600; font-size: 15px }
.brad .navn a { color: var(--fg); text-decoration: none }
.brad .navn a:hover { color: var(--acc) }
.brad .meta { font-size: 12.5px; color: var(--mut); margin-top: 3px; line-height: 1.5 }
.brad .kunder { margin-left: auto; text-align: right; flex: 0 0 auto }
.brad .kunder .v { font-size: 20px; font-weight: 650 }
.brad .kunder .k { font-size: 11px; color: var(--mut) }
.brad .gjor { display: flex; gap: 6px; flex: 0 0 auto }
.dots { display: inline-flex; gap: 3px; margin-right: 6px; vertical-align: 1px }
.dots .ball { margin: 0; width: 9px; height: 9px }
@media (max-width: 640px) { .brad { flex-wrap: wrap } .brad .kunder { order: 3 } .brad .gjor { order: 4; margin-left: auto } }

/* Byrå-profil: to kolonner */
.profilgrid { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 16px; align-items: start; margin-top: 12px }
@media (max-width: 1020px) { .profilgrid { grid-template-columns: 1fr } }
.sidekort { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px; margin-bottom: 12px; box-shadow: var(--skygge) }
.sidekort > h3 { margin: 0 0 8px; font-size: 12px; color: var(--mut); text-transform: uppercase; letter-spacing: .04em; font-weight: 600 }
.siderad { padding: 6px 0; border-top: 1px solid var(--line) }
.siderad:first-of-type { border-top: 0 }

/* Filter- og mobiltabeller (uendret oppførsel) */
.filterwrap { overflow-x: auto; -webkit-overflow-scrolling: touch }
@media (max-width: 640px) {
  table { font-size: 13px }
  .filterwrap { overflow: visible }
  .filterwrap table, .filterwrap tbody, .filterwrap tr, .filterwrap td { display: block; width: 100% }
  .filterwrap thead { display: none }
  .filterwrap tr { border-top: 1px solid var(--line); padding: 7px 0 }
  .filterwrap td { padding: 3px 0 !important }
  .filterwrap tr > td:first-child { font-weight: 700; color: var(--fg); text-transform: uppercase; font-size: 11px; letter-spacing: .04em; padding-bottom: 5px !important; white-space: normal !important }
  .byraa-tabell .tablewrap { overflow: visible }
  .byraa-tabell thead { display: none }
  .byraa-tabell table, .byraa-tabell tbody { display: block }
  .byraa-tabell tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 11px 13px; border-bottom: 1px solid var(--line) }
  .byraa-tabell td { display: block; border: 0; padding: 0 }
  .byraa-tabell td:nth-child(1) { flex: 1 1 100% }
  .byraa-tabell td:nth-child(2) { order: 2; color: var(--mut); font-size: 12px; white-space: nowrap }
  .byraa-tabell td:nth-child(2)::before { content: "👥 " }
  .byraa-tabell td:nth-child(3) { display: none }
  .byraa-tabell td:nth-child(4) { order: 3; margin-left: auto; text-align: right }
  .byraa-tabell td:first-child > div { margin-left: 24px }
  .oppf-tabell { overflow: visible }
  .oppf-tabell thead { display: none }
  .oppf-tabell table, .oppf-tabell tbody { display: block; width: 100% }
  .oppf-tabell tr { display: block; padding: 10px 12px; border-bottom: 1px solid var(--line) }
  .oppf-tabell tr:last-child { border-bottom: 0 }
  .oppf-tabell td { display: block; border: 0; padding: 2px 0; white-space: normal !important }
  .oppf-tabell td:last-child { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; align-items: center }
}

/* Diverse eksisterende */
.bar2 { height: 6px; background: var(--acc); border-radius: 3px; display: inline-block; vertical-align: middle }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 4px 10px; font-size: 13px }
.kv div:nth-child(odd) { color: var(--mut) }
.bhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 20px 0 2px }
.bhead .btitle { font-size: 15px; color: var(--mut); text-transform: uppercase; letter-spacing: .04em; font-weight: 600 }
.refresh { flex: 0 0 auto; font-size: 12px; text-decoration: none; color: var(--acc); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px }
.bmeta { color: var(--mut); font-size: 12px; margin: 0 0 8px }

/* layoutBare (enkle undersider uten meny) */
body.bare { background: var(--bg); padding: 20px }
body.bare h2 { font-size: 16px; margin: 0 0 6px; color: var(--fg); text-transform: none; letter-spacing: 0; display: block }
body.bare h2::after { display: none }
body.bare label { display: block; color: var(--mut); font-size: 12px }
body.bare input, body.bare textarea { font: inherit; width: 100%; padding: 9px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--card); color: var(--fg) }

/* ── 6. Verktøyklasser ─────────────────────────────────────────────────── */
.mut { color: var(--mut) }
.small { font-size: 12px }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: 12px; word-break: break-all }
.amber { color: var(--amber) }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.row-l { display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.stack { display: grid; gap: 8px }
.tc { text-align: center }
.mt-1 { margin-top: 4px } .mt-2 { margin-top: 8px } .mt-3 { margin-top: 12px }
.mb-2 { margin-bottom: 8px }
.inline { display: inline }

/* ── Helsepuls-tooltip: øyeblikkelig, pen popup (native title er treg og stygg) ── */
.pulsdot { position: relative; cursor: help; }
.pulsdot .pulsboble {
  display: none;
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: 320px; padding: 11px 14px;
  background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 26px rgba(0,0,0,.18);
  font-size: 12px; line-height: 1.55; text-align: left;
  opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease; z-index: 60;
}
.pulsdot::before {
  content: ''; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--line);
  opacity: 0; transition: opacity .12s ease; z-index: 61;
}
.pulsdot:hover .pulsboble { display: block; opacity: 1; transform: translateX(-50%) translateY(0); }
.pulsdot:hover::before { opacity: 1; }
/* de ytterste prikkene skal ikke få popup utenfor skjermen */
.pulsdot:first-child .pulsboble { left: 0; transform: translateX(0) translateY(4px); }
.pulsdot:first-child:hover .pulsboble { transform: translateX(0) translateY(0); }
.pulsdot:last-child .pulsboble { left: auto; right: 0; transform: translateX(0) translateY(4px); }
.pulsdot:last-child:hover .pulsboble { transform: translateX(0) translateY(0); }

/* Forside-seksjoner: mer luft mellom hver hvite boks (kort etterfulgt av neste overskrift) */
.card { margin-bottom: 42px; }
.card .card, .idag .card, td .card, form.card { margin-bottom: 0; }

.akt-filter.on { background: var(--acc); color: #fff; border-color: var(--acc); }

/* Aktivitets-rader: flex — kort relativ tid står ALLTID på samme linje, uten å brytes */
.akt-rad { display: flex; gap: 12px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--line); }
.akt-rad > .mut { white-space: nowrap; flex: 0 0 auto; }

/* Global sikring mot horisontal scroll (dropdowns o.l. skal aldri dra ut siden) */
body { overflow-x: clip; }

/* ── Mobil: forsidetabeller stables i stedet for å klemmes ── */
@media (max-width: 560px) {
  .kandtab tr, .fristtab tr { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .kandtab td, .fristtab td { display: block; border: none !important; padding: 1px 0 !important; text-align: left !important; }
  .kandtab td:first-child, .fristtab td:first-child { grid-column: 1 / -1; }
  .kandtab td:nth-child(2) { grid-column: 1 / -1; }  /* begrunnelsen får hele bredden */
  .hv-info { font-size: 10px !important; width: auto !important; }
  .hv-lab { width: 44px !important; }
  .hist-lab { width: 68px !important; font-size: 10.5px !important; }
}