/* ═══════════════════════════════════════════════════════════════
   Ukeplan v4 – Stylesheet
   Tre fargetemaer: standard (grønn), lys (blå), mork
   ═══════════════════════════════════════════════════════════════ */

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* overflow-x: clip (ikke hidden): hindrer horisontal scroll UTEN å lage en
   scroll-container. `hidden` ville tvunget overflow-y til auto og brutt både
   `position: sticky` (header/fanerad) og IntersectionObserver-en (vindusscroll). */
html, body { max-width: 100%; overflow-x: clip; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; overflow-x: clip; }

/* ── Tema: standard (grønn) ─────────────────────────────────────── */
:root,
[data-theme="standard"] {
  --primær:       #16653b;
  --primær-lys:   #40916c;
  --primær-svak:  #cbe3d3;
  --bg:           #eef1ec;
  --bg-kort:      #ffffff;
  --tekst:        #1c211d;
  --tekst-svak:   #5c6b61;
  --kant:         #dde5df;
  --fare:         #dc3545;
  --advarsel:     #ffc107;
  --radius:       8px;
  --skygge:       0 1px 2px rgba(28,33,29,.05);
  --header-bg:    var(--primær);
  --header-tekst: #ffffff;
  --dag-tittel:   var(--primær);
  --dag-kant:     var(--primær);
  --økt-kant:     var(--primær-lys);
  --badge-bg:     var(--primær-svak);
  --badge-tekst:  var(--primær);
  --fridag-bg:    #FAEEDA;
  --fridag-tekst: #633806;
  --bg-i-dag:       #d5e8dc;
  --kant-i-dag:     #a9cbb6;
  --understrek-i-dag: var(--primær);
}

/* ── Tema: lys (blå-teal) ───────────────────────────────────────── */
[data-theme="lys"] {
  --primær:       #0077b6;
  --primær-lys:   #00b4d8;
  --primær-svak:  #caf0f8;
  --bg:           #f8faff;
  --bg-kort:      #ffffff;
  --tekst:        #1a1a2e;
  --tekst-svak:   #5a6a7a;
  --kant:         #d0dce8;
  --fare:         #e63946;
  --advarsel:     #f4a261;
  --header-bg:    var(--primær);
  --header-tekst: #ffffff;
  --dag-tittel:   var(--primær);
  --dag-kant:     var(--primær);
  --økt-kant:     var(--primær-lys);
  --badge-bg:     var(--primær-svak);
  --badge-tekst:  var(--primær);
  --bg-i-dag:       var(--primær-svak);
  --kant-i-dag:     var(--primær-lys);
  --understrek-i-dag: var(--primær);
}

/* ── Tema: mork ─────────────────────────────────────────────────── */
[data-theme="mork"] {
  --primær:       #74c69d;
  --primær-lys:   #95d5b2;
  --primær-svak:  #1b3a2d;
  --bg:           #121212;
  --bg-kort:      #1e1e1e;
  --tekst:        #e0e0e0;
  --tekst-svak:   #9e9e9e;
  --kant:         #333333;
  --fare:         #ff6b6b;
  --advarsel:     #ffd166;
  --header-bg:    #1a1a1a;
  --header-tekst: #e0e0e0;
  --dag-tittel:   var(--primær);
  --dag-kant:     var(--primær);
  --økt-kant:     var(--primær-lys);
  --badge-bg:     var(--primær-svak);
  --badge-tekst:  var(--primær);
  --bg-i-dag:       var(--primær-svak);
  --kant-i-dag:     var(--primær-lys);
  --understrek-i-dag: var(--primær);
}

/* ── Body & layout ─────────────────────────────────────────────── */
body {
  background: var(--bg);
  color: var(--tekst);
}
.skjult { display: none !important; }

/* ── Lastelinje ─────────────────────────────────────────────────── */
#lastelinje {
  position: fixed; top: 0; left: 0; height: 3px;
  background: var(--primær-lys); z-index: 9999;
  width: 0; transition: width .3s ease; pointer-events: none;
}
#lastelinje.aktiv { animation: laste 1.8s ease-in-out infinite; }
@keyframes laste { 0%{width:0;opacity:1} 70%{width:85%;opacity:1} 100%{width:85%;opacity:1} }
#lastelinje.ferdig { width: 100% !important; animation: none; }

/* ── Header ─────────────────────────────────────────────────────── */
.hdr-home-link { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.laster-start  { padding-top: 60px; }

header {
  background: var(--header-bg);
  color: var(--header-tekst);
  padding: 10px 20px;
  display: flex; align-items: center; gap: 12px;
  position: sticky; top: 0; z-index: 40;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
header img { height: 38px; border-radius: 4px; object-fit: contain; }
.hdr-id-blokk { display: flex; align-items: baseline; gap: 6px; flex-wrap: nowrap; }
.hdr-skolear   { font-size: .85rem; font-weight: 600; opacity: .85; white-space: nowrap; }
.skole-navn    { font-size: 1.25rem; font-weight: 800; white-space: nowrap; }
.hdr-klasse-tekst { font-size: .85rem; font-weight: 600; opacity: .85; white-space: nowrap; }
.skole-klasse {
  background: rgba(255,255,255,.2);
  border-radius: 20px; padding: 3px 12px;
  font-size: .84rem; font-weight: 600; white-space: nowrap;
}
.hdr-klasse-sel {
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 20px; padding: 3px 10px;
  font-size: .84rem; font-weight: 600; color: inherit;
  cursor: pointer; outline: none;
}
header .spacer { flex: 1; }
.hdr-btn {
  background: rgba(255,255,255,.15); color: var(--header-tekst);
  border: 1px solid rgba(255,255,255,.3);
  padding: 6px 13px; border-radius: var(--radius);
  cursor: pointer; font-size: .88rem; white-space: nowrap;
  transition: background .15s;
}
.hdr-btn:hover { background: rgba(255,255,255,.28); }
.hdr-btn.admin-aktiv { background: var(--advarsel); color: #000; border-color: transparent; }

/* Hamburger-meny (alltid synlig på alle skjermstørrelser) */
.hdr-hamburger { font-size: 1.2rem; padding: 6px 11px; display: inline-flex; }
.hdr-dropdown {
  position: absolute; top: 56px; right: 12px;
  background: var(--header-bg); border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,.25);
  display: flex; flex-direction: column; min-width: 160px; z-index: 200;
  overflow: hidden;
}
.hdr-dropdown-navn {
  padding: 10px 14px 6px; font-size: .82rem; opacity: .7;
  border-bottom: 1px solid rgba(255,255,255,.15); color: var(--header-tekst);
}
.hdr-dropdown-btn {
  background: none; color: var(--header-tekst); border: none;
  padding: 10px 14px; text-align: left; cursor: pointer; font-size: .92rem;
  transition: background .12s;
}
.hdr-dropdown-btn:hover { background: rgba(255,255,255,.15); }
.hdr-dropdown-btn.admin-aktiv { color: var(--advarsel); font-weight: 700; }

/* P25: header-overflow på mobil. «Admin» + «Lærervisning/Elevvisning» flyttes ut
   av header-raden og inn i hamburgeren på smal skjerm. Media-queriene er gjensidig
   utelukkende (≤700 vs ≥701) → nøyaktig ett sett vises, aldri duplikat/blink.
   Vis/skjul ellers (rolle/innlogging) styres fortsatt av JS via .skjult. */
@media (max-width: 700px) {
  .hdr-pc-only { display: none !important; }       /* header-toggles skjules på mobil */
}
@media (min-width: 701px) {
  .hdr-mobile-only { display: none !important; }    /* hamburger-speil skjules på PC */
}

/* ── Navigasjon ─────────────────────────────────────────────────── */
.nav-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 20px 0; flex-wrap: wrap;
}
.uke-label { font-size: 1rem; font-weight: 700; white-space: nowrap; }
.uke-nr-input {
  width: 50px; padding: 5px 6px;
  border: 1px solid var(--kant); border-radius: var(--radius);
  font-size: 1rem; font-weight: 700; text-align: center;
  background: var(--bg-kort); color: var(--tekst);
  -moz-appearance: textfield;
}
.uke-nr-input::-webkit-inner-spin-button,
.uke-nr-input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* ── Filter-bar (gammel, beholdes for lærer-visning) ─────────────── */
.filter-bar {
  display: flex; gap: 10px; padding: 10px 20px; flex-wrap: wrap; align-items: center;
}
.filter-bar select, .filter-bar input {
  padding: 7px 10px; border: 1px solid var(--kant);
  border-radius: var(--radius); font-size: .9rem;
  background: var(--bg-kort); color: var(--tekst); cursor: pointer;
}

/* ── Elevfilter (parti/gruppe) ───────────────────────────────────── */
.elev-filter-panel {
  display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center;
  padding: 10px 20px; border-bottom: 1px solid var(--kant);
  background: var(--bg-kort);
}
.elev-filter-fag {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center;
}
.elev-filter-fagnavn {
  font-size: .82rem; font-weight: 600; color: var(--tekst-svak); white-space: nowrap;
}
.elev-filter-lbl {
  display: flex; align-items: center; gap: 4px;
  font-size: .88rem; cursor: pointer; white-space: nowrap;
}
.elev-filter-badge--aktiv {
  background: var(--farge-hoved, #2a7ae2); color: #fff;
  border-color: var(--farge-hoved, #2a7ae2);
}

/* ── Overflow-meny (•••) – print og iCal ────────────────────────── */
.elev-overflow-wrap { position: relative; display: inline-block; }
.elev-overflow-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 200;
  background: var(--bg-kort); border: 1px solid var(--kant);
  border-radius: var(--radius); box-shadow: 0 4px 12px rgba(0,0,0,.15);
  min-width: 180px; padding: 4px 0;
}
.elev-overflow-item {
  display: block; width: 100%; text-align: left;
  padding: 8px 14px; font-size: .9rem;
  background: none; border: none; cursor: pointer; color: var(--tekst);
}
.elev-overflow-item:hover { background: var(--hover, #f0f0f0); }

/* ── Flerdagsbjelke-rad (over ukenettet) ────────────────────────── */
.fdag-bjelke-rad {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 8px 20px 0;
}
.fdag-bjelke {
  background: var(--fridag-bg);
  color: var(--fridag-tekst);
  border-radius: var(--radius);
  padding: 5px 8px;
  font-size: .82rem;
  font-weight: 600;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ── Uke-rutenett ───────────────────────────────────────────────── */
.uke-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 12px 20px 20px;
}
.dag-kol {
  min-width: 0;
  display: flex; flex-direction: column;
  background: #ffffff;
  border-radius: 8px;
  padding: 12px;
}
.dag-tittel {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: .82rem; font-weight: 700;
  color: var(--dag-tittel);
  text-transform: uppercase; letter-spacing: .08em;
  padding: 6px 4px 9px; border-bottom: 2px solid var(--dag-kant);
  margin-bottom: 10px;
}
.dag-dato { font-size: .72rem; font-weight: 400; opacity: .55; text-transform: none; letter-spacing: 0; color: var(--tekst-svak); white-space: nowrap; }
.dag-tittel.i-dag {
  background: var(--bg-i-dag);
  border: 1px solid var(--kant-i-dag);
  border-bottom: 3px solid var(--understrek-i-dag);
  border-radius: 6px;
  padding: 8px 10px 9px;
  margin-bottom: 10px;
}
.dag-tittel.i-dag .dag-dato { opacity: 1; font-weight: 600; color: var(--understrek-i-dag); }
.dag-okter {
  display: flex; flex-direction: column; gap: 7px;
  min-height: 180px; /* plass til minst 3 synlige */
  max-height: 70vh;
  overflow-y: auto;
}

/* ── Økt-kort ───────────────────────────────────────────────────── */
.okt-kort {
  background: var(--bg-kort);
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  box-shadow: var(--skygge);
  transition: box-shadow 120ms ease;
  padding: 10px 12px;
  border-left: 4px solid var(--økt-kant);
  position: relative;
  cursor: default;
  word-wrap: break-word; overflow-wrap: break-word;
}
.okt-kort:hover { box-shadow: 0 2px 6px rgba(0,0,0,.10); }
.okt-hode { display: flex; align-items: flex-start; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.fag-badge {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  padding: 4px 8px; border-radius: 4px;
  background: var(--badge-bg); color: var(--badge-tekst);
  text-transform: uppercase; white-space: nowrap;
}
.div-badge {
  font-size: .74rem; padding: 2px 8px; border-radius: 20px;
  background: #e9ecef; color: var(--tekst-svak); white-space: nowrap;
}
.felles-badge { font-size: .74rem; color: var(--tekst-svak); }
.felles-velger { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.felles-velger__valg { display: flex; align-items: center; gap: 4px; cursor: pointer; font-size: .9rem; }
.aktivitet { font-weight: 600; line-height: 1.2; font-size: .9rem; color: var(--tekst); margin: 3px 0 0; word-break: break-word; }
.okt-meta { font-size: .78rem; color: var(--tekst-svak); margin-top: 3px; }
/* Romsliggjør kortet slik at kebab-knappen ikke overlapper innhold */
.okt-kort--handlinger { padding-right: 28px; }

/* Kebab-knapp (⋮) — diskret, absolutt plassert i kortets hjørne */
.okt-kebab {
  position: absolute; top: 5px; right: 5px;
  background: none; border: none; cursor: pointer;
  font-size: 1.15rem; line-height: 1; padding: 2px 5px;
  opacity: .35; color: var(--tekst); border-radius: 4px;
}
.okt-kebab:hover { opacity: 1; background: var(--kant); }

/* Handlingsmeny (åpnes av kebab-klikk eller sveip) */
.okt-handlingsmeny {
  position: fixed; z-index: 200;
  background: var(--bg-kort); border: 1px solid var(--kant);
  border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,.18);
  min-width: 130px; overflow: hidden; display: flex; flex-direction: column;
}
.okt-handlingsrad {
  display: block; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  padding: 9px 14px; font-size: .9rem; color: var(--tekst);
}
.okt-handlingsrad:hover { background: var(--kant); }
.okt-handlingsrad--fare { color: var(--fare); }

/* ── Flerdagshendelse ───────────────────────────────────────────── */
.fdag-banner {
  background: #fff3cd; border: 1px solid var(--advarsel);
  border-radius: var(--radius); padding: 8px 14px;
  font-size: .88rem; font-weight: 600; margin: 8px 20px 0;
}
[data-theme="mork"] .fdag-banner { background: #3a2f00; border-color: var(--advarsel); color: var(--advarsel); }

/* ── Ferie/fridag-banner ────────────────────────────────────────── */
.ferie-banner {
  background: #fff3cd; border: 1px solid var(--advarsel);
  border-radius: var(--radius); padding: 18px;
  text-align: center; font-weight: 700; font-size: 1.05rem;
  margin: 12px 20px;
}
[data-theme="mork"] .ferie-banner { background: #3a2f00; color: var(--advarsel); }

/* ── Tom uke ────────────────────────────────────────────────────── */
.tom-uke { text-align: center; color: var(--tekst-svak); padding: 40px 20px; font-size: .95rem; }

/* ── Velkomstside (ingen klasse valgt) ──────────────────────────── */
.velkomst-side { text-align: center; padding: 40px 20px 60px; max-width: 560px; margin: 0 auto; }
.velkomst-logo { max-height: 80px; max-width: 200px; object-fit: contain; margin-bottom: 16px; }
.velkomst-tittel { font-size: 1.6rem; font-weight: 700; margin: 0 0 8px; color: var(--tekst); }
.velkomst-ingress { font-size: 1rem; color: var(--tekst-svak); margin: 0 0 24px; }
.velkomst-tom { font-size: .95rem; color: var(--tekst-svak); font-style: italic; }
.velkomst-klasser { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.velkomst-klasse-btn {
  display: inline-block; padding: 14px 28px; background: var(--primær); color: #fff;
  border-radius: var(--radius); font-size: 1.1rem; font-weight: 700; text-decoration: none;
  transition: opacity .15s;
}
.velkomst-klasse-btn:hover { opacity: .85; }

/* ── Knapper ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: var(--radius); border: none;
  cursor: pointer; font-size: .92rem; font-weight: 500;
  transition: opacity .15s, transform .1s;
}
.btn:hover { opacity: .85; }
.btn:active { transform: scale(.98); }
.btn:disabled, .btn.btn-passiv {
  opacity: .35; cursor: not-allowed;
  filter: grayscale(30%);
  pointer-events: none;
}
.btn-p  { background: var(--primær); color: #fff; }
.btn-s  { background: var(--bg-kort); color: var(--tekst); border: 1px solid var(--kant); }
.btn-f  { background: var(--fare); color: #fff; }
.btn-sm { padding: 5px 11px; font-size: .82rem; }
.btn-ikon { padding: 5px 8px; font-size: .9rem; }

/* ── Kort (generisk) ────────────────────────────────────────────── */
.kort {
  background: var(--bg-kort); border-radius: var(--radius);
  box-shadow: var(--skygge); padding: 20px; margin-bottom: 16px;
}
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px 40px; }

/* ── Skjema ─────────────────────────────────────────────────────── */
input, textarea, select { background: #ffffff; border: 1px solid var(--kant); }
.felt { margin-bottom: 14px; }
.felt label { display: block; font-size: .86rem; font-weight: 600; margin-bottom: 4px; color: var(--tekst); }
.felt input:not([type=checkbox]):not([type=radio]), .felt select, .felt textarea,
input.felt, select.felt, textarea.felt {
  width: 100%; padding: 8px 11px;
  border: 1px solid var(--kant); border-radius: var(--radius);
  font-size: .92rem; font-family: inherit;
  background: var(--bg-kort); color: var(--tekst);
}
.felt input[type=checkbox], .felt input[type=radio] { width: auto; flex-shrink: 0; }
.felt textarea, textarea.felt { resize: vertical; min-height: 70px; }
.felt input:focus, .felt select:focus, .felt textarea:focus,
input.felt:focus, select.felt:focus, textarea.felt:focus {
  outline: none; border-color: var(--primær-lys);
  box-shadow: 0 0 0 3px rgba(64,145,108,.15);
}
.feil-tekst {
  color: var(--fare); font-size: .86rem;
  background: rgba(220,53,69,.08); border: 1px solid rgba(220,53,69,.3);
  border-radius: var(--radius); padding: 9px 12px;
  margin-bottom: 10px; display: flex; align-items: flex-start; gap: 7px;
}

/* P50/P51: par-rader i skjema (f.eks. «Ny økt») – flere .felt på samme
   linje i stedet for én per linje. Barna fyller linjen jevnt som standard.
   align-items:flex-start (i stedet for flex-stiling standard "stretch")
   hindrer at et kortere felt (f.eks. en tom Parti/gruppe-boks) blir
   kunstig strukket til å matche et høyere nabofelt med tomt rom under. */
.skjema-rad { display: flex; gap: 10px; align-items: flex-start; }
.skjema-rad > .felt { flex: 1 1 0; min-width: 0; }
/* Smal-variant (Aktivitet/Møtested): feltene skal IKKE strekke seg til å
   fylle linjen – bredden dimensjoneres etter tegngrensen (maxlength). */
.skjema-rad--smal > .felt { flex: 0 0 auto; }
.skjema-felt--akt { max-width: 140px; }
.skjema-felt--opp { max-width: 190px; }
/* P52: mindre linjeavstand i «Ny økt» – kun denne modalen (Rediger/Kopier
   er uendret). Høyere spesifisitet enn «.skjema .felt» (style.css lenger
   ned) sikrer at denne vinner uavhengig av kildekode-rekkefølge. */
form.skjema--kompakt .felt { margin-bottom: 8px; }
@media (max-width: 700px) {
  .skjema-rad { flex-direction: column; gap: 0; }
  .skjema-rad--smal > .felt { flex: 1 1 0; }
  .skjema-felt--akt, .skjema-felt--opp { max-width: none; }
}

/* ── Fane-bar ───────────────────────────────────────────────────── */
.fane-bar {
  display: flex; gap: 2px; border-bottom: 2px solid var(--kant);
  margin-bottom: 20px; flex-wrap: wrap;
  position: sticky; top: var(--header-h, 58px); z-index: 30;
  background: var(--bg); padding-top: 8px;
}
.fane {
  padding: 8px 16px; border: none; background: none;
  cursor: pointer; font-size: .92rem; color: var(--tekst-svak);
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color .15s;
}
.fane.aktiv { color: var(--primær); border-bottom-color: var(--primær); font-weight: 700; }
.fane:hover:not(.aktiv) { color: var(--tekst); }

/* Klassevelger-fane (fane 0): native <select> integrert i faneraden */
.fane-velger { display: inline-flex; align-items: center; gap: 4px; }
.fane-velger-sel {
  border: none; background: none; cursor: pointer;
  font: inherit; color: inherit; font-weight: inherit;
  padding: 2px 2px 2px 4px; outline: none; max-width: 11rem;
}

/* ── Modal ──────────────────────────────────────────────────────── */
.modal-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; padding: 16px;
}
.modal {
  background: var(--bg-kort); color: var(--tekst);
  border-radius: var(--radius); width: 100%;
  max-width: 560px; max-height: 92vh; overflow-y: auto; padding: 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
.modal.modal-xl { max-width: 820px; }
.modal h3 { margin-bottom: 18px; font-size: 1.05rem; }
.modal-bunn { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }

/* ── Lagre-overlay ──────────────────────────────────────────────── */
.lagre-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 500; flex-direction: column; gap: 16px;
}
.lagre-overlay .overlay-boks {
  background: var(--bg-kort); border-radius: 16px;
  padding: 32px 40px; text-align: center;
  max-width: 340px; width: 90%;
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
}
.lagre-overlay .overlay-tekst { font-size: 1rem; color: var(--tekst-svak); margin-top: 12px; }
.lagre-overlay .overlay-ok { font-size: 2.5rem; }
.spinner {
  width: 44px; height: 44px; border-radius: 50%;
  border: 4px solid var(--kant);
  border-top-color: var(--primær);
  animation: spin .8s linear infinite;
  margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── AI-overlay («AI jobber» med funfacts) ──────────────────────── */
.ai-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 18, 14, .82);
  display: flex; align-items: center; justify-content: center;
  z-index: 600; /* over .modal-bg (200) og .lagre-overlay (500) */
  padding: 24px;
}
.ai-overlay-boks {
  text-align: center; color: #fff;
  width: 100%; max-width: 460px;
}
.ai-overlay-ikon {
  font-size: 3rem; line-height: 1;
  animation: ai-puls 1.6s ease-in-out infinite;
}
@keyframes ai-puls {
  0%, 100% { transform: scale(1);    opacity: .7; }
  50%      { transform: scale(1.18); opacity: 1; }
}
.ai-overlay-tittel { margin-top: 16px; font-size: 1.15rem; font-weight: 600; }
.ai-overlay-under  { margin-top: 6px; font-size: .9rem; opacity: .65; }
.ai-overlay-fakta {
  margin-top: 28px;
  background: rgba(16, 28, 21, .95);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--radius);
  padding: 14px 8px 14px 16px;
  display: flex; align-items: center; gap: 6px;
  text-align: left;
}
.ai-overlay-fakta-innhold { flex: 1; min-width: 0; }
.ai-overlay-fakta-label {
  display: block; font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--primær-svak); opacity: .9; margin-bottom: 4px;
}
.ai-overlay-fakta-tekst {
  font-size: .95rem; line-height: 1.4; min-height: 2.8em;
  opacity: 1; transition: opacity .3s ease;
}
.ai-overlay-fakta-tekst.fade-ut { opacity: 0; }
.ai-overlay-neste {
  flex: none; min-width: 44px; min-height: 44px;
  background: none; border: none; border-radius: var(--radius);
  color: #fff; font-size: 1.4rem; cursor: pointer; opacity: .8;
}
.ai-overlay-neste:hover, .ai-overlay-neste:focus-visible {
  opacity: 1; background: rgba(255,255,255,.12);
}

/* ── Skolerute: skoleår-banner, veksler og AI-forhåndsvisning ───── */
.skolear-banner {
  background: var(--badge-bg); color: var(--badge-tekst);
  border-radius: var(--radius); padding: 10px 14px;
  font-weight: 600; font-size: .95rem; margin: 0 0 14px;
}
.planlegging-banner {
  background: #fff3cd; color: #664d03;
  border: 1px solid #ffda6a; border-radius: var(--radius);
  padding: 10px 14px; font-weight: 600; font-size: .92rem; margin: 0 0 14px;
}
[data-theme="mork"] .planlegging-banner {
  background: #3a2f00; color: #ffd166; border-color: #7a6000;
}
.skolear-veksler {
  display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap;
}
.skolear-veksler-knapp { font-size: .9rem; }
/* Modalen er en flex-kolonne: listen scroller for seg, mens bunnfeltet
   (erstatt/legg til + Avbryt/Lagre) alltid er synlig. */
.skolerute-prev-modal { display: flex; flex-direction: column; overflow: hidden; }
.skolerute-prev-liste { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.skolerute-prev-rad {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr .55fr .9fr 38px;
  gap: 6px; align-items: center; margin-bottom: 4px;
}
.skolerute-prev-rad .felt { margin-bottom: 0; padding: 4px 7px; font-size: .85rem; }
.skolerute-prev-rad .btn-ikon { padding: 3px 5px; }
.skolerute-prev-uke {
  font-size: .82rem; color: var(--tekst-svak); white-space: nowrap;
}
.skolerute-prev-hode {
  font-size: .78rem; font-weight: 600; color: var(--tekst-svak);
  margin-bottom: 2px;
}
.skolerute-prev-legg-til { padding: 8px 0 4px; }
.skolerute-prev-bunn {
  flex: none; border-top: 1px solid var(--kant); margin-top: 12px;
}
.skolerute-prev-bunn .modal-bunn { margin-top: 12px; }
.skolerute-prev-modus {
  display: flex; flex-direction: column; gap: 5px; margin-top: 10px;
}
.skolerute-prev-modus label {
  display: flex; align-items: center; gap: 8px;
  font-size: .95rem; cursor: pointer;
}
@media (max-width: 640px) {
  .skolerute-prev-rad { grid-template-columns: 1fr 1fr; }
  .skolerute-prev-hode { display: none; }
  .skolerute-prev-rad input[type="text"] { grid-column: 1 / -1; }
  .skolerute-prev-rad { border-bottom: 1px solid var(--kant); padding-bottom: 8px; margin-bottom: 10px; }
}

/* ── Bulk-valg ──────────────────────────────────────────────────── */
.bulk-bar {
  background: var(--primær-svak); border: 1px solid var(--primær-lys);
  border-radius: var(--radius); padding: 10px 16px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 20px 10px; font-size: .9rem;
}
.okt-kort.valgt { outline: 2px solid var(--primær); }
.okt-checkbox { position: absolute; top: 9px; left: 9px; }

/* ── Søk ────────────────────────────────────────────────────────── */
.sok-felt {
  padding: 8px 12px; border: 1px solid var(--kant); border-radius: var(--radius);
  font-size: .92rem; background: var(--bg-kort); color: var(--tekst); width: 240px;
}

/* ── Tabell ─────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: 9px 12px; border-bottom: 1px solid var(--kant); text-align: left; }
th { font-weight: 600; background: var(--bg); color: var(--tekst-svak); }
tr:hover td { background: var(--primær-svak); }
[data-theme="mork"] tr:hover td { background: #2a2a2a; }

/* ── Varsel ─────────────────────────────────────────────────────── */
.varsel {
  background: #fff3cd; border: 1px solid var(--advarsel);
  border-radius: var(--radius); padding: 10px 14px;
  font-size: .88rem; display: flex; gap: 8px; align-items: flex-start;
}
[data-theme="mork"] .varsel { background: #2d2400; color: var(--advarsel); }
.varsel-fare { background: rgba(220,53,69,.1); border-color: var(--fare); }

/* ── Lærerpanel: topprad ─────────────────────────────────────────── */
.laerer-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 4px 0 12px;
}
.laerer-top label { font-weight: 600; font-size: .9rem; }

/* ── Del-dropdown ───────────────────────────────────────────────── */
.del-dropdown-wrapper { position: relative; display: inline-block; }
.del-dropdown-menu {
  position: absolute; top: calc(100% + 4px); right: 0;
  background: var(--bg-kort); border: 1px solid var(--kant);
  border-radius: var(--radius); box-shadow: 0 4px 12px rgba(0,0,0,.12);
  min-width: 180px; z-index: 200; padding: 4px 0;
}
.del-dropdown-item {
  display: block; width: 100%; text-align: left;
  background: none; border: none; padding: 9px 14px;
  font-size: .9rem; cursor: pointer; color: var(--tekst);
}
.del-dropdown-item:hover { background: var(--bg-hover); }

/* ── Skoleår-velger i lærervisning ─────────────────────────────── */
.skolear-sel {
  background: var(--bg-kort); border: 1px solid var(--kant);
  border-radius: var(--radius); padding: 5px 10px;
  font-size: .85rem; font-weight: 600; color: var(--primær);
  cursor: pointer; outline: none;
}
.skolear-sel:focus { border-color: var(--primær-lys); }

/* ── Banner: lese-modus for tidligere skoleår ───────────────────── */
.tidligare-aar-banner {
  background: #fff8e1; border: 1px solid #f4c430; border-radius: var(--radius);
  padding: 10px 14px; font-size: .88rem; color: #7a6000; margin-bottom: 12px;
}

/* ── Banner: planleggingsvindu for neste skoleår ────────────────── */
.neste-aar-banner {
  background: #e8f4fd; border: 1px solid #90caf9; border-radius: var(--radius);
  padding: 10px 14px; font-size: .88rem; color: #0d47a1; margin-bottom: 12px;
}

/* ── «Alle mine økter»: tabell (desktop) + kort-liste (mobil) ─────── */
/* Uke-overskrift med scroll-offset for sticky header + fane-bar */
.min-plan-uke {
  margin: 22px 0 8px;
  scroll-margin-top: calc(var(--header-h, 58px) + 54px);
}
.min-plan-uke:first-of-type { margin-top: 4px; }

/* Skolerute-merke i «Alle mine økter» (ferie/høytid/planleggingsdag) */
.min-plan-fridag {
  background: var(--fridag-bg); color: var(--fridag-tekst);
  border-radius: 6px; padding: 6px 12px; margin: 2px 0;
  font-size: .85rem; font-weight: 500;
}
.min-plan-fridag .mp-fridag-dag  { font-weight: 700; }
.min-plan-fridag .mp-fridag-dato { font-weight: 400; opacity: .65; font-size: .8rem; }

/* Desktop: rad-basert flex. Hver økt pakkes tett etter SITT eget innhold
   (ikke en justert tabell): faste, litt smale kolonner for ☑/Klasse/Fag, mens
   P/G·Aktivitet·Oppmøte hugger innholdet og Info sluker slakken til høyre.
   Tomme felt utelates i markup → ingen tomromsfelt mellom kolonnene. */
.min-plan-tabell { display: flex; flex-direction: column; font-size: .9rem; }
.min-plan-rad {
  display: flex; align-items: flex-start;
  padding: 7px 4px; border-bottom: 1px solid var(--kant);
  /* Bryt på ordgrense, aldri tegn-for-tegn (overstyrer .side-wrap word-break) */
  word-break: normal; overflow-wrap: break-word;
}
.min-plan-rad:hover { background: var(--primær-svak); }
[data-theme="mork"] .min-plan-rad:hover { background: #2a2a2a; }
.min-plan-rad > div { min-width: 0; }   /* tillat krymping/bryting i flex */
/* Faste kolonner (litt smalere enn før) */
.min-plan-rad .mp-cb     { flex: 0 0 auto; width: 22px; text-align: center; }
.min-plan-rad .mp-klasse { flex: 0 0 auto; width: 74px; white-space: nowrap; padding-right: 10px; }
.min-plan-rad .mp-fag    { flex: 0 0 auto; width: 78px; padding-right: 10px; }
/* Innholds-huggende kolonner + Info som sluker resten. Diskret vertikalt skille
   (border-left + padding) foran hver av dem. */
.min-plan-rad .mp-pg   { flex: 0 1 auto; }
.min-plan-rad .mp-akt  { flex: 0 1 auto; }
.min-plan-rad .mp-opp  { flex: 0 1 auto; }
.min-plan-rad .mp-info { flex: 1 1 auto; }
.min-plan-rad .mp-pg, .min-plan-rad .mp-akt,
.min-plan-rad .mp-opp, .min-plan-rad .mp-info {
  border-left: 1px solid var(--kant); padding-left: 12px; margin-left: 12px;
}
.min-plan-cb { width: 17px; height: 17px; cursor: pointer; }
.mp-klasse-navn { display: block; font-weight: 700; }
.mp-dag { display: block; font-size: .72rem; color: var(--tekst-svak); opacity: .8; }
.mp-fag-badge {
  display: inline-block; padding: 1px 8px; border-radius: 4px;
  background: var(--badge-bg); color: var(--badge-tekst);
  font-size: .78rem; font-weight: 600; white-space: nowrap;
}
.mp-pg   { font-size: .82rem; color: var(--tekst-svak); white-space: nowrap; }
.mp-akt  { font-weight: 500; }
.mp-opp  { font-size: .82rem; color: var(--tekst-svak); }
.mp-info { font-size: .82rem; color: var(--tekst-svak); position: relative; padding-right: 30px; }
.min-plan-kebab {
  position: absolute; top: 2px; right: 4px;
  opacity: .4; font-size: 1.1rem;
}
.min-plan-kebab:hover { opacity: 1; }

/* «Denne uka»-knapp: flytende, vises kun når scrollet forbi inneværende uke */
.denne-uka-btn {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 22px; z-index: 35;
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
  border-radius: 22px; padding: 9px 20px;
}

/* Desktop = tabell, mobil = kort-liste. Bytt på ~700px-brekkpunktet. */
.min-plan-kort { display: none; }
.min-plan-kort .session-wrapper .min-plan-cb { margin-top: 12px; flex-shrink: 0; }
@media (max-width: 700px) {
  .min-plan-tabell { display: none; }
  .min-plan-kort { display: flex; flex-direction: column; gap: 7px; }
}

/* ── P42: Kompakt-modus i «Alle mine økter» (kun desktop) ─────────── */
/* Modusvelger «Kompakt | Detaljer» — sticky rett under faneraden (px-toppen
   settes fra JS der header-/fanehøydene måles). Skjult på mobil: kortlisten
   er uendret der. */
.mp-modus-bar {
  position: sticky; z-index: 25;
  display: flex; gap: 4px; padding: 5px 0 7px;
  background: var(--bg);
}
.mp-modus-knapp {
  border: 1px solid var(--kant); background: none; color: var(--tekst-svak);
  padding: 3px 14px; font-size: .82rem; cursor: pointer; border-radius: 14px;
}
.mp-modus-knapp.aktiv {
  background: var(--primær); border-color: var(--primær);
  color: #fff; font-weight: 600;
}
@media (max-width: 700px) { .mp-modus-bar { display: none; } }

/* Kompakt rad: halvert høyde (3px vs 7px padding), én tekstlinje. Faste
   kolonnebredder — tomme celler beholder bredden (tomrom er informasjon),
   derfor IKKE auto-fit grid. */
.mpk-rad { padding: 1px 4px; align-items: baseline; font-size: .88rem; line-height: 1.3; }
.mpk-rad .min-plan-cb { width: 15px; height: 15px; vertical-align: -2px; }
.mpk-uke    { flex: 0 0 auto; width: 34px; font-weight: 700; }
.mpk-dag    { flex: 0 0 auto; width: 92px; font-size: .78rem; color: var(--tekst-svak); white-space: nowrap; }
.mpk-klasse { flex: 0 0 auto; width: 52px; font-size: .78rem; color: var(--tekst-svak); white-space: nowrap; }
.mpk-fag    { flex: 0 0 auto; width: 80px; padding-right: 8px; }
.mpk-tittel { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 6px; }
.mpk-tekst {
  min-width: 0; flex: 0 1 auto;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.mpk-tekst.utvidet { white-space: normal; overflow: visible; text-overflow: clip; }
.mpk-hint { color: var(--tekst-svak); font-size: .82rem; }
.mpk-mer {
  flex: 0 0 auto; border: none; background: none; cursor: pointer;
  color: var(--primær); font-size: .78rem; padding: 0 2px;
}
.mpk-handling { flex: 0 0 auto; width: 26px; text-align: right; }
.mpk-kebab { position: static; font-size: 1rem; padding: 0 4px; }

/* Tynn ferie-/fridagsmarkør i samme kolonneoppsett — ingen egen overskriftsrad */
.mpk-fridag {
  background: var(--fridag-bg); color: var(--fridag-tekst);
  padding: 2px 4px; font-size: .82rem;
}
.mpk-fridag .mpk-dag { color: inherit; opacity: .8; }
.mpk-fridag .mpk-hint { color: inherit; opacity: .65; }
.mpk-fridag-tekst { font-weight: 500; }

/* Kompakt gjelder kun desktop: der skjules h3-uke-overskriftene (ukenummeret
   bor i kolonnen) og mobil-ferie-merkene; uke-ankrene (h3 i Detaljer, første
   rad i kompakt) trenger ekstra scroll-offset for modusvelgeren. */
@media (min-width: 701px) {
  .min-plan--kompakt .min-plan-uke { display: none; }
  .min-plan--kompakt .mp-kun-mobil { display: none; }
  .min-plan .min-plan-uke { scroll-margin-top: calc(var(--header-h, 58px) + 96px); }
}
.mp-anker { scroll-margin-top: calc(var(--header-h, 58px) + 96px); }

/* ── Kopi-modal: hint og AI-påminnelse ──────────────────────────── */
.kopi-hint { font-size: .85rem; color: var(--tekst-svak); margin-bottom: 12px; }
.sporbarhet-info { font-size: .8rem; color: var(--tekst-svak); margin: -4px 0 12px; }
.ai-paaminnelse {
  background: var(--primær-svak); border-radius: var(--radius);
  padding: 8px 12px; font-size: .82rem; color: var(--badge-tekst); margin-bottom: 12px;
}
.felt-cb { width: 18px; height: 18px; cursor: pointer; }

/* ── Session-wrapper (kort + avkrysning) ─────────────────────────── */
.session-wrapper { display: flex; align-items: flex-start; gap: 6px; }
.session-wrapper .okt-kort { flex: 1; min-width: 0; }
.session-cb { margin-top: 6px; cursor: pointer; flex-shrink: 0; }

/* ── Økt-kort sub-elementer ──────────────────────────────────────── */
.session-card__meeting,
.session-card__info,
.session-card__teacher { font-size: .78rem; color: var(--tekst-svak); margin-top: 2px; word-break: break-word; overflow-wrap: break-word; }
.session-card__meeting { display: flex; gap: 6px; align-items: flex-start; }
.session-card__info { font-style: italic; line-height: 1.3; }
.session-card__teacher { border-top: 1px solid var(--kant); padding-top: 9px; margin-top: 2px; }
.session-card__class {
  display: block; font-size: .75rem; font-weight: 700;
  color: var(--primær); margin-bottom: 4px; letter-spacing: .02em;
}

/* ── Søkeresultater ──────────────────────────────────────────────── */
.search-results { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.search-results .okt-kort { cursor: default; }

/* ── Klasse-admin ────────────────────────────────────────────────── */
.klasse-admin-innhold { margin-top: 16px; }
.mde-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--kant);
}
.mde-row:last-of-type { border-bottom: none; }
.mde-row > span { flex: 1; font-size: .92rem; }

.subj-config-box {
  background: var(--bg-kort); border: 1px solid var(--kant);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px;
  box-shadow: var(--skygge);
}
.subj-config-box > strong { font-size: .95rem; }
.days-row { display: flex; gap: 14px; margin: 8px 0 4px; flex-wrap: wrap; align-items: center; }
.days-row label { font-size: .88rem; display: flex; align-items: center; gap: 4px; }
.div-list { margin-top: 10px; border-top: 1px solid var(--kant); padding-top: 8px; }
.div-lagre-rad { margin: 10px 0 16px; }
.div-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.input-sm { width: 180px !important; }
.div-checkboxes { display: flex; flex-direction: column; gap: 6px; min-height: 1.2rem; }
.div-check-lbl { display: flex; align-items: center; gap: 6px; font-size: .9rem; cursor: pointer; }

/* P57: scrollbar fag/parti-liste i «Be om tilgang»-modalen */
.tilgang-liste {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 180px; overflow-y: auto;
  border: 1px solid var(--kant); border-radius: var(--radius);
  padding: 8px 10px; background: var(--bg-kort);
}
.admin-fag-blokk { margin-bottom: 6px; }
.admin-grupper-rad { padding: 8px 0 4px 18px; border-left: 3px solid var(--kant); margin-left: 6px; margin-top: 4px; }

/* ── Sikkerhetskopi ──────────────────────────────────────────────── */
.backup-list {
  max-height: 300px; overflow-y: auto;
  border: 1px solid var(--kant); border-radius: var(--radius);
  padding: 6px 12px; margin: 10px 0; background: var(--bg-kort);
  font-size: .88rem;
}
.backup-list > div { padding: 5px 0; border-bottom: 1px solid var(--kant); display: flex; gap: 8px; align-items: center; }
.backup-list > div:last-child { border-bottom: none; }

/* ── AI økt-forhåndsvisning ──────────────────────────────────────── */
.ai-preview { margin-top: 14px; }
.preview-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.preview-table th { padding: 6px 8px; text-align: left; border-bottom: 2px solid var(--kant); font-weight: 700; color: var(--tekst-svak); font-size: .8rem; }
.preview-table td { padding: 6px 8px; border-bottom: 1px solid var(--kant); }
.conf--high   { color: #198754; font-weight: 700; }
.conf--medium { color: #e67e22; font-weight: 700; }
.conf--low    { color: var(--fare); font-weight: 700; }
.advarsel-tekst { color: #856404; background: #fff3cd; border: 1px solid #ffc107; border-radius: 6px; padding: 8px 12px; margin-bottom: 8px; font-size: .87rem; }

/* ── Økt-import redigerbar forhåndsvisning ── */
.okt-import-modal { display: flex; flex-direction: column; overflow: hidden; }
.okt-import-prev { flex: 1 1 auto; overflow-y: auto; min-height: 0; margin-top: 12px; }
.okt-import-liste { }
.okt-import-bunn { border-top: 1px solid var(--kant); padding-top: 10px; margin-top: 4px; }
.okt-import-legg-til { margin-bottom: 8px; }

.okt-import-hode { font-size: .78rem; font-weight: 700; color: var(--tekst-svak); border-bottom: 2px solid var(--kant); padding-bottom: 4px; margin-bottom: 2px; }
.okt-import-rad {
  display: grid;
  grid-template-columns: .9fr 1.2fr 1.6fr 1.2fr 60px 80px 1fr 1fr 1fr 1.4fr 32px 36px;
  gap: 4px;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid var(--kant);
  border-radius: 4px;
  cursor: pointer;
}
.okt-import-rad--roed { background: #fdecea; }
.okt-import-rad--gul  { background: #fff8e1; }
[data-theme="mork"] .okt-import-rad--roed { background: #3a0a0a; }
[data-theme="mork"] .okt-import-rad--gul  { background: #2d2400; }

.okt-import-felt { margin-bottom: 0 !important; padding: 3px 6px !important; font-size: .82rem !important; }
/* resize:none MÅ ha !important – textarea.felt (skjema-basisstil) setter
   resize:vertical med høyere spesifisitet (tag+klasse) og ville ellers vunnet */
.okt-import-felt--tekst { min-height: unset !important; height: 28px; resize: none !important; overflow: hidden; }
.okt-import-uke { width: 52px !important; }
.okt-import-div-wrap { display: flex; gap: 4px; align-items: center; }
.okt-import-foreslatt { border-color: var(--advarsel) !important; background: #fff8e1 !important; }
[data-theme="mork"] .okt-import-foreslatt { background: #2d2400 !important; }
.okt-import-ok-knapp { padding: 2px 7px !important; font-size: .78rem !important; white-space: nowrap; }

.okt-import-merknad { font-size: .78rem; color: var(--fare); line-height: 1.3; }
.okt-import-rad--gul .okt-import-merknad { color: #856404; }
.okt-import-kollisjon-wrap { display: flex; align-items: center; gap: 4px; font-size: .78rem; margin-top: 2px; }

/* Felt-etikett (P48) – skjult i kompakt visning, vises i utvidet */
.okt-import-feltgruppe { display: contents; }
.okt-import-cellabel { display: none; }

/* Aktivitet/møtested/info-wrapper (P49): usynlig i kompakt visning – cellene
   beholder sine egne grid-kolonner i .okt-import-rad, som om wrapperen ikke
   fantes. Blir en wrap-fleksrad kun i utvidet visning (se lenger ned). */
.okt-import-tekstrad { display: contents; }

/* Mobil sammendragslinje (P53) – skjult som standard/desktop; vises kun i
   mobil-mediesporet lenger ned, og kun for rader som ikke er utvidet. */
.okt-import-mobil-sammendrag { display: none; }

/* Utvid-/lukk-knapp i egen liten celle (P48) – eneste åpne/lukke-kontroll */
.okt-import-toggle-knapp { width: 100%; padding: 2px 4px !important; font-size: .82rem !important; line-height: 1; }

/* P44/P50: Uke → Klasse → Lærer-gruppering av forhåndsvisningen. Overskriften
   er tre faste kolonner («trappe») – et nivå tømmes for tekst når det er
   likt gruppen rett over (se byggTrappeOverskrifter i app.js). */
.okt-import-gruppe { margin-bottom: 10px; }
.okt-import-gruppe-hode {
  font-size: .82rem; font-weight: 700; color: var(--tekst-svak);
  padding: 6px 0 2px; position: sticky; top: 0; background: var(--bg-kort);
  display: flex; gap: 14px;
}
.okt-import-gruppe-uke    { flex: 0 0 64px; }
.okt-import-gruppe-klasse { flex: 0 0 140px; }
.okt-import-gruppe-laerer { flex: 1 1 auto; }
.okt-import-gruppe--ugyldig .okt-import-gruppe-hode { color: var(--fare); }

/* P50: kompaktraden på DESKTOP viser ikke lenger klasse/lærer/uke – de
   fremgår av «trappe»-overskriften i stedet. Feltene beholdes i DOM og
   vises fortsatt normalt i utvidet visning (se lenger ned – egen grid for
   .okt-import-rad--utvidet er uendret og upåvirket av dette). Mobil
   (≤900px) er UTENFOR scope – egen mediesport lenger ned er uendret. */
@media (min-width: 901px) {
  .okt-import-rad:not(.okt-import-rad--utvidet) .okt-import-celle--klasse,
  .okt-import-rad:not(.okt-import-rad--utvidet) .okt-import-celle--laerer,
  .okt-import-rad:not(.okt-import-rad--utvidet) .okt-import-celle--uke {
    display: none;
  }
  .okt-import-rad:not(.okt-import-rad--utvidet) {
    grid-template-columns: 1.6fr 1.2fr 80px 1fr 1fr 1fr 1.4fr 32px 36px;
  }
}

/* ── Utvidet rad (P48/P49): to etasjer i samme rad-blokk ──
   Linje 1: kompaktfeltene (klasse/lærer/fag/parti/uke/dag) PLUSS
   utvid-/stryk-knappen, i nøyaktig samme posisjon/rekkefølge som i kompakt
   visning – chevronen (⌄→⌃) er eneste åpne/lukke-kontroll, alltid på
   samme sted. Under: aktivitet/møtested/info side om side i én wrap-fleksrad
   (P49 – smal/medium/bred, bryter til flere linjer når plassen er for
   knapp), auto-voksende i høyden (høyden settes i JS – autosizeTekstfelt –
   ut fra innhold), så merknad. Ikke fullskjerm; raden blir bare så høy som
   teksten krever. */
.okt-import-rad--utvidet {
  grid-template-columns: .9fr 1.2fr 1.6fr 1.2fr 60px 80px 32px 36px;
  align-items: start;
  gap: 6px 8px;
  padding: 10px 8px;
  border: 1px solid var(--kant);
  border-radius: 8px;
  background: var(--bg-kort);
  cursor: default;
}
.okt-import-rad--utvidet .okt-import-celle--klasse  { grid-column: 1; grid-row: 1; }
.okt-import-rad--utvidet .okt-import-celle--laerer  { grid-column: 2; grid-row: 1; }
.okt-import-rad--utvidet .okt-import-celle--fag     { grid-column: 3; grid-row: 1; }
.okt-import-rad--utvidet .okt-import-celle--div     { grid-column: 4; grid-row: 1; }
.okt-import-rad--utvidet .okt-import-celle--uke     { grid-column: 5; grid-row: 1; }
.okt-import-rad--utvidet .okt-import-celle--dag     { grid-column: 6; grid-row: 1; }
.okt-import-rad--utvidet .okt-import-celle--utvid   { grid-column: 7; grid-row: 1; }
.okt-import-rad--utvidet .okt-import-celle--stryk   { grid-column: 8; grid-row: 1; }
.okt-import-rad--utvidet .okt-import-tekstrad {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.okt-import-rad--utvidet .okt-import-tekstrad .okt-import-celle--akt  { flex: 1 1 140px; min-width: 0; }
.okt-import-rad--utvidet .okt-import-tekstrad .okt-import-celle--opp  { flex: 1.4 1 170px; min-width: 0; }
.okt-import-rad--utvidet .okt-import-tekstrad .okt-import-celle--info { flex: 2.2 1 220px; min-width: 0; }
.okt-import-rad--utvidet .okt-import-celle--merknad { grid-column: 1 / -1; grid-row: 3; }

.okt-import-rad--utvidet .okt-import-feltgruppe { display: block; margin-bottom: 3px; width: 100%; }
.okt-import-rad--utvidet .okt-import-cellabel {
  display: block; font-size: .7rem; font-weight: 700; color: var(--tekst-svak); margin-bottom: 2px;
}
/* Høyden settes i JS ut fra innhold – ingen !important her, så inline style vinner */
.okt-import-rad--utvidet .okt-import-felt--tekst { height: auto; min-height: 30px; resize: none; overflow: hidden; width: 100%; }

@media (max-width: 900px) {
  .okt-import-rad { grid-template-columns: 1fr 1fr; }
  .okt-import-hode { display: none; }
  .okt-import-celle { }
  .okt-import-celle--klasse,
  .okt-import-celle--laerer,
  .okt-import-celle--fag,
  .okt-import-celle--akt { grid-column: 1 / -1; }
  .okt-import-celle--merknad { grid-column: 1 / -1; }

  /* P53: kompakt (ikke-utvidet) rad viser en ren tekst-sammendragslinje i
     stedet for redigeringsfeltene – trykk hvor som helst treffer den
     eksisterende klikk-vakten og utvider til visningen under (uendret).
     Utvid-/stryk-knappen (celle--utvid/--stryk) er IKKE i denne listen og
     forblir synlig/brukbar direkte fra kompakt visning, som før. */
  .okt-import-rad:not(.okt-import-rad--utvidet) .okt-import-mobil-sammendrag {
    display: block;
    grid-column: 1 / -1;
    padding: 4px 2px;
  }
  .okt-import-mobil-linje1 { font-size: .85rem; font-weight: 600; }
  .okt-import-mobil-linje2 { font-size: .78rem; color: var(--tekst-svak); margin-top: 2px; }
  .okt-import-rad:not(.okt-import-rad--utvidet) .okt-import-celle--klasse,
  .okt-import-rad:not(.okt-import-rad--utvidet) .okt-import-celle--laerer,
  .okt-import-rad:not(.okt-import-rad--utvidet) .okt-import-celle--fag,
  .okt-import-rad:not(.okt-import-rad--utvidet) .okt-import-celle--div,
  .okt-import-rad:not(.okt-import-rad--utvidet) .okt-import-celle--uke,
  .okt-import-rad:not(.okt-import-rad--utvidet) .okt-import-celle--dag,
  .okt-import-rad:not(.okt-import-rad--utvidet) .okt-import-tekstrad,
  .okt-import-rad:not(.okt-import-rad--utvidet) .okt-import-celle--merknad {
    display: none;
  }

  /* Utvidet på mobil: kompaktfeltene (inkl. utvid-/stryk-knappen) stables i
     to kolonner (samme prinsipp som kompakt visning). Tekstraden (P49)
     brytes til én kolonne per felt i stedet for side om side. */
  .okt-import-rad--utvidet { grid-template-columns: 1fr 1fr; }
  .okt-import-rad--utvidet .okt-import-celle--klasse,
  .okt-import-rad--utvidet .okt-import-celle--laerer,
  .okt-import-rad--utvidet .okt-import-celle--fag,
  .okt-import-rad--utvidet .okt-import-celle--div,
  .okt-import-rad--utvidet .okt-import-celle--uke,
  .okt-import-rad--utvidet .okt-import-celle--dag,
  .okt-import-rad--utvidet .okt-import-celle--utvid,
  .okt-import-rad--utvidet .okt-import-celle--stryk { grid-column: auto; grid-row: auto; }
  .okt-import-rad--utvidet .okt-import-tekstrad { grid-column: 1 / -1; grid-row: auto; }
  .okt-import-rad--utvidet .okt-import-tekstrad .okt-import-celle--akt,
  .okt-import-rad--utvidet .okt-import-tekstrad .okt-import-celle--opp,
  .okt-import-rad--utvidet .okt-import-tekstrad .okt-import-celle--info { flex-basis: 100%; }
  .okt-import-rad--utvidet .okt-import-celle--merknad { grid-column: 1 / -1; grid-row: auto; }
}

/* ── ════════════════════════════════════════════
   MOBIL
   ════════════════════════════════════════════ */
@media (max-width: 700px) {
  .uke-grid {
    display: flex; flex-direction: column;
    padding: 12px 12px 20px; gap: 10px;
  }
  .dag-kol {
    min-width: 0; max-width: 100%; width: 100%;
  }
  /* P6: høyden følger innholdet på mobil — ingen fast min-høyde/scroll per dag */
  .dag-okter {
    min-height: 0; max-height: none; overflow: visible;
  }
  /* P6: en helligdag uten økter viser kun etiketten — skjul den tomme containeren
     (DOM-en bygges med createElement, så :empty treffer reelt tom dag-okter) */
  .day-col--holiday .dag-okter:empty { display: none; }
  .filter-bar { padding: 8px 12px; }
  .nav-bar    { padding: 10px 12px 0; }
  .bulk-bar   { margin: 0 12px 10px; }
  .fdag-banner, .ferie-banner { margin: 8px 12px; }
  .fdag-bjelke-rad { display: flex; flex-direction: column; gap: 4px; padding: 6px 12px 0; }
  .fdag-bjelke { white-space: normal; }
  /* P7: sekundærdetaljer (rom, info, lærer, badges) skjult på mobil — tap på kort utvider */
  .okt-detaljer { display: none; }
  .okt-detaljer.okt-detaljer--apnet { display: block; }
  .side-wrap  { padding: 16px 16px 40px; }
  .kort       { padding: 14px; }
  .login-kort { padding: 20px; }
  .login-valg { flex-direction: column; }
  .modal      { padding: 16px; }
  .admin-rad  { gap: 6px; }
}

/* ── ════════════════════════════════════════════
   UTSKRIFT
   ════════════════════════════════════════════ */
@media print {
  @page { size: A4 landscape; margin: 12mm 10mm; }
  header, .nav-bar, .filter-bar, .bulk-bar,
  .hdr-btn, .btn, .okt-kebab, .okt-handlingsmeny, .okt-checkbox,
  .modal-bg, .lagre-overlay, .ai-overlay, #lastelinje,
  .elev-filter-panel, .elev-overflow-wrap, .settings-close, .fane-lukk,
  footer, .uno-footer { display: none !important; }
  /* P7: vis alle detaljer ved utskrift uavhengig av mobilkollaps */
  .okt-detaljer { display: block !important; }

  body { background: white; color: black; }
  .uke-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 0; }
  .dag-okter { max-height: none; overflow: visible; }
  .okt-kort { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }

  .utskrift-hode {
    display: block !important;
    font-size: 11pt; font-weight: bold;
    margin-bottom: 8mm; text-align: center;
  }
}
.utskrift-hode { display: none; }

/* ── Admin-rader ─────────────────────────────────────────────────── */
.admin-rad {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--kant); flex-wrap: wrap;
}
.admin-rad:last-child { border-bottom: none; }
.color-swatch { display: inline-block; width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0; }
.class-checkboxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px 12px; }
.class-checkboxes label { display: flex; align-items: center; gap: 6px; }
.class-checkboxes input[type=checkbox] { margin-right: 0; }
.rolle-gruppe { display: flex; flex-direction: column; gap: 8px; }
.rolle-gruppe label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.admin-rad .tekst-svak { font-size: .82rem; color: var(--tekst-svak); }
.admin-rad .spacer { flex: 1; }

/* ── Skoleinfo uke-rad ───────────────────────────────────────────── */
.uke-rad { display: flex; gap: 24px; flex-wrap: wrap; }
.uke-grp { display: flex; flex-direction: column; gap: 4px; }
.uke-grp label { font-size: .85rem; font-weight: 600; color: var(--tekst-svak); }
.uke-hint { font-size: .8rem; color: var(--tekst-svak); }

/* Select med klasse direkte på elementet (ikke som barn av .felt) */
select.felt, select.select { background: var(--bg-kort); color: var(--tekst); font-size: .92rem; font-family: inherit; padding: 8px 11px; border: 1px solid var(--kant); border-radius: var(--radius); width: 100%; }

/* Seksjonstittel i admin-faner */
.seksjon-tittel { font-size: 1rem; font-weight: 700; margin: 18px 0 6px; border-top: 1px solid var(--kant); padding-top: 14px; }

/* Dato-gruppe (Fra/Til) – se .dato-grp i hjelpeklasser-seksjonen */

/* ── Admin-tabell (skolerute) ────────────────────────────────────── */
.admin-table { width: 100%; border-collapse: collapse; margin-bottom: 4px; }
.admin-table th, .admin-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--kant); font-size: .9rem; }
.admin-table th { font-weight: 600; color: var(--tekst-svak); font-size: .82rem; }

/* ── AI-import seksjon ───────────────────────────────────────────── */
.ai-import-seksjon { margin-top: 8px; }
.ai-tip {
  background: var(--bg-kort); border: 1px solid var(--kant);
  border-radius: var(--radius); padding: 10px 14px;
  font-size: .9rem; color: var(--tekst-svak); margin-bottom: 10px;
}
.ai-tekstfelt { width: 100%; max-width: 640px; margin: 8px 0; }

/* ── Login-skjerm ────────────────────────────────────────────────── */
.login-wrap {
  display: flex; align-items: center; justify-content: center;
  min-height: 60vh; padding: 20px;
}
.login-kort {
  background: var(--bg-kort); border-radius: var(--radius);
  box-shadow: var(--skygge); padding: 32px; width: 100%; max-width: 380px;
}
.login-kort h2 { margin-bottom: 4px; font-size: 1.1rem; }
.login-ingress { color: var(--tekst-svak); font-size: .9rem; margin-bottom: 16px; }
.login-husk-meg {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 0 2px; font-size: .88rem; color: var(--tekst-svak);
  cursor: pointer;
}
.login-skille {
  display: flex; align-items: center; gap: 10px;
  margin: 20px 0 14px; color: var(--tekst-svak); font-size: .82rem;
}
.login-skille::before, .login-skille::after {
  content: ""; flex: 1; height: 1px; background: var(--kant);
}
.login-valg { display: flex; gap: 10px; }
.login-valg .btn { flex: 1; justify-content: center; }
.login-elev-lenke {
  margin-top: 18px; text-align: center; font-size: .8rem; color: var(--tekst-svak);
}
.login-elev-lenke a { color: var(--tekst-svak); text-decoration: underline; }
.felt-label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 4px; margin-top: 12px; }

/* ── Laerer/admin-layout ─────────────────────────────────────────── */
.side-wrap { padding: 28px clamp(20px, 5vw, 80px) 60px; max-width: 1200px; margin: 0 auto; overflow-wrap: break-word; word-break: break-word; }
.fane-innhold { padding-top: 8px; }
.skjema-smal { max-width: 560px; }

/* ── Settings-mønster (Profil + admin Skoleinfo) — P23 ───────────────
   Felles layout for innstillings-/profilsider: sentrert smal spalte med
   ett eller flere kort og en «X»-lukk øverst til høyre. Egne klasser (rører
   ikke .kort/.subj-config-box som brukes mange andre steder). */
.settings-page {
  position: relative;
  max-width: 680px;
  margin-inline: auto;
  padding: 56px clamp(16px, 4vw, 28px) 60px;
}
.settings-card {
  background: var(--bg-kort); border: 1px solid var(--kant);
  border-radius: var(--radius); box-shadow: var(--skygge);
  padding: 20px 22px; margin-bottom: 18px;
}
.settings-card:last-child { margin-bottom: 0; }
.settings-card > h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 14px; }
.settings-close {
  position: absolute; top: 10px; right: clamp(16px, 4vw, 28px);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--kant); border-radius: 50%;
  background: var(--bg-kort); color: var(--tekst);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  box-shadow: var(--skygge); transition: background .15s, color .15s;
}
.settings-close:hover { background: var(--bg); color: var(--primær); }
.settings-close:focus-visible {
  outline: none; border-color: var(--primær-lys);
  box-shadow: 0 0 0 3px rgba(64,145,108,.30);
}

/* P24: adminpanelets faner deler samme settings-mønster, men «X»-en ligger på
   panel-nivå (i fane-raden, .fane-lukk) i stedet for inni én enkelt fane. Litt
   bredere spalte enn Profil, og ingen toppluft reservert til in-page-X. */
.settings-page--admin { max-width: 920px; padding-top: 8px; }
.fane-lukk {
  margin-left: auto; align-self: center;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--kant); border-radius: 50%;
  background: var(--bg-kort); color: var(--tekst);
  font-size: 1.15rem; line-height: 1; cursor: pointer;
  box-shadow: var(--skygge); transition: background .15s, color .15s;
}
.fane-lukk:hover { background: var(--bg); color: var(--primær); }
.fane-lukk:focus-visible {
  outline: none; border-color: var(--primær-lys);
  box-shadow: 0 0 0 3px rgba(64,145,108,.30);
}

/* ── Hurtigstart-veiledning (P54) — bruker settings-mønsteret over, kun
   tillegg for illustrert innhold. Farger via eksisterende temavariabler,
   ingen nye hardkodede farger. ── */
.hs-badge {
  display: inline-block; background: var(--badge-bg); color: var(--badge-tekst);
  padding: 3px 12px; border-radius: 999px; font-size: .78rem; font-weight: 700;
  letter-spacing: .03em; margin-bottom: 10px;
}
.hs-intro { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hs-intro .hs-intro-txt { flex: 1; min-width: 220px; }
.hs-intro svg { flex: none; width: 130px; height: auto; display: block; }
.hs-lead { color: var(--tekst-svak); margin: 4px 2px 14px; font-size: .96rem; }
.hs-step { display: flex; gap: 18px; align-items: flex-start; }
.hs-step-num {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--primær-svak); color: var(--primær);
  font-weight: 700; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
}
.hs-step-body { flex: 1; min-width: 0; }
.hs-step-body h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.hs-step-body p { color: var(--tekst-svak); margin-top: 6px; }
.hs-step-art { flex: none; width: 110px; }
.hs-step-art svg { width: 110px; height: auto; display: block; }
.hs-pill {
  display: inline-block; background: var(--primær-svak); color: var(--primær);
  border-radius: 6px; padding: 1px 7px; font-size: .92em; font-weight: 600;
}
.hs-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hs-role { padding: 14px 4px; }
.hs-role h4 { margin-bottom: 5px; font-size: 1rem; }
.hs-role p { color: var(--tekst-svak); font-size: .9rem; }
.hs-callout {
  background: var(--primær-svak); color: var(--tekst); border-radius: var(--radius);
  padding: 14px 18px; margin-top: 6px; font-size: .92rem;
}
.hs-footer { text-align: center; color: var(--tekst-svak); font-size: .82rem; margin-top: 8px; }
@media (max-width: 560px) {
  .hs-step { flex-wrap: wrap; }
  .hs-step-art { width: 100%; order: 3; margin-top: 4px; }
  .hs-step-art svg { width: 100%; max-width: 200px; margin: 0 auto; }
  .hs-roles { grid-template-columns: 1fr; }
}

/* ── Skjema-rader ────────────────────────────────────────────────── */
.skjema .felt { margin-bottom: 14px; }

/* ── Manglende hjelpeklasser ─────────────────────────────────────── */
.btn-lenke { background: none; border: none; color: var(--primær); cursor: pointer; padding: 0; font-size: inherit; text-decoration: underline; }
.btn-lenke:hover { opacity: .75; }
.dato-grp { display: flex; flex-direction: column; gap: 4px; }
.dato-grp input, .dato-grp select { width: 100%; }
.day-col--holiday { background: var(--fridag-bg); }
.day-col--holiday .dag-tittel { color: var(--fridag-tekst); }
.day-col--holiday .dag-okter { opacity: .5; pointer-events: none; }
.holiday-label { font-size: .78rem; color: var(--fridag-tekst); font-weight: 600; margin-top: 4px; }
.info-tekst { font-size: .88rem; color: var(--tekst-svak); line-height: 1.5; }
.tegnteller { font-size: .78rem; color: var(--tekst-svak); text-align: right; margin-top: 2px; }
.tekst { font-size: .92rem; line-height: 1.5; }
.textarea { resize: vertical; min-height: 70px; }
.textarea-large { resize: vertical; min-height: 140px; }
.theme-group { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.theme-swatch { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: border-color .15s; }
.theme-swatch.aktiv { border-color: var(--tekst); }
.warning-text { color: var(--advarsel); font-size: .86rem; font-weight: 600; }
.error { color: var(--fare); font-size: .86rem; }
.knapper-rad { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.input-med-hint { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }