/* ============================================================
   stil-base.css — del 1/12
   Designsystem/tokens, mørk modus-grunnlag, header, knapper, avatarer,
   selects, timeline-basis, event-kort, modaler, toast, KPI, org-modalens
   kjerne (eventer/ansatte/roller/maler), Mitt arbeid, event-innstillinger,
   sammendragskolonne, AI-modaler/sidepanel, kjøreplan (kpd-/uh-)
   Del av styles.css-splitten (2026-08-07). Lastes i FAST rekkefølge —
   kildeorden er kaskade-bærende (primitivene i stil-tema.css vinner ved
   lik spesifisitet fordi de kommer sist). Ny fil? Oppdater Index.html
   (statisk lenke eller DESKTOP_STIL i loaderen) OG alle test-*.html.
   ============================================================ */
    /* ==========================================
       DESIGN SYSTEM
       ========================================== */
    :root {
      --col-width: 140px;
      --primary: #F71B00;
      --primary-dark: #CC1500;
      --bg: #FFF2E9;
      --bg-panel: #2A2A2A;
      --surface: #FFFFFF;
      --text: #1D1D1D;
      --text-muted: #7A6E68;
      --border: #E5D8CF;
      --accent: #2563eb;
      /* Semantiske statusfarger (2026-08-07): ÉN grønn/amber/rød for ok/obs/feil.
         Før fantes 5 grønntoner og 3 tint-baser for «godkjent» — samme semantikk
         skal se lik ut i budsjett, bemanning, oppgaver, booking og mobil. */
      --st-ok-bg: #DCF5E7;   --st-ok-tekst: #047857;   --st-ok-tint: 16,185,129;
      --st-obs-bg: #FEF3C7;  --st-obs-tekst: #B45309;  --st-obs-tint: 245,158,11;
      --st-feil-bg: #FDECEA; --st-feil-tekst: #B42318; --st-feil-tint: 239,68,68;
      /* Modal-tokens (2026-08-07): felles backdrop, radius og skygge. z-skalaen
         er dokumentasjon for NYE flater — eksisterende z-verdier står urørt
         til stablingsrekkefølgen mellom modulene er kartlagt. */
      --overlay-bg: rgba(29, 29, 29, 0.45);
      --overlay-blur: 3px;
      --modal-r: 14px;
      --modal-shadow: 0 28px 90px rgba(0, 0, 0, 0.38);
      --z-modal: 2600; --z-toast: 6000; --z-popover: 9000;
      /* Dialogen (bekreft/varsle/sporTekst) åpnes som regel OPPÅ noe annet
         — en modal, et popover, offline-banneret på 99999. Den er alltid
         det øverste, ellers ber vi om en bekreftelse brukeren ikke ser. */
      --z-dialog: 100000;
      /* Felt-tokens (2026-08-07): én skjemafelt-geometri og én fokusring */
      --felt-pad: 9px 11px;
      --felt-r: 9px;
      --fokus-ring: 0 0 0 3px var(--primary-pill);
      /* Animasjonstokens (2026-08-07): ALL inngangsbevegelse i appen leser
         disse — juster nivået ETT sted. --anim-nivaa skalerer varighet,
         stagger og avstand samlet: 0 = av, 1 = standard, 1.5 = tydeligere.
         Enkelttokens kan også overstyres hver for seg. Ambient bevegelse
         (puls, skeleton-skimmer) skaleres bevisst IKKE — den er tempo, ikke
         nivå, og en uendelig animasjon med 0s varighet er udefinert. */
      --anim-nivaa: 1;
      --anim-kurve: cubic-bezier(.2, .85, .3, 1);
      --anim-tid: calc(.52s * var(--anim-nivaa));          /* kort-/rad-innfall */
      --anim-tid-panel: calc(.4s * var(--anim-nivaa));     /* fane-/panel-innfall */
      --anim-tid-hurtig: calc(.26s * var(--anim-nivaa));   /* chips, småfades */
      --anim-stagger: calc(38ms * var(--anim-nivaa));      /* forsinkelse per listeelement */
      --anim-avstand: calc(16px * var(--anim-nivaa));      /* løftehøyde kort */
      --anim-avstand-panel: calc(10px * var(--anim-nivaa));/* løftehøyde panel/fane */
      /* --el-designtokens (2026-08-07): var duplisert ordrett i 13 komponent-
         skop (mobil-org, årshjul, racesim m.fl.) — samlet her. Bevisst
         LITERALER, ikke aliaser mot --bg/--text: el-flatene skal forbli cream
         også i mørk modus. --el-purple avviker per modul og står igjen lokalt. */
      --el-cream: #FFF2E9;
      --el-cream-2: #F0E5DC;
      --el-cream-3: #FFFCF8;
      --el-paper: #FFFFFF;
      --el-ink: #1D1D1D;
      --el-ink-2: #2A2A2A;
      --el-ink-3: #3A3A3A;
      --el-muted: #7A6E68;
      --el-line: #E5D8CF;
      --el-line-2: #C8B8AD;
      --el-red: #F71B00;
      --el-red-dark: #CC1500;
      --el-red-soft: rgba(247, 27, 0, 0.12);
      --el-amber: #FBBF24;
      --el-amber-soft: rgba(251, 191, 36, 0.20);
      --el-emerald: #10B981;
      --el-emerald-soft: rgba(var(--st-ok-tint), 0.14);
      --el-blue: #3B82F6;
      --el-blue-soft: rgba(59, 130, 246, 0.14);
      --bg2: #F0E5DC;
      --card: rgba(255,255,255,0.05);
      --card-hover: rgba(255,255,255,0.09);
      /* Org-modal A+B tokens */
      --ink-soft: #5C5048;
      --line-soft: #D6C7BC;
      --amber: #F59E0B;
      --amber-soft: rgba(251,191,36,0.15);
      --amber-text: #9A6E0A;
      --primary-pill: #FFE7DD;
      --header-dark: #1D1D1D;
      --paper: #FFF8F1;
      --header-panel-height: 215px;
      --area-header-height: 40px;
      --loc-header-height: 50px;
      --hour-height: 120px;
      --half-hour-height: 60px;
      --quarter-height: 30px;
    }

    /* ==========================================
       MØRK MODUS — ekte mørkt tema
       Lys = default cream-tema (:root ovenfor). Mørk redefinerer kjerne-
       variablene her, + overstyrer hardkodede lyse flater i egen blokk lenger
       ned (søk: "DARK-MODE OVERRIDES"). color-scheme gjør native kontroller,
       scrollbars og datovelgere mørke.
       ========================================== */
    body.dark-mode {
      color-scheme: dark;
      --bg: #16171C;
      --bg2: #1C1D23;
      --surface: #212329;
      --bg-panel: #16171C;
      --text: #ECEDF0;
      --text-muted: #9A9EA8;
      --border: rgba(255,255,255,0.11);
      --line-soft: rgba(255,255,255,0.08);
      --ink-soft: #C2C6CE;
      --paper: #212329;
      --card: rgba(255,255,255,0.045);
      --card-hover: rgba(255,255,255,0.085);
      --primary-pill: color-mix(in srgb, var(--primary) 26%, #212329);
      --amber-soft: rgba(251,191,36,0.16);
      --amber-text: #F0C24B;
      --header-dark: #101116;
      /* Kommandopulten (Oversikt-heroen) er «mørk flate på cream». Her er
         grunnen selv nesten like mørk, så pulten må LØFTES for å beholde
         skillet — ikke beholde #1D1D1D, som forsvinner i bakgrunnen. */
      --pult-bg: #2B2D36;
      --pult-kant: #3E414D;
    }

    .spinner {
      border: 4px solid rgba(255,255,255,0.15);
      border-top: 4px solid white;
      border-radius: 50%;
      width: 44px;
      height: 44px;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

    /* ==========================================
       EVENTLAB-MERKET (.elab-*)
       Geometrien til selve merket er fasit i icons/favicon.svg — her bor bare
       lockup-typografien og bevegelsen. Markup-kontrakt: <svg> med klassen
       .elab-merke, og de fire rektanglene MERKET med .elab-strek (spina i
       tillegg med .elab-strek--spine) — uten de klassene treffer ikke
       animasjonen. app-core.js sin eventlabMerke() skriver riktig markup;
       de statiske flatene (Index.html, superadmin.html, support/) har den
       inline fordi de rendres før JS-en har kjørt.
       ========================================== */
    .elab-logo { display: inline-flex; align-items: center; gap: 14px; line-height: 1; }
    .elab-logo--vertikal { flex-direction: column; gap: 14px; text-align: center; }
    .elab-merke { display: block; flex-shrink: 0; }
    .elab-tekst { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
    .elab-logo--vertikal .elab-tekst { align-items: center; }
    .elab-ord {
      font-family: 'Bebas Neue', sans-serif;
      letter-spacing: 0.12em;
      line-height: 1;
      color: #fff;
      /* letter-spacing legger luft ETTER hvert tegn — også det siste. Uten
         denne motvekten er tekstboksen 0.12em bredere enn glyfene, og en
         sentrert lockup står synlig for langt til venstre. */
      margin-right: -0.12em;
    }
    .elab-tagline {
      font-family: 'Inter', -apple-system, sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.11em;
      font-weight: 600;
      font-size: 10px;
      line-height: 1.5;
      color: rgba(255,255,255,0.42);
    }
    .elab-logo--lys .elab-ord { color: #1D1D1D; }
    .elab-logo--lys .elab-tagline { color: rgba(0,0,0,0.45); }
    /* Luft ned til innholdet under (login-, org-velger- og invitasjonsskjermen) */
    .elab-logo--luft { margin-bottom: 38px; }

    /* ── Bevegelse ──────────────────────────────────────────────────────
       To moduser: --animert = engangs-innfall (logg inn, invitasjon,
       org-velger), --laster = loop (lasteskjermen). Begge konsumerer
       --anim-*-tokens med fallback, jf. DESIGN.md §5b, og ligger i én
       prefers-reduced-motion-blokk. transform-box: fill-box er påkrevd —
       uten den regnes transform-origin fra SVG-ets viewBox-origo, ikke fra
       strekens egen boks, og strekene ville skutt ut av merket. */
    @media (prefers-reduced-motion: no-preference) {
      .elab-merke--animert .elab-strek,
      .elab-merke--laster .elab-strek {
        transform-box: fill-box;
        transform-origin: left center;
      }
      .elab-merke--animert .elab-strek--spine,
      .elab-merke--laster .elab-strek--spine { transform-origin: center top; }

      /* backwards, ALDRI both: en fylt animasjon overstyrer senere
         stilendringer på samme egenskap og ville låst opacity på 1 */
      .elab-merke--animert .elab-strek {
        animation: elabStrekInn calc(var(--anim-tid, .52s) * 1.15) var(--anim-kurve, cubic-bezier(.2,.85,.3,1)) backwards;
      }
      .elab-merke--animert .elab-strek--spine { animation-name: elabSpineInn; }
      .elab-merke--animert .elab-strek--1 { animation-delay: calc(var(--anim-stagger, 38ms) * 2); }
      .elab-merke--animert .elab-strek--2 { animation-delay: calc(var(--anim-stagger, 38ms) * 4); }
      .elab-merke--animert .elab-strek--3 { animation-delay: calc(var(--anim-stagger, 38ms) * 6); }

      /* Loopen tegner merket opp strek for strek, HOLDER det ferdig det meste
         av runden, og fader ut før den starter på nytt. En ren puls fram og
         tilbake (strekene krympet mot 1/3 midt i syklusen) leste som et
         ødelagt ikon, ikke som en logo som tegnes. */
      .elab-merke--laster .elab-strek {
        animation: elabStrekLoop 2.1s var(--anim-kurve, cubic-bezier(.2,.85,.3,1)) infinite;
      }
      .elab-merke--laster .elab-strek--spine { animation-name: elabSpineLoop; }
      .elab-merke--laster .elab-strek--1 { animation-delay: .1s; }
      .elab-merke--laster .elab-strek--2 { animation-delay: .2s; }
      .elab-merke--laster .elab-strek--3 { animation-delay: .3s; }

      /* Oppstartsflata (.oppstart-*, under). Kun i FULL modus: --fortsett er
         andre sidelast i samme oppstart, og en logo som tegnes på nytt ville
         avslørt at sida ble lastet om; --stille er refresh, der dekket kun
         skal hindre login-blinket. */
      html.oppstart-full .oppstart-merke {
        animation: oppstartMerke calc(var(--anim-tid, .52s) * .6) var(--anim-kurve, cubic-bezier(.2,.85,.3,1)) backwards;
      }
      html.oppstart-full .oppstart-ord {
        animation: oppstartOrd calc(var(--anim-tid, .52s) * .9) var(--anim-kurve, cubic-bezier(.2,.85,.3,1)) .30s backwards;
      }
      html.oppstart-full .oppstart-spor  { animation: oppstartTon var(--anim-tid, .52s) ease .42s backwards; }
      html.oppstart-full .oppstart-tekst { animation: oppstartTon var(--anim-tid, .52s) ease .52s backwards; }
      html.oppstart-full .oppstart-bunn  { animation: oppstartTon var(--anim-tid, .52s) ease .68s backwards; }
    }

    /* Redusert bevegelse: lasteskjermen MÅ fortsatt vise at noe skjer, så
       den beholder en rolig opacity-puls (ingen forflytning/skalering). */
    @media (prefers-reduced-motion: reduce) {
      .elab-merke--laster .elab-strek { animation: elabDemp 1.75s ease-in-out infinite; }
      .elab-merke--laster .elab-strek--1 { animation-delay: .13s; }
      .elab-merke--laster .elab-strek--2 { animation-delay: .26s; }
      .elab-merke--laster .elab-strek--3 { animation-delay: .39s; }
    }

    @keyframes elabStrekInn { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } }
    @keyframes elabSpineInn { from { transform: scaleY(0); opacity: 0; } to { transform: none; opacity: 1; } }
    @keyframes elabStrekLoop {
      0%        { transform: scaleX(0); opacity: 0; }
      17%, 76%  { transform: none;      opacity: 1; }
      92%, 100% { transform: none;      opacity: 0; }
    }
    @keyframes elabSpineLoop {
      0%        { transform: scaleY(0); opacity: 0; }
      17%, 76%  { transform: none;      opacity: 1; }
      92%, 100% { transform: none;      opacity: 0; }
    }
    @keyframes elabDemp { 0%, 100% { opacity: 1; } 45% { opacity: .38; } }

    /* ==========================================
       MOBIL-OPPSTART (.oppstart-*)
       Ett dekke som eier hele oppstarten på ≤768 px — også innloggingen og
       redirect-hoppet i landing.js. Porten (klassen på <html>) settes av
       inline-scriptet i Index.html <head>; kontrolleren (window._oppstart*)
       bor i app-mobile.js. Se docs/mobil-oppstart-2026-08-10.md.
       Stilen MÅ ligge her og ikke i app-mobiles MB_CSS: MB_CSS injiseres av et
       defer-skript og finnes ikke når flata skal stå på skjermen.
       ========================================== */
    .oppstart {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 10500;
      box-sizing: border-box;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      background: #1D1D1D;
      padding: calc(24px + env(safe-area-inset-top)) 24px calc(20px + env(safe-area-inset-bottom));
      opacity: 1;
      transition: opacity .42s ease;
    }
    /* To veier inn: porten mens flata lever, .ut mens den fader. Layouten ligger
       på basisregelen nettopp fordi oppstart-aktiv fjernes FØR fade-en er
       ferdig — det er den fjerningen som slipper #login-screen, #loading-screen
       og de pausede innfallene fri. Uten .ut ville flata forsvunnet momentant. */
    html.oppstart-aktiv .oppstart,
    .oppstart.ut { display: flex; }
    .oppstart.ut { opacity: 0; pointer-events: none; }

    /* #login-screen har display:flex INLINE i markupen, så en vanlig regel
       taper. !important er trygt her fordi oppstart-aktiv fjernes idet flata
       begynner å fade: kreves login, står skjemaet klart under det fadende
       dekket. #loading-screen ville ellers loopet sitt eget merke bak dekket. */
    html.oppstart-aktiv #login-screen,
    html.oppstart-aktiv #loading-screen { display: none !important; }

    /* I --fortsett og --stille skal merket stå ferdig tegnet: .elab-merke--animert
       ligger i markupen og ville ellers spilt innfallet sitt om igjen. */
    html:not(.oppstart-full) .oppstart-merke .elab-strek { animation: none; }

    .oppstart-midt { display: flex; flex-direction: column; align-items: center; margin: auto 0; }
    .oppstart-merke { margin-bottom: 22px; }
    .oppstart-ord {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 34px;
      line-height: 1;
      color: #fff;
      /* Samme motvekt som .elab-ord: letter-spacing legger luft etter siste
         tegn også, og en sentrert lockup står ellers for langt til venstre. */
      letter-spacing: .12em;
      margin-right: -.12em;
    }
    /* Indikatoren er EKTE milepæler (auth → org/event → data), ikke en tidsstyrt
       animasjon. Står den stille, går det faktisk tregt — det er hensikten. */
    .oppstart-spor {
      width: 132px;
      height: 2px;
      margin: 22px 0 18px;
      border-radius: 999px;
      background: rgba(255,255,255,0.12);
      overflow: hidden;
    }
    .oppstart-spor > i {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      background: #F71B00;
      transform: scaleX(0);
      transform-origin: left center;
      /* Transition, ikke animation: den skal også virke under reduced motion,
         fordi indikatoren er informasjon og ikke pynt. */
      transition: transform .32s cubic-bezier(.2,.85,.3,1);
    }
    .oppstart-tekst { text-align: center; min-height: 34px; transition: opacity .17s ease; }
    .oppstart-tekst.bytter { opacity: 0; }
    .oppstart-tittel {
      font-family: 'Inter', -apple-system, sans-serif;
      font-size: 15px;
      font-weight: 600;
      line-height: 1.35;
      color: #fff;
    }
    .oppstart-tittel:empty { display: none; }
    .oppstart-under {
      font-family: 'Inter', -apple-system, sans-serif;
      font-size: 11px;
      font-weight: 600;
      line-height: 1.5;
      text-transform: uppercase;
      letter-spacing: .11em;
      color: rgba(255,255,255,0.42);
    }
    /* «av» holdes gemen: hele linja i versaler leste som en stamme mot
       org-navnet rett over, og signaturen skal ligge under, ikke konkurrere. */
    .oppstart-bunn {
      font-family: 'Inter', -apple-system, sans-serif;
      font-size: 10px;
      font-weight: 500;
      letter-spacing: .06em;
      color: rgba(255,255,255,0.26);
    }
    .oppstart-bunn b {
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .14em;
      color: rgba(255,255,255,0.42);
    }

    @keyframes oppstartMerke {
      from { transform: scale(.86); opacity: 0; }
      to   { transform: none;       opacity: 1; }
    }
    @keyframes oppstartOrd {
      from { clip-path: inset(0 100% 0 0); opacity: 0; transform: translateY(4px); }
      to   { clip-path: inset(0 -10% 0 0); opacity: 1; transform: none; }
    }
    @keyframes oppstartTon { from { opacity: 0; } to { opacity: 1; } }

    html, body {
      height: 100vh;
      margin: 0;
      overflow: hidden;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background-color: var(--bg);
      color: var(--text);
      -webkit-font-smoothing: antialiased;
    }
    body { display: flex; flex-direction: column; }

    /* ==========================================
       HEADER
       ========================================== */
    .header-panel {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 2000;
      background: var(--header-dark, #1D1D1D);
      padding: 0 20px;
      border-bottom: 1px solid rgba(0,0,0,0.25);
      box-shadow: 0 4px 20px rgba(0,0,0,0.28);
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: 0;
      transform: translateY(0);
      transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                  box-shadow 0.28s ease;
    }
    .header-panel.skjult {
      transform: translateY(-100%);
      box-shadow: none;
    }
    #header-spacer {
      flex-shrink: 0;
      transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .header-row1 {
      display: flex; align-items: center; gap: 10px;
      height: 54px;
    }
    .tlb-tilbake {
      background: color-mix(in srgb, #fff 8%, var(--header-dark, #1D1D1D)) !important;
      border: 1px solid rgba(255,255,255,0.16) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 1px 2px rgba(0,0,0,0.35);
      color: rgba(255,255,255,0.88) !important;
      padding: 6px 11px !important; border-radius: 8px;
      font-size: 12px; font-weight: 600;
      display: inline-flex; align-items: center; gap: 6px;
      cursor: pointer; white-space: nowrap; flex-shrink: 0;
    }
    .tlb-tilbake:hover {
      background: color-mix(in srgb, #fff 14%, var(--header-dark, #1D1D1D)) !important;
      border-color: rgba(255,255,255,0.30) !important;
      color: #fff !important;
    }
    .tlb-modus-tag {
      flex-shrink: 0;
      font-size: 10px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.09em;
      color: color-mix(in srgb, var(--primary) 75%, #fff);
      background: color-mix(in srgb, var(--primary) 16%, transparent);
      border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
      border-radius: 999px; padding: 3px 10px;
    }
    .header-row3 {
      display: flex; align-items: center; gap: 0;
      border-top: 1px solid rgba(255,255,255,0.07);
      padding: 8px 0 9px;
    }
    .header-panel .btn-ai-primary {
      background: linear-gradient(135deg,#CC1500,#F71B00);
      color: white;
      border: 1px solid rgba(255,255,255,0.20);
      font-weight: 700;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 2px 10px rgba(247,27,0,0.35);
    }
    .header-panel .btn-ai-primary:hover {
      background: linear-gradient(135deg,#E01700,#FF3D24);
      border-color: rgba(255,255,255,0.32);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.26), 0 4px 12px rgba(247,27,0,0.45);
    }
    .header-panel .btn-ai-secondary {
      background: color-mix(in srgb, var(--primary) 24%, var(--header-dark, #1D1D1D));
      color: white;
      border: 1px solid color-mix(in srgb, var(--primary) 55%, transparent);
      font-weight: 700;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 1px 2px rgba(0,0,0,0.35);
    }
    .header-panel .btn-ai-secondary:hover {
      background: color-mix(in srgb, var(--primary) 36%, var(--header-dark, #1D1D1D));
      border-color: color-mix(in srgb, var(--primary) 75%, transparent);
    }
    #header-pin-btn.pinned {
      background: rgba(255,255,255,0.18) !important;
      border-color: rgba(255,255,255,0.45) !important;
      color: white !important;
    }
    .header-zone {
      display: flex; align-items: center; gap: 6px;
      padding: 0 14px;
      flex-shrink: 0;
    }
    .header-zone:first-child { padding-left: 0; }
    .header-zone + .header-zone { border-left: 1px solid rgba(255,255,255,0.09); }
    .header-zone.grow { flex: 1; }
    .zone-label {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 11px; font-weight: 400; color: rgba(255,255,255,0.32);
      letter-spacing: 0.12em;
      white-space: nowrap; margin-right: 4px;
    }

    /* Nedsenket gruppeflate — kontrast til de hevede enkeltknappene */
    .ctrl-group {
      display: flex; align-items: center; gap: 1px;
      background: rgba(0,0,0,0.26);
      border: 1px solid rgba(255,255,255,0.10);
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
      border-radius: 8px; padding: 2px;
      flex-shrink: 0;
    }
    .ctrl-seg-btn {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      color: rgba(255,255,255,0.75) !important;
      font-size: 15px; font-weight: 400;
      padding: 2px 8px !important; line-height: 1.2;
      border-radius: 6px !important;
    }
    .ctrl-seg-btn:hover { background: rgba(255,255,255,0.14) !important; color: #fff !important; }
    .ctrl-seg-verdi {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px; font-weight: 700; color: #fff;
      min-width: 28px; text-align: center;
    }
    .header-sep {
      width: 1px; height: 18px; background: rgba(255,255,255,0.15); flex-shrink: 0;
    }
    /* Del-knappen skjules/vises via style.display fra app-core — flex-layouten
       må derfor ligge i CSS så ikonet sentreres når inline-display fjernes. */
    #delelenke-btn { display: inline-flex; align-items: center; gap: 5px; }

    /* Dagknapper i verktøyslinjen (genereres av genererDatoArray) */
    .tl-dag-btn {
      display: inline-flex; flex-direction: column; align-items: center; gap: 0;
      min-width: 34px; padding: 3px 7px 4px !important;
      border-radius: 8px;
      background: color-mix(in srgb, #fff 8%, var(--header-dark, #1D1D1D)) !important;
      border: 1px solid rgba(255,255,255,0.15) !important;
      color: rgba(255,255,255,0.85) !important;
      cursor: pointer; line-height: 1.15;
    }
    .tl-dag-btn:hover {
      background: color-mix(in srgb, #fff 14%, var(--header-dark, #1D1D1D)) !important;
      border-color: rgba(255,255,255,0.28) !important;
      color: #fff !important;
    }
    .tl-dag-uke {
      font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em;
      text-transform: uppercase; opacity: 0.62;
    }
    .tl-dag-nr { font-size: 13px; font-weight: 700; }
    .tl-dag-btn.active {
      background: var(--primary) !important;
      border-color: var(--primary) !important;
      color: #fff !important;
      box-shadow: 0 2px 8px rgba(247,27,0,0.45);
    }
    .tl-dag-btn.active .tl-dag-uke { opacity: 0.85; }
    /* Dager utenfor eventdatoene (genererDatoArray utvider til faktiske
       hendelsesdatoer): nedtonet + stiplet så de skiller seg fra perioden. */
    .tl-dag-btn--utenfor {
      opacity: 0.55;
      border-style: dashed !important;
    }
    .tl-dag-btn--utenfor.active { opacity: 0.9; }

    /* ORG/EVENT-CHIP OG DROPDOWN */
    .org-chip {
      display: flex; align-items: center; gap: 6px;
      background: color-mix(in srgb, #fff 8%, var(--header-dark, #1D1D1D));
      border: 1px solid rgba(255,255,255,0.16);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 2px rgba(0,0,0,0.3);
      border-radius: 8px; padding: 5px 10px 5px 10px;
      color: white; font-size: 12px; font-weight: 600;
      cursor: pointer; transition: background 0.15s; white-space: nowrap;
      font-family: inherit;
    }
    .org-chip:hover {
      background: color-mix(in srgb, #fff 14%, var(--header-dark, #1D1D1D));
      border-color: rgba(255,255,255,0.28);
    }
    .org-chip-sep { opacity: 0.3; margin: 0 2px; }
    .org-chip-event { color: rgba(255,255,255,0.65); font-weight: 500; }
    .org-chip-arrow { opacity: 0.45; font-size: 10px; margin-left: 2px; }

    .org-dropdown-popup {
      position: absolute; top: calc(100% + 8px); right: 0;
      background: white; border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.1);
      border: 1px solid #E5E7EB; min-width: 240px; z-index: 9999;
      overflow: hidden; animation: dropdownFadeIn 0.12s ease;
    }
    @keyframes dropdownFadeIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
    .org-dropdown-header {
      padding: 12px 16px 8px;
      font-size: 10px; font-weight: 700; color: #9CA3AF;
      text-transform: uppercase; letter-spacing: 0.08em;
    }
    .org-dropdown-item {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 16px; font-size: 13px; color: #1D1D1D;
      cursor: pointer; transition: background 0.1s; text-decoration: none;
    }
    .org-dropdown-item:hover { background: #F9FAFB; }
    .org-dropdown-item.active { background: #FFF7ED; color: #EA580C; font-weight: 600; }
    .org-dropdown-item.action { color: #374151; font-weight: 500; }
    .org-dropdown-sep { height: 1px; background: #F1F5F9; margin: 4px 0; }

    .hoved-tittel {
      margin: 0;
      font-family: 'Bebas Neue', 'Inter', sans-serif;
      font-size: 21px;
      font-weight: 400;
      color: rgba(255,255,255,0.95);
      letter-spacing: 0.05em;
      white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis;
      min-width: 0; flex-shrink: 1;
      max-width: 340px;
    }

    /* ==========================================
       BUTTONS — base (light bg)
       ========================================== */
    button {
      padding: 7px 14px;
      border: 1.5px solid var(--border);
      border-radius: 8px;
      background: var(--surface);
      color: var(--text);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s ease;
      font-family: inherit;
    }
    /* 2026-08-07: hover maler ikke lenger om bakgrunn/kant — det overstyrte
       modulenes egne knappefarger og tvang frem !important-overstyringer.
       Brightness gir samme feedback uten å eie fargen. */
    button:hover { filter: brightness(0.97); }
    button.active {
      background: var(--primary);
      color: white;
      border-color: var(--primary);
      box-shadow: 0 2px 8px rgba(247,27,0,0.35);
    }

    /* Header button overrides (dark bg) — hevet, solid «tast»-chip:
       solid flate avledet av headerfargen + topplys-inset + myk skygge
       (samme oppskrift som .orgp-support-btn). */
    .header-panel button {
      background: color-mix(in srgb, #fff 8%, var(--header-dark, #1D1D1D));
      color: rgba(255,255,255,0.88);
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 600;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 1px 2px rgba(0,0,0,0.35);
    }
    .header-panel button:hover {
      background: color-mix(in srgb, #fff 14%, var(--header-dark, #1D1D1D));
      border-color: rgba(255,255,255,0.30);
      color: white;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 6px rgba(0,0,0,0.4);
    }
    .header-panel button.active {
      background: var(--primary);
      color: white;
      border-color: var(--primary);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 2px 8px rgba(247,27,0,0.5);
    }

    /* ==========================================
       PROFILBILDE-AVATARER (avatarInnhold i app-core.js)
       Legges INNI en hvilken som helst avatar-sirkel: holderen
       fyller containeren og klipper bildet til containerens radius;
       initialene bak blir synlige hvis bildet feiler (onerror fjerner img).
       ========================================== */
    .avatar-holder {
      position: relative; width: 100%; height: 100%;
      display: grid; place-items: center;
      border-radius: inherit; overflow: hidden;
    }
    .avatar-bilde {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; border-radius: inherit;
    }

    /* ==========================================
       SELECTS — base (light bg)
       ========================================== */
    select {
      padding: 7px 14px;
      border: 1.5px solid var(--border);
      border-radius: 8px;
      background: var(--surface);
      color: var(--text);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.15s ease;
    }
    select:hover { border-color: #94A3B8; }
    select option { background: white; color: var(--text); }

    /* Header select overrides (dark bg) — nedsenkede felt som søket */
    .header-panel select {
      background: rgba(0,0,0,0.26);
      color: rgba(255,255,255,0.85);
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
      border-radius: 8px;
      padding: 6px 9px;
      font-size: 12px;
      font-weight: 600;
      max-width: 170px;
    }
    .header-panel select:hover { background: rgba(0,0,0,0.34); border-color: rgba(255,255,255,0.26); }
    .header-panel select option { background: #2A2A2A; color: white; }

    /* Header text input */
    .header-panel input[type="text"] {
      padding: 6px 11px;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 8px;
      background: rgba(0,0,0,0.26);
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
      color: white;
      font-size: 12px;
      font-family: inherit;
      transition: all 0.15s ease;
    }
    .header-panel input[type="text"]:focus {
      outline: none;
      border-color: color-mix(in srgb, var(--primary) 55%, transparent);
      background: rgba(0,0,0,0.34);
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.3),
                  0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
    }
    .header-panel input[type="text"]::placeholder { color: rgba(255,255,255,0.35); }
    .header-panel input[type="range"] { cursor: pointer; accent-color: var(--primary); }

    .controls-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

    /* ==========================================
       TIMELINE
       ========================================== */
    .timeline-wrapper { flex-grow: 1; overflow: auto; display: flex; position: relative; }

    .time-column {
      position: sticky; left: 0; z-index: 990;
      width: 65px; flex-shrink: 0;
      background-color: var(--bg);
      border-right: 1px solid var(--border);
      height: var(--timeline-height, 11520px);
      box-shadow: 2px 0 8px rgba(29,29,29,0.05);
    }
    .time-spacer { height: calc(var(--area-header-height) + var(--loc-header-height)); box-sizing: border-box; }

    .time-slot { height: 120px; box-sizing: border-box; position: relative; border-bottom: 1px solid transparent; }
    .time-text {
      position: absolute; top: -7px; right: 12px;
      font-size: 11px; color: var(--text-muted); font-weight: 600; letter-spacing: 0.02em;
    }
    /* Klokkeslett-etiketter i tidskolonnen (genereres av tegnTidslinje) */
    .tl-time-lbl {
      position: absolute; left: 0; width: 100%; text-align: center;
      font-family: 'JetBrains Mono', monospace;
    }
    .tl-time-lbl--hel     { font-size: 11px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
    .tl-time-lbl--halv    { font-size: 10px; font-weight: 500; color: var(--text-muted); }
    .tl-time-lbl--kvarter { font-size: 9px;  font-weight: 400; color: color-mix(in srgb, var(--text-muted) 65%, transparent); }
    /* Skjøt der «Skjul netter» har klappet sammen tomme nattetimer.
       Høyde 0 med overflow synlig — markøren må ikke flytte tidsaksen. */
    .tl-natt-skjot {
      position: absolute; left: 0; right: 0; height: 0; z-index: 940;
      border-top: 1px dashed color-mix(in srgb, var(--text-muted) 55%, transparent);
      line-height: normal; pointer-events: none;
    }
    .tl-natt-skjot span {
      position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%);
      background: var(--bg); padding: 0 3px;
      font-family: 'JetBrains Mono', monospace; font-size: 8px; font-weight: 600;
      color: var(--text-muted); letter-spacing: -0.03em; white-space: nowrap;
    }
    .tl-natt-skjot--under span { bottom: auto; top: 1px; }
    #skjul-netter-btn.aktiv {
      background: var(--primary) !important; border-color: var(--primary) !important;
      color: #fff !important;
    }
    /* Dag-etikett (sticky pille øverst i tidskolonnen) */
    .tl-dag-etikett {
      position: absolute; left: 4px; right: 4px;
      background: var(--header-dark, #1D1D1D); color: #fff;
      text-align: center;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 13px; letter-spacing: 0.08em;
      padding: 6px 2px 5px;
      border-radius: 0 0 9px 9px;
      box-shadow: 0 3px 10px rgba(29,29,29,0.25);
    }

    .area-group {
      display: flex; flex-direction: column;
      min-height: var(--timeline-height, 11520px);
      border-right: 2px solid var(--border);
    }
    .area-header {
      position: sticky; top: 0; z-index: 800;
      height: var(--area-header-height); line-height: var(--area-header-height);
      background: var(--header-dark, #374151); color: white;
      text-align: center; font-weight: 400; font-size: 15px;
      font-family: 'Bebas Neue', sans-serif;
      letter-spacing: 0.12em;
      text-shadow: 0 1px 2px rgba(0,0,0,0.25);
      box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
    }
    .location-columns-container { display: flex; flex-direction: row; flex-grow: 1; min-height: 100%; }
    .location-column {
      height: var(--timeline-height, 11520px);
      position: relative; box-sizing: border-box;
      border-right: 1px solid var(--border);
      min-width: var(--col-width); max-width: var(--col-width); flex: 0 0 var(--col-width);
    }
    .location-header {
      position: sticky; top: var(--area-header-height); z-index: 700;
      height: var(--loc-header-height);
      display: flex; align-items: center; justify-content: center;
      background: color-mix(in srgb, var(--surface) 88%, transparent);
      backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
      text-align: center;
      font-weight: 700; font-size: 11.5px; color: var(--text);
      border-bottom: 1px solid var(--border);
      letter-spacing: 0.05em; text-transform: uppercase;
      padding: 0 6px; box-sizing: border-box;
      overflow: hidden;
    }

    .grid-container {
      flex-grow: 1; height: var(--timeline-height, 11520px);
      display: flex; position: relative; cursor: pointer;
      background-image:
        linear-gradient(to bottom, color-mix(in srgb, var(--text) 22%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--text) 11%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px);
      background-size: 100% var(--hour-height), 100% var(--half-hour-height), 100% var(--quarter-height);
    }

    /* ==========================================
       EVENT CARDS
       ========================================== */
    .event-card {
      position: absolute;
      border-radius: 9px;
      color: white;
      box-shadow: 0 1px 3px rgba(15,23,42,0.22), inset 0 1px 0 rgba(255,255,255,0.14), inset 0 0 0 1px rgba(255,255,255,0.06);
      box-sizing: border-box;
      cursor: pointer;
      overflow: hidden;
      transition: box-shadow 0.15s ease, height 0.15s ease, transform 0.12s ease;
      border: none;
      display: flex; flex-direction: column;
      justify-content: space-between; align-items: stretch;
      text-align: left; padding: 6px 7px;
    }
    .event-card:hover:not(.is-resizing) {
      height: auto !important;
      min-height: var(--card-h, 40px);
      overflow: visible;
      z-index: 50 !important;
      box-shadow: 0 10px 30px rgba(15,23,42,0.35), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 0 0 1px rgba(255,255,255,0.1);
    }
    .event-card.is-resizing {
      overflow: hidden;
      cursor: ns-resize;
    }
    .event-card-tittel {
      font-weight: 800; font-size: 13.5px; line-height: 1.15;
      letter-spacing: -0.01em;
      margin-bottom: 1px;
      text-shadow: 0 1px 2px rgba(0,0,0,0.18);
    }
    .event-card-tid {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px; font-weight: 500; opacity: 0.85;
      letter-spacing: -0.02em;
    }
    .event-card-topp { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; width: 100%; }
    .event-card-topp .event-card-tittel { flex: 1 1 auto; min-width: 0; }
    .event-card-ekstern-chip {
      display: inline-block; margin-left: 5px; padding: 1px 5px;
      background: rgba(255,255,255,0.22); border-radius: 100px;
      font-size: 8.5px; font-weight: 700; letter-spacing: 0.05em;
      text-transform: uppercase; vertical-align: 1px;
    }
    .event-card-ansvarlig { font-size: 12px; font-weight: 600; width: 100%; margin-bottom: 3px; opacity: 0.95; }
    .card-expanded {
      display: none; width: 100%; margin-top: 6px;
      padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.25);
      text-align: left;
    }
    .event-card:hover:not(.is-resizing) .card-expanded { display: block; }
    .card-exp-tid { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 700; margin-bottom: 5px; opacity: 0.95; }
    .card-exp-rad { font-size: 11px; opacity: 0.85; line-height: 1.5; }
    .card-exp-lbl { opacity: 0.65; margin-right: 3px; }
    .card-exp-besk { font-size: 11px; opacity: 0.8; margin-top: 5px; line-height: 1.4; font-style: italic; }
    .card-exp-konflikt { margin-top: 6px; font-size: 11px; font-weight: 700; color: #FBBF24; }

    .resizer {
      position: absolute; bottom: 0; left: 0; width: 100%; height: 8px;
      cursor: ns-resize;
      background: rgba(0,0,0,0.15);
      border-top: 1px solid rgba(0,0,0,0.08);
      border-radius: 0 0 9px 9px;
      opacity: 0;
      transition: opacity 0.12s ease;
    }
    .event-card:hover .resizer { opacity: 1; }
    .resizer:hover { background: rgba(0,0,0,0.3); }

    /* ==========================================
       MODALS
       ========================================== */
    .modal {
      display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%;
      background: rgba(15,23,42,0.65);
      backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    }
    .modal-content {
      background: var(--surface); margin: 3% auto; padding: 32px;
      border-radius: 16px; width: 650px; max-width: 95%;
      max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
      box-shadow: 0 25px 60px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.04);
    }
    .modal-header {
      margin-top: 0; border-bottom: 1px solid var(--border);
      padding-bottom: 16px; margin-bottom: 24px;
      font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -0.02em;
    }

    /* Reset buttons/selects inside modals to light theme */
    .modal button, .modal-content button { background: var(--surface); color: var(--text); border-color: var(--border); }
    .modal button:hover, .modal-content button:hover { background: var(--bg); border-color: #C8B8AD; color: var(--text); }
    .modal select, .modal-content select { background: var(--surface); color: var(--text); border-color: var(--border); }
    .modal select option, .modal-content select option { background: white; color: var(--text); }

    /* ── Event-skjema: høyre sidebar ──────────────────────────────── */
    #eventModal {
      background: transparent !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      left: auto;
      right: 0;
      width: 480px;
      pointer-events: none;
    }
    /* Delt stil for event- og info-sidebar */
    #eventModal .modal-content,
    #infoModal  .modal-content {
      margin: 0 !important;
      max-width: 100vw !important;
      height: 100vh !important;
      max-height: 100vh !important;
      border-left: 1px solid var(--border);
      box-shadow: -12px 0 48px rgba(0,0,0,0.35) !important;
      pointer-events: all;
      box-sizing: border-box !important;
      overflow-y: auto;
      animation: event-sidebar-in 0.28s cubic-bezier(0.32,0.72,0,1);
    }
    #eventModal .modal-content {
      width: 480px !important;
      border-radius: 16px 0 0 16px !important;
    }
    #infoModal .modal-content {
      width: 600px !important;
      border-radius: 16px 0 0 16px !important;
    }
    @keyframes event-sidebar-in {
      from { transform: translateX(100%); }
      to   { transform: translateX(0); }
    }

    /* ── Info-sidebar ──────────────────────────────────────── */
    #infoModal {
      background: transparent !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      left: auto;
      right: 0;
      width: 600px;
      pointer-events: none;
    }
    #infoModal .info-layout {
      grid-template-columns: 1fr !important;
    }
    #infoModal .info-kp-kolonne {
      border-left: none !important;
      padding-left: 0 !important;
      border-top: 1px solid var(--border);
      padding-top: 20px;
      margin-top: 8px;
    }
    #infoModal .info-modal-footer {
      position: sticky; bottom: 0;
      background: var(--surface);
      padding: 14px 0 4px !important;
      margin-top: 8px;
      border-top: 1px solid var(--border);
    }

    .event-modal-hd {
      display: flex; align-items: center; justify-content: space-between;
      position: sticky; top: 0; z-index: 2;
      background: var(--surface);
      padding-bottom: 14px; margin-bottom: 20px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      padding-top: 2px;
    }
    #eventModal .modal-header,
    #infoModal  .modal-header {
      border: none !important; padding: 0 !important; margin: 0 !important;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 22px; font-weight: 400;
      text-transform: uppercase; letter-spacing: 0.03em;
      line-height: 1.1;
      min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .event-modal-lukk {
      width: 28px; height: 28px; border-radius: 7px;
      border: 1px solid var(--border) !important; background: transparent !important;
      color: var(--text-muted) !important; cursor: pointer;
      display: flex !important; align-items: center; justify-content: center;
      flex-shrink: 0; transition: background .12s, color .12s;
      padding: 0;
    }
    .event-modal-lukk:hover { background: var(--border) !important; color: var(--text) !important; }
    #eventModal .mal-footer-row {
      position: sticky; bottom: 0;
      background: var(--surface);
      padding: 14px 0 2px !important;
      margin-top: 12px;
      border-top: 1px solid var(--border);
    }

    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }

    .form-group label {
      display: block; font-size: 11px; font-weight: 700;
      margin-bottom: 6px; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.07em;
    }
    .form-group input, .form-group select, .form-group textarea {
      width: 100%; box-sizing: border-box; padding: 10px 12px;
      border: 1.5px solid var(--border); border-radius: 8px;
      font-size: 14px; font-family: inherit; color: var(--text); background: var(--surface);
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
      outline: none; border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(247,27,0,0.12);
    }
    .form-group select option { background: white; color: var(--text); }

    .info-item { background: var(--bg); padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--border); }
    .info-label { font-size: 10px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; display: block; margin-bottom: 4px; letter-spacing: 0.07em; }
    .info-value { font-size: 14px; font-weight: 600; color: var(--text); }

    .full-width { grid-column: span 2; }

    .btn-save {
      background: var(--primary) !important; color: white !important; font-weight: 700;
      border: none !important; padding: 11px 24px; border-radius: 8px; font-size: 14px;
      box-shadow: 0 2px 8px rgba(247,27,0,0.3);
    }
    .btn-save:hover { background: var(--primary-dark) !important; box-shadow: 0 4px 14px rgba(247,27,0,0.4) !important; }
    .btn-cancel {
      background: var(--bg) !important; color: var(--text-muted) !important;
      border: 1.5px solid var(--border) !important; padding: 11px 24px;
      border-radius: 8px; font-size: 14px; font-weight: 600; margin-left: 10px;
    }
    .btn-cancel:hover { background: var(--border) !important; color: var(--text) !important; }

    /* ==========================================
       TOAST
       ========================================== */
    #toast-varsel {
      visibility: hidden; min-width: 260px;
      background: #0F172A; color: white;
      border-radius: 12px; padding: 14px 18px;
      position: fixed; z-index: 3000; left: 50%; bottom: 32px; transform: translateX(-50%);
      box-shadow: 0 8px 32px rgba(0,0,0,0.35);
      font-size: 14px; font-weight: 500;
      display: flex; justify-content: space-between; align-items: center; gap: 16px;
      border: 1px solid rgba(255,255,255,0.08);
    }
    #toast-varsel.show { visibility: visible; animation: fadein 0.25s, fadeout 0.3s 4.7s; }
    @keyframes fadein { from { bottom: 16px; opacity: 0; } to { bottom: 32px; opacity: 1; } }
    @keyframes fadeout { from { bottom: 32px; opacity: 1; } to { bottom: 16px; opacity: 0; } }

    .btn-undo { background: rgb(var(--st-feil-tint)); color: white; border: none; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-weight: 700; font-size: 12px; white-space: nowrap; }
    .btn-undo:hover { background: #DC2626; }

    /* ==========================================
       INFO MODAL — TO-KOLONNE KJØREPLAN-LAYOUT
       ========================================== */
    #infoModal .modal-content {
      width: 940px;
    }
    .info-layout {
      display: grid;
      grid-template-columns: 260px 1fr;
      gap: 0 28px;
      align-items: start;
    }
    .info-kp-kolonne {
      border-left: 1px solid var(--border);
      padding-left: 28px;
    }
    .info-kp-kolonne .kp-seksjon {
      margin-top: 0;
      border-top: none;
      padding-top: 0;
    }
    .info-meta-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px 16px;
      margin-bottom: 12px;
    }
    .info-meta-grid .info-item { margin: 0; }
    .info-meta-extra { display: flex; flex-direction: column; gap: 10px; }
    @media (max-width: 720px) {
      #infoModal .modal-content { width: 95vw; }
      .info-layout { grid-template-columns: 1fr; }
      .info-kp-kolonne { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 20px; margin-top: 8px; }
    }

    /* ==========================================
       CONFIRM MODAL
       ========================================== */
    #confirmModal { display: none; position: fixed; z-index: 3000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(15,23,42,0.65); backdrop-filter: blur(6px); }
    #confirmModal .modal-content { background: var(--surface); margin: 15% auto; padding: 32px; border-radius: 16px; width: 360px; text-align: center; box-shadow: 0 25px 60px rgba(0,0,0,0.2); }

    /* KPI MODAL */
    #kpiModal { display: none; position: fixed; z-index: 3100; left: 0; top: 0; width: 100%; height: 100%;
      background: rgba(15,23,42,0.6); backdrop-filter: blur(6px); }
    #kpiModal .modal-content { background: var(--surface); margin: 4% auto; padding: 28px 32px;
      border-radius: 16px; width: 560px; max-width: 95%; max-height: 85vh; overflow-y: auto;
      box-shadow: 0 30px 70px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.04); }
    .kpi-modal-tittel { margin: 0 0 20px; font-size: 18px; font-weight: 800; color: var(--text);
      letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; }
    .kpi-modal-seksjon { font-size: 11px; font-weight: 700; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.08em; margin: 20px 0 10px; }
    .kpi-rad { display: flex; align-items: center; gap: 10px; padding: 7px 0;
      border-bottom: 1px solid var(--border); }
    .kpi-rad:last-child { border-bottom: none; }
    .kpi-rad-label { font-size: 13px; font-weight: 600; color: var(--text); width: 160px; min-width: 160px; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .kpi-rad-tall { font-size: 12px; color: var(--text-muted); min-width: 90px; text-align: right; white-space: nowrap; }
    .kpi-bar-wrapper { flex: 1; background: var(--border); border-radius: 4px; height: 7px; overflow: hidden; min-width: 60px; }
    .kpi-bar { height: 100%; border-radius: 4px; transition: width 0.4s cubic-bezier(0.4,0,0.2,1); }
    .kpi-summary-box { background: var(--bg); border-radius: 10px; padding: 14px 18px;
      display: flex; gap: 24px; margin-bottom: 4px; flex-wrap: wrap; }
    .kpi-summary-stat { display: flex; flex-direction: column; }
    .kpi-summary-tall { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -0.03em; }
    .kpi-summary-lbl  { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
    #confirmModal h3 { margin-top: 0; color: var(--text); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
    #confirmModal p { color: var(--text-muted); font-size: 14px; margin-bottom: 24px; line-height: 1.6; }
    .btn-danger { background: rgb(var(--st-feil-tint)); color: white; border: none; padding: 11px 24px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 14px; box-shadow: 0 2px 8px rgba(var(--st-feil-tint),0.3); }
    .btn-danger:hover { background: #DC2626; }

    /* ==========================================
       KONFLIKT-BADGE
       ========================================== */
    /* Rolig markering i hvile: tynn stripe i venstre kant + ikon-badge i
       badge-raden. Full farget ring kun på hover. Stedkonfliktens gule
       stripe vinner hvis begge gjelder (samme par kan kollidere på både
       sted og person) — badge-raden viser uansett begge ikonene. */
    .har-konflikt {
      box-shadow: inset 3px 0 0 #FBBF24, 0 1px 3px rgba(15,23,42,0.22), inset 0 1px 0 rgba(255,255,255,0.14), inset 0 0 0 1px rgba(255,255,255,0.06);
    }
    .har-personkonflikt:not(.har-konflikt) {
      box-shadow: inset 3px 0 0 #A78BFA, 0 1px 3px rgba(15,23,42,0.22), inset 0 1px 0 rgba(255,255,255,0.14), inset 0 0 0 1px rgba(255,255,255,0.06);
    }
    .event-card.har-konflikt:hover:not(.is-resizing) {
      box-shadow: 0 0 0 2px #FBBF24, 0 10px 30px rgba(15,23,42,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
    }
    .event-card.har-personkonflikt:not(.har-konflikt):hover:not(.is-resizing) {
      box-shadow: 0 0 0 2px #8B5CF6, 0 10px 30px rgba(15,23,42,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
    }
    #konflikt-chip {
      display: none; cursor: pointer; padding: 2px 8px;
      background: rgba(251,191,36,0.15); border: 1px solid rgba(251,191,36,0.4);
      border-radius: 6px; font-size: 12px; font-weight: 700; color: #FBBF24;
      white-space: nowrap; transition: background 0.15s;
      align-items: center; gap: 4px;
    }
    #konflikt-chip:hover { background: rgba(251,191,36,0.25); }

    /* ==========================================
       HEATMAP I TIDSKOLONNE
       ========================================== */
    .heatmap-celle {
      position: absolute; right: 0; width: 5px; border-radius: 1px 0 0 1px;
      pointer-events: none;
    }

    /* ==========================================
       HENDELSESMALER
       ========================================== */
    .mal-bar { display: none; }
    .mal-footer-row {
      display: flex; align-items: center; gap: 8px;
      margin-top: 20px; flex-wrap: wrap;
    }
    .btn-sekundær {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 14px; border-radius: 7px; border: 1px solid var(--border);
      background: var(--bg); color: var(--text); font-size: 12px; font-weight: 500;
      cursor: pointer; white-space: nowrap; transition: border-color .12s, color .12s;
    }
    .btn-sekundær:hover { border-color: var(--primary); color: var(--primary); }
    .mal-dropdown-panel {
      position: absolute; bottom: calc(100% + 6px); left: 0;
      min-width: 220px; background: var(--surface);
      border: 1px solid var(--border); border-radius: 8px;
      box-shadow: 0 8px 28px rgba(0,0,0,.15); z-index: 500;
      overflow: hidden;
    }
    .mal-panel-rad {
      display: flex; align-items: center;
    }
    .mal-liste-btn {
      flex: 1; padding: 9px 14px; text-align: left; border: none; background: none;
      color: var(--text); font-size: 13px; cursor: pointer;
    }
    .mal-liste-btn:hover { background: rgba(247,27,0,.06); color: var(--primary); }
    .mal-slett-inline-btn {
      padding: 9px 12px; border: none; background: none;
      color: var(--text-muted); font-size: 16px; cursor: pointer; flex-shrink: 0;
    }
    .mal-slett-inline-btn:hover { color: rgb(var(--st-feil-tint)); }

    /* ==========================================
       LEGENDE MODAL
       ========================================== */
    #legendeModal .modal-content { width: 440px; }
    .legende-rad { display: flex; align-items: center; gap: 10px; padding: 6px 0;
      border-bottom: 1px solid var(--border); font-size: 13px; }
    .legende-rad:last-child { border-bottom: none; }
    .legende-farge { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; }

    /* ==========================================
       KPI DASHBOARD
       ========================================== */
    .kpi-box {
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.1);
      border-left: 2px solid rgba(255,255,255,0.25);
      border-radius: 8px; padding: 4px 10px;
      display: flex; flex-direction: column; justify-content: center;
    }
    .kpi-title { font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 1px; }
    .kpi-value { font-size: 13px; font-weight: 800; color: white; white-space: nowrap; }

    /* ==========================================
       TOOLTIP
       ========================================== */
    .tooltip { position: relative; display: inline-block; margin-left: 5px; cursor: help; }
    .tooltip-icon { background: rgba(255,255,255,0.2); color: white; border-radius: 50%; width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; }
    .tooltip-text {
      visibility: hidden; width: 180px; background-color: #0F172A; color: white;
      text-align: center; border-radius: 8px; padding: 8px 12px;
      position: absolute; z-index: 1000; bottom: 125%; left: 50%; margin-left: -90px;
      opacity: 0; transition: opacity 0.2s; font-size: 11px; font-weight: 400; line-height: 1.5;
      box-shadow: 0 8px 24px rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.08);
    }
    .tooltip:hover .tooltip-text { visibility: visible; opacity: 1; }

    /* ==========================================
       DB STATUS BADGE
       ========================================== */
    .db-status-badge { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; }
    .status-green { background: rgba(var(--st-ok-tint),0.15); color: #6EE7B7; border: 1px solid rgba(var(--st-ok-tint),0.3); }
    .status-red { background: rgba(var(--st-feil-tint),0.15); color: #FCA5A5; border: 1px solid rgba(var(--st-feil-tint),0.3); }

    /* ==========================================
       SETTINGS TABS
       ========================================== */
    .tab-btn {
      background: transparent !important; border: none !important;
      border-bottom: 2px solid transparent !important; border-radius: 0 !important;
      color: var(--text-muted) !important; font-weight: 600 !important;
      padding: 8px 16px !important; font-size: 14px !important; box-shadow: none !important;
    }
    .tab-btn:hover { color: var(--primary) !important; background: transparent !important; }
    .tab-btn.active { color: var(--primary) !important; border-bottom: 2px solid var(--primary) !important; background: transparent !important; box-shadow: none !important; }
    .org-tab-hjelp { font-size: 12px; color: var(--text-muted); padding: 6px 2px 14px; min-height: 18px; }

    /* ==========================================
       ORGANISASJONSINNSTILLINGER — FULLSKJERM (A+B)
       ========================================== */
    .orgp-header {
      display: flex; align-items: center; gap: 12px;
      padding: 0 18px; height: 56px;
      background: var(--header-dark); color: #fff;
      border-bottom: 1px solid rgba(0,0,0,0.2);
      flex-shrink: 0;
    }
    /* Event-topbaren er en container så innholdet tilpasser seg redusert bredde
       (AI-panel åpent, smalt vindu) uten at knapper renner ut under panelet.
       Scoped til .db-topbar for ikke å påvirke org-landingsheaderen. */
    .db-topbar.orgp-header { container-type: inline-size; }
    /* Smal topbar → kollaps knappe-labels til ikon-only (samme grep som
       iPad/tablet), og krymp/skjul søkefeltet gradvis. Container-query slår
       til uansett skjermstørrelse — også når AI-panelet krymper skallet. */
    @container (max-width: 1200px) {
      .orgp-support-btn span:not(.orgp-badge) { display: none; }
      .orgp-support-btn { padding: 8px 9px; }
    }
    @container (max-width: 1000px) {
      .orgp-header-soek { min-width: 0; flex: 0 1 190px; }
    }
    @container (max-width: 820px) {
      .orgp-header-soek { display: none; }
    }
    .orgp-header .kpd-tilbake-btn {
      background: color-mix(in srgb, #fff 8%, var(--header-dark, #1D1D1D));
      border: 1px solid rgba(255,255,255,0.16);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 1px 2px rgba(0,0,0,0.35);
      color: rgba(255,255,255,0.88);
      padding: 6px 11px; border-radius: 8px;
      font-size: 12px; font-weight: 600;
      display: inline-flex; align-items: center; gap: 6px;
      cursor: pointer;
    }
    .orgp-header .kpd-tilbake-btn:hover {
      background: color-mix(in srgb, #fff 14%, var(--header-dark, #1D1D1D));
      border-color: rgba(255,255,255,0.30);
      color: #fff;
    }
    .orgp-org-pille {
      display: inline-flex; align-items: center; gap: 9px;
      background: color-mix(in srgb, #fff 7%, var(--header-dark, #1D1D1D));
      border: 1px solid rgba(255,255,255,0.14);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 2px rgba(0,0,0,0.3);
      padding: 4px 11px 4px 5px; border-radius: 999px;
      font-family: inherit;
    }
    .orgp-org-pille-avatar {
      width: 22px; height: 22px; border-radius: 999px;
      background: var(--primary); color: #fff;
      display: grid; place-items: center;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 13px; padding-top: 1px;
      letter-spacing: 0.04em;
    }
    .orgp-org-pille-navn { font-size: 12px; font-weight: 600; color: #fff; }
    .orgp-org-pille-sep { font-size: 10px; color: rgba(255,255,255,0.35); }
    .orgp-org-pille-meta { font-size: 11px; color: rgba(255,255,255,0.55); white-space: nowrap; }
    .orgp-tittel {
      margin: 0 0 0 4px; font-family: 'Bebas Neue', sans-serif;
      font-size: 18px; font-weight: 400; letter-spacing: 0.04em;
      color: rgba(255,255,255,0.95);
      /* Én linje m/ellipsis — ellers brøt tittelen til flere linjer og ble
         klippet øverst når skallet krympet (AI-panel åpent). */
      min-width: 0; flex-shrink: 1;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    /* Nedsenket felt — kontrast til de hevede knappene gir dybdehierarki */
    .orgp-header-soek {
      position: relative;
      display: inline-flex; align-items: center; gap: 7px;
      background: rgba(0,0,0,0.28);
      border: 1px solid rgba(255,255,255,0.10);
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.35);
      border-radius: 8px; padding: 5px 11px;
      min-width: 280px; max-width: 380px; flex: 0 1 320px;
      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    }
    .orgp-header-soek:focus-within {
      border-color: color-mix(in srgb, var(--primary) 55%, transparent);
      background: rgba(0,0,0,0.34);
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.3),
                  0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
    }
    .orgp-header-soek input {
      flex: 1; background: transparent; border: none; outline: none;
      color: #fff; font-size: 12px; font-family: inherit; padding: 0;
      min-width: 0;
    }
    .orgp-header-soek input::placeholder { color: rgba(255,255,255,0.5); }
    .orgp-header-soek svg { flex-shrink: 0; }
    .orgp-header-soek .orgp-kbd {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9.5px; color: rgba(255,255,255,0.45);
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.16); border-radius: 4px;
      box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);
      padding: 1px 5px; flex-shrink: 0;
    }

    /* ── Global søk-dropdown — command palette ───────────────── */
    .db-soek-dd {
      position: absolute; top: calc(100% + 6px); left: 0; right: 0;
      z-index: 1500;
      background: var(--paper, #FFF8F1);
      border: 1px solid var(--line-soft, var(--border));
      border-radius: 12px;
      box-shadow:
        0 24px 60px -16px rgba(29, 29, 29, 0.32),
        0 6px 18px -4px rgba(29, 29, 29, 0.14);
      max-height: 460px; overflow-y: auto;
      padding: 6px;
      animation: db-soek-pop .12s ease-out;
    }
    @keyframes db-soek-pop {
      from { opacity: 0; transform: translateY(-4px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .db-soek-gruppe-tittel {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 12px; letter-spacing: 0.06em;
      color: var(--ink-soft, var(--text-muted));
      text-transform: uppercase;
      padding: 8px 10px 4px;
    }
    .db-soek-gruppe-tittel:first-child { padding-top: 4px; }
    .db-soek-rad {
      display: flex; align-items: center; gap: 11px;
      width: 100%; padding: 9px 11px;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 9px;
      cursor: pointer; text-align: left;
      font-family: inherit; color: var(--text);
      transition: background .12s, border-color .12s;
    }
    .db-soek-rad:hover, .db-soek-rad.aktiv {
      background: var(--surface, #fff);
      border-color: var(--border);
    }
    .db-soek-rad.aktiv {
      box-shadow: 0 2px 6px rgba(29, 29, 29, 0.06);
    }
    .db-soek-ikon {
      width: 28px; height: 28px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 8px; flex-shrink: 0;
    }
    .db-soek-info {
      flex: 1; min-width: 0;
      display: flex; flex-direction: column; gap: 1px;
    }
    .db-soek-tittel {
      font-size: 13px; font-weight: 600; color: var(--text);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .db-soek-sub {
      font-size: 11px; color: var(--ink-soft, var(--text-muted));
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .db-soek-pil {
      color: var(--text-muted); flex-shrink: 0;
      opacity: 0; transition: opacity .12s, transform .12s;
    }
    .db-soek-rad:hover .db-soek-pil,
    .db-soek-rad.aktiv .db-soek-pil {
      opacity: 1; transform: translateX(2px);
    }
    .db-soek-tom {
      padding: 24px 12px; text-align: center;
      color: var(--text-muted); font-size: 13px;
    }

    /* Flash-effekt når søk navigerer til en oppgave/element */
    .opp-kort-flash {
      animation: opp-kort-flash 1.5s ease-out;
    }
    @keyframes opp-kort-flash {
      0%, 100% { box-shadow: none; }
      20% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent); }
    }
    /* Hevet, solid «tast»-chip — samme oppskrift som .header-panel button:
       solid flate avledet av headerfargen + topplys-inset + myk skygge.
       Ikonene beholder rød aksent; AI-varianten (.ai) er den røde primær-CTA-en. */
    .orgp-support-btn {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 8px 14px; border-radius: 9px;
      font-size: 13px; font-weight: 600;
      background: color-mix(in srgb, #fff 8%, var(--header-dark, #1D1D1D));
      border: 1px solid rgba(255,255,255,0.16);
      color: rgba(255,255,255,0.92);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 1px 2px rgba(0,0,0,0.35);
      cursor: pointer; flex-shrink: 0;
      transition: background 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s;
    }
    .orgp-support-btn svg {
      color: color-mix(in srgb, var(--primary) 72%, #fff);
      transition: color 0.15s;
    }
    .orgp-support-btn:hover {
      background: color-mix(in srgb, #fff 14%, var(--header-dark, #1D1D1D));
      border-color: rgba(255,255,255,0.30);
      color: #fff;
      transform: translateY(-1px);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 10px -2px rgba(0,0,0,0.45);
    }
    .orgp-support-btn:hover svg { color: #fff; }
    .orgp-support-btn:active { transform: translateY(0); box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); }
    /* AI-varianten: solid mørkrød chip (speiler .btn-ai-secondary i tidslinjen)
       — skiller AI fra standardhandlingene uten å konkurrere med sidens
       primær-CTA (→ Tidslinje / Opprett med AI). */
    .orgp-support-btn.ai {
      background: color-mix(in srgb, var(--primary) 24%, var(--header-dark, #1D1D1D));
      border-color: color-mix(in srgb, var(--primary) 55%, transparent);
      color: #fff;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 1px 2px rgba(0,0,0,0.35);
    }
    .orgp-support-btn.ai svg { color: color-mix(in srgb, var(--primary) 45%, #fff); }
    .orgp-support-btn.ai:hover {
      background: color-mix(in srgb, var(--primary) 36%, var(--header-dark, #1D1D1D));
      border-color: color-mix(in srgb, var(--primary) 75%, transparent);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 4px 10px -2px rgba(247,27,0,0.35);
    }
    .orgp-support-btn .orgp-badge {
      background: var(--primary); color: #fff;
      border-radius: 999px; font-size: 9.5px;
      padding: 1px 5px; font-weight: 700; margin-left: 2px;
    }
    .orgp-bruker-avatar {
      width: 30px; height: 30px; border-radius: 999px;
      background: linear-gradient(135deg,#8B5CF6,#3B82F6);
      color: #fff; display: grid; place-items: center;
      font-size: 11px; font-weight: 700; flex-shrink: 0;
      padding: 0; border: none; /* nullstill global button-stil — ellers skvises initialene ut av sirkelen */
      box-shadow: 0 0 0 2px rgba(255,255,255,0.20);
      cursor: pointer;
      transition: transform 0.12s, box-shadow 0.15s;
    }
    .orgp-bruker-avatar:hover {
      transform: translateY(-1px);
      box-shadow: 0 0 0 2px rgba(255,255,255,0.45), 0 4px 12px -2px rgba(0,0,0,0.5);
    }

    /* Universell pointer-cursor for alt klikkbart i toppmenyen */
    .orgp-header button,
    .orgp-header a,
    .orgp-header .orgp-org-pille,
    .orgp-header [role="button"] {
      cursor: pointer;
    }

    .orgp-body {
      display: flex; flex: 1; min-height: 0; overflow: hidden;
    }
    .orgp-nav {
      width: 232px; flex-shrink: 0;
      border-right: 1px solid var(--border);
      background: var(--surface);
      display: flex; flex-direction: column;
      overflow-y: auto; padding: 14px 10px;
      gap: 0;
    }
    .orgp-nav-soek {
      display: flex; align-items: center; gap: 7px;
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 8px; padding: 6px 10px;
      margin-bottom: 14px; flex-shrink: 0;
    }
    .orgp-nav-soek input {
      flex: 1; background: transparent; border: none; outline: none;
      color: var(--text); font-size: 12px; font-family: inherit; padding: 0;
      min-width: 0;
    }
    .orgp-nav-soek input::placeholder { color: var(--text-muted); }
    .orgp-nav-gruppe { display: flex; flex-direction: column; gap: 1px; margin-bottom: 14px; }
    .orgp-nav-gruppe-tittel {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 13px; font-weight: 400; color: var(--ink-soft, var(--text-muted));
      text-transform: uppercase; letter-spacing: 0.08em;
      padding: 0 8px 6px;
    }
    /* legacy separator — bevart for back-compat hvis noe injecter den */
    .orgp-nav-separator { display: none; }
    .orgp-nav-btn {
      position: relative;
      display: flex; align-items: center; gap: 9px;
      width: 100%; padding: 7px 9px; border-radius: 7px;
      border: none !important; background: transparent !important;
      color: var(--ink-soft) !important; font-size: 12.5px; font-weight: 500;
      cursor: pointer; text-align: left;
      transition: background 0.12s, color 0.12s;
      font-family: inherit; white-space: nowrap;
    }
    .orgp-nav-btn > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .orgp-nav-btn:hover {
      background: rgba(128,128,128,0.07) !important;
      color: var(--text) !important;
    }
    .orgp-nav-btn.active {
      background: var(--primary-pill) !important;
      color: var(--primary-dark) !important;
      font-weight: 700 !important;
    }
    .orgp-nav-btn.active::before {
      content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
      width: 2.5px; background: var(--primary); border-radius: 2px;
    }
    .orgp-nav-btn.active svg { stroke: var(--primary); }
    .orgp-nav-btn-badge {
      font-size: 9.5px; font-weight: 700;
      padding: 1px 5px; border-radius: 4px;
      background: var(--primary); color: #fff;
      min-width: 14px; text-align: center; line-height: 1.4;
      margin-left: auto; flex-shrink: 0;
    }
    .orgp-nav-btn-badge.amber { background: var(--amber); color: #fff; }
    .orgp-nav-spacer { flex: 1; min-height: 6px; }
    .orgp-nav-footer {
      border-top: 1px solid var(--border);
      padding: 10px 9px 0; margin-top: 6px;
      display: flex; align-items: center; gap: 9px;
      flex-shrink: 0;
    }
    .orgp-nav-footer-avatar {
      width: 26px; height: 26px; border-radius: 999px;
      background: linear-gradient(135deg,#8B5CF6,#3B82F6);
      color: #fff; display: grid; place-items: center;
      font-size: 10px; font-weight: 700; flex-shrink: 0;
    }
    .orgp-nav-footer-info { flex: 1; min-width: 0; line-height: 1.2; }
    .orgp-nav-footer-navn {
      font-size: 11.5px; font-weight: 600; color: var(--text);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .orgp-nav-footer-rolle {
      font-size: 10px; color: var(--text-muted);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .orgp-nav-footer-logout {
      background: transparent; border: none; color: var(--text-muted);
      padding: 4px; border-radius: 6px; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .orgp-nav-footer-logout:hover { background: var(--bg2); color: var(--text); }

    .orgp-content {
      flex: 1; min-width: 0; overflow-y: auto;
      padding: 20px 28px;
      /* Cream-paletten settes på #org-page (se «ORG-FLATER» nederst i fila),
         så .orgp-content arver --bg derfra. */
      background: var(--bg);
    }
    .orgp-hjelp {
      font-size: 12px; color: var(--text-muted);
      margin-bottom: 16px; min-height: 0;
    }
    .orgp-hjelp:empty { display: none; }

    /* Eventer-dashboard (A+B) */
    .ev-dash-header {
      display: flex; align-items: flex-end; justify-content: space-between;
      gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
    }
    .ev-dash-kicker {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px; color: var(--text-muted);
      letter-spacing: 0.12em; text-transform: uppercase;
      margin-bottom: 6px;
    }
    .ev-dash-tittel {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 38px; font-weight: 400; line-height: 1;
      margin: 0; color: var(--text); letter-spacing: 0.01em;
    }
    .ev-dash-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    .ev-dash-segm {
      display: inline-flex; background: var(--surface);
      border: 1px solid var(--border); border-radius: 8px; padding: 3px;
    }
    .ev-dash-segm button {
      background: transparent; color: var(--ink-soft);
      border: none !important; padding: 6px 12px; border-radius: 6px;
      font-size: 11.5px; font-weight: 600; cursor: pointer;
      font-family: inherit;
    }
    .ev-dash-segm button.aktiv { background: var(--text); color: #fff; }
    .ev-dash-nytt {
      background: var(--primary); color: #fff;
      border: none; border-radius: 8px;
      padding: 9px 16px; font-size: 12.5px; font-weight: 700;
      display: inline-flex; align-items: center; gap: 8px;
      cursor: pointer; box-shadow: 0 2px 0 var(--primary-dark);
      font-family: inherit;
    }
    .ev-dash-nytt:hover { background: var(--primary-dark); }

    /* Sekundær «Nytt prosjekt»-knapp — outline-variant ved siden av «Nytt event» */
    .ev-dash-nytt-sek {
      background: var(--surface); color: var(--text);
      border: 1.5px solid var(--border);
      box-shadow: none;
    }
    .ev-dash-nytt-sek:hover { background: var(--bg); border-color: var(--primary); color: var(--primary); }

    /* Seksjonstittel som skiller Eventer fra Prosjekter i org-modalen */
    .ev-seksjon-tittel {
      font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--text-muted);
      margin: 22px 2px 12px;
    }
    .ev-seksjon-tittel:first-of-type { margin-top: 4px; }

    .ev-stat-strip {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 12px; margin-bottom: 22px;
    }
    .ev-stat-kort {
      border: 1px solid var(--border); border-radius: 12px;
      padding: 14px 16px; position: relative; overflow: hidden;
      background: var(--surface);
    }
    .ev-stat-kort.tone-red { background: var(--text); }
    .ev-stat-kort.tone-amber { background: rgba(251,191,36,0.10); }
    .ev-stat-label {
      font-size: 10px; font-weight: 700; color: var(--text-muted);
      letter-spacing: 0.1em; text-transform: uppercase;
      display: flex; align-items: center; gap: 6px;
    }
    .ev-stat-kort.tone-red .ev-stat-label { color: rgba(255,255,255,0.55); }
    .ev-stat-kort.tone-amber .ev-stat-label { color: var(--amber-text); }
    .ev-stat-pulse {
      width: 6px; height: 6px; border-radius: 999px;
      background: var(--primary);
      box-shadow: 0 0 0 3px rgba(247,27,0,0.25);
      animation: ev-pulse 1.6s ease-in-out infinite;
    }
    @keyframes ev-pulse {
      0%, 100% { box-shadow: 0 0 0 3px rgba(247,27,0,0.25); }
      50% { box-shadow: 0 0 0 5px rgba(247,27,0,0.08); }
    }
    .ev-stat-verdi {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 38px; line-height: 1; margin-top: 8px;
      color: var(--text); letter-spacing: 0.01em;
    }
    .ev-stat-kort.tone-red .ev-stat-verdi { color: #fff; }
    .ev-stat-delta { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
    .ev-stat-kort.tone-red .ev-stat-delta { color: rgba(255,255,255,0.55); }
    .ev-stat-kort.tone-amber .ev-stat-delta { color: var(--amber-text); }

    /* Klikkbar variant — brukes f.eks. for "Personer"-KPI på landingen */
    button.ev-stat-kort, .ev-stat-knapp {
      display: block; width: 100%; text-align: left;
      font-family: inherit; cursor: pointer;
      transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s;
    }
    button.ev-stat-kort:hover, .ev-stat-knapp:hover {
      transform: translateY(-1px);
      border-color: var(--line-soft);
      box-shadow: 0 4px 14px rgba(29,29,29,0.07);
    }
    .ev-stat-knapp .ev-stat-label { gap: 6px; }
    .ev-stat-knapp .ev-stat-pil { color: var(--text-muted); transition: transform 0.15s, color 0.15s; }
    .ev-stat-knapp:hover .ev-stat-pil { color: var(--primary); transform: translateX(2px); }

    .ev-kort-grid {
      display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
    }
    @media (max-width: 1100px) {
      .ev-kort-grid { grid-template-columns: 1fr; }
      .ev-stat-strip { grid-template-columns: repeat(2, 1fr); }
    }
    .ev-kort {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 12px; padding: 16px 18px;
      position: relative; overflow: hidden; cursor: pointer;
      transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
    }
    .ev-kort:hover {
      border-color: var(--line-soft);
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(29,29,29,0.06);
    }
    .ev-kort-rail {
      position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
      background: var(--primary);
    }
    .ev-kort-topp {
      display: flex; align-items: flex-start; gap: 12px;
    }
    .ev-kort-tittelblokk { flex: 1; min-width: 0; }
    .ev-kort-tittelrad {
      display: flex; align-items: center; gap: 8px; margin-bottom: 2px;
      flex-wrap: wrap;
    }
    .ev-kort-navn {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 24px; font-weight: 400; line-height: 1; margin: 0;
      color: var(--text); letter-spacing: 0.02em; text-transform: uppercase;
    }
    .ev-kort-pille-live {
      font-size: 10px; font-weight: 700;
      padding: 2px 7px; border-radius: 999px;
      background: var(--primary); color: #fff;
      display: inline-flex; align-items: center; gap: 4px;
      letter-spacing: 0.06em;
    }
    .ev-kort-pille-live::before {
      content: ''; width: 5px; height: 5px; border-radius: 999px;
      background: #fff;
      animation: ev-pulse-dot 1.4s ease-in-out infinite;
    }
    @keyframes ev-pulse-dot {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.3; }
    }
    .ev-kort-pille-arkiv {
      font-size: 10px; font-weight: 700;
      padding: 2px 7px; border-radius: 999px;
      background: var(--border); color: var(--text-muted);
      letter-spacing: 0.06em;
    }
    .ev-kort-id {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10.5px; color: var(--text-muted);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .ev-kort-mer {
      width: 32px; height: 32px; border-radius: 8px;
      border: 1px solid var(--line-soft); background: var(--surface);
      color: var(--text); cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: background 0.12s, border-color 0.12s;
    }
    .ev-kort-mer:hover,
    .ev-kort-mer.aapen {
      background: var(--bg2); border-color: var(--text);
    }
    /* Tre prikker tegnet med CSS — alltid synlig, uansett SVG-cache */
    .ev-kort-mer-prikker {
      position: relative; display: inline-block;
      width: 4px; height: 4px; border-radius: 50%;
      background: var(--text);
    }
    .ev-kort-mer-prikker::before,
    .ev-kort-mer-prikker::after {
      content: ''; position: absolute; top: 0;
      width: 4px; height: 4px; border-radius: 50%;
      background: var(--text);
    }
    .ev-kort-mer-prikker::before { left: -7px; }
    .ev-kort-mer-prikker::after  { left: 7px; }

    /* Popover-meny for event-kort */
    .ev-kort-pop {
      position: fixed; z-index: 9999;
      min-width: 180px;
      background: var(--surface); border: 1px solid var(--line-soft);
      border-radius: 10px; padding: 6px;
      box-shadow: 0 8px 28px rgba(29,29,29,0.14);
      display: flex; flex-direction: column; gap: 2px;
      font-size: 13px;
    }
    .ev-kort-pop button {
      background: transparent; border: none;
      padding: 8px 10px; border-radius: 6px;
      text-align: left; cursor: pointer; color: var(--text);
      display: flex; align-items: center; gap: 10px;
      font-size: 13px; font-weight: 500;
      transition: background 0.1s;
    }
    .ev-kort-pop button:hover { background: var(--bg2); }
    .ev-kort-pop button svg { stroke: var(--text-muted); flex-shrink: 0; }
    .ev-kort-pop button.fare { color: #DC2626; }
    .ev-kort-pop button.fare:hover { background: rgba(220,38,38,0.08); }
    .ev-kort-pop button.fare svg { stroke: #DC2626; }
    .ev-kort-pop hr {
      border: none; border-top: 1px solid var(--border); margin: 4px 0;
    }
    .ev-kort-meta {
      display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap;
      font-size: 11.5px; color: var(--ink-soft);
    }
    .ev-kort-meta-item {
      display: inline-flex; align-items: center; gap: 5px;
    }
    .ev-kort-meta-item svg { stroke: var(--text-muted); flex-shrink: 0; }
    .ev-kort-footer {
      display: flex; align-items: center; gap: 10px;
      margin-top: 14px; padding-top: 12px;
      border-top: 1px solid var(--border);
    }
    .ev-kort-prog { flex: 1; min-width: 0; }
    .ev-kort-prog-label {
      display: flex; justify-content: space-between;
      font-size: 10px; color: var(--text-muted); margin-bottom: 4px;
    }
    .ev-kort-prog-label > span:first-child {
      font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    }
    .ev-kort-prog-label > span:last-child { font-family: 'JetBrains Mono', monospace; }
    .ev-kort-prog-bar {
      height: 4px; background: var(--border); border-radius: 999px; overflow: hidden;
    }
    .ev-kort-prog-fill {
      height: 100%; background: var(--primary); border-radius: 999px;
      transition: width 0.3s ease;
    }
    .ev-kort-konflikt {
      font-size: 10.5px; font-weight: 700;
      padding: 3px 8px; border-radius: 6px;
      background: var(--amber-soft); color: var(--amber-text);
      display: inline-flex; align-items: center; gap: 4px;
      flex-shrink: 0;
    }

    .ev-tom-state {
      grid-column: 1 / -1;
      padding: 32px; text-align: center;
      color: var(--text-muted); font-size: 13px;
      border: 1px dashed var(--line-soft); border-radius: 12px;
      background: var(--surface);
    }

    .ev-tips {
      margin-top: 22px; padding: 12px 16px;
      background: rgba(255,255,255,0.5);
      border: 1px dashed var(--line-soft);
      border-radius: 10px;
      display: flex; align-items: center; gap: 12px;
      font-size: 12px; color: var(--ink-soft);
    }
    .ev-tips a { color: var(--primary); font-weight: 600; cursor: pointer; text-decoration: none; }
    .ev-tips a:hover { text-decoration: underline; }
    .ev-tips-lukk {
      background: transparent; border: none; color: var(--text-muted);
      cursor: pointer; font-size: 16px; padding: 4px; line-height: 1;
      margin-left: auto;
    }

    /* Inline opprett/rediger event-skjema */
    .ev-form-panel {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 12px; padding: 16px 18px; margin-bottom: 18px;
    }
    .ev-form-panel.skjult { display: none; }
    .ev-form-tittel {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 18px; letter-spacing: 0.04em;
      margin: 0 0 12px; color: var(--text);
    }
    .ev-form-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    }
    .ev-form-grid label {
      display: block; font-size: 11px; font-weight: 700;
      color: var(--ink-soft); margin-bottom: 4px;
    }
    .ev-form-grid input, .ev-form-grid select {
      width: 100%; padding: 9px 12px; box-sizing: border-box;
      border: 1px solid var(--border); border-radius: 8px;
      background: var(--bg); color: var(--text);
      font-size: 13px; font-family: inherit;
    }
    .ev-form-grid input:focus, .ev-form-grid select:focus {
      outline: none; border-color: var(--primary);
    }
    .ev-form-knapper {
      display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px;
      align-items: center;
    }
    .ev-form-status {
      font-size: 12px; color: var(--text-muted); margin-right: auto;
      min-height: 18px;
    }
    .ev-form-avbryt {
      background: transparent; color: var(--ink-soft);
      border: 1px solid var(--border); border-radius: 8px;
      padding: 8px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer;
      font-family: inherit;
    }
    .ev-form-avbryt:hover { background: var(--bg2); }
    .ev-form-lagre {
      background: var(--primary); color: #fff;
      border: none; border-radius: 8px;
      padding: 8px 18px; font-size: 12.5px; font-weight: 700;
      cursor: pointer; box-shadow: 0 2px 0 var(--primary-dark);
      font-family: inherit;
    }
    .ev-form-lagre:hover { background: var(--primary-dark); }

    @media (max-width: 720px) {
      .orgp-header { padding: 0 12px; gap: 8px; }
      .orgp-org-pille-meta { display: none; }
      .orgp-tittel { display: none; }
      .orgp-header-soek { display: none; }
      .orgp-support-btn span:not(.orgp-badge) { display: none; }
      .ev-stat-strip { grid-template-columns: repeat(2, 1fr); }
      .ev-form-grid { grid-template-columns: 1fr; }
      .ev-dash-tittel { font-size: 28px; }
    }
    @media (max-width: 680px) {
      .orgp-nav { width: 44px; padding: 10px 4px; gap: 4px; }
      .orgp-nav-soek { display: none; }
      .orgp-nav-gruppe-tittel { display: none; }
      .orgp-nav-btn { padding: 9px; justify-content: center; gap: 0; }
      .orgp-nav-btn > span:first-of-type, .orgp-nav-btn-badge { display: none; }
      .orgp-nav-btn.active::before { left: -2px; top: 4px; bottom: 4px; }
      .orgp-nav-footer-info, .orgp-nav-footer-logout { display: none; }
      .orgp-nav-footer { justify-content: center; padding: 10px 4px 0; }
      .orgp-content { padding: 14px 16px; }
    }

    /* ==========================================
       MITT ARBEID — på tvers av events
       ========================================== */
    /* Toggle: Åpne / Fullførte */
    .mitt-arbeid-toggle-rad {
      display: inline-flex;
      background: rgba(128,128,128,0.12);
      border-radius: 999px;
      padding: 3px;
      gap: 2px;
      margin-bottom: 16px;
    }
    .mitt-arbeid-toggle-btn {
      flex: 0 0 auto;
      background: transparent !important;
      border: none !important;
      color: var(--text-muted);
      font-size: 13px;
      font-weight: 600;
      padding: 7px 18px !important;
      border-radius: 999px !important;
      cursor: pointer;
      font-family: inherit;
      min-height: 0 !important;
      transition: background 0.12s, color 0.12s, box-shadow 0.12s;
    }
    .mitt-arbeid-toggle-btn:hover {
      background: rgba(128,128,128,0.08) !important;
      color: var(--text);
    }
    .mitt-arbeid-toggle-btn.aktiv {
      background: var(--bg-panel, var(--surface)) !important;
      color: var(--primary);
      box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    }

    .mitt-arbeid-header {
      padding: 8px 0 24px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 24px;
    }
    .mitt-arbeid-tittel {
      font-size: 22px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 6px;
    }
    .mitt-arbeid-summary {
      font-size: 13px;
      color: var(--text-muted);
      margin-bottom: 14px;
      line-height: 1.5;
    }
    .mitt-arbeid-summary strong { color: var(--text); font-weight: 700; }
    .mitt-arbeid-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .mitt-arbeid-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 11px;
      background: rgba(128,128,128,0.08);
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: 12px;
      color: var(--text-muted);
      font-weight: 500;
    }
    .mitt-arbeid-chip-tall {
      font-size: 13px;
      font-weight: 800;
      color: var(--text);
    }
    .mitt-arbeid-chip[data-type="oppgave"] .mitt-arbeid-chip-tall  { color: #1A73E8; }
    .mitt-arbeid-chip[data-type="hendelse"] .mitt-arbeid-chip-tall { color: #34A853; }
    .mitt-arbeid-chip[data-type="under"] .mitt-arbeid-chip-tall    { color: #B06000; }
    .mitt-arbeid-chip[data-type="ai"] .mitt-arbeid-chip-tall       { color: #6F42C1; }

    /* ── Min side: fokus-stripe (frister) ───────────────────── */
    .mitt-fokus {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 22px;
    }
    .mitt-fokus-kort {
      display: flex; flex-direction: column; gap: 3px;
      padding: 12px 14px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
    }
    .mitt-fokus-tall { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1; }
    .mitt-fokus-lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
    .mitt-fokus-kort.fare { border-color: rgba(217,48,37,0.4); background: rgba(217,48,37,0.06); }
    .mitt-fokus-kort.fare .mitt-fokus-tall { color: #D93025; }
    .mitt-fokus-kort.naa  { border-color: rgba(26,115,232,0.4); background: rgba(26,115,232,0.06); }
    .mitt-fokus-kort.naa .mitt-fokus-tall { color: #1A73E8; }

    /* ── Min side: "Nevnt deg" ──────────────────────────────── */
    .mitt-omtale-liste { display: flex; flex-direction: column; gap: 8px; }
    .mitt-omtale-kort {
      padding: 11px 13px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-left: 3px solid var(--primary);
      border-radius: 8px;
      cursor: pointer;
      transition: border-color 0.12s, box-shadow 0.12s;
    }
    .mitt-omtale-kort:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.05); border-color: rgba(128,128,128,0.35); border-left-color: var(--primary); }
    .mitt-omtale-topp { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
    .mitt-omtale-navn { font-size: 13px; font-weight: 700; color: var(--text); }
    .mitt-omtale-event { font-size: 11px; font-weight: 600; color: var(--text-muted); background: rgba(128,128,128,0.12); padding: 1px 7px; border-radius: 10px; }
    .mitt-omtale-tid { font-size: 11px; color: var(--text-muted); margin-left: auto; }
    .mitt-omtale-tekst { font-size: 13px; color: var(--text-muted); line-height: 1.45; }

    /* ── Kommentartråd med @-omtale (oppgave-modal) ─────────── */
    .komm-laasthint { font-size: 13px; color: var(--text-muted); padding: 8px 0; }
    .komm-seksjon { display: flex; flex-direction: column; gap: 12px; }
    .komm-traad { display: flex; flex-direction: column; gap: 12px; max-height: 340px; overflow-y: auto; padding-right: 2px; }
    .komm-laster, .komm-tom, .komm-feil { font-size: 13px; color: var(--text-muted); padding: 6px 0; }
    .komm-feil { color: #D93025; }
    .komm-rad { display: flex; gap: 10px; }
    .komm-avatar {
      flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
      background: var(--primary); color: #fff; font-size: 11px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
    }
    .komm-boble { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 11px; }
    .komm-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
    .komm-navn { font-size: 12.5px; font-weight: 700; color: var(--text); }
    .komm-tid { font-size: 11px; color: var(--text-muted); }
    .komm-slett { margin-left: auto; border: none; background: none; color: var(--text-muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; opacity: 0.5; }
    .komm-slett:hover { opacity: 1; color: #D93025; }
    .komm-tekst { font-size: 13px; color: var(--text); line-height: 1.45; word-wrap: break-word; }
    .komm-omtale { color: var(--primary); font-weight: 600; }
    .komm-ny { position: relative; }
    .komm-input-wrap { position: relative; }
    .komm-input {
      width: 100%; resize: none; min-height: 40px; max-height: 140px;
      padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 10px;
      font-size: 13px; font-family: inherit; background: var(--bg); color: var(--text); line-height: 1.4;
    }
    .komm-input:focus { outline: none; border-color: var(--primary); }
    .komm-mention-pop {
      position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 30;
      width: min(280px, 100%); max-height: 220px; overflow-y: auto;
      background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.16); padding: 4px;
    }
    .komm-mention-valg {
      display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
      padding: 7px 9px; border: none; background: none; border-radius: 7px; cursor: pointer;
      font-size: 13px; color: var(--text);
    }
    .komm-mention-valg:hover, .komm-mention-valg.hl { background: rgba(var(--primary-rgb, 247,27,0), 0.1); }
    .komm-mention-av {
      flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
      background: var(--primary); color: #fff; font-size: 10px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
    }
    .komm-ny-bunn { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
    .komm-hint { font-size: 11px; color: var(--text-muted); }
    .komm-hint kbd { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; font-size: 10px; }
    .komm-send {
      flex-shrink: 0; padding: 8px 16px; border: none; border-radius: 9px;
      background: linear-gradient(135deg, var(--primary-dark), var(--primary)); color: #fff;
      font-size: 13px; font-weight: 700; cursor: pointer; transition: filter 0.15s;
    }
    .komm-send:hover { filter: brightness(1.06); }
    .komm-send:disabled { opacity: 0.5; cursor: default; }

    /* ── "Mitt ansvar"-overlay (åpnes fra event-headeren) ───── */
    .mittansvar-overlay {
      display: none;
      position: fixed; inset: 0; z-index: 9600;
      background: rgba(0,0,0,0.45);
      align-items: flex-start; justify-content: center;
      padding: 40px 20px; overflow-y: auto;
    }
    .mittansvar-modal {
      width: 100%; max-width: 760px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 16px;
      box-shadow: 0 24px 60px rgba(0,0,0,0.3);
      overflow: hidden;
      animation: mittansvarInn 0.18s ease;
    }
    @keyframes mittansvarInn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    .mittansvar-modal-hdr {
      display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
      padding: 20px 24px 16px;
      border-bottom: 1px solid var(--border);
      position: sticky; top: 0; background: var(--bg); z-index: 1;
    }
    .mittansvar-modal-tittel { font-size: 20px; font-weight: 800; color: var(--text); margin: 0; }
    .mittansvar-modal-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
    .mittansvar-modal-luk {
      flex-shrink: 0; border: none; background: var(--surface); color: var(--text-muted);
      width: 32px; height: 32px; border-radius: 8px; font-size: 20px; line-height: 1; cursor: pointer;
      transition: background 0.12s, color 0.12s;
    }
    .mittansvar-modal-luk:hover { background: rgba(128,128,128,0.18); color: var(--text); }
    .mittansvar-modal-body { padding: 20px 24px 28px; }
    .mitt-arbeid-naa-badge {
      display: inline-block; vertical-align: middle; margin-left: 8px;
      font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
      color: var(--primary); background: rgba(var(--primary-rgb, 247,27,0), 0.12);
      padding: 2px 8px; border-radius: 10px;
    }
    .mitt-arbeid-type-badge {
      display: inline-block; vertical-align: middle; margin-left: 8px;
      font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
      color: #6F42C1; background: rgba(111,66,193,0.12);
      padding: 2px 8px; border-radius: 10px;
    }

    .mitt-arbeid-tom {
      padding: 80px 24px;
      text-align: center;
      color: var(--text-muted);
      font-size: 14px;
    }

    .mitt-arbeid-seksjon {
      margin-bottom: 28px;
    }
    .mitt-arbeid-seksjon-hdr {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 12px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 14px;
    }
    .mitt-arbeid-eventnavn {
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.005em;
    }
    .mitt-arbeid-eventdato {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 2px;
    }
    .mitt-arbeid-aapn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 600;
      color: var(--primary);
      text-decoration: none;
      padding: 5px 10px;
      border-radius: 6px;
      transition: background 0.12s;
      flex-shrink: 0;
    }
    .mitt-arbeid-aapn:hover { background: rgba(var(--primary-rgb, 247,27,0), 0.08); }

    .mitt-arbeid-kort-rad {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 10px;
    }
    .mitt-arbeid-kort {
      display: flex;
      gap: 10px;
      padding: 12px 14px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      transition: border-color 0.12s, box-shadow 0.12s, transform 0.06s;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .mitt-arbeid-kort[data-event-slug=""] { cursor: default; }
    .mitt-arbeid-kort:hover {
      border-color: rgba(128,128,128,0.35);
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    .mitt-arbeid-kort[data-event-slug]:not([data-event-slug=""]):hover {
      border-color: var(--primary);
      box-shadow: 0 4px 14px rgba(247,27,0,0.08);
    }
    .mitt-arbeid-kort-tag {
      flex-shrink: 0;
      width: 3px;
      align-self: stretch;
      border-radius: 2px;
      background: #DADCE0;
    }
    /* Sjekk-sirkel — matcher .mob-opp-check (Google Tasks-stil) */
    .mitt-arbeid-kort-check {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px !important;
      height: 22px !important;
      flex: 0 0 22px;
      align-self: flex-start;
      margin-top: 14px;
      box-sizing: border-box;
      aspect-ratio: 1 / 1;
      border: 2px solid var(--text-muted) !important;
      border-radius: 50% !important;
      background: transparent !important;
      color: #FFFFFF;
      cursor: pointer;
      padding: 0 !important;
      outline: none;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
      min-height: 0 !important;
    }
    .mitt-arbeid-kort-check svg {
      display: block;
      width: 14px;
      height: 14px;
      opacity: 0;
      transition: opacity 0.12s;
    }
    .mitt-arbeid-kort-check:hover {
      background: rgba(128,128,128,0.12) !important;
      border-color: var(--text) !important;
    }
    .mitt-arbeid-kort-check:active {
      background: rgba(128,128,128,0.18) !important;
      border-color: var(--text) !important;
      transform: scale(0.90);
    }
    .mitt-arbeid-kort.fullfort-anim {
      opacity: 0;
      transform: translateX(20px);
      transition: opacity 0.28s, transform 0.28s;
    }
    .mitt-arbeid-kort.fullfort-anim .mitt-arbeid-kort-check {
      background: var(--text-muted) !important;
      border-color: var(--text-muted) !important;
    }
    .mitt-arbeid-kort.fullfort-anim .mitt-arbeid-kort-check svg { opacity: 1; }
    .mitt-arbeid-kort[data-type="oppgave"]  .mitt-arbeid-kort-tag { background: #1A73E8; }
    .mitt-arbeid-kort[data-type="hendelse"] .mitt-arbeid-kort-tag { background: #34A853; }
    .mitt-arbeid-kort[data-type="under"]    .mitt-arbeid-kort-tag { background: #FBBC04; }
    .mitt-arbeid-kort[data-type="ai"]       .mitt-arbeid-kort-tag { background: #6F42C1; }
    .mitt-arbeid-kort-body {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .mitt-arbeid-kort-topp {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .mitt-arbeid-typetag {
      padding: 2px 7px;
      border-radius: 4px;
      font-weight: 800;
      letter-spacing: 0.08em;
      background: rgba(128,128,128,0.12);
      color: var(--text-muted);
    }
    .mitt-arbeid-kort[data-type="oppgave"]  .mitt-arbeid-typetag { background: rgba(26,115,232,0.12); color: #1A73E8; }
    .mitt-arbeid-kort[data-type="hendelse"] .mitt-arbeid-typetag { background: rgba(52,168,83,0.13);  color: var(--st-ok-tekst); }
    .mitt-arbeid-kort[data-type="under"]    .mitt-arbeid-typetag { background: rgba(251,188,4,0.16);  color: #B06000; }
    .mitt-arbeid-kort[data-type="ai"]       .mitt-arbeid-typetag { background: rgba(111,66,193,0.13); color: #6F42C1; }
    .mitt-arbeid-chip[data-type="mote"] .mitt-arbeid-chip-tall    { color: #7C3AED; }
    .mitt-arbeid-kort[data-type="mote"]     .mitt-arbeid-kort-tag { background: #7C3AED; }
    .mitt-arbeid-kort[data-type="mote"]     .mitt-arbeid-typetag  { background: rgba(124,58,237,0.13); color: #6D28D9; }
    .mitt-arbeid-kort[data-type="mote"]     { cursor: pointer; }
    .mitt-arbeid-mote-bekreftet { font-size: 10px; font-weight: 700; color: var(--st-ok-tekst); margin-left: 6px; }
    .mitt-arbeid-prio {
      color: #D93025;
      font-size: 10px;
      font-weight: 700;
    }
    .mitt-arbeid-kort-tittel {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      line-height: 1.35;
      word-wrap: break-word;
      overflow-wrap: anywhere;
    }
    .mitt-arbeid-kort-besk {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.4;
      word-wrap: break-word;
      overflow-wrap: anywhere;
    }
    .mitt-arbeid-kort-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      align-items: center;
      font-size: 11.5px;
      color: var(--text-muted);
      margin-top: 2px;
    }
    .mitt-arbeid-kort-meta .sep { color: rgba(128,128,128,0.5); margin: 0 2px; }
    .mitt-arbeid-forfalt { color: #D93025; font-weight: 600; }

    /* Vis/skjul: kort utover MAX_VIST gjemmes til seksjonen utvides */
    .mitt-arbeid-kort.skjult { display: none; }
    .mitt-arbeid-seksjon.utvidet .mitt-arbeid-kort.skjult { display: flex; }
    .mitt-arbeid-vis-mer {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 10px;
      padding: 6px 12px;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
      cursor: pointer;
      font-family: inherit;
      transition: background 0.12s, color 0.12s, border-color 0.12s;
    }
    .mitt-arbeid-vis-mer:hover {
      background: rgba(128,128,128,0.08);
      color: var(--text);
      border-color: rgba(128,128,128,0.35);
    }
    .mitt-arbeid-vis-mer svg { transition: transform 0.18s ease; }
    .mitt-arbeid-seksjon.utvidet .mitt-arbeid-vis-mer svg { transform: rotate(180deg); }

    /* ==========================================
       EVENT-INNSTILLINGER — SIDEBAR-LAYOUT (estab-)
       ========================================== */
    .estab-layout {
      display: flex;
      gap: 0;
      height: 100%;
    }
    .estab-nav {
      width: 176px;
      flex-shrink: 0;
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 1px;
      padding: 6px 8px;
      background: var(--surface);
      overflow-y: auto;
    }
    .estab-nav-btn {
      display: flex;
      align-items: center;
      gap: 9px;
      width: 100%;
      padding: 9px 11px;
      border-radius: 8px;
      border: none !important;
      background: transparent !important;
      color: var(--text-muted) !important;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      text-align: left;
      font-family: inherit;
      transition: background 0.12s, color 0.12s;
      white-space: nowrap;
    }
    .estab-nav-btn:hover {
      background: rgba(128,128,128,0.1) !important;
      color: var(--text) !important;
    }
    .estab-nav-btn.active {
      background: rgba(247,27,0,0.1) !important;
      color: var(--primary) !important;
      font-weight: 700 !important;
    }
    .estab-nav-btn.active svg { stroke: var(--primary); }
    .estab-content {
      flex: 1;
      min-width: 0;
      padding: 20px 24px;
      overflow-y: auto;
    }
    /* db-innstillinger overrides — replace old tab-bar rules */
    #db-innstillinger .tab-bar { display: none; }
    #db-innstillinger .estab-layout { min-height: 500px; height: auto; }
    #db-innstillinger .estab-nav { background: transparent; border-right-color: var(--border); }
    #db-innstillinger .estab-content { padding: 0 0 0 20px; }
    @media (max-width: 680px) {
      .estab-nav { width: 44px !important; padding: 6px 4px !important; }
      .estab-nav-btn { padding: 9px !important; justify-content: center !important; font-size: 0 !important; }
      .estab-nav-btn svg { flex-shrink: 0; }
      .estab-content { padding: 14px 0 14px 12px !important; }
    }

    /* ==========================================
       SETTINGS MODAL – ADMIN TABLE & ICON BTNS
       ========================================== */
    .settings-modal-header {
      display: flex; align-items: center; justify-content: space-between;
      border-bottom: 1px solid var(--border); padding-bottom: 16px; margin-bottom: 20px;
    }
    .settings-modal-header h2 {
      margin: 0; font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -0.02em;
    }
    .settings-close-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 32px; height: 32px; border-radius: 8px;
      border: none !important; background: transparent !important;
      color: var(--text-muted) !important; cursor: pointer; transition: background 0.15s, color 0.15s;
      font-size: 18px; line-height: 1; padding: 0 !important;
    }
    .settings-close-btn:hover { background: var(--border) !important; color: var(--text) !important; }

    .icon-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 30px; height: 30px; border-radius: 6px;
      border: none !important; cursor: pointer;
      transition: background 0.15s, color 0.15s; padding: 0 !important; flex-shrink: 0;
    }
    .icon-btn-edit  { background: rgba(247,27,0,0.08) !important; color: var(--primary) !important; }
    .icon-btn-edit:hover  { background: rgba(247,27,0,0.18) !important; }
    .icon-btn-delete { background: rgba(var(--st-feil-tint),0.08) !important; color: rgb(var(--st-feil-tint)) !important; }
    .icon-btn-delete:hover { background: rgba(var(--st-feil-tint),0.18) !important; color: #DC2626 !important; }

    .admin-table { width: 100%; border-collapse: collapse; background: var(--bg); font-size: 13px; min-width: 600px; border-radius: 10px; overflow: hidden; }
    .admin-table thead th {
      background: rgba(128,128,128,0.12); color: var(--text-muted);
      font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
      padding: 10px 14px; border-bottom: 2px solid #E5E7EB; text-align: left;
    }
    .admin-table thead th:last-child { text-align: right; width: 80px; }
    .admin-table tbody tr { border-bottom: 1px solid var(--border); transition: background 0.12s; }
    .admin-table tbody tr:last-child { border-bottom: none; }
    .admin-table tbody tr:hover { background: rgba(128,128,128,0.07); }
    .admin-table tbody td { padding: 10px 14px; color: var(--text); }
    .admin-table tbody td:last-child { text-align: right; white-space: nowrap; }

    .admin-form-box {
      background: rgba(128,128,128,0.06); border: 1px solid var(--border); padding: 20px 24px; border-radius: 12px;
      margin-bottom: 20px; border: 1.5px solid var(--border);
    }
    .admin-form-title {
      margin: 0 0 14px; font-size: 13px; font-weight: 700; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.06em;
    }

    .bruker-kort {
      transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
    }
    .bruker-kort:hover {
      box-shadow: 0 6px 18px rgba(0,0,0,0.08);
      transform: translateY(-1px);
    }
    .bruker-kort select:hover,
    .bruker-kort input[type="date"]:hover { filter: brightness(0.98); }

    /* ==========================================
       PERSON POPUP (inni innstillinger)
       ========================================== */
    .person-back-btn {
      display: inline-flex; align-items: center; gap: 6px;
      background: transparent !important; border: none !important; box-shadow: none !important;
      color: var(--text-muted) !important; font-size: 13px; font-weight: 600;
      cursor: pointer; padding: 0 0 16px !important; transition: color 0.15s;
    }
    .person-back-btn:hover { color: var(--text) !important; background: transparent !important; }
    .person-popup-hero {
      display: flex; align-items: center; gap: 16px;
      padding-bottom: 20px; border-bottom: 1.5px solid var(--border); margin-bottom: 20px;
    }
    .person-avatar {
      width: 52px; height: 52px; border-radius: 50%;
      background: linear-gradient(135deg, var(--primary) 0%, #FFD0A2 100%);
      display: flex; align-items: center; justify-content: center;
      font-size: 19px; font-weight: 800; color: white; flex-shrink: 0; letter-spacing: -0.01em;
    }
    .person-popup-name { font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -0.03em; }
    .person-popup-meta { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
    .person-contact-strip { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
    .person-contact-chip {
      display: inline-flex; align-items: center; gap: 7px;
      background: var(--bg); border: 1.5px solid var(--border); border-radius: 8px;
      padding: 7px 13px; font-size: 13px; color: var(--text);
    }
    .person-contact-chip a { color: inherit; text-decoration: none; }
    .person-contact-chip a:hover { text-decoration: underline; }
    .person-events-title {
      font-size: 11px; font-weight: 700; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.07em;
      display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
    }
    .person-count-badge {
      background: var(--primary); color: white; border-radius: 20px;
      padding: 1px 8px; font-size: 11px; font-weight: 700;
    }
    .person-day-label {
      font-size: 11px; font-weight: 700; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.07em; margin: 16px 0 8px;
    }
    .person-event-card {
      display: flex; align-items: stretch; gap: 0;
      border-radius: 8px; margin-bottom: 0; overflow: hidden;
      background: var(--bg); border: 1.5px solid var(--border); transition: border-color 0.15s;
    }
    .person-event-card:hover { border-color: #C8B8AD; }
    .person-event-accent { width: 4px; flex-shrink: 0; }
    .person-event-body { padding: 9px 13px; flex: 1; min-width: 0; }
    .person-event-title { font-size: 13px; font-weight: 600; color: var(--text); }
    .person-event-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
    .person-events-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 4px;
    }
    .person-hero-edit-btn {
      margin-left: auto; flex-shrink: 0;
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(247,27,0,0.08) !important; color: var(--primary) !important;
      border: none !important; border-radius: 8px; padding: 7px 14px;
      font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s;
    }
    .person-hero-edit-btn:hover { background: rgba(247,27,0,0.18) !important; }
    .status-badge-avlyst {
      display: inline-block; font-size: 10px; font-weight: 700;
      background: rgba(var(--st-feil-tint),0.1); color: rgb(var(--st-feil-tint));
      border-radius: 4px; padding: 1px 6px; margin-left: 6px; vertical-align: middle;
    }
    .person-name-link {
      color: var(--primary); cursor: pointer; font-weight: 600;
      border-bottom: 1px dashed rgba(247,27,0,0.35); transition: border-color 0.15s;
    }
    .person-name-link:hover { border-bottom-color: var(--primary); }

    /* ==========================================
       SAMMENDRAGSKOLONNE
       ========================================== */
    .summary-column {
      position: sticky;
      left: 65px;
      z-index: 980;
      width: 280px;
      height: var(--timeline-height, 11520px);
      flex-shrink: 0;
      background: var(--bg2);
      border-right: 1px solid var(--border);
      box-shadow: 4px 0 16px rgba(29,29,29,0.09);
      transition: width 0.25s cubic-bezier(0.4,0,0.2,1);
    }
    .summary-column.collapsed {
      width: 26px;
      cursor: pointer;
      background: color-mix(in srgb, var(--text) 4%, transparent);
      box-shadow: 2px 0 8px rgba(0,0,0,0.07);
      overflow: hidden;
    }
    .summary-column.collapsed:hover { background: color-mix(in srgb, var(--text) 9%, transparent); }
    .summary-header {
      position: sticky;
      top: 0;
      z-index: 981;
      box-sizing: border-box;
      height: calc(var(--area-header-height) + var(--loc-header-height) + 4px);
      background: var(--header-dark, #374151);
      color: white;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      padding: 0 8px 10px 12px;
      font-family: 'Bebas Neue', sans-serif;
      font-weight: 400;
      font-size: 14px;
      letter-spacing: 0.1em;
      white-space: nowrap;
      box-shadow: 0 2px 6px rgba(0,0,0,0.20);
    }
    .summary-toggle-btn {
      background: rgba(255,255,255,0.12) !important;
      border: 1px solid rgba(255,255,255,0.22) !important;
      color: white !important;
      font-size: 11px !important;
      padding: 2px 8px !important;
      border-radius: 6px !important;
      cursor: pointer;
      flex-shrink: 0;
      transition: background 0.15s !important;
      font-family: 'Inter', sans-serif;
    }
    .summary-toggle-btn:hover { background: rgba(255,255,255,0.26) !important; }
    .summary-column.collapsed .summary-header {
      height: 160px !important;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      align-items: center;
      justify-content: flex-end;
      padding: 12px 6px;
      font-size: 11px;
      letter-spacing: 0.14em;
      color: var(--text-muted);
      background: transparent;
      box-shadow: none;
    }
    .summary-column.collapsed .summary-toggle-btn { display: none; }
    .summary-column.collapsed .summary-grid { opacity: 0; pointer-events: none; }
    .summary-grid {
      position: relative;
      height: var(--timeline-height, 11520px);
      transition: opacity 0.2s;
      background-image:
        linear-gradient(to bottom, color-mix(in srgb, var(--text) 22%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--text) 11%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px);
      background-size: 100% var(--hour-height), 100% var(--half-hour-height), 100% var(--quarter-height);
    }
    .summary-event {
      position: absolute;
      border-radius: 7px;
      padding: 4px 7px;
      box-sizing: border-box;
      overflow: hidden;
      cursor: pointer;
      color: white;
      font-size: 11px;
      line-height: 1.2;
      box-shadow: 0 1px 4px rgba(15,23,42,0.2), inset 0 1px 0 rgba(255,255,255,0.14);
      border: none;
      transition: filter 0.1s, box-shadow 0.12s;
    }
    .summary-event:hover { filter: brightness(1.1); box-shadow: 0 4px 14px rgba(15,23,42,0.3), inset 0 1px 0 rgba(255,255,255,0.18); }
    .summary-event-title { font-weight: 700; font-size: 12px; letter-spacing: -0.01em; }
    .summary-event-meta { font-size: 10px; opacity: 0.85; margin-top: 1px; }
    .summary-resize-handle {
      position: absolute;
      top: 0; right: 0;
      width: 5px;
      height: 100%;
      cursor: col-resize;
      z-index: 990;
      background: transparent;
      transition: background 0.15s;
    }
    .summary-resize-handle:hover,
    .summary-resize-handle.dragging { background: rgba(0,0,0,0.25); }

    /* ==========================================
       COLLAPSED LOCATION COLUMNS
       ========================================== */
    .location-column.collapsed {
      min-width: 26px !important;
      max-width: 26px !important;
      flex: 0 0 26px !important;
      overflow: clip;
      cursor: pointer;
      background: color-mix(in srgb, var(--text) 5%, transparent) !important;
      transition: background 0.15s;
    }
    .location-column.collapsed:hover {
      background: color-mix(in srgb, var(--text) 11%, transparent) !important;
    }
    .location-column.collapsed .location-header {
      position: sticky !important;
      top: var(--area-header-height, 48px);
      height: 120px !important;
      line-height: 1 !important;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      font-size: 9px;
      padding: 10px 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
      background: transparent;
      backdrop-filter: none; -webkit-backdrop-filter: none;
      color: var(--text-muted);
      border-bottom: none;
      transition: color 0.15s;
      z-index: 701;
      display: block;
    }
    .location-column.collapsed:hover .location-header {
      color: var(--text);
    }
    .location-column.collapsed .grid-container {
      pointer-events: none;
      opacity: 0;
    }
    .ny-hendelse-ghost {
      position: absolute; left: 3px; right: 3px;
      background: rgba(247,27,0,0.15);
      border: 2px solid var(--primary);
      border-radius: 6px;
      pointer-events: none;
      z-index: 500;
      box-sizing: border-box;
      display: flex; align-items: flex-start; justify-content: center;
      padding: 5px 6px;
      font-size: 11px; font-weight: 700; color: var(--primary);
      overflow: hidden; white-space: nowrap;
      min-height: 4px;
      transition: none;
    }

    /* ==========================================
       PROGRAM FLYT MODAL
       ========================================== */
    #pfModal {
      display: none; position: fixed; z-index: 3100; left: 0; top: 0; width: 100%; height: 100%;
      background: rgba(15,23,42,0.6); backdrop-filter: blur(6px);
    }
    #pfModal .modal-content {
      background: var(--surface); margin: 3% auto; padding: 28px 32px;
      border-radius: 16px; width: 960px; max-width: 96%; max-height: 90vh; overflow-y: auto;
      box-shadow: 0 30px 70px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.04);
    }
    .pf-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
    .pf-tittel { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 0.06em; color: var(--text); flex: 1; }
    .pf-lukk { background: none; border: none; font-size: 20px; color: var(--text-muted); cursor: pointer; padding: 4px 8px; line-height: 1; }
    .pf-lukk:hover { color: var(--text); background: none; }
    .pf-dag-select { padding: 5px 10px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--bg); font-size: 13px; font-weight: 600; color: var(--text); font-family: inherit; cursor: pointer; }
    .pf-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 24px; }
    .pf-stat {
      background: var(--bg); border-radius: 12px; padding: 14px 16px;
      border: 1.5px solid var(--border); display: flex; flex-direction: column; gap: 4px;
    }
    .pf-stat-tall { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
    .pf-stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }
    .pf-stat.grønn .pf-stat-tall { color: var(--st-ok-tekst); }
    .pf-stat.oransje .pf-stat-tall { color: #D4500A; }
    .pf-stat.rød .pf-stat-tall { color: var(--primary); }
    .pf-stat.grå .pf-stat-tall { color: var(--text-muted); }
    .pf-snitt { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; padding: 10px 14px; background: var(--bg); border-radius: 8px; border: 1.5px solid var(--border); }
    .pf-dag-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin: 20px 0 8px; }
    .pf-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .pf-table th { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); padding: 6px 10px; text-align: left; border-bottom: 1.5px solid var(--border); }
    .pf-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
    .pf-table tr:last-child td { border-bottom: none; }
    .pf-table tr:hover td { background: var(--bg); }
    .pf-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
    .pf-forsinkelse { font-weight: 700; font-size: 13px; }
    .pf-forsinkelse.grønn { color: var(--st-ok-tekst); }
    .pf-forsinkelse.oransje { color: #D4500A; }
    .pf-forsinkelse.rød { color: var(--primary); }
    .pf-forsinkelse.grå { color: var(--text-muted); }
    .pf-status-chip {
      display: inline-flex; align-items: center; border-radius: 6px; padding: 2px 8px;
      font-size: 11px; font-weight: 700;
    }
    .pf-ingen-logg { text-align: center; padding: 40px 0; color: var(--text-muted); }
    .pf-setup-btn { margin-top: 12px; background: var(--primary) !important; color: white !important; border: none !important; padding: 10px 20px; border-radius: 8px; font-weight: 700; cursor: pointer; }
    .pf-sammendrag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px; }
    .pf-sammendrag-boks { background: var(--bg); border: 1.5px solid var(--border); border-radius: 12px; padding: 16px; }
    .pf-sammendrag-tittel { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 10px; }
    .pf-s-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .pf-s-table th { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); padding: 4px 6px; text-align: left; border-bottom: 1px solid var(--border); }
    .pf-s-table th:not(:first-child) { text-align: right; }
    .pf-s-table td { padding: 6px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
    .pf-s-table tr:last-child td { border-bottom: none; }
    .pf-s-table td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
    .pf-s-navn { font-weight: 600; color: var(--text); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pf-s-snitt { font-weight: 700; }
    .pf-s-snitt.grønn { color: var(--st-ok-tekst); }
    .pf-s-snitt.oransje { color: #D4500A; }
    .pf-s-snitt.rød { color: var(--primary); }
    .pf-s-snitt.grå { color: var(--text-muted); }
    .pf-mini-bar-wrap { width: 50px; height: 5px; background: var(--border); border-radius: 3px; display: inline-block; vertical-align: middle; margin-left: 4px; }
    .pf-mini-bar { height: 100%; border-radius: 3px; }
    .pf-detaljer-tittel { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 0 0 10px; }

    /* ==========================================
       SKRIV UT MODAL
       ========================================== */
    #skrivUtModal {
      display: none; position: fixed; z-index: 3200; left: 0; top: 0; width: 100%; height: 100%;
      background: rgba(15,23,42,0.6); backdrop-filter: blur(6px);
    }
    #skrivUtModal .modal-content {
      background: var(--surface); margin: 8% auto; padding: 28px 32px;
      border-radius: 16px; width: 520px; max-width: 96%;
      box-shadow: 0 30px 70px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.04);
    }
    .su-header { display: flex; align-items: center; margin-bottom: 22px; }
    .su-tittel { font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: 0.06em; color: var(--text); flex: 1; }
    .su-lukk { background: none; border: none; font-size: 20px; color: var(--text-muted); cursor: pointer; padding: 4px 8px; line-height: 1; }
    .su-lukk:hover { color: var(--text); background: none; }
    .su-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
    .su-filter-group { display: flex; flex-direction: column; gap: 5px; }
    .su-filter-group label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }
    .su-filter-group select { padding: 7px 10px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--bg); font-size: 13px; font-weight: 500; color: var(--text); font-family: inherit; cursor: pointer; }
    .su-filter-group select:focus { outline: none; border-color: var(--primary); }
    .su-divider { border: none; border-top: 1px solid var(--border); margin: 0 0 18px; }
    .su-layout-row { display: flex; gap: 8px; margin-bottom: 16px; }
    .su-layout-btn { flex: 1; padding: 8px 6px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--bg); font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text); transition: all 0.15s; text-align: center; }
    .su-layout-btn.aktiv { border-color: var(--primary); background: rgba(247,27,0,0.06); color: var(--primary); }
    .su-actions { display: flex; gap: 8px; justify-content: flex-end; }
    .su-preview-count { font-size: 12px; color: var(--text-muted); align-self: center; margin-right: auto; }

    /* ==========================================
       AI MASSE-OPPRETTELSE MODAL
       ========================================== */
    #aiMasseModal {
      display: none; position: fixed; z-index: 3200; left: 0; top: 0; width: 100%; height: 100%;
      background: rgba(15,23,42,0.6); backdrop-filter: blur(6px);
    }
    #aiMasseModal .modal-content {
      background: var(--surface); margin: 5% auto; padding: 28px 32px;
      border-radius: 16px; width: 640px; max-width: 96%; max-height: 88vh; overflow-y: auto;
      box-shadow: 0 30px 70px rgba(0,0,0,0.22);
    }
    .aim-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
    .aim-tittel { font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: 0.06em; color: var(--text); flex: 1; }
    .aim-lukk { background: none; border: none; font-size: 20px; color: var(--text-muted); cursor: pointer; padding: 4px 8px; }
    .aim-lukk:hover { color: var(--text); background: none; }
    .aim-ingress { font-size: 13px; color: var(--text-muted); margin: 0 0 16px; line-height: 1.5; }
    #aiMasse-tekst {
      width: 100%; box-sizing: border-box; padding: 12px; border: 1.5px solid var(--border);
      border-radius: 10px; font-size: 13px; font-family: inherit; resize: vertical;
      background: var(--bg); color: var(--text); line-height: 1.5;
    }
    #aiMasse-tekst:focus { outline: none; border-color: var(--primary); }
    .aim-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
    .aim-kort-liste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
    .aim-kort {
      background: var(--surface); border: 1.5px solid var(--border); border-radius: 10px; padding: 12px 14px;
      transition: border-color 0.15s;
    }
    .aim-kort:has(input:checked) { border-color: var(--primary); background: rgba(247,27,0,0.04); }
    .aim-kort-checkbox-row { display: flex; align-items: center; gap: 10px; }
    .aim-kort-checkbox-row input[type="checkbox"] { accent-color: var(--primary); width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
    .aim-kort-tittel { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
    .aim-kort-meta { font-size: 12px; color: var(--text-muted); display: flex; gap: 10px; flex-wrap: wrap; }
    .aim-kort-meta span::before { content: '· '; }
    .aim-kort-meta span:first-child::before { content: ''; }
    .aim-loading { text-align: center; padding: 32px 0; color: var(--text-muted); font-size: 14px; }
    .aim-tabs { display: flex; gap: 0; margin-bottom: 16px; border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden; }
    .aim-tab {
      flex: 1; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
      background: var(--bg); color: var(--text-muted); border: none; border-radius: 0;
      transition: all 0.15s; font-family: inherit;
    }
    .aim-tab + .aim-tab { border-left: 1.5px solid var(--border); }
    .aim-tab.aktiv { background: var(--surface); color: var(--text); }
    .aim-dropzone {
      border: 2px dashed var(--border); border-radius: 10px; padding: 32px 20px;
      text-align: center; cursor: pointer; transition: all 0.2s; background: var(--bg);
    }
    .aim-dropzone:hover, .aim-dropzone.dragover { border-color: var(--primary); background: rgba(247,27,0,0.04); }
    .aim-dropzone-ikon { font-size: 32px; margin-bottom: 8px; }
    .aim-dropzone-tekst { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
    .aim-dropzone-sub { font-size: 12px; color: var(--text-muted); }
    .aim-fil-valgt { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(247,27,0,0.06); border: 1.5px solid var(--primary); border-radius: 10px; margin-top: 10px; }
    .aim-fil-navn { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .aim-fil-fjern { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; padding: 0 4px; flex-shrink: 0; }
    .aim-formater { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; justify-content: center; }
    .aim-format-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; background: var(--bg); border: 1px solid var(--border); color: var(--text-muted); letter-spacing: 0.04em; }

    /* Tale-inndata */
    .aim-tale-rad {
      display: flex; align-items: center; gap: 12px; margin: 10px 0 4px;
    }
    .aim-tale-btn {
      display: flex; align-items: center; gap: 8px;
      padding: 9px 18px; border-radius: 10px;
      background: var(--bg); border: 1.5px solid var(--border);
      color: var(--text-muted); font-size: 13px; font-weight: 600;
      cursor: pointer; font-family: inherit;
      transition: all 0.18s; flex-shrink: 0;
    }
    .aim-tale-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(247,27,0,0.04); }
    .aim-tale-btn.tale-aktiv {
      background: rgba(247,27,0,0.08);
      border-color: var(--primary);
      color: var(--primary);
      animation: tale-puls 1.4s ease-in-out infinite;
    }
    .aim-tale-btn.tale-aktiv svg { animation: tale-mic-puls 1.4s ease-in-out infinite; }
    .aim-tale-status {
      font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 6px;
    }
    .aim-tale-status.lytter { color: var(--primary); }
    .aim-tale-status.lytter::before {
      content: '';
      display: inline-block; width: 8px; height: 8px; border-radius: 50%;
      background: var(--primary);
      animation: tale-dot-puls 1s ease-in-out infinite;
    }
    .aim-tale-status.feil { color: rgb(var(--st-feil-tint)); }
    @keyframes tale-puls {
      0%, 100% { box-shadow: 0 0 0 0 rgba(247,27,0,0.25); }
      50%       { box-shadow: 0 0 0 6px rgba(247,27,0,0); }
    }
    @keyframes tale-mic-puls {
      0%, 100% { opacity: 1; }
      50%       { opacity: 0.6; }
    }
    @keyframes tale-dot-puls {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%       { opacity: 0.5; transform: scale(0.75); }
    }
    .aim-kort-tittel-input {
      width: 100%; box-sizing: border-box; font-size: 13px; font-weight: 700; color: var(--text);
      border: none; border-bottom: 1.5px solid transparent; background: transparent; padding: 0 0 2px;
      font-family: inherit; outline: none; transition: border-color 0.15s;
    }
    .aim-kort-tittel-input:focus { border-bottom-color: var(--primary); }
    .aim-edit-row { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
    .aim-input-sm {
      padding: 3px 7px; border: 1.5px solid var(--border); border-radius: 6px;
      font-size: 11px; font-family: inherit; background: var(--surface); color: var(--text);
      outline: none; transition: border-color 0.15s;
    }
    .aim-input-sm:focus { border-color: var(--primary); }
    .aim-input-sm.dato { width: 155px; }
    .aim-select-sm {
      padding: 3px 6px; border: 1.5px solid var(--border); border-radius: 6px;
      font-size: 11px; font-family: inherit; background: var(--surface); color: var(--text);
      outline: none; cursor: pointer; transition: border-color 0.15s;
    }
    .aim-select-sm:focus { border-color: var(--primary); }

    /* ==========================================
       AI-ASSISTENT SIDEPANEL (push-layout)
       Tar plass på skjermen — dytter innholdet i stedet for å dekke det.
       ========================================== */
    :root { --ai-w: 440px; }

    #aiPanel {
      /* Lås panelets palett til det varme event-temaet uansett kontekst, slik at
         det ser likt ut på org-nivå (body.light-mode) og på event-dashboard. */
      --bg: #FFF2E9;
      --surface: #FFFFFF;
      --text: #1D1D1D;
      --text-muted: #7A6E68;
      --border: #E5D8CF;
      --primary: #F71B00;
      --primary-dark: #CC1500;
      position: fixed; top: 0; right: 0;
      width: var(--ai-w);
      height: 100vh; height: 100dvh; /* dvh = synlig viewport (mobil-verktøylinje teller ikke med) */
      z-index: 8000;
      background: var(--surface);
      border-left: 1px solid var(--border);
      box-shadow: -16px 0 48px rgba(0,0,0,0.16);
      display: flex; flex-direction: column;
      box-sizing: border-box;
      transform: translateX(100%);
      transition: transform 0.30s cubic-bezier(0.32,0.72,0,1);
    }
    body.med-ai-panel #aiPanel { transform: translateX(0); }

    /* Push: gjør plass til panelet. In-flow innhold (tidslinje) krymper via
       padding-right; faste flater (header/overlays) skyves via right/width. */
    body { transition: padding-right 0.30s cubic-bezier(0.32,0.72,0,1); }
    body.med-ai-panel { padding-right: var(--ai-w); }
    .header-panel {
      transition: transform 0.28s cubic-bezier(0.4,0,0.2,1),
                  box-shadow 0.28s ease,
                  right 0.30s cubic-bezier(0.32,0.72,0,1);
    }
    body.med-ai-panel .header-panel { right: var(--ai-w); }
    #org-page, #kp-dashboard { transition: width 0.30s cubic-bezier(0.32,0.72,0,1); }
    body.med-ai-panel #org-page,
    body.med-ai-panel #kp-dashboard:not(.kpd-embed) { width: calc(100% - var(--ai-w)) !important; }
    #eventModal, #infoModal { transition: right 0.30s cubic-bezier(0.32,0.72,0,1); }
    body.med-ai-panel #eventModal,
    body.med-ai-panel #infoModal { right: var(--ai-w); }

    /* ── Panel-innhold ── */
    .aip-header {
      display: flex; align-items: center; gap: 8px;
      padding: 16px 18px 14px; flex-shrink: 0;
      border-bottom: 1px solid var(--border);
    }
    .aip-tittel {
      font-family: 'Bebas Neue', sans-serif; font-size: 22px;
      letter-spacing: 0.05em; color: var(--text); flex: 1;
      display: flex; align-items: center; gap: 8px;
    }
    .aip-tittel .aip-dot { width: 8px; height: 8px; border-radius: 50%;
      background: var(--primary); box-shadow: 0 0 0 3px rgba(247,27,0,0.18); }
    .aip-ikon-btn {
      background: none; border: 1px solid transparent; border-radius: 8px;
      color: var(--text-muted); cursor: pointer; padding: 5px 8px; font-size: 16px;
      line-height: 1; transition: all 0.15s;
    }
    .aip-ikon-btn:hover { color: var(--text); background: var(--bg); border-color: var(--border); }

    /* Proaktiv helsesjekk-banner */
    .aip-helse {
      flex-shrink: 0; padding: 10px 16px;
      border-bottom: 1px solid var(--border); background: rgba(247,27,0,0.045);
    }
    .aip-helse-tittel {
      font-size: 10px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 6px;
    }
    .aip-helse-pills { display: flex; flex-wrap: wrap; gap: 6px; }
    .aip-helse-pill {
      font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 20px;
      background: var(--surface); border: 1px solid rgba(247,27,0,0.35);
      color: var(--primary); cursor: pointer; transition: background 0.15s;
    }
    .aip-helse-pill:hover { background: rgba(247,27,0,0.08); }

    /* «AI ikke konfigurert»-varsel — vises før brukeren prøver å sende */
    .aip-konfig {
      flex-shrink: 0; padding: 10px 16px;
      border-bottom: 1px solid var(--border);
      background: var(--amber-soft, rgba(251, 191, 36, 0.14));
    }
    .aip-konfig-tittel {
      font-size: 10px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.06em; color: var(--amber-text, var(--st-obs-tekst)); margin-bottom: 4px;
    }
    .aip-konfig-tekst { font-size: 12px; color: var(--text); line-height: 1.45; }
    .aip-konfig-btn {
      margin-top: 8px; font-size: 11.5px; font-weight: 600;
      padding: 5px 11px; border-radius: 20px;
      background: var(--surface); border: 1px solid var(--border);
      color: var(--text); cursor: pointer; transition: border-color 0.15s, color 0.15s;
    }
    .aip-konfig-btn:hover { border-color: var(--primary); color: var(--primary); }

    .aip-chat {
      flex: 1 1 auto; overflow-y: auto; min-height: 0;
      -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
      display: flex; flex-direction: column; gap: 12px;
      padding: 16px 18px;
    }
    /* Viktig: barna må ikke krympe — ellers klemmer flex-kolonnen sammen
       meldinger/kort i stedet for at chatten scroller. */
    .aip-chat > * { flex-shrink: 0; }
    .aip-tom {
      margin: auto; text-align: center; color: var(--text-muted);
      font-size: 13px; line-height: 1.6; padding: 0 12px; max-width: 280px;
    }
    .aip-tom svg { opacity: 0.4; margin-bottom: 10px; }

    .aip-msg {
      font-size: 13px; line-height: 1.55; max-width: 88%;
      padding: 9px 13px; border-radius: 14px;
    }
    .aip-msg-bruker {
      align-self: flex-end; background: var(--primary); color: #fff;
      border-bottom-right-radius: 4px;
    }
    .aip-msg-ai {
      align-self: flex-start; background: var(--bg); color: var(--text);
      border: 1px solid var(--border); border-bottom-left-radius: 4px;
      white-space: pre-wrap;
    }
    .aip-msg-feil { align-self: flex-start; color: var(--primary);
      border-color: rgba(247,27,0,0.3); background: rgba(247,27,0,0.05); }

    /* ── Markdown-formatert AI-svar ── */
    .aip-msg-ai.aip-md { white-space: normal; align-self: stretch; max-width: 100%; }
    .aip-md > :first-child { margin-top: 0; }
    .aip-md > :last-child { margin-bottom: 0; }
    .aip-md p { margin: 0 0 8px; }
    .aip-md .aip-h { font-weight: 700; line-height: 1.3; margin: 12px 0 6px; color: var(--text); }
    .aip-md .aip-h1 { font-size: 16px; }
    .aip-md .aip-h2 { font-size: 14.5px; }
    .aip-md .aip-h3, .aip-md .aip-h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
    .aip-md .aip-ul, .aip-md .aip-ol { margin: 4px 0 8px; padding-left: 20px; }
    .aip-md .aip-ul li, .aip-md .aip-ol li { margin: 2px 0; }
    .aip-md code {
      font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: 12px;
      background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 5px;
    }
    .aip-md a { color: var(--primary); text-decoration: underline; }
    .aip-md strong { font-weight: 700; }
    .aip-tabell-wrap { overflow-x: auto; margin: 6px 0 10px; border: 1px solid var(--border); border-radius: 8px; }
    .aip-tabell { border-collapse: collapse; width: 100%; font-size: 12px; }
    .aip-tabell th, .aip-tabell td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
    .aip-tabell th { background: var(--surface); font-weight: 700; color: var(--text); position: sticky; top: 0; }
    .aip-tabell tr:last-child td { border-bottom: none; }
    .aip-tabell tbody tr:nth-child(even) td { background: rgba(0,0,0,0.02); }

    .aip-typing { display: inline-flex; gap: 4px; padding: 2px 0; }
    .aip-typing span {
      width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted);
      animation: aip-blink 1.2s infinite ease-in-out;
    }
    .aip-typing span:nth-child(2) { animation-delay: 0.2s; }
    .aip-typing span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes aip-blink { 0%,80%,100% { opacity: 0.25; } 40% { opacity: 1; } }

    /* ── Forslags-/utkast-kort ── */
    .aip-kort {
      align-self: stretch; background: var(--surface);
      border: 1px solid var(--border); border-radius: 14px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05); overflow: hidden;
    }
    .aip-kort-topp {
      display: flex; align-items: center; gap: 8px;
      padding: 11px 14px; background: var(--bg);
      border-bottom: 1px solid var(--border);
      font-weight: 700; font-size: 12.5px; color: var(--text);
      letter-spacing: 0.01em;
    }
    .aip-kort-topp .aip-merke {
      font-size: 10px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.06em; color: var(--primary);
      background: rgba(247,27,0,0.09); padding: 2px 7px; border-radius: 20px;
    }
    .aip-kort-body { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
    .aip-kort-footer {
      display: flex; gap: 8px; padding: 11px 14px;
      border-top: 1px solid var(--border); background: var(--bg);
    }
    .aip-kort-footer .aip-btn-primar { flex: 1; }

    /* Redigerbar hendelse-rad i utkast */
    .aip-hrad {
      border: 1px solid var(--border); border-radius: 10px;
      padding: 9px 10px; display: flex; gap: 9px; align-items: flex-start;
      background: var(--bg);
    }
    .aip-hrad.av { opacity: 0.45; }
    .aip-hrad > input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; accent-color: var(--primary); }
    .aip-hrad-felt { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
    .aip-inp, .aip-sel {
      width: 100%; box-sizing: border-box;
      padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px;
      font-size: 12.5px; font-family: inherit; background: var(--surface); color: var(--text);
    }
    .aip-inp:focus, .aip-sel:focus { outline: none; border-color: var(--primary); }
    .aip-inp-tittel { font-weight: 600; }
    .aip-rad2 { display: flex; gap: 6px; }
    .aip-rad2 > * { flex: 1; min-width: 0; }
    /* Tid-/feltkolonne: stable felt vertikalt i full bredde slik at datetime-local
       viser både dato og klokkeslett (to side-om-side blir for smale). */
    .aip-rad-tid, .aip-felt-kol { display: flex; flex-direction: column; gap: 8px; }
    .aip-rad-tid > *, .aip-felt-kol > * { min-width: 0; }
    .aip-felt-merke { font-size: 10px; color: var(--text-muted); margin-bottom: 2px; display: block; }

    /* Knapper */
    .aip-btn-primar {
      background: linear-gradient(135deg, var(--primary-dark), var(--primary));
      color: #fff; border: none; border-radius: 9px; cursor: pointer;
      font-weight: 700; font-size: 13px; padding: 9px 14px; transition: filter 0.15s;
    }
    .aip-btn-primar:hover { filter: brightness(1.06); }
    .aip-btn-primar:disabled { opacity: 0.5; cursor: default; filter: none; }
    .aip-btn-sekundar {
      background: var(--surface); color: var(--text-muted);
      border: 1px solid var(--border); border-radius: 9px; cursor: pointer;
      font-weight: 600; font-size: 13px; padding: 9px 14px; transition: all 0.15s;
    }
    .aip-btn-sekundar:hover { color: var(--text); border-color: var(--text-muted); }

    /* Input + chips */
    .aip-bunn { flex-shrink: 0; border-top: 1px solid var(--border); padding: 12px 14px; }
    .aip-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
    .aip-chip {
      font-size: 11px; padding: 5px 11px; border-radius: 20px;
      background: var(--bg); border: 1px solid var(--border); color: var(--text-muted);
      cursor: pointer; transition: all 0.15s; white-space: nowrap;
    }
    .aip-chip:hover { border-color: var(--primary); color: var(--primary); background: rgba(247,27,0,0.04); }
    .aip-input-rad { display: flex; gap: 8px; align-items: flex-end; }
    #aip-input {
      flex: 1; resize: none; max-height: 120px; min-height: 40px;
      padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 11px;
      font-size: 13px; font-family: inherit; background: var(--bg); color: var(--text);
      line-height: 1.4;
    }
    #aip-input:focus { outline: none; border-color: var(--primary); }
    .aip-send {
      flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px; border: none;
      background: linear-gradient(135deg, var(--primary-dark), var(--primary));
      color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: filter 0.15s;
    }
    .aip-send:hover { filter: brightness(1.08); }
    .aip-send:disabled { opacity: 0.5; cursor: default; }

    /* Mobil: panelet blir full-skjerm overlay og dytter ikke layouten */
    @media (max-width: 768px) {
      #aiPanel { width: 100vw; z-index: 9500; }
      body.med-ai-panel { padding-right: 0; }
      body.med-ai-panel .header-panel,
      body.med-ai-panel #eventModal,
      body.med-ai-panel #infoModal { right: 0; }
      body.med-ai-panel #org-page,
      body.med-ai-panel #kp-dashboard:not(.kpd-embed) { width: 100% !important; }

      /* Respekter notch/safe-area: header (med reset/lukk) under notch,
         input over home-indikatoren — så hjørner/knapper ikke kuttes. */
      #aiPanel .aip-header { padding-top: max(16px, env(safe-area-inset-top)); }
      #aiPanel .aip-bunn { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
      /* 16px hindrer at iOS zoomer inn når man fokuserer et felt. */
      #aiPanel #aip-input,
      #aiPanel .aip-inp,
      #aiPanel .aip-sel { font-size: 16px; }
      /* Skjul de forhåndsdefinerte forslags-chipsene på mobil — de stjeler plass. */
      #aiPanel .aip-chips { display: none; }
    }

    /* ==========================================
       KJØREPLAN / UNDERHENDELSER
       ========================================== */
    .kp-seksjon { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 16px; }
    .kp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
    .kp-tittel {
      font-size: 11px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.09em; color: var(--text-muted);
    }
    .kp-header-actions { display: flex; gap: 6px; align-items: center; }
    .kp-legg-til-btn {
      font-size: 12px; font-weight: 600; padding: 5px 13px; border-radius: 7px;
      background: var(--primary); border: none; color: #fff;
      cursor: pointer; transition: opacity 0.15s;
    }
    .kp-legg-til-btn:hover { opacity: 0.85; }
    .kp-loading { font-size: 12px; color: var(--text-muted); padding: 8px 0; }
    .kp-tom {
      font-size: 13px; color: var(--text-muted); font-style: italic;
      padding: 20px 0; text-align: center;
    }
    .kp-liste { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
    .kp-fase-gruppe { margin-bottom: 16px; }
    .kp-fase-header {
      display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
    }
    .kp-fase-header-label {
      font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--text-muted); white-space: nowrap;
    }
    .kp-fase-header-tid {
      font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums;
      white-space: nowrap; opacity: 0.7;
    }
    .kp-fase-header-linje { flex: 1; height: 1px; background: var(--border); }
    .kp-rad {
      display: grid; grid-template-columns: 16px 54px 1fr auto auto;
      align-items: center; gap: 10px;
      padding: 10px 12px 10px 10px; border-radius: 8px; background: var(--bg);
      border: 1px solid var(--border);
      border-left-width: 3px;
      transition: box-shadow 0.15s, opacity 0.15s;
      position: relative;
    }
    .kp-rad:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.07); }
    .kp-rad:hover .kp-aksjoner { opacity: 1; }
    .kp-rad.dragging { opacity: 0.3; }
    .kp-rad { position: relative; }
    .kp-rad.drag-over-top::before,
    .kp-rad.drag-over-bottom::after {
      content: '';
      position: absolute;
      left: 0; right: 0;
      height: 3px;
      background: var(--primary);
      border-radius: 2px;
      z-index: 10;
    }
    .kp-rad.drag-over-top::before  { top: -2px; }
    .kp-rad.drag-over-bottom::after { bottom: -2px; }
    .kp-drag {
      cursor: grab; color: var(--text-muted); font-size: 15px; line-height: 1;
      user-select: none; text-align: center; transition: color 0.15s, background 0.15s;
      padding: 3px 2px; border-radius: 4px; opacity: 0.45;
    }
    .kp-rad:hover .kp-drag { opacity: 1; background: var(--border); }
    .kp-drag:active { cursor: grabbing; }
    .kp-tid {
      font-size: 14px; font-weight: 700; color: var(--text);
      font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -0.01em;
    }
    .kp-innhold { min-width: 0; }
    .kp-rad-tittel {
      font-size: 14px; font-weight: 600; color: var(--text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      line-height: 1.3;
    }
    .kp-rad-meta {
      font-size: 11px; color: var(--text-muted);
      display: flex; flex-wrap: wrap; gap: 8px; margin-top: 3px;
    }
    .kp-rad-meta span { display: flex; align-items: center; gap: 2px; }
    .kp-status-badge {
      font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px; cursor: pointer;
      white-space: nowrap; transition: opacity 0.15s; flex-shrink: 0;
    }
    .kp-status-badge:hover { opacity: 0.7; }
    .kp-aksjoner {
      display: flex; gap: 4px; align-items: center;
      opacity: 0; transition: opacity 0.15s;
    }
    .kp-btn-sm {
      font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 6px; cursor: pointer;
      border: 1px solid; transition: all 0.12s; white-space: nowrap;
    }
    .kp-btn-rediger {
      background: transparent; border-color: var(--border); color: var(--text-muted);
    }
    .kp-btn-rediger:hover { background: rgba(0,0,0,0.05); border-color: var(--text-muted); color: var(--text); }
    .kp-btn-slett {
      background: transparent; border-color: transparent; color: #9CA3AF;
    }
    .kp-btn-slett:hover { background: rgba(var(--st-feil-tint),0.08); border-color: rgba(var(--st-feil-tint),0.3); color: #DC2626; }
    .kp-btn-print {
      font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 7px; cursor: pointer;
      background: transparent; border: 1px solid var(--border); color: var(--text-muted);
      transition: all 0.15s; white-space: nowrap;
    }
    .kp-btn-print:hover { border-color: var(--text-muted); color: var(--text); }
    .kp-btn-mal {
      font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 7px; cursor: pointer;
      background: transparent; border: 1px solid var(--border); color: var(--text-muted);
      transition: all 0.15s; white-space: nowrap;
    }
    .kp-btn-mal:hover { border-color: var(--primary); color: var(--primary); }
    #kp-mal-panel, #kpd-mal-panel,
    #kp-lagre-mal-panel, #kpd-lagre-mal-panel {
      position: absolute; top: calc(100% + 6px); right: 0; z-index: 200;
      min-width: 320px; max-width: min(440px, calc(100vw - 32px));
      background: var(--surface); border: 1.5px solid var(--border);
      border-radius: 10px; padding: 12px 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    }
    .kp-live-btn {
      font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 7px;
      background: linear-gradient(135deg, #CC1500, #F71B00); border: 1px solid rgba(255,255,255,0.15);
      color: white; cursor: pointer; box-shadow: 0 2px 8px rgba(247,27,0,0.35);
      transition: all 0.15s; white-space: nowrap;
    }
    .kp-live-btn:hover { box-shadow: 0 3px 14px rgba(247,27,0,0.5); opacity: 0.92; }

    /* Kjøreplan-skjema */
    .kp-skjema {
      background: var(--surface); border: 1.5px solid var(--primary);
      border-radius: 10px; padding: 16px; margin-top: 10px;
    }
    .kp-skjema-rad { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
    .kp-skjema-felt { display: flex; flex-direction: column; gap: 4px; }
    .kp-skjema-felt label {
      font-size: 10px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.05em; color: var(--text-muted);
    }
    .kp-input {
      padding: 6px 10px; border: 1.5px solid var(--border); border-radius: 7px;
      font-size: 13px; font-family: inherit; background: var(--bg); color: var(--text);
      outline: none; transition: border-color 0.15s;
    }
    .kp-input:focus { border-color: var(--primary); }
    .kp-input.w-full { width: 100%; box-sizing: border-box; }
    .kp-teknisk-toggle {
      background: none; border: none; cursor: pointer; font-size: 11px; color: var(--text-muted);
      padding: 4px 0; text-align: left; margin: 2px 0 4px; display: flex; align-items: center; gap: 4px;
    }
    .kp-teknisk-toggle:hover { color: var(--text); }
    .kp-teknisk-seksjon { display: none; }
    .kp-teknisk-seksjon.apen { display: block; }
    .kp-skjema-knapper { display: flex; gap: 8px; margin-top: 14px; }
    .kp-lagre-btn {
      padding: 8px 20px; border-radius: 7px; font-size: 13px; font-weight: 700;
      background: var(--primary); color: #fff; border: none;
      cursor: pointer; transition: opacity 0.15s;
      box-shadow: 0 2px 8px rgba(247,27,0,0.3);
    }
    .kp-lagre-btn:hover { opacity: 0.85; }
    .kp-avbryt-btn {
      padding: 7px 16px; border-radius: 7px; font-size: 13px; font-weight: 600;
      background: transparent; border: 1.5px solid var(--border); color: var(--text-muted);
      cursor: pointer; transition: border-color 0.15s, color 0.15s;
    }
    .kp-avbryt-btn:hover { border-color: var(--text-muted); color: var(--text); }

/* ─── KJØREPLAN DASHBOARD ────────────────────────────────────────────── */
    .kpd-header {
      display: flex; align-items: center; gap: 16px;
      padding: 14px 24px;
      background: #1B3A2D; flex-shrink: 0;
    }
    .kpd-tilbake-btn {
      display: flex; align-items: center; gap: 6px;
      background: color-mix(in srgb, #fff 8%, var(--header-dark, #1D1D1D));
      border: 1px solid rgba(255,255,255,0.16);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 1px 2px rgba(0,0,0,0.35);
      color: rgba(255,255,255,0.88); font-size: 12px; font-weight: 600;
      padding: 7px 14px; border-radius: 8px;
      cursor: pointer; flex-shrink: 0; transition: all 0.12s; font-family: inherit;
    }
    .kpd-tilbake-btn:hover {
      background: color-mix(in srgb, #fff 14%, var(--header-dark, #1D1D1D));
      border-color: rgba(255,255,255,0.30);
      color: white;
    }
    .kpd-header-tittelblokk { display: flex; flex-direction: column; gap: 1px; }
    .kpd-overskrift {
      font-size: 17px; font-weight: 800; color: white;
      margin: 0; letter-spacing: -0.02em;
    }
    .kpd-header-meta { font-size: 11px; color: rgba(255,255,255,0.5); font-weight: 400; }

    /* Event picker in header */
    .kpd-event-picker-seksjon { display: flex; align-items: center; }
    .kpd-event-velger {
      border: 1px solid rgba(255,255,255,0.25); border-radius: 8px;
      padding: 7px 12px; font-size: 13px; font-weight: 600;
      background: rgba(255,255,255,0.1); color: white;
      font-family: inherit; cursor: pointer; outline: none;
      transition: border-color 0.15s; max-width: 280px;
    }
    .kpd-event-velger:focus { border-color: rgba(255,255,255,0.5); }
    .kpd-event-velger option { background: #1B3A2D; color: white; }

    /* ── Statistikk-rad ─────────────────────────────────── */
    .kpd-stat-rad {
      display: flex; gap: 12px; align-items: stretch;
      padding: 16px 24px; flex-shrink: 0;
      background: #EEF2EC;
    }
    .kpd-stat-kort {
      display: flex; align-items: center; gap: 14px;
      background: white; border-radius: 16px;
      padding: 16px 20px; flex: 1;
      box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    }
    .kpd-stat-mork { background: #1B3A2D; }
    .kpd-stat-mork .kpd-stat-num { color: white; }
    .kpd-stat-mork .kpd-stat-etikett { color: rgba(255,255,255,0.55); }
    .kpd-stat-ikonboks {
      width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,0.15); color: white;
    }
    .kpd-stat-ikon-gronn { background: rgba(var(--st-ok-tint),0.12); color: var(--st-ok-tekst); }
    .kpd-stat-ikon-muted { background: rgba(100,116,139,0.1); color: #64748B; }
    .kpd-stat-num {
      font-size: 26px; font-weight: 800; color: #1B3A2D;
      line-height: 1; letter-spacing: -0.03em;
    }
    .kpd-stat-num-gronn { color: var(--st-ok-tekst); }
    .kpd-stat-etikett { font-size: 11px; color: #94A3B8; font-weight: 500; margin-top: 3px; white-space: nowrap; }
    .kpd-stat-sok-kort { gap: 10px; padding: 13px 18px; flex: 1.4; }
    .kpd-sok-ikon { color: #94A3B8; flex-shrink: 0; }
    .kpd-sok-input {
      flex: 1; border: none; outline: none;
      font-size: 13px; font-family: inherit;
      color: #1B3A2D; background: transparent; width: 100%;
    }
    .kpd-sok-input::placeholder { color: #94A3B8; }

    /* ── Body ──────────────────────────────────────────── */
    .kpd-body {
      display: flex; flex: 1; min-height: 0; overflow: hidden;
      padding: 0 24px 24px; gap: 12px; background: #EEF2EC;
    }

    /* ── Venstre panel ─────────────────────────────────── */
    .kpd-venstre {
      width: 280px; flex-shrink: 0;
      background: white; border-radius: 16px;
      display: flex; flex-direction: column; overflow: hidden;
      box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    }
    .kpd-hendelse-liste { flex: 1; overflow-y: auto; padding-bottom: 16px; }

    /* Seksjonsoverskrift (Med kjøreplan / Øvrige hendelser) */
    .kpd-seksjon-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 16px 6px;
      font-size: 10px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.08em; color: #1B3A2D;
      background: white; position: sticky; top: 0; z-index: 2;
    }
    .kpd-seksjon-header-dim { color: #94A3B8; }
    .kpd-seksjon-header-border { border-top: 1px solid #F1F5F1; margin-top: 4px; padding-top: 14px; }
    .kpd-seksjon-teller {
      background: #1B3A2D; color: white;
      font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 10px;
    }
    .kpd-seksjon-teller-dim { background: #E2E8E2; color: #94A3B8; }

    .kpd-dag-header {
      padding: 6px 16px 3px; font-size: 10px; font-weight: 600;
      letter-spacing: 0.04em; color: #94A3B8; background: white;
    }
    .kpd-hendelse-rad {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 16px; cursor: pointer;
      border-left: 3px solid transparent;
      border-bottom: 1px solid #F4F6F4;
      transition: background 0.1s;
    }
    .kpd-hendelse-rad:hover { background: #F6FAF6; }
    .kpd-hendelse-rad.aktiv {
      background: rgba(27,58,45,0.06);
      border-left-color: #1B3A2D;
    }
    .kpd-hendelse-info { flex: 1; min-width: 0; }
    .kpd-hendelse-tittel {
      font-size: 13px; font-weight: 600; color: #1B3A2D;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .kpd-hendelse-meta { font-size: 11px; color: #94A3B8; margin-top: 2px; }
    .kpd-antall-badge {
      flex-shrink: 0; background: #1B3A2D; color: white;
      font-size: 10px; font-weight: 700; padding: 2px 7px;
      border-radius: 10px; min-width: 20px; text-align: center;
    }
    .kpd-antall-tom { background: #E2E8E2; color: #94A3B8; }

    /* ── Høyre panel ───────────────────────────────────── */
    .kpd-hoyre {
      flex: 1; min-width: 0; display: flex;
      flex-direction: column; overflow: hidden;
      background: white; border-radius: 16px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    }
    .kpd-tom-panel {
      flex: 1; display: flex; align-items: center; justify-content: center;
    }
    .kpd-tom-innhold { text-align: center; padding: 40px 20px; }
    .kpd-tom-ikon-wrapper {
      width: 72px; height: 72px; border-radius: 50%;
      background: #EEF5EE; display: flex; align-items: center; justify-content: center;
      margin: 0 auto 16px; color: #1B3A2D;
    }
    .kpd-tom-tittel { font-size: 17px; font-weight: 700; color: #1B3A2D; margin-bottom: 8px; }
    .kpd-tom-tekst { font-size: 13px; color: #94A3B8; max-width: 240px; margin: 0 auto; line-height: 1.5; }

    .kpd-panel-header {
      display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
      padding: 20px 24px 18px;
      border-bottom: 1px solid #F0F5F0;
      background: white; flex-shrink: 0;
    }
    .kpd-panel-tilbake { display: none; }
    .kpd-panel-tittel {
      font-size: 20px; font-weight: 800; color: #1B3A2D;
      line-height: 1.2; letter-spacing: -0.02em;
    }
    .kpd-panel-meta { font-size: 12px; color: #94A3B8; margin-top: 5px; }
    .kpd-panel-knappar { display: flex; gap: 8px; align-items: center; flex-shrink: 0; padding-top: 2px; }
    .kpd-kjoreplan-scroll { flex: 1; overflow-y: auto; padding: 24px; }
    .kpd-kjoreplan-scroll > * { max-width: 820px; }

    /* ── Fase-header i dashboard ────────────────────────── */
    .kpd-kjoreplan-scroll .kp-fase-gruppe { margin-bottom: 24px; }
    .kpd-kjoreplan-scroll .kp-fase-header {
      padding: 8px 14px; border-radius: 9px; margin-bottom: 10px;
      background: rgba(128,128,128,0.07); border: 1.5px solid rgba(0,0,0,0.06);
      gap: 10px;
    }
    .kpd-kjoreplan-scroll .kp-fase-header-label {
      font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
    }
    .kpd-kjoreplan-scroll .kp-fase-header-linje { display: none; }

    .kpd-kjoreplan-scroll .kp-fase-gruppe[data-fase="Før"] .kp-fase-header {
      background: rgba(99,102,241,0.07); border-color: rgba(99,102,241,0.22);
    }
    .kpd-kjoreplan-scroll .kp-fase-gruppe[data-fase="Før"] .kp-fase-header-label { color: #4F46E5; }
    .kpd-kjoreplan-scroll .kp-fase-gruppe[data-fase="Under"] .kp-fase-header {
      background: rgba(27,58,45,0.06); border-color: rgba(27,58,45,0.18);
    }
    .kpd-kjoreplan-scroll .kp-fase-gruppe[data-fase="Under"] .kp-fase-header-label { color: #1B3A2D; }
    .kpd-kjoreplan-scroll .kp-fase-gruppe[data-fase="Etter"] .kp-fase-header {
      background: rgba(var(--st-ok-tint),0.07); border-color: rgba(var(--st-ok-tint),0.22);
    }
    .kpd-kjoreplan-scroll .kp-fase-gruppe[data-fase="Etter"] .kp-fase-header-label { color: #059669; }

    .kpd-kjoreplan-scroll .kp-rad {
      background: var(--surface);
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .kpd-kjoreplan-scroll .kp-rad:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.09); }

/* ─── Innebygd Kjøreplaner-fane: nøytralt tema (overstyrer det grønne) ─────
   Modulen lever nå inne i .kpd-embed (dashboard-fane), ikke fullskjerm-
   overlay. Vi remapper grønt (#1B3A2D/#EEF2EC/var(--st-ok-tekst)) til app-tokens. */
    .kpd-embed .kpd-header {
      background: var(--surface); border-bottom: 1px solid var(--border);
    }
    .kpd-embed .kpd-tilbake-btn { display: none; }
    .kpd-embed .kpd-overskrift { color: var(--text); }
    .kpd-embed .kpd-header-meta { color: var(--text-muted); }
    .kpd-embed .kpd-event-velger {
      border-color: var(--border); background: var(--surface); color: var(--text);
    }
    .kpd-embed .kpd-event-velger:focus { border-color: var(--primary); }
    .kpd-embed .kpd-event-velger option { background: var(--surface); color: var(--text); }
    .kpd-embed .kpd-stat-rad { background: transparent; }
    .kpd-embed .kpd-stat-kort {
      background: var(--surface); border: 1px solid var(--border);
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .kpd-embed .kpd-stat-mork { background: var(--surface); }
    .kpd-embed .kpd-stat-mork .kpd-stat-num { color: var(--text); }
    .kpd-embed .kpd-stat-mork .kpd-stat-etikett { color: var(--text-muted); }
    .kpd-embed .kpd-stat-ikonboks { background: var(--bg); color: var(--text-muted); }
    .kpd-embed .kpd-stat-ikon-gronn { background: rgba(247,27,0,0.10); color: var(--primary); }
    .kpd-embed .kpd-stat-num { color: var(--text); }
    .kpd-embed .kpd-stat-num-gronn { color: var(--primary); }
    .kpd-embed .kpd-sok-input { color: var(--text); }
    .kpd-embed .kpd-body { background: transparent; }
    .kpd-embed .kpd-venstre,
    .kpd-embed .kpd-hoyre {
      background: var(--surface); border: 1px solid var(--border); box-shadow: none;
    }
    .kpd-embed .kpd-seksjon-header { color: var(--text); background: var(--surface); }
    .kpd-embed .kpd-seksjon-teller { background: var(--text); color: var(--surface); }
    .kpd-embed .kpd-hendelse-rad:hover { background: var(--bg); }
    .kpd-embed .kpd-hendelse-rad.aktiv {
      background: rgba(247,27,0,0.06); border-left-color: var(--primary);
    }
    .kpd-embed .kpd-hendelse-tittel { color: var(--text); }
    .kpd-embed .kpd-antall-badge { background: var(--text); color: var(--surface); }
    .kpd-embed .kpd-tom-ikon-wrapper { background: var(--bg); color: var(--text-muted); }
    .kpd-embed .kpd-tom-tittel { color: var(--text); }
    .kpd-embed .kpd-panel-tittel { color: var(--text); }



    /* ══════════════════════════════════════════════════════════════════
       DIALOGER (app-core.js: bekreft/varsle/sporTekst, prefiks `dlg-`)

       Erstatter native alert()/confirm()/prompt(). Dialogen ligger direkte
       på <body>, ikke inne i `.modal`, så `.modal button` (0,1,1) treffer
       den ikke — men den globale `button`-regelen gjør det. Alt er derfor
       skopet `.dlg .x` (0,2,0), samme lærdom som dtp- og mb-komponentene.

       Fare-tonen (sletting) er den eneste som får rødt. Native confirm()
       ga ingen forskjell på «slett for alltid» og «last inn på nytt?»,
       og det er nettopp der brukeren trenger å stoppe opp.
       ══════════════════════════════════════════════════════════════════ */
    .dlg-overlay {
      position: fixed; inset: 0; z-index: var(--z-dialog, 100000);
      display: flex; align-items: center; justify-content: center;
      padding: 20px;
      background: rgba(15, 23, 42, 0.55);
      -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    }
    .dlg-overlay .dlg {
      width: min(420px, 100%);
      background: var(--surface, #fff);
      border: 1px solid var(--border, #E5D8CF);
      border-radius: var(--modal-r, 14px);
      box-shadow: var(--modal-shadow, 0 28px 90px rgba(0,0,0,.38));
      padding: 20px;
      max-height: calc(100vh - 40px);
      overflow-y: auto;
    }
    .dlg .dlg-hode { display: flex; gap: 13px; align-items: flex-start; }
    .dlg .dlg-ikon {
      flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      background: var(--bg, #FAF6F2); color: var(--text-muted, #7A6E68);
    }
    .dlg .dlg-ikon svg { width: 18px; height: 18px; }
    .dlg--fare .dlg-ikon { background: var(--st-feil-bg, #FEE2E2); color: var(--st-feil-tekst, #B91C1C); }
    .dlg--feil .dlg-ikon { background: var(--st-feil-bg, #FEE2E2); color: var(--st-feil-tekst, #B91C1C); }
    .dlg .dlg-hode-tekst { min-width: 0; flex: 1; }
    .dlg .dlg-tittel {
      margin: 3px 0 0; font-size: 15.5px; font-weight: 700;
      color: var(--text, #1D1D1D); line-height: 1.35;
    }
    .dlg .dlg-tekst {
      margin: 7px 0 0; font-size: 13px; line-height: 1.5;
      color: var(--text-muted, #7A6E68); overflow-wrap: anywhere;
    }
    .dlg .dlg-felt { display: block; margin: 15px 0 0; }
    .dlg .dlg-etikett {
      display: block; margin-bottom: 5px; font-size: 11px; font-weight: 700;
      letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted, #7A6E68);
    }
    .dlg .dlg-input {
      width: 100%; box-sizing: border-box;
      padding: var(--felt-pad, 9px 11px); border-radius: var(--felt-r, 9px);
      border: 1.5px solid var(--border, #E5D8CF);
      background: var(--surface, #fff); color: var(--text, #1D1D1D);
      font-family: inherit; font-size: 14px;
    }
    .dlg .dlg-input:focus { outline: none; border-color: var(--primary, #F71B00); box-shadow: var(--fokus-ring, 0 0 0 3px rgba(247,27,0,.16)); }
    .dlg .dlg-bunn { display: flex; gap: 8px; justify-content: flex-end; margin-top: 19px; }
    .dlg .dlg-knapp {
      padding: 9px 16px; border-radius: 9px; cursor: pointer;
      border: 1.5px solid var(--border, #E5D8CF);
      background: var(--surface, #fff); color: var(--text, #1D1D1D);
      font-family: inherit; font-size: 13px; font-weight: 700;
    }
    .dlg .dlg-knapp:hover { background: var(--bg, #FAF6F2); }
    .dlg .dlg-knapp:focus-visible { outline: none; box-shadow: var(--fokus-ring, 0 0 0 3px rgba(247,27,0,.16)); }
    .dlg .dlg-knapp--primar {
      background: var(--text, #1D1D1D); border-color: var(--text, #1D1D1D); color: #fff;
    }
    .dlg .dlg-knapp--primar:hover { background: #000; }
    .dlg .dlg-knapp--fare {
      background: var(--primary, #F71B00); border-color: var(--primary, #F71B00); color: #fff;
    }
    .dlg .dlg-knapp--fare:hover { background: #d81700; }
    @media (prefers-reduced-motion: no-preference) {
      .dlg-overlay .dlg {
        animation: dlgInn calc(var(--anim-varighet, 180ms)) var(--anim-kurve, cubic-bezier(.22,1,.36,1)) backwards;
      }
      @keyframes dlgInn {
        from { opacity: 0; transform: translateY(8px) scale(.97); }
        to   { opacity: 1; transform: none; }
      }
    }
    /* Små skjermer uten mobilappen (nettleser på nettbrett, delelenker):
       full bredde og større treffflater, men fortsatt sentrert modal. */
    @media (max-width: 480px) {
      .dlg .dlg-bunn { flex-direction: column-reverse; }
      .dlg .dlg-knapp { width: 100%; padding: 12px 16px; font-size: 14px; }
      .dlg .dlg-input { font-size: 16px; }
    }

    /* ══════════════════════════════════════════════════════════════════
       DATO/TID-VELGER (app-datotid.js, prefiks `dtp-`)

       Erstatter native date/time/datetime-local på de arrangements-scopede
       flatene. Kontrakt og bruk: se toppen av app-datotid.js.

       Merk: time = firkanter i rutenett, minutt = piller. Med lik form ble
       de seks rader identiske celler, og man så ikke hvor det ene sluttet
       og det andre begynte. Formforskjellen ER informasjonen.

       Alt er token-basert, så mørk modus følger med uten egne regler i
       stil-tema.css — bortsett fra at `.dtp-panel` og `.dtp-bunn` MÅ ha
       eksplisitt `--surface`-bakgrunn: panelet ligger over annet innhold,
       og den sticky bunnlinja skal ikke slippe innhold gjennom.
       ══════════════════════════════════════════════════════════════════ */
    .dtp-skjult {
      position: absolute!important;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
      border: 0;
    }
    .dtp-vert {
      position: relative;
      display: block;
    }

    /* ── Lukket tilstand: ser ut som .felt, oppfører seg som en knapp ── */
    .dtp-knapp {
      display: flex;
      align-items: center;
      gap: 9px;
      width: 100%;
      box-sizing: border-box;
      padding: var(--felt-pad,9px 11px);
      border-radius: var(--felt-r,9px);
      border: 1px solid var(--border,#E5D8CF);
      background: var(--surface,#fff);
      color: var(--text,#1D1D1D);
      font: 500 13px/1.35 Inter,system-ui,sans-serif;
      text-align: left;
      cursor: pointer;
      transition: border-color .12s,box-shadow .12s;
    }
    .dtp-knapp:hover:not(:disabled) {
      border-color: var(--text-muted,#7A6E68);
    }
    .dtp-knapp:disabled {
      opacity: .6;
      cursor: default;
    }
    .dtp-knapp:focus-visible,
    .dtp-vert.apen .dtp-knapp {
      outline: none;
      border-color: var(--primary,#F71B00);
      box-shadow: var(--fokus-ring,0 0 0 3px rgba(247,27,0,.15));
    }
    .dtp-knapp svg {
      flex: 0 0 auto;
      opacity: .5;
    }
    .dtp-knapp-tekst {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: baseline;
      gap: 6px;
      overflow: hidden;
      white-space: nowrap;
    }
    .dtp-knapp-dato {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* Klokkeslettet krymper aldri — det er den presise delen av verdien.
       Datoen er den som skal kortes ned: «Fre 24. j… · 10:00» er brukbart,
       «Fre 24. jul · 10:…» er ikke. */
    .dtp-knapp-tid {
      flex: 0 0 auto;
      font-family: 'JetBrains Mono',ui-monospace,monospace;
      font-weight: 500;
      font-variant-numeric: tabular-nums;
    }
    .dtp-knapp-dato + .dtp-knapp-tid::before {
      content: '·';
      margin-right: 6px;
      color: var(--text-muted,#7A6E68);
    }
    .dtp-knapp.tom .dtp-knapp-tekst {
      color: var(--text-muted,#7A6E68);
      font-weight: 400;
    }
    .dtp-knapp-etter {
      flex: 0 0 auto;
      font: 600 11px/1 Inter,sans-serif;
      color: var(--text-muted,#7A6E68);
      font-variant-numeric: tabular-nums;
      background: var(--bg,#FFF2E9);
      padding: 4px 7px;
      border-radius: 999px;
    }
    .dtp-vert.ugyldig .dtp-knapp {
      border-color: var(--st-feil-tekst,#C62828);
    }
    /* `.modal button, .modal-content button` (0,1,1) i modal-seksjonen over
       slår komponentens egne (0,1,0)-regler — samme felle som mb-komponentene
       gikk i. Alt INNE i panelet er derfor scopet `.dtp-panel .x` (0,2,0),
       som også er sant: de elementene finnes ikke andre steder. Kun den
       lukkede knappen står utenfor panelet og må gjentas her. */
    .modal .dtp-knapp,
    .modal-content .dtp-knapp {
      background: var(--surface,#fff);
      border-color: var(--border,#E5D8CF);
      color: var(--text,#1D1D1D);
    }
    .modal .dtp-knapp:hover:not(:disabled),
    .modal-content .dtp-knapp:hover:not(:disabled) {
      background: var(--surface,#fff);
      border-color: var(--text-muted,#7A6E68);
    }
    .modal .dtp-vert.apen .dtp-knapp,
    .modal-content .dtp-vert.apen .dtp-knapp {
      border-color: var(--primary,#F71B00);
    }

    .dtp-panel {
      position: absolute;
      z-index: var(--z-popover,9000);
      top: calc(100% + 6px);
      left: 0;
      width: 328px;
      max-width: calc(100vw - 24px);
      max-height: min(78vh,640px);
      overflow-y: auto;
      overscroll-behavior: contain;
      background: var(--surface,#fff);
      border: 1px solid var(--border,#E5D8CF);
      border-radius: var(--modal-r,14px);
      box-shadow: var(--modal-shadow,0 18px 48px rgba(66,43,28,.18));
      padding: 12px 12px 0;
      box-sizing: border-box;
    }
    .dtp-panel[hidden] {
      display: none;
    }
    .dtp-panel.opp {
      top: auto;
      bottom: calc(100% + 6px);
    }
    .dtp-panel.hoyre {
      left: auto;
      right: 0;
    }
    .dtp-panel .dtp-seksjon+.dtp-seksjon {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--border,#E5D8CF);
    }
    .dtp-panel .dtp-merke {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font: 700 10px/1 Inter,sans-serif;
      letter-spacing: .07em;
      text-transform: uppercase;
      color: var(--text-muted,#7A6E68);
      margin-bottom: 8px;
    }
    .dtp-panel .dtp-merke-verdi {
      font-family: 'JetBrains Mono',ui-monospace,monospace;
      font-weight: 500;
      letter-spacing: 0;
      text-transform: none;
      font-size: 11px;
    }

    /* Dagstripe — speiler tidslinjas dagknapper */
    .dtp-panel .dtp-dager {
      display: flex;
      gap: 6px;
      overflow-x: auto;
      scrollbar-width: thin;
      padding-bottom: 2px;
      scroll-snap-type: x proximity;
    }
    .dtp-panel .dtp-dag {
      flex: 0 0 auto;
      scroll-snap-align: start;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1px;
      min-width: 52px;
      padding: 7px 9px;
      border-radius: 10px;
      border: 1px solid var(--border,#E5D8CF);
      background: var(--surface,#fff);
      color: var(--text,#1D1D1D);
      cursor: pointer;
      transition: background .12s,color .12s,border-color .12s;
    }
    .dtp-panel .dtp-dag-uke {
      font: 700 9.5px/1 Inter,sans-serif;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--text-muted,#7A6E68);
    }
    .dtp-panel .dtp-dag-nr {
      font: 500 15px/1.1 'JetBrains Mono',ui-monospace,monospace;
      font-variant-numeric: tabular-nums;
    }
    .dtp-panel .dtp-dag-mnd {
      font: 600 9px/1 Inter,sans-serif;
      text-transform: uppercase;
      letter-spacing: .05em;
      color: var(--text-muted,#7A6E68);
    }
    .dtp-panel .dtp-dag:hover {
      border-color: var(--text-muted,#7A6E68);
    }
    .dtp-panel .dtp-dag.valgt {
      background: var(--primary,#F71B00);
      border-color: var(--primary,#F71B00);
      color: #fff;
    }
    .dtp-panel .dtp-dag.valgt .dtp-dag-uke, .dtp-panel .dtp-dag.valgt .dtp-dag-mnd {
      color: rgba(255,255,255,.82);
    }
    .dtp-panel .dtp-dag.idag:not(.valgt) .dtp-dag-nr {
      position: relative;
    }
    .dtp-panel .dtp-dag.idag:not(.valgt) .dtp-dag-nr::after {
      content: '';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: -3px;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--primary,#F71B00);
    }
    .dtp-panel .dtp-dag.utenfor {
      opacity: .55;
    }
    .dtp-panel .dtp-dag--annen {
      justify-content: center;
      gap: 4px;
      color: var(--text-muted,#7A6E68);
      border-style: dashed;
    }
    .dtp-panel .dtp-dag--annen:hover {
      color: var(--primary,#F71B00);
      border-color: var(--primary,#F71B00);
    }

    /* Månedsrutenett (fri dato) */
    .dtp-panel .dtp-mnd-topp {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
    }
    .dtp-panel .dtp-mnd-navn {
      font: 700 12.5px/1 Inter,sans-serif;
      color: var(--text,#1D1D1D);
    }
    .dtp-panel .dtp-pil {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      border: 1px solid var(--border,#E5D8CF);
      background: var(--surface,#fff);
      color: var(--text,#1D1D1D);
      cursor: pointer;
    }
    .dtp-panel .dtp-pil:hover {
      background: var(--bg,#FFF2E9);
    }
    .dtp-panel .dtp-rutenett {
      display: grid;
      grid-template-columns: repeat(7,1fr);
      gap: 2px;
    }
    .dtp-panel .dtp-ukenavn {
      font: 700 9.5px/1 Inter,sans-serif;
      letter-spacing: .05em;
      text-transform: uppercase;
      color: var(--text-muted,#7A6E68);
      text-align: center;
      padding: 4px 0;
    }
    .dtp-panel .dtp-celle {
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      border: none;
      background: none;
      border-radius: 8px;
      font: 500 12.5px/1 'JetBrains Mono',ui-monospace,monospace;
      font-variant-numeric: tabular-nums;
      color: var(--text,#1D1D1D);
      cursor: pointer;
    }
    .dtp-panel .dtp-celle:hover {
      background: var(--bg,#FFF2E9);
    }
    .dtp-panel .dtp-celle.blank {
      visibility: hidden;
      cursor: default;
    }
    .dtp-panel .dtp-celle.utenfor-mnd {
      color: var(--text-muted,#7A6E68);
      opacity: .5;
    }
    .dtp-panel .dtp-celle.valgt {
      background: var(--primary,#F71B00);
      color: #fff;
    }
    .dtp-panel .dtp-celle.idag:not(.valgt) {
      box-shadow: inset 0 0 0 1.5px var(--primary,#F71B00);
    }
    .dtp-panel .dtp-celle.eventdag:not(.valgt) {
      background: var(--primary-pill,rgba(247,27,0,.12));
    }

    /* Tid — stort felt + to rutenett */
    .dtp-panel .dtp-tid-topp {
      display: flex;
      align-items: stretch;
      gap: 6px;
      margin-bottom: 10px;
    }
    .dtp-panel .dtp-tid-felt {
      flex: 1;
      min-width: 0;
      box-sizing: border-box;
      padding: 8px 10px;
      border-radius: var(--felt-r,9px);
      border: 1px solid var(--border,#E5D8CF);
      background: var(--surface,#fff);
      color: var(--text,#1D1D1D);
      font: 500 19px/1.15 'JetBrains Mono',ui-monospace,monospace;
      font-variant-numeric: tabular-nums;
      letter-spacing: .02em;
      text-align: center;
    }
    .dtp-panel .dtp-tid-felt:focus {
      outline: none;
      border-color: var(--primary,#F71B00);
      box-shadow: var(--fokus-ring,0 0 0 3px rgba(247,27,0,.15));
    }
    .dtp-panel .dtp-tid-felt::placeholder {
      color: var(--text-muted,#7A6E68);
      opacity: .6;
    }
    .dtp-panel .dtp-steg {
      display: grid;
      place-items: center;
      width: 38px;
      border-radius: var(--felt-r,9px);
      border: 1px solid var(--border,#E5D8CF);
      background: var(--surface,#fff);
      color: var(--text,#1D1D1D);
      cursor: pointer;
      padding: 0;
    }
    .dtp-panel .dtp-steg:hover {
      background: var(--bg,#FFF2E9);
    }

    /* Time og minutt må LESES som to forskjellige ting: timene er firkanter
    i et rutenett, minuttene er piller. Med lik form ble de seks rader
    identiske celler, og man så ikke hvor det ene sluttet og det andre begynte. */
    .dtp-panel .dtp-undermerke {
      font: 700 9.5px/1 Inter,sans-serif;
      letter-spacing: .07em;
      text-transform: uppercase;
      color: var(--text-muted,#7A6E68);
      margin: 0 0 5px;
    }
    .dtp-panel .dtp-grid {
      display: grid;
      gap: 3px;
    }
    .dtp-panel .dtp-grid.timer {
      grid-template-columns: repeat(6,1fr);
    }
    .dtp-panel .dtp-grid.min {
      grid-template-columns: repeat(6,1fr);
      gap: 4px;
    }
    .dtp-panel .dtp-tall {
      padding: 6px 0;
      border: 1px solid transparent;
      border-radius: 7px;
      background: var(--bg,#FFF2E9);
      color: var(--text,#1D1D1D);
      font: 500 12.5px/1 'JetBrains Mono',ui-monospace,monospace;
      font-variant-numeric: tabular-nums;
      cursor: pointer;
      transition: background .1s;
    }
    .dtp-panel .dtp-grid.min .dtp-tall {
      border-radius: 999px;
      background: transparent;
      border-color: var(--border,#E5D8CF);
    }
    .dtp-panel .dtp-tall:hover {
      background: var(--primary-pill,rgba(247,27,0,.12));
    }
    .dtp-panel .dtp-tall.valgt, .dtp-panel .dtp-grid.min .dtp-tall.valgt {
      background: var(--primary,#F71B00);
      border-color: var(--primary,#F71B00);
      color: #fff;
    }
    .dtp-panel .dtp-tall.avvik {
      border-color: var(--primary,#F71B00);
      border-style: dashed;
    }

    /* Varighet */
    .dtp-panel .dtp-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }
    .dtp-panel .dtp-chip {
      padding: 5px 10px;
      border-radius: 999px;
      border: 1px solid var(--border,#E5D8CF);
      background: var(--surface,#fff);
      color: var(--text,#1D1D1D);
      font: 600 11.5px/1 Inter,sans-serif;
      cursor: pointer;
    }
    .dtp-panel .dtp-chip:hover {
      border-color: var(--text-muted,#7A6E68);
    }
    .dtp-panel .dtp-chip.valgt {
      background: var(--primary,#F71B00);
      border-color: var(--primary,#F71B00);
      color: #fff;
    }
    .dtp-panel .dtp-hint {
      margin-top: 7px;
      font: 500 11px/1.4 Inter,sans-serif;
      color: var(--text-muted,#7A6E68);
    }
    .dtp-panel .dtp-hint.advar {
      color: var(--st-feil-tekst,#C62828);
    }

    /* Sticky: «Ferdig» skal ALDRI havne under bretten. Panelet er høyere enn
    en liten telefon, og en primærhandling man må rulle til er ingen
    primærhandling. */
    .dtp-panel .dtp-bunn {
      position: sticky;
      bottom: 0;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: 12px;
      padding: 10px 0 12px;
      border-top: 1px solid var(--border,#E5D8CF);
      background: var(--surface,#fff);
    }
    .dtp-panel .dtp-lenke {
      border: none;
      background: none;
      padding: 4px 2px;
      color: var(--text-muted,#7A6E68);
      font: 600 11.5px/1 Inter,sans-serif;
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .dtp-panel .dtp-lenke:hover {
      color: var(--primary,#F71B00);
    }
    .dtp-panel .dtp-ferdig {
      padding: 7px 14px;
      border-radius: 9px;
      border: none;
      background: var(--primary,#F71B00);
      color: #fff;
      font: 600 12.5px/1 Inter,sans-serif;
      cursor: pointer;
    }

    /* ── Mobil: bunnark i stedet for popover ── */
    @media (max-width:768px) {
      .dtp-bakteppe {
        position: fixed;
        inset: 0;
        z-index: var(--z-popover,9000);
        background: rgba(20,12,8,.42);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
      }
      .dtp-bakteppe[hidden] {
        display: none;
      }
      .dtp-panel {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        border-radius: 18px 18px 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        padding: 8px 16px 0;
        max-height: 88dvh;
        overflow-y: auto;
      }
      .dtp-panel.opp, .dtp-panel.hoyre {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
      }
      .dtp-panel .dtp-håndtak {
        width: 38px;
        height: 4px;
        border-radius: 999px;
        background: var(--border,#E5D8CF);
        margin: 2px auto 8px;
      }
      .dtp-panel .dtp-tittel {
        font: 400 26px/1 'Bebas Neue',Inter,sans-serif;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--text,#1D1D1D);
        margin: 0 0 14px;
      }

      /* 16 px iOS-gulv: alt under zoomer inn ved fokus */
      .dtp-panel .dtp-tid-felt {
        font-size: 21px;
        padding: 10px;
      }
      .dtp-panel .dtp-grid.timer, .dtp-panel .dtp-grid.min {
        gap: 5px;
      }
      .dtp-panel .dtp-tall {
        padding: 10px 0;
        font-size: 14px;
        border-radius: 9px;
      }
      .dtp-panel .dtp-grid.min .dtp-tall {
        border-radius: 999px;
      }
      .dtp-panel .dtp-dag {
        min-width: 58px;
        padding: 8px 10px;
      }
      .dtp-panel .dtp-celle {
        font-size: 14px;
        border-radius: 9px;
      }
      .dtp-panel .dtp-chip {
        padding: 8px 13px;
        font-size: 12.5px;
      }
      .dtp-panel .dtp-ferdig {
        padding: 11px 20px;
        font-size: 14px;
      }
      .dtp-panel .dtp-steg {
        width: 44px;
      }

      /* Sticky bunn må dekke helt ut til panelkanten, ellers blør innholdet
      gjennom sidegutterne når man ruller. */
      .dtp-panel .dtp-bunn {
        margin: 12px -16px 0;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
      }
    }
    @media (min-width:769px) {
      .dtp-panel .dtp-håndtak, .dtp-panel .dtp-tittel {
        display: none;
      }
    }

    /* ── Varighetsvelger (`vgt-`, samme fil/komponent som dtp) ──────────
       Gjenbruker .dtp-panel/.dtp-bunn/.dtp-merke så det er ÉN paneltype i
       appen. Formspråket er også dtp sitt: minutt = firkanter, sekund =
       piller — den forskjellen er det som gjør at man ser hvor det ene
       rutenettet slutter og det andre begynner.
       Alt inne i panelet er skopet `.dtp-panel .x`, se blokka over. */
    .vgt-knapp {
      display: flex;
      align-items: center;
      gap: 9px;
      width: 100%;
      box-sizing: border-box;
      padding: var(--felt-pad,9px 11px);
      border-radius: var(--felt-r,9px);
      border: 1px solid var(--border,#E5D8CF);
      background: var(--surface,#fff);
      color: var(--text,#1D1D1D);
      font: 500 13px/1.35 Inter,system-ui,sans-serif;
      text-align: left;
      cursor: pointer;
      transition: border-color .12s,box-shadow .12s;
    }
    .vgt-knapp svg {
      width: 16px;
      height: 16px;
      flex: 0 0 auto;
      color: var(--text-muted,#7A6E68);
    }
    .vgt-knapp-tekst {
      font-family: 'JetBrains Mono',ui-monospace,monospace;
      font-variant-numeric: tabular-nums;
    }
    .vgt-knapp.tom .vgt-knapp-tekst {
      font-family: Inter,system-ui,sans-serif;
      color: var(--text-muted,#7A6E68);
    }
    .vgt-knapp:hover:not(:disabled) { border-color: var(--text-muted,#7A6E68); }
    .vgt-knapp:disabled { opacity: .6; cursor: default; }
    .vgt-knapp:focus-visible {
      outline: none;
      border-color: var(--primary,#F71B00);
      box-shadow: var(--fokus-ring,0 0 0 3px rgba(247,27,0,.16));
    }
    /* `.modal button` (0,1,1) maler om knapper inne i modaler — gjentas her
       med modal-spesifisitet, samme felle som dtp- og mb-komponentene. */
    .modal .vgt-knapp,
    .modal-content .vgt-knapp {
      background: var(--surface,#fff);
      border-color: var(--border,#E5D8CF);
      color: var(--text,#1D1D1D);
    }
    .dtp-panel .vgt-topp {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 10px;
    }
    .dtp-panel .vgt-na {
      font: 500 21px/1 'JetBrains Mono',ui-monospace,monospace;
      font-variant-numeric: tabular-nums;
      color: var(--text,#1D1D1D);
    }
    .dtp-panel .vgt-just { display: flex; gap: 5px; }
    .dtp-panel .vgt-pm {
      padding: 5px 9px;
      border-radius: 7px;
      border: 1px solid var(--border,#E5D8CF);
      background: var(--surface,#fff);
      color: var(--text-muted,#7A6E68);
      font: 600 11px/1 Inter,sans-serif;
      cursor: pointer;
    }
    .dtp-panel .vgt-pm:hover { border-color: var(--text-muted,#7A6E68); color: var(--text,#1D1D1D); }
    .dtp-panel .vgt-chips { display: flex; flex-wrap: wrap; gap: 5px; }
    .dtp-panel .vgt-chip {
      padding: 6px 11px;
      border-radius: 999px;
      border: 1px solid var(--border,#E5D8CF);
      background: transparent;
      color: var(--text,#1D1D1D);
      font: 500 12px/1 'JetBrains Mono',ui-monospace,monospace;
      font-variant-numeric: tabular-nums;
      cursor: pointer;
    }
    .dtp-panel .vgt-chip:hover { border-color: var(--text-muted,#7A6E68); }
    .dtp-panel .vgt-chip.valgt {
      background: var(--primary,#F71B00);
      border-color: var(--primary,#F71B00);
      color: #fff;
    }
    .dtp-panel .vgt-rute {
      display: grid;
      grid-template-columns: repeat(8,1fr);
      gap: 4px;
    }
    .dtp-panel .vgt-celle {
      padding: 7px 0;
      border-radius: 7px;
      border: 1px solid transparent;
      background: var(--bg,#FAF6F2);
      color: var(--text,#1D1D1D);
      font: 500 12.5px/1 'JetBrains Mono',ui-monospace,monospace;
      font-variant-numeric: tabular-nums;
      cursor: pointer;
    }
    .dtp-panel .vgt-celle:hover { border-color: var(--text-muted,#7A6E68); }
    .dtp-panel .vgt-celle.valgt {
      background: var(--primary,#F71B00);
      border-color: var(--primary,#F71B00);
      color: #fff;
    }
    /* Verdi utenfor rutenettet (importert 23 min) — vises heller enn å
       forsvinne stille, samme regel som dtp sitt avvikende minutt. */
    .dtp-panel .vgt-celle.avvik,
    .dtp-panel .vgt-pille.avvik { border-style: dashed; }
    .dtp-panel .vgt-piller { display: flex; flex-wrap: wrap; gap: 5px; }
    .dtp-panel .vgt-pille {
      min-width: 38px;
      padding: 6px 9px;
      border-radius: 999px;
      border: 1px solid var(--border,#E5D8CF);
      background: transparent;
      color: var(--text,#1D1D1D);
      font: 500 12px/1 'JetBrains Mono',ui-monospace,monospace;
      font-variant-numeric: tabular-nums;
      cursor: pointer;
    }
    .dtp-panel .vgt-pille:hover { border-color: var(--text-muted,#7A6E68); }
    .dtp-panel .vgt-pille.valgt {
      background: var(--primary,#F71B00);
      border-color: var(--primary,#F71B00);
      color: #fff;
    }
    .dtp-panel .vgt-fri {
      width: 100%;
      box-sizing: border-box;
      padding: var(--felt-pad,9px 11px);
      border-radius: var(--felt-r,9px);
      border: 1px solid var(--border,#E5D8CF);
      background: var(--surface,#fff);
      color: var(--text,#1D1D1D);
      font: 500 13px Inter,system-ui,sans-serif;
    }
    .dtp-panel .vgt-fri:focus {
      outline: none;
      border-color: var(--primary,#F71B00);
      box-shadow: var(--fokus-ring,0 0 0 3px rgba(247,27,0,.16));
    }
    .dtp-panel .vgt-fri.ugyldig { border-color: var(--st-feil-tekst,#B42318); }
    @media (max-width:768px) {
      .dtp-panel .vgt-rute { grid-template-columns: repeat(6,1fr); }
      .dtp-panel .vgt-celle { padding: 10px 0; }
      .dtp-panel .vgt-pille { padding: 9px 12px; }
      .dtp-panel .vgt-fri { font-size: 16px; }
    }
    @media (prefers-reduced-motion:no-preference) {
      .dtp-panel:not([hidden]) {
        animation: dtpInn var(--anim-tid-hurtig,.18s) var(--anim-kurve,cubic-bezier(.2,.8,.3,1)) backwards;
      }
      @keyframes dtpInn {
        from {
          opacity: 0;
          transform: translateY(calc(var(--anim-avstand,10px)*-.5));
        }
      }
      @media (max-width:768px) {
        .dtp-panel:not([hidden]) {
          animation: dtpArkInn var(--anim-tid-panel,.26s) var(--anim-kurve,cubic-bezier(.2,.8,.3,1)) backwards;
        }
        @keyframes dtpArkInn {
          from {
            transform: translateY(16px);
            opacity: .4;
          }
        }
      }
    }