/* ── Designtokens ───────────────────────────────────────────────────────── */
:root {
  /* Merkefarge (blå) i flere valører */
  --primar:#305496; --primar-600:#274879; --primar-700:#1f3a63;
  --primar-tint:#eef2f9; --primar-ring:rgba(48,84,150,.28);

  /* Flater og tekst */
  --bg:#f4f6fa; --surface:#ffffff; --surface-2:#f8fafc;
  --border:#e3e7ee; --border-sterk:#cfd6e2;
  --tekst:#1c2330; --muted:#5b6472; --muted-2:#828c9b;

  /* Status */
  --rod:#c0392b; --rod-bg:#fbeceb;
  --oransje:#c2620a; --oransje-bg:#fdf0e3;
  --gronn:#1e8449; --gronn-bg:#e8f5ee;
  --gul:#9a7d0a; --gul-bg:#fbf5dc;

  /* Form */
  --r:8px; --r-stor:14px; --r-pill:999px;
  --sk-1:0 1px 2px rgba(17,24,39,.06);
  --sk-2:0 2px 8px rgba(17,24,39,.07), 0 1px 2px rgba(17,24,39,.05);
  --sk-3:0 8px 24px rgba(17,24,39,.10);
  --sp:1rem;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  font:15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  margin:0; color:var(--tekst); background:var(--bg);
}

/* ── Header ─────────────────────────────────────────────────────────────── */
header {
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.65rem 1.1rem; background:var(--surface);
  border-bottom:1px solid var(--border); box-shadow:var(--sk-1);
  position:sticky; top:0; z-index:20;
}
.merke { display:flex; align-items:baseline; gap:.5rem; }
.merke-prikk {
  width:11px; height:11px; border-radius:3px; align-self:center;
  background:linear-gradient(135deg, var(--primar), var(--primar-700));
}
h1 { font-size:1.05rem; font-weight:700; letter-spacing:-.01em; color:var(--primar-700); margin:0; }
.merke-sub { font-size:.8rem; color:var(--muted-2); font-weight:500; }
#bruker { display:flex; align-items:center; gap:.55rem; font-size:.85rem; color:var(--muted); }

/* ── Breadcrumbs ────────────────────────────────────────────────────────── */
.brodsmuler {
  display:flex; flex-wrap:wrap; align-items:center; gap:.1rem;
  padding:.5rem 1.15rem; background:var(--surface-2);
  border-bottom:1px solid var(--border); font-size:.85rem;
  position:sticky; top:var(--header-h, 48px); z-index:10; min-height:2.1rem;
}
.brodsmuler:empty { display:none; }
.smule {
  display:inline-flex; align-items:center; gap:.3rem; padding:.12rem .45rem;
  border-radius:var(--r); color:var(--primar); font-weight:600;
  background:none; border:0; font:inherit; cursor:pointer; text-decoration:none;
}
.smule:hover { background:var(--primar-tint); }
.smule:focus-visible { outline:2px solid var(--primar-ring); outline-offset:1px; }
.smule.na { color:var(--tekst); cursor:default; font-weight:700; }
.smule.na:hover { background:none; }
.smule-hjem { font-size:.95rem; line-height:1; }
.smule-skille { color:var(--muted-2); padding:0 .05rem; user-select:none; }

/* ── Layout / kort ──────────────────────────────────────────────────────── */
main { padding:1.4rem 1.15rem 3rem; max-width:920px; margin:0 auto; }

/* ── Master-detalj-layout ───────────────────────────────────────────────── */
.meny-toggle { display:inline-flex; align-items:center; background:none; border:0; font-size:1.3rem; line-height:1; cursor:pointer; color:var(--primar-700); padding:.1rem .35rem; }
#layout { display:flex; align-items:flex-start; max-width:1320px; margin:0 auto; }
#sidebar {
  flex:0 0 300px; width:300px; background:var(--surface); border-right:1px solid var(--border);
  padding:1rem .8rem 2rem; position:sticky; top:calc(var(--header-h, 48px) + 2.2rem);
  max-height:calc(100vh - var(--header-h, 48px) - 2.2rem); overflow:auto;
}
/* Vertikalt objekttre (full radbredde-utheving; innhold rykker inn med dybde) */
.tre { display:flex; flex-direction:column; gap:1px; }
.tre-rad { display:flex; align-items:center; gap:.3rem; border-radius:6px; padding-left:calc(.15rem + var(--dybde, 0) * .8rem); }
.tre-rad:hover { background:var(--primar-tint); }
.tre-rad.aktiv { background:var(--primar); }
.tre-rad.aktiv .tre-navn { color:#fff; }
.tre-tri { flex:0 0 auto; width:1.15rem; height:1.15rem; display:inline-flex; align-items:center; justify-content:center; border:none; background:none; color:var(--primar-700); cursor:pointer; font-size:.68rem; line-height:1; padding:0; border-radius:4px; opacity:.7; }
.tre-tri:hover { opacity:1; background:rgba(0,0,0,.06); }
.tre-tri.tom { cursor:default; }
.tre-rad.aktiv .tre-tri { color:#fff; }
.tre-rad.aktiv .tre-tri:hover { background:rgba(255,255,255,.22); }
.tre-navn { flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; padding:.32rem .25rem; border:none; background:none; font:inherit; font-weight:600; font-size:.88rem; color:var(--primar-700); cursor:pointer; }
/* Nøytraliser global button:hover (mørk --primar-600); la radens hover/aktiv-bakgrunn vise gjennom så teksten holder kontrast. */
.tre-navn:hover { background:none; }
.tre-prikk { flex:0 0 auto; width:.55rem; height:.55rem; border-radius:50%; }
.tre-prikk.tom { background:transparent; }
.tre-prikk.Forfalt { background:#c0392b; } .tre-prikk.Snart { background:#c2620a; }
.tre-prikk.OK { background:#1e8449; } .tre-prikk.Ukjent { background:#888; }
#sidebar[hidden] { display:none; }
#layout > main { margin:0; max-width:none; flex:1 1 auto; min-width:0; }
.sb-ico { display:inline-flex; width:1.35rem; flex:0 0 auto; justify-content:center; }
.sb-nav { display:flex; flex-direction:column; gap:.1rem; margin-bottom:.45rem; }
.sb-nav button { display:flex; align-items:center; gap:.4rem; text-align:left; padding:.4rem .55rem; border:none; background:none; border-radius:var(--r); font:inherit; font-weight:600; color:var(--primar-700); cursor:pointer; }
.sb-nav button:hover { background:var(--primar-tint); }
.sb-nav button.aktiv { background:var(--primar); color:#fff; }
.sb-skille { height:1px; background:var(--border); margin:.55rem .2rem; }
.sb-tittel { display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left; background:none; border:none; cursor:pointer; font:inherit; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted-2); font-weight:700; margin:0 0 .4rem; padding:.2rem; border-radius:var(--r); }
.sb-tittel:hover { background:var(--primar-tint); }
.sb-tittel-chevron { opacity:.7; font-size:.78rem; }

@media (max-width:820px) {
  .meny-toggle { display:inline-flex; }
  #layout { display:block; }
  #sidebar { position:fixed; top:0; left:0; bottom:0; width:84%; max-width:320px; max-height:none;
    z-index:30; transform:translateX(-100%); transition:transform .2s ease; box-shadow:var(--sk-3); padding-top:1rem; }
  #sidebar.apen { transform:translateX(0); }
}
/* Sammenleggbar master-meny på desktop (☰ i toppen legger sammen / utvider). */
@media (min-width:821px) { #layout.meny-skjult > #sidebar { display:none; } }
.kort {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-stor); box-shadow:var(--sk-2);
  padding:1.15rem 1.25rem; margin-bottom:1.1rem;
}
.kort > h2:first-child, .kort > h3:first-child { margin-top:0; }
h2 { font-size:1.25rem; font-weight:700; letter-spacing:-.01em; margin:0 0 .2rem; }
h3 { font-size:.95rem; font-weight:700; color:var(--primar-700); margin:0 0 .7rem;
     text-transform:uppercase; letter-spacing:.04em; font-size:.78rem; }
.sidehode { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.sidehode h2 { display:flex; align-items:center; gap:.55rem; }
.antall { color:var(--muted-2); font-weight:600; font-size:.85rem; }
.meta { color:var(--muted); font-size:.88rem; margin:.15rem 0; }
.meta-rad { display:flex; flex-wrap:wrap; gap:.35rem .9rem; margin:.5rem 0 0; }
.meta-rad span { color:var(--muted); }
.meta-rad b { color:var(--tekst); font-weight:600; }

/* ── Knapper ────────────────────────────────────────────────────────────── */
button {
  font:inherit; font-weight:600; padding:.45rem .85rem;
  border:1px solid var(--primar); background:var(--primar); color:#fff;
  border-radius:var(--r); cursor:pointer; transition:background .12s, box-shadow .12s, transform .04s;
}
button:hover { background:var(--primar-600); border-color:var(--primar-600); }
button:active { transform:translateY(.5px); }
button:focus-visible { outline:2px solid var(--primar-ring); outline-offset:2px; }
button.sek { background:var(--surface); color:var(--primar); border-color:var(--border-sterk); }
button.sek:hover { background:var(--primar-tint); border-color:var(--primar); }
button.mini { padding:.05rem .5rem; font-size:1rem; line-height:1.5; border-radius:var(--r); }
button.slett, .slett { border-color:var(--rod); color:var(--rod); background:var(--surface); }
button.slett:hover { background:var(--rod-bg); }
.tilbake { margin-bottom:.9rem; }

/* ── Skjema ─────────────────────────────────────────────────────────────── */
input, select {
  font:inherit; padding:.42rem .55rem; color:var(--tekst);
  border:1px solid var(--border-sterk); border-radius:var(--r); background:var(--surface);
}
input:focus, select:focus { outline:2px solid var(--primar-ring); outline-offset:0; border-color:var(--primar); }
input::placeholder { color:var(--muted-2); }
.rad-form { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; }
.rad-form input, .rad-form select { min-width:0; }
.felt-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:.6rem; align-items:end; }
.felt-grid .full { grid-column:1 / -1; }
label.felt { display:flex; flex-direction:column; gap:.25rem; font-size:.78rem; color:var(--muted); font-weight:600; }

/* ── Status-badges (pill) ───────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.12rem .55rem; border-radius:var(--r-pill);
  font-size:.74rem; font-weight:700; letter-spacing:.01em; line-height:1.5;
  white-space:nowrap;
}
.badge::before { content:""; width:.45rem; height:.45rem; border-radius:50%; background:currentColor; opacity:.85; }
.badge.Forfalt { color:var(--rod);     background:var(--rod-bg); }
.badge.Snart   { color:var(--oransje); background:var(--oransje-bg); }
.badge.OK      { color:var(--gronn);   background:var(--gronn-bg); }
.badge.Ukjent  { color:var(--gul);     background:var(--gul-bg); }
.badge.Venter  { color:var(--oransje); background:var(--oransje-bg); }
/* Beholdt for inline tekstfarge (feilmeldinger m.m.) */
.Forfalt { color:var(--rod); font-weight:600; }

.chip {
  display:inline-flex; align-items:center; font-size:.72rem; font-weight:600;
  color:var(--muted); background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-pill); padding:.08rem .5rem; text-transform:capitalize;
}

/* ── Login ──────────────────────────────────────────────────────────────── */
#login { max-width:340px; margin:2rem auto; display:flex; flex-direction:column; gap:.7rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-stor);
  box-shadow:var(--sk-3); padding:1.6rem; }
#login h2 { text-align:center; }
#login input { padding:.55rem .65rem; }

/* ── Lenker i rader (delt av oppgave-/underkomponent-lister) ─────────────── */
a.lenke { color:var(--primar-700); font-weight:600; cursor:pointer; text-decoration:none; }

/* ── Underkomponent-liste ───────────────────────────────────────────────── */
ul.barn-liste { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.35rem; }
.barn-rad {
  display:flex; align-items:center; gap:.5rem; cursor:pointer;
  padding:.5rem .65rem; background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--r); transition:background .1s, border-color .1s;
}
.barn-rad:hover { background:var(--primar-tint); border-color:var(--border-sterk); }
.barn-rad a.lenke { flex:0 0 auto; }
.barn-rad .nabo-sti { margin-left:.1rem; }
.nabo-velg { width:100%; padding:.45rem .55rem; border:1px solid var(--border); border-radius:var(--r); font:inherit; background:var(--surface); }
.mal-chip { background:var(--primar-tint); color:var(--primar-700); border:1px solid var(--border-sterk); }
.mal-note { margin:.4rem 0 0; padding:.55rem .7rem; background:var(--primar-tint); border:1px solid var(--border-sterk); border-radius:var(--r); font-size:.85rem; color:var(--primar-700); }
.barn-rad .pil { margin-left:auto; color:var(--muted-2); font-size:1.05rem; line-height:1; }

/* ── Mobil felt-logging ─────────────────────────────────────────────────── */
.hurtig-utfort {
  display:block; width:100%; margin:0 0 .7rem; padding:.7rem 1rem;
  background:#1e8449; color:#fff; border:none; border-radius:var(--r);
  font:inherit; font-weight:700; font-size:1rem; cursor:pointer; transition:filter .1s;
}
.hurtig-utfort:hover { filter:brightness(.95); }
.hurtig-utfort:active { filter:brightness(.9); }

/* ── Dashbord ───────────────────────────────────────────────────────────── */
.kpi-rad { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:.6rem; margin-bottom:1rem; }
.kpi { display:flex; flex-direction:column; gap:.15rem; padding:.8rem .9rem; border:1px solid var(--border); border-radius:var(--r); background:var(--surface-2); }
.kpi.kritisk { background:#fdecea; border-color:#f5c6cb; }
.kpi-tall { font-size:1.4rem; font-weight:700; color:var(--primar-700); }
.kpi.kritisk .kpi-tall { color:#a02622; }
.kpi-merke { font-size:.8rem; font-weight:600; color:var(--muted-2); text-transform:uppercase; letter-spacing:.02em; }
.kpi-sub { font-size:.8rem; color:var(--muted-2); }
.dash-h { font-size:1rem; color:var(--primar-700); margin:.6rem 0 .4rem; }
.dash-tabell { width:100%; border-collapse:collapse; font-size:.9rem; }
.dash-tabell th, .dash-tabell td { text-align:left; padding:.4rem .5rem; border-bottom:1px solid var(--border); }
.dash-tabell th:last-child, .dash-tabell td.kr { text-align:right; white-space:nowrap; }
.barometer { display:flex; height:1.7rem; border-radius:var(--r); overflow:hidden; border:1px solid var(--border); }
.bar-seg { display:flex; align-items:center; justify-content:center; color:#fff; font-size:.78rem; font-weight:700; min-width:1.4rem; }
.bar-legende { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.4rem; font-size:.8rem; color:var(--muted-2); }
.bar-legende .bl { display:inline-flex; align-items:center; gap:.3rem; }
.tg-prikk { width:.7rem; height:.7rem; border-radius:3px; display:inline-block; }
.tg-0 { background:#1e8449; } .tg-1 { background:#8aa629; } .tg-2 { background:#c2620a; } .tg-3 { background:#c0392b; } .tg-ukjent { background:#b0b0b0; }
.risiko-skaar { flex:0 0 auto; min-width:1.6rem; text-align:center; font-weight:700; padding:.15rem .35rem; border-radius:6px; color:#fff; }
.risiko-skaar.r-hoy { background:#c0392b; } .risiko-skaar.r-middels { background:#c2620a; } .risiko-skaar.r-lav { background:#1e8449; }

/* ── Varsel-stripe (in-app notification) ────────────────────────────────── */
.varsel-stripe {
  display:flex; align-items:center; gap:.6rem; width:100%; margin-bottom:.8rem;
  padding:.6rem .9rem; border-radius:var(--r); border:1px solid; cursor:pointer;
  font-weight:600; text-align:left; transition:filter .1s;
}
.varsel-stripe:hover { filter:brightness(.97); }
.varsel-stripe.kritisk { background:#fdecea; border-color:#f5c6cb; color:#a02622; }
.varsel-stripe.snart { background:#fdf3e6; border-color:#f3d9b0; color:#8a4b0a; }
.varsel-stripe .vs-ikon { font-size:1.1rem; line-height:1; }
.varsel-stripe .vs-tekst { flex:1 1 auto; }
.varsel-stripe .vs-pil { font-weight:700; opacity:.8; }

/* ── Kontakter ──────────────────────────────────────────────────────────── */
ul.kontakt-liste { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.35rem; }
.kontakt-rad { display:flex; align-items:center; gap:.6rem; padding:.5rem .65rem; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r); flex-wrap:wrap; }
.kontakt-rad .k-navn { font-weight:600; }
.kontakt-rad .k-handling { margin-left:auto; display:inline-flex; gap:.3rem; }
.k-edit { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; }
.k-edit input, .k-edit select { padding:.3rem .5rem; border:1px solid var(--border); border-radius:var(--r); font:inherit; }

/* ── Årshjul ────────────────────────────────────────────────────────────── */
.aar-nav { display:inline-flex; gap:.3rem; }
.arshjul-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:.6rem; }
.maaned-kort { border:1px solid var(--border); border-radius:var(--r); padding:.5rem .6rem; background:var(--surface-2); }
.maaned-kort.naa { border-color:var(--primar); box-shadow:0 0 0 1px var(--primar-ring); }
.maaned-kort h3 { margin:0 0 .35rem; font-size:.82rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted-2); }
.maaned-kort ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.25rem; }
.maaned-kort .tom { margin:.1rem 0; color:var(--muted-2); }
.aarshjul-post { display:flex; align-items:center; gap:.4rem; cursor:pointer; padding:.25rem .35rem; border-radius:6px; transition:background .1s; }
.aarshjul-post:hover { background:var(--primar-tint); }
.aarshjul-post .ap-tittel { flex:1 1 auto; font-size:.84rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aarshjul-post .ap-dato { flex:0 0 auto; }
.prikk { flex:0 0 auto; width:.6rem; height:.6rem; border-radius:50%; background:var(--border-sterk); }
.prikk.Forfalt { background:#c0392b; } .prikk.Snart { background:#c2620a; }
.prikk.OK { background:#1e8449; } .prikk.Ukjent { background:#888; }

/* ── Arbeidsliste-filtre ────────────────────────────────────────────────── */
.oppg-filter { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-bottom:.5rem; }
.oppg-filter .filt { padding:.3rem .5rem; border:1px solid var(--border); border-radius:var(--r); background:var(--surface); font:inherit; }
.oppg-filter .vindu-gruppe { display:inline-flex; gap:.3rem; margin-left:auto; }
.oppg-filter .vindu.aktiv { background:var(--primar); color:#fff; border-color:var(--primar); }
.filter-tell { margin:.1rem 0 .6rem; }

/* ── Oppgave-liste ──────────────────────────────────────────────────────── */
ul.oppg-liste { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.35rem; }
.oppg-seksjon {
  display:flex; align-items:center; gap:.4rem; margin:.9rem 0 .4rem;
  font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted-2);
}
.oppg-seksjon:first-child { margin-top:0; }
.oppg-seksjon .antall { font-weight:600; }
.oppg-rad {
  display:flex; align-items:center; gap:.5rem; cursor:pointer;
  padding:.5rem .65rem; background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--r); transition:background .1s, border-color .1s;
}
.oppg-rad:hover { background:var(--primar-tint); border-color:var(--border-sterk); }
.oppg-rad .oppg-frist { margin-left:.2rem; }
.oppg-rad .pil { margin-left:auto; color:var(--muted-2); font-size:1.05rem; line-height:1; }

/* ── Aktivitetslogg ─────────────────────────────────────────────────────── */
ul.logg { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.35rem; }
ul.logg li {
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:baseline;
  padding:.5rem .65rem; background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--r); font-size:.88rem;
}
ul.logg .l-dato { font-variant-numeric:tabular-nums; color:var(--muted); font-weight:600; }
ul.logg .l-type { color:var(--primar-700); font-weight:600; }
ul.logg .tom { color:var(--muted-2); background:none; border:1px dashed var(--border); justify-content:center; }

/* ── Diverse ────────────────────────────────────────────────────────────── */
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:.45rem .55rem; border-bottom:1px solid var(--border); }

/* ── Faner (forside) ────────────────────────────────────────────────────── */
.faner { display:flex; align-items:center; gap:.3rem; margin-bottom:1.1rem; border-bottom:1px solid var(--border); }
.fane { background:none; color:var(--muted); border:0; border-bottom:2px solid transparent; border-radius:0; padding:.5rem .8rem; font-weight:600; cursor:pointer; }
.fane:hover { background:var(--primar-tint); }
.fane.aktiv { color:var(--primar-700); border-bottom-color:var(--primar); }
.faner #lastned-pdf { margin-left:auto; }
.oppg-sti { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Globalt søk (header) ───────────────────────────────────────────────── */
.sok-boks { position:relative; flex:1 1 auto; max-width:420px; margin:0 1rem; }
.sok { width:100%; padding:.4rem .7rem; border-radius:var(--r-pill); border:1px solid var(--border-sterk); background:var(--surface-2); }
/* Nedtrekket flyttes til <body> og posisjoneres fixed via JS – ligger oppå alt. */
.sok-treff { position:fixed; background:var(--surface); border:1px solid var(--border-sterk); border-radius:var(--r-stor); box-shadow:var(--sk-3); max-height:min(60vh, 440px); overflow-y:auto; z-index:1000; padding:.35rem; }
.sok-gruppe { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted-2); font-weight:700; padding:.5rem .55rem .25rem; }
.sok-rad { display:flex; align-items:center; gap:.6rem; width:100%; text-align:left; font:inherit; background:none; border:0; border-radius:var(--r); padding:.45rem .55rem; cursor:pointer; }
.sok-rad:hover { background:var(--primar-tint); }
.sok-ikon { flex:0 0 auto; width:1.6rem; height:1.6rem; display:inline-flex; align-items:center; justify-content:center; border-radius:7px; background:var(--surface-2); border:1px solid var(--border); font-size:.85rem; }
.sok-tekst { display:flex; flex-direction:column; min-width:0; gap:.05rem; }
.sok-tittel { font-weight:600; color:var(--tekst); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sok-kontekst { font-size:.74rem; color:var(--muted-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sok-tom { padding:.7rem; color:var(--muted-2); text-align:center; }

/* ── Pristilbud ─────────────────────────────────────────────────────────── */
ul.tilbud-liste { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem; }
.tilbud-rad { display:flex; flex-direction:column; gap:.25rem; padding:.55rem .65rem; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r); }
.tilbud-hode { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.tilbud-handling { display:flex; align-items:center; gap:.4rem; margin-top:.15rem; }
.badge.tb-Valgt { color:var(--gronn); background:var(--gronn-bg); }
.badge.tb-Forkastet { color:var(--rod); background:var(--rod-bg); }
.badge.tb-Avventes { color:var(--oransje); background:var(--oransje-bg); }
.badge.tb-Innhentet { color:var(--muted); background:var(--surface-2); border:1px solid var(--border); }

/* ── Vedlegg ────────────────────────────────────────────────────────────── */
.vedlegg-grid { display:flex; flex-wrap:wrap; gap:.6rem; }
.vedlegg-post { margin:0; display:flex; flex-direction:column; gap:.2rem; max-width:140px; }
.vedlegg-bilde { width:140px; height:100px; object-fit:cover; border-radius:var(--r); border:1px solid var(--border); cursor:pointer; background:var(--surface-2); }
.vedlegg-pdf { display:inline-flex; align-items:center; gap:.3rem; padding:.4rem .6rem; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r); color:var(--primar); font-weight:600; text-decoration:none; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vedlegg-post figcaption { display:flex; align-items:center; gap:.35rem; }
.vedlegg-kat { font-size:.68rem; font-weight:700; color:var(--muted); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-pill); padding:.05rem .45rem; }
.vedlegg-slett { margin-left:auto; }
.vedlegg-personvern { flex-basis:100%; font-size:.78rem; }

.akt-vedlegg, .tilbud-vedlegg { display:flex; flex-wrap:wrap; align-items:flex-start; gap:.4rem; flex-basis:100%; margin-top:.2rem; }
/* Opplastingssonen får sin egen, fullbreddes linje under ev. vedleggs-chips. */
.akt-vedlegg-form, .tilbud-vedlegg-form { display:block; flex-basis:100%; width:100%; }
/* Vedleggssone: sentrert dra-og-slipp-sone som åpner filvelgeren (skjult input). */
.vedlegg-sone {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.3rem; text-align:center; width:100%; box-sizing:border-box;
  min-height:84px; padding:.85rem 1rem; margin:.35rem 0;
  border:2px dashed var(--border-sterk); border-radius:var(--r-stor);
  background:var(--surface); color:var(--muted); cursor:pointer;
  transition:background .12s, border-color .12s, color .12s;
}
.vedlegg-sone:hover { border-color:var(--primar); background:var(--primar-tint); }
.vedlegg-sone.dra { border-color:var(--primar); background:var(--primar-tint); color:var(--primar); }
.vedlegg-sone:focus-within { outline:2px solid var(--primar-ring); outline-offset:2px; }
.vedlegg-sone.laster { opacity:.6; pointer-events:none; }
.vedlegg-sone > * { pointer-events:none; } /* klikk faller til label; hindrer drag-flimmer over barn */
.vedlegg-sone-ikon { font-size:1.6rem; line-height:1; }
.vedlegg-sone-tekst { font-size:.85rem; font-weight:600; }
.vedlegg-sone-tekst small { font-weight:400; opacity:.85; }
/* Skjult, men fokuserbar (tastatur) – labelen er den synlige sonen. */
.vedlegg-fil { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* «+ Ny …»-knapp som åpner opprettingsmodal. */
.ny-knapp { margin-top:.8rem; background:var(--surface); color:var(--primar); border:1px solid var(--border-sterk); font-weight:600; padding:.5rem .9rem; border-radius:var(--r); cursor:pointer; }
.ny-knapp:hover { background:var(--primar-tint); border-color:var(--primar); }

/* Modal (native <dialog>) – gjenbrukt for oppretting av pristilbud/aktivitet. */
.modal { border:none; border-radius:14px; padding:0; width:440px; max-width:calc(100vw - 32px); box-shadow:0 14px 44px rgba(0,0,0,.3); color:var(--tekst); }
.modal::backdrop { background:rgba(20,28,45,.45); }
.modal-form { display:flex; flex-direction:column; max-height:calc(100vh - 80px); }
.modal-hode { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:15px 18px; border-bottom:1px solid var(--border); }
.modal-hode h3 { margin:0; font-size:1.05rem; color:var(--primar-700); }
.modal-lukk { background:none; border:none; color:var(--muted); font-size:1.3rem; line-height:1; padding:.1rem .4rem; cursor:pointer; }
.modal-lukk:hover { color:var(--tekst); }
.modal-kropp { padding:16px 18px; display:flex; flex-direction:column; gap:.7rem; overflow:auto; }
.modal-kropp .felt { display:flex; flex-direction:column; gap:.25rem; font-weight:600; font-size:.82rem; color:var(--muted); }
.modal-kropp .felt input, .modal-kropp .felt select { font:inherit; font-weight:400; color:var(--tekst); padding:.5rem .6rem; border:1px solid var(--border-sterk); border-radius:var(--r); }
.modal-fot { display:flex; justify-content:flex-end; gap:.5rem; padding:13px 18px; border-top:1px solid var(--border); background:var(--surface-2); }

/* Vedlegg-seksjon i modal: eksisterende + nyvalgte filer som «chips». */
.modal-vedlegg { display:flex; flex-direction:column; gap:.4rem; }
.modal-vedlegg .felt-label { font-weight:600; font-size:.82rem; color:var(--muted); }
.modal-vedlegg .vedlegg-sone { min-height:74px; padding:.7rem 1rem; }
.vedlegg-chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.vchip { display:inline-flex; align-items:center; gap:.4rem; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:.3rem .55rem; font-size:.82rem; font-weight:600; color:var(--primar); }
.vchip.pending { font-weight:500; color:var(--tekst); background:var(--surface); border-style:dashed; }
.vchip-x { background:none; border:none; color:var(--muted-2); cursor:pointer; font-size:.95rem; line-height:1; padding:0 .1rem; }
.vchip-x:hover { color:var(--rod); }

/* Kart (Leaflet-container trenger en fast høyde). */
.kart-leaflet { height:70vh; min-height:420px; border-radius:var(--r-stor); overflow:hidden; border:1px solid var(--border); margin-top:.6rem; }
.kart-leaflet .leaflet-container { font:inherit; background:var(--surface-2); }
/* Tegne-panel + sone-etiketter (slice 2). */
.kart-panel { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-top:.6rem; padding:.6rem .8rem; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r); }
.kart-panel-felt { display:flex; align-items:center; gap:.4rem; font-weight:600; font-size:.85rem; color:var(--muted); }
.kart-panel select { font:inherit; font-weight:400; color:var(--tekst); padding:.4rem .5rem; border:1px solid var(--border-sterk); border-radius:var(--r); max-width:280px; }
.kart-panel input[type=color] { width:34px; height:28px; padding:0; border:1px solid var(--border-sterk); border-radius:var(--r); background:none; cursor:pointer; vertical-align:middle; }
/* Kart-side: verktøy i venstre kolonne, kart fyller resten (bedre på små skjermer). */
.kart-side { display:flex; gap:.8rem; align-items:stretch; height:calc(100vh - 160px); min-height:460px; }
.kart-sidepanel { flex:0 0 250px; min-width:0; display:flex; flex-direction:column; gap:.5rem; overflow-y:auto; overflow-x:hidden; }
.kart-sidepanel .sidehode { flex-wrap:wrap; }
.kart-sidepanel .sidehode h2 { margin:.2rem 0; }
.kart-sidepanel .kart-panel { flex-direction:column; align-items:stretch; margin:0; gap:.5rem; background:none; border:none; padding:0; min-width:0; }
/* Felt stables (etikett over kontroll) og krymper, så lange valg ikke gir horisontal scroll. */
.kart-sidepanel .kart-panel .kart-panel-felt { flex-direction:column; align-items:stretch; gap:.25rem; min-width:0; }
.kart-sidepanel .kart-panel select { width:100%; max-width:100%; min-width:0; }
.kart-sidepanel .kart-panel input[type=color] { align-self:flex-start; }
.kart-sidepanel .kart-panel button { width:100%; }
.kart-sidepanel #kart-hint { overflow-wrap:anywhere; }
.kart-side .kart-leaflet { flex:1; height:auto; min-height:0; min-width:0; margin:0; }
@media (max-width:720px) {
  .kart-side { flex-direction:column; height:auto; }
  .kart-sidepanel { flex-basis:auto; overflow:visible; }
  .kart-side .kart-leaflet { height:60vh; }
}
.kart-panel #kart-hint { flex-basis:100%; }
.kart-panel button[disabled] { opacity:.5; cursor:not-allowed; }
.leaflet-tooltip.sone-etikett { background:rgba(31,58,99,.85); color:#fff; border:none; box-shadow:none; font-weight:700; font-size:.72rem; padding:1px 6px; border-radius:6px; }
.leaflet-tooltip.sone-etikett::before { display:none; }
/* Kompakt sone-forhåndsvisning på node-siden. */
.kart-preview { height:220px; border-radius:var(--r); overflow:hidden; border:1px solid var(--border); margin-top:.4rem; }
/* Info-kort (popup) når man klikker en sone i kartet. */
.sone-popup .leaflet-popup-content { margin:10px 12px; }
.sone-popup-inn { display:flex; flex-direction:column; gap:.3rem; }
.sone-popup-inn strong { color:var(--primar-700); font-size:.92rem; }
.sone-popup-inn .meta { font-size:.78rem; }
.sone-popup-inn .lenke { color:var(--primar); font-weight:600; text-decoration:none; }
.sone-popup-inn .lenke:hover { text-decoration:underline; }

@media (max-width:560px) {
  main { padding:1rem .8rem 2.5rem; }
  .kort { padding:1rem; border-radius:var(--r); }
}

/* Bildekarusell (lightbox) */
body.lightbox-aapen { overflow:hidden; }
.lightbox { position:fixed; inset:0; z-index:1001; display:flex; align-items:center; justify-content:center; background:rgba(12,16,28,.9); }
.lb-figur { margin:0; max-width:92vw; max-height:88vh; display:flex; flex-direction:column; align-items:center; gap:.6rem; padding:2vh 2vw; }
.lb-bilde { max-width:92vw; max-height:78vh; object-fit:contain; border-radius:var(--r); box-shadow:0 10px 40px rgba(0,0,0,.5); background:var(--surface-2); }
.lb-tekst { color:#fff; font-size:.9rem; text-align:center; opacity:.92; }
.lb-lukk, .lb-nav { background:rgba(0,0,0,.4); color:#fff; border:none; cursor:pointer; border-radius:999px; line-height:1; display:flex; align-items:center; justify-content:center; }
.lb-lukk { position:absolute; top:14px; right:16px; width:44px; height:44px; font-size:1.3rem; }
.lb-nav { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; font-size:2rem; }
.lb-forrige { left:12px; }
.lb-neste { right:12px; }
.lb-lukk:hover, .lb-nav:hover { background:rgba(0,0,0,.72); }
.lb-lukk:focus-visible, .lb-nav:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.lb-teller { position:absolute; bottom:16px; left:0; right:0; text-align:center; color:#fff; opacity:.85; font-size:.85rem; }
@media (max-width:600px) { .lb-nav { width:40px; height:40px; font-size:1.6rem; } }

/* ── Til gjennomgang ─────────────────────────────────────────────────────── */
.sb-badge { margin-left:auto; background:var(--oransje); color:#fff; border-radius:999px; font-size:.7rem; font-weight:700; padding:.02rem .4rem; }
.sb-nav button.aktiv .sb-badge { background:#fff; color:var(--oransje); }
.gj-gruppe { margin-top:1rem; }
.gj-grouphd { font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted-2); font-weight:700; margin:0 0 .35rem; }
.gj-liste { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.35rem; }
.gj-rad { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:.5rem .6rem; }
.gj-ikon { flex:0 0 auto; }
.gj-navn { flex:0 0 auto; border:none; background:none; font:inherit; font-weight:600; color:var(--primar-700); cursor:pointer; padding:0; }
.gj-navn:hover { background:none; text-decoration:underline; } /* nøytraliser global button:hover (mørk) */
.gj-sti { flex:1 1 8rem; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gj-chips { display:flex; gap:.25rem; flex-wrap:wrap; }
.gj-chip { background:var(--oransje-bg); color:var(--oransje); border:1px solid #f3d9bf; border-radius:999px; font-size:.7rem; font-weight:700; padding:.05rem .45rem; }
.gj-fikscelle select, .gj-fikscelle input { border:1px solid var(--border-sterk); border-radius:6px; padding:.2rem .4rem; font:inherit; font-size:.82rem; background:#fff; color:var(--tekst); }
.gj-fristlbl { font-size:.78rem; color:var(--muted); display:inline-flex; gap:.3rem; align-items:center; }
.gj-kvitter { flex:0 0 auto; }

/* ── Til gjennomgang: stepper ────────────────────────────────────────────── */
.gj-hode-hoyre { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.gj-stepper { max-width:820px; }
.gj-step-topp { display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; }
.gj-step-prog { font-size:.8rem; color:var(--muted-2); font-weight:700; }
.gj-step-hode { display:flex; align-items:center; gap:.5rem; font-size:1.05rem; }
.gj-step-hode strong { color:var(--primar-700); }
.gj-step-fiks { margin:.7rem 0; }
.gj-step-fiks select, .gj-step-fiks input { border:1px solid var(--border-sterk); border-radius:6px; padding:.3rem .5rem; font:inherit; background:#fff; color:var(--tekst); }
.gj-step-knapper { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.4rem; }

/* ── Flytt-velger ────────────────────────────────────────────────────────── */
.flytt-filter { width:100%; box-sizing:border-box; border:1px solid var(--border-sterk); border-radius:6px; padding:.4rem .55rem; font:inherit; margin-bottom:.5rem; }
.flytt-liste { display:flex; flex-direction:column; gap:1px; max-height:50vh; overflow-y:auto; }
.flytt-rad { text-align:left; border:1px solid var(--border); background:var(--surface); border-radius:6px; padding:.45rem .6rem; font:inherit; color:var(--primar-700); cursor:pointer; }
.flytt-rad:hover { background:var(--primar-tint); }
.flytt-rad[hidden] { display:none; }
.gj-ferdig { font-size:1.2rem; text-align:center; margin:1rem 0; }

/* ── Node-handlingsmeny (⋯ i Rediger-hodet) ──────────────────────────────── */
.node-handlinger { position:relative; flex:0 0 auto; }
.node-meny-knapp { line-height:1; }
.node-meny { position:absolute; right:0; top:calc(100% + .25rem); z-index:25; min-width:12rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--sk-3); padding:.25rem; display:flex; flex-direction:column; gap:1px; }
.node-meny[hidden] { display:none; }
.node-meny-item { text-align:left; border:none; background:none; border-radius:6px; padding:.4rem .55rem; font:inherit; font-weight:600; color:var(--primar-700); cursor:pointer; white-space:nowrap; }
.node-meny-item:hover { background:var(--primar-tint); }

/* ── Brukeradministrasjon ────────────────────────────────────────────────── */
.brukere-tabell { width:100%; border-collapse:collapse; margin-top:.4rem; font-size:.9rem; }
.brukere-tabell th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted-2); border-bottom:1px solid var(--border); padding:.35rem .5rem; }
.brukere-tabell td { border-bottom:1px solid var(--border); padding:.4rem .5rem; vertical-align:middle; }
.brukere-tabell select { border:1px solid var(--border-sterk); border-radius:6px; padding:.2rem .35rem; font:inherit; background:#fff; }
.lenke-boks { margin-top:.8rem; padding:.7rem .8rem; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r); }
.lenke-rad { display:flex; gap:.4rem; margin-top:.3rem; }
.lenke-rad input { flex:1 1 auto; min-width:0; border:1px solid var(--border-sterk); border-radius:6px; padding:.35rem .5rem; font:inherit; background:#fff; }

/* Offentlig onboarding-kort (velkommen-siden). */
.velkommen-kort { max-width:420px; margin:2rem auto; }

/* Rapportbygger: filter-flervalg + forhåndsvisningstabell. */
.rb-filter { align-items: start; } /* topp-juster filterboksene (overstyrer .felt-grid align-items:end – flervalgene har ulik høyde) */
.rb-filter select[multiple] { min-width: 12rem; }
.rb-tabell { width: 100%; border-collapse: collapse; font-size: .9rem; }
.rb-tabell th, .rb-tabell td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.rb-tabell th { font-weight: 600; color: var(--muted); }

/* Rapportbygger: bildevelger. */
#rb-bildevelger { display: flex; flex-direction: column; gap: .6rem; margin-top: .4rem; }
.rb-bildegruppe h4 { margin: .2rem 0 .3rem; font-size: .9rem; color: var(--muted); }
.rb-bilder-grid { display: flex; flex-wrap: wrap; gap: .6rem; }
.rb-bildevalg { display: inline-flex; flex-direction: column; align-items: center; gap: .2rem; cursor: pointer; }