/* ===========================================================================
   Tema-variabler. --tema-primaer/--tema-sekundaer overstyres per installasjon
   av favicon() i funksjoner.php (leser tema_konfig.php). Verdiene under er kun
   fallback dersom den injiserte <style>-blokken av en eller annen grunn ikke
   lastes.
   =========================================================================== */
:root {
    --tema-primaer: #015b64;
    --tema-primaer-rgb: 1,91,100;
    --tema-sekundaer: #c0e1dd;
    --tema-sekundaer-rgb: 192,225,221;

    /* Overflate/tekst/bakgrunn er IKKE valgbare per installasjon — faste verdier styrt
       kun av lys/mørk-bryteren (samme prinsipp som varelager-appen). */
    --tema-overflate: #ffffff;
    --tema-tekst: #1a1a1a;
    --tema-tekst-svak: #5b6b6d;
    --tema-bakgrunn: #f4f6f6;
    --tema-kant: rgba(1,91,100,0.15);
}

html[data-mode="dark"] {
    color-scheme: dark;
    /* Samme faste gråtoner som varelager-appen sin mørke modus (#3c4043/#202124/#e8e8e8) —
       --tema-primaer/--tema-sekundaer overstyres separat av favicon() med det valgte
       fargeparet fra hentMorkeFargepar() (TEMA_MORK_FARGE i tema_konfig.php). */
    --tema-overflate: #3c4043;
    --tema-tekst: #e8e8e8;
    --tema-tekst-svak: #b3b6b8;
    --tema-bakgrunn: #202124;
    --tema-kant: rgba(255,255,255,0.12);
}

/* ===========================================================================
   MIDLERTIDIG TEST (reverserbar) — overstyrer --tema-primaer i mørk modus til å bruke
   samme farge som --tema-sekundaer (den grønnfargen valgt kategori har som bakgrunn), for
   å se hvordan alt som bruker --tema-primaer (hover-farger, aktive felt, overskrifter osv.)
   ser ut med den fargen i stedet for det valgte mørk-fargeparet. Denne blokken må lastes
   ETTER favicon() sin inline <style> (den er det — style.css lastes alltid etter den
   inline blokken i <head>), så !important + samme selektor vinner via kildeorden.
   Å REVERSERE: slett hele denne blokken. =========================================== */
html[data-mode="dark"] {
    --tema-primaer: var(--tema-sekundaer) !important;
    --tema-primaer-rgb: var(--tema-sekundaer-rgb) !important;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--tema-bakgrunn);
    color: var(--tema-tekst);
    transition: background 0.15s, color 0.15s;
}
a { color: var(--tema-primaer); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
button { font-family: inherit; }

/* ===========================================================================
   Hovedlayout: full-høyde sidebar til venstre (logo øverst i kolonnen, à la
   Nginx Proxy Manager) + innholdskolonne til høyre (egen header, brødsmulesti,
   innhold + "På denne siden" til høyre).
   =========================================================================== */
#app-omrade {
    display: flex;
    height: 100vh;
}

/* --- Sidenavigasjon (venstre meny), full høyde --- */
#sidebar {
    width: 280px;
    flex-shrink: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: rgba(var(--tema-sekundaer-rgb),0.35);
    border-right: 1px solid var(--tema-kant);
}
/* I mørk modus gir samme lyse tone dårlig kontrast (aktiv-fremhevingen bruker samme farge,
   og flaten skiller seg unaturlig fra resten av den mørke paletten) — behold den vanlige
   overflatefargen der i stedet. */
html[data-mode="dark"] #sidebar { background: var(--tema-overflate); }

/* Tooltips — samme stil som varelager sin løsning (Bootstrap sin native tooltip-komponent,
   temaet via --bs-tooltip-*-CSS-variablene, ikke egen ::before/::after-CSS). Lys modus er
   identisk med varelager (temaets primaerfarge). Mørk modus er BEVISST forenklet i stedet for
   varelager sin color-mix()-uregning (matchet mot et spesifikt kort der) — brukeren ba
   spesifikt om "grønnfargen som benyttes ellers i mørk modus" her, altså rett og slett
   --tema-primaer, samme som modal-titler/lukk-kryss osv. Se js/main.js for
   bootstrap.Tooltip()-initialisering (finnes ikke i appen fra før — kun native
   title-attributter, ingen egen tooltip-styling). */
.tooltip {
    --bs-tooltip-bg: rgba(var(--tema-primaer-rgb),1);
    --bs-tooltip-color: #fff;
}
html[data-mode="dark"] .tooltip {
    --bs-tooltip-bg: var(--tema-primaer);
    --bs-tooltip-color: #fff;
}

/* Bootstrap sine egne hvite flater (modal-vinduene i _dialogmodaler.php, samt input-feltet
   i prompt-modalen) følger ikke --tema-overflate/--tema-tekst av seg selv siden Bootstrap
   definerer dem med egne, faste standardverdier — samme mønster som i varelager. */
html[data-mode="dark"] .modal-content {
    background-color: var(--tema-overflate);
    color: var(--tema-tekst);
}
/* Lukk-krysset (×) i dialogboksene — Bootstrap sin .btn-close er en hardkodet svart SVG
   (background-image), ikke tekst/glyph, så en vanlig color:-regel virker ikke på den. Bruker
   i stedet SVG-en (Bootstraps egen --bs-btn-close-bg-variabel) som en MASKE og fyller formen
   med --tema-primaer via background-color — fungerer automatisk med hvilken som helst
   installasjons mørk-modus-aksentfarge, uten en hardkodet hex-verdi. */
html[data-mode="dark"] .modal .btn-close {
    background-image: none;
    -webkit-mask-image: var(--bs-btn-close-bg);
    mask-image: var(--bs-btn-close-bg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    /* 1em (IKKE contain) — matcher Bootstrap sin egen background-size:1em auto for
       .btn-close. "contain" skalerte i stedet ikonet til å fylle HELE den paddede boksen
       (~1.5em med content-box), synlig mye større enn originalen. */
    -webkit-mask-size: 1em;
    mask-size: 1em;
    background-color: var(--tema-primaer);
    opacity: 1;
}
html[data-mode="dark"] .form-control {
    background-color: var(--tema-overflate);
    color: var(--tema-tekst);
    border-color: rgba(var(--tema-primaer-rgb),0.3);
}
/* Dialogbokser i mørk modus: overskrift i grønnfargen, skillelinjene (header/footer) tonet
   betydelig ned MEN fortsatt grønne (i stedet for Bootstrap sin nøytrale grå standard), og
   fokus-tilstanden på tekstfeltet (promptModal) i grønt i stedet for Bootstrap sin egen
   blå standard-fokusring. */
html[data-mode="dark"] .modal-title { color: var(--tema-primaer); }
html[data-mode="dark"] .modal-header,
html[data-mode="dark"] .modal-footer {
    border-color: rgba(var(--tema-primaer-rgb),0.2);
}
html[data-mode="dark"] .form-control:focus {
    border-color: var(--tema-primaer);
    box-shadow: 0 0 0 0.2rem rgba(var(--tema-primaer-rgb),0.25);
}
/* Dialogboksenes knapper (_dialogmodaler.php) — egne klasser i stedet for inline style, som
   ikke kan uttrykke :hover. --tema-primaer(-rgb) tilpasser seg allerede automatisk lys/mørk
   modus (satt av favicon() i funksjoner.php), så samme regler her fungerer korrekt i begge
   uten egne html[data-mode="dark"]-varianter. */
.modal-knapp-avbryt {
    background: none;
    border: 1px solid rgba(var(--tema-primaer-rgb),0.4);
    color: var(--tema-primaer);
}
.modal-knapp-avbryt:hover {
    background: rgba(var(--tema-primaer-rgb),0.1);
    border-color: rgba(var(--tema-primaer-rgb),0.7);
    color: var(--tema-primaer);
}
.modal-knapp-bekreft {
    background: rgba(var(--tema-primaer-rgb),1);
    color: white;
}
/* filter:brightness i stedet for en fast mørkere hex-verdi — fungerer korrekt uansett hvilken
   --tema-primaer-farge/lys-mørk-modus som er aktiv, uten å måtte regne ut en egen
   hover-nyanse per tema/modus. */
.modal-knapp-bekreft:hover {
    /* Bakgrunnen må gjentas her (samme verdi som grunnregelen) — Bootstrap sin egen
       .btn:hover-regel (høyere spesifisitet enn en enkelt klasse uten :hover) overstyrer
       ellers background til gjennomsiktig (--bs-btn-hover-bg sin standardverdi), som gjorde
       den hvite teksten usynlig mot den nå hvite modal-bunnen. */
    background: rgba(var(--tema-primaer-rgb),1);
    filter: brightness(0.9);
    color: white;
}
/* Slette-relaterte bekreft-dialoger (apneBekreftModal(..., farlig=true), se redigering.js)
   — rød Bekreft-knapp i stedet for temaets grønnfarge, i BEGGE lys/mørk modus. Fast hex (ikke
   --tema-primaer) siden rødt-for-farlig er et universelt varselsignal, ikke et
   installasjons-/modusavhengig temavalg. Kombinert selektor (to klasser) for å trygt
   overstyre grunnregelen uansett kildeorden. */
.modal-knapp-bekreft.modal-knapp-bekreft-farlig {
    background: #dc3545;
}
.modal-knapp-bekreft.modal-knapp-bekreft-farlig:hover {
    background: #dc3545;
    filter: brightness(0.9);
    color: white;
}
#sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 16px;
    /* Skillelinje innrykket til samme marg som innholdet (16px), ikke helt ut til kanten —
       border-bottom ville gått kant-til-kant, derfor brukes en innrykket bakgrunnsstrek. */
    background-image: linear-gradient(var(--tema-kant), var(--tema-kant));
    background-repeat: no-repeat;
    background-size: calc(100% - 32px) 1px;
    background-position: 16px bottom;
    color: var(--tema-tekst);
    flex-shrink: 0;
}
#sidebar-logo img { height: 48px; width: auto; }

/* Eget logo for mørk modus (valgfritt, TEMA_LOGO_MORK — se echoLogoImg() i funksjoner.php).
   Kun to <img>-tagger i markupet når dette faktisk er i bruk; ellers uendret én <img>. Lys
   modus urørt uansett — .logo-lys-variant vises alltid som standard, kun mørk modus skjuler
   den og viser .logo-mork-variant i stedet. */
.logo-mork-variant { display: none; }
html[data-mode="dark"] .logo-lys-variant { display: none; }
html[data-mode="dark"] .logo-mork-variant { display: inline; }
/* translateY: justerer teksten ned til samme grunnlinje som "Varelager" i selve logoen
   (målt pikselnøyaktig — ikke midtstilt mot hele logo-bildet, se conversation). */
#sidebar-logo span { font-weight: 500; font-size: 12px; color: var(--tema-tekst-svak); transform: translateY(3px); }
#sidebar-logo:hover { text-decoration: none; opacity: 0.85; }
#sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 0; }

#sidebar-liste-kategorier.skjult, .sidebar-kategori-panel.skjult { display: none; }
.sidebar-tilbake {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 12px;
    color: var(--tema-tekst-svak);
    font-size: 13px;
    cursor: pointer;
    border: none;
    border-right: 3px solid transparent;
    background: none;
    /* Streken skal stoppe i samme innrykk (16px) som skillelinjene mellom seksjonene
       (#sidebar-logo/.sidebar-skjermbilder-lenke), ikke gå helt ut til sidebar-kanten —
       derfor calc() i stedet for 100% + egen margin (som ville gitt overflow). */
    width: calc(100% - 16px);
    text-align: left;
}
.sidebar-tilbake:hover { color: var(--tema-primaer); font-weight: 700; border-right-color: var(--tema-primaer); }

/* Kategorier i lukket liste: KUN ikon/tekst mot bakgrunnen — ikke knapper. Native
   <button>-utseende (kant/bakgrunn/skygge) nullstilles eksplisitt her. Hover endrer
   kun fargen på ikon/tekst, ingen bakgrunn. */
.sidebar-kategori-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 16px;
    color: var(--tema-tekst);
    cursor: pointer;
    font-size: 14px;
    background: none;
    border: none;
    border-right: 3px solid transparent;
    border-radius: 0;
    appearance: none;
    text-align: left;
}
.sidebar-kategori-item:hover, .sidebar-kategori-item.aktiv { color: var(--tema-primaer); font-weight: 700; border-right-color: var(--tema-primaer); text-decoration: none; }
.sidebar-kategori-item i { color: currentColor; width: 16px; text-align: center; }
/* Navnet får fast/delt bredde (flex:1 — fyller all ledig plass i raden) slik at
   antall-badgen alltid havner på nøyaktig samme x-posisjon uansett hvor langt kategorinavnet
   er — de står dermed "på linje" (i kolonne) med hverandre på tvers av radene, i stedet for
   å henge rett etter et navn av varierende lengde. Navnet får fremdeles bryte til to linjer
   ved behov (ingen white-space:nowrap) — kun selve bredden/posisjonen er låst, ikke innholdet. */
.sidebar-kategori-navn { flex: 1; min-width: 0; }

/* Rad med kategori-knappen + skjul/vis-øye ved siden av, i den lukkede kategorilisten
   (samme mønster som Skjermbilder-lenken og den åpne kategoriens tittelrad). En egen
   knapp kan ikke ligge INNI .sidebar-kategori-item lenger siden den selv er en <button>
   (ugyldig å neste knapper i HTML) — derfor egen rad-wrapper med to knapper side om side. */
.sidebar-kategori-item-rad {
    display: flex;
    align-items: center;
    padding-right: 16px;
    border-right: 3px solid transparent;
}
/* Hover-/aktiv-streken flyttet hit fra .sidebar-kategori-item selv (border-right: none der,
   se under) — item-boksen er bare flex:1 og slutter FØR øye-knappen/16px-paddingen, så en
   strek på selve item-en stoppet ved margen i stedet for å gå helt inntil sidebarens høyre
   border (bevisst brukerkrav). Raden fyller derimot hele bredden (#sidebar-nav har ingen
   horisontal padding), så streken her lander flush mot kanten. .aktiv må også legges på
   raden server-side der en rad kan være "aktiv" (se _sidenav.php, Skjermbilder-lenken). */
.sidebar-kategori-item-rad:hover,
.sidebar-kategori-item-rad.aktiv {
    border-right-color: var(--tema-primaer);
}
.sidebar-kategori-item-rad .sidebar-kategori-item {
    width: auto;
    flex: 1;
    min-width: 0;
    padding-right: 0;
    border-right: none;
}

/* Delt skjul/vis-øye-knapp — brukt i lukket kategoriliste, åpen kategori-tittel og
   Skjermbilder-lenken. */
.sidebar-skjul-knapp {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    color: var(--tema-tekst-svak);
    cursor: pointer;
    flex-shrink: 0;
    font-size: 14px; /* eksplisitt — <button> arver IKKE alltid font-size fra omgivelsene
                         (avhenger av nettleser/kontekst), som ga ulik ikonstørrelse før */
    padding: 9px 0 9px 4px;
}
.sidebar-skjul-knapp:hover { color: var(--tema-primaer); }
/* Delt med skjul/vis-knappen (samme størrelse/plassering), men rødt ved hover — brukt på
   slett-knappen for kategorier, en destruktiv handling som skal skille seg visuelt ut. */
.sidebar-skjul-knapp.sidebar-slett-knapp:hover { color: #dc3545; }

/* Åpen kategoris tittelrad: farge på tekst OG bakgrunnsfarge. Bakgrunnen på hele
   venstreseksjonen bruker samme (svake) farge, så denne må være tydelig sterkere
   (0.65 i stedet for 0.35) + en fargekant til venstre for å skille seg synlig ut. */
.sidebar-kategori-apen-tittel {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    font-weight: 700;
    font-size: 14px;
    color: var(--tema-primaer);
    margin-bottom: 4px;
}
.sidebar-kategori-apen-aktiv {
    background: rgba(var(--tema-sekundaer-rgb),0.65);
}
/* Mørk modus: samme kontrastproblem som "Anbefalt"-ikonene — --tema-primaer for likt den
   grønnlige bakgrunnen. Hvit(aktig) tekst i stedet, kun mørk modus. Ikonet (fa-book-open)
   har ingen egen fargeregel — arver denne via normal CSS-nedarving. */
html[data-mode="dark"] .sidebar-kategori-apen-tittel { color: var(--tema-tekst); }

.sidebar-side-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 13px 8px 32px; /* innrykk = "en tab til høyre" */
    color: var(--tema-tekst);
    font-size: 13.5px;
    border-right: 3px solid transparent;
    /* Streken skal gå helt inntil sidebarens høyre border (bevisst brukerkrav — tidligere
       stoppet den 16px før kanten, samme innrykk som skillelinjene mellom seksjonene, men
       det så ut som streken fulgte en marg i stedet for å avslutte boksen). */
    width: 100%;
}
.sidebar-side-item:hover, .sidebar-side-item.aktiv { color: var(--tema-primaer); font-weight: 700; border-right-color: var(--tema-primaer); text-decoration: none; }
.sidebar-side-item:hover i, .sidebar-side-item.aktiv i { opacity: 1; }
.sidebar-side-item i { color: currentColor; width: 14px; text-align: center; font-size: 12px; opacity: 0.75; }

/* "Ny kategori"/"Ny side"-knappene — dempet farge i hviletilstand, men skal fortsatt få
   hover-effekten som resten av .sidebar-kategori-item/.sidebar-side-item. Satt som EGEN
   klasse (ikke inline style) med lik spesifisitet som grunnklassen, slik at den etablerte
   :hover-regelen (høyere spesifisitet) fortsatt vinner — en inline style ville alltid
   vunnet over :hover uansett, og var derfor den reelle årsaken til at hover ikke virket. */
.sidebar-leggtil-knapp {
    color: var(--tema-tekst-svak);
    /* calc() i stedet for 100% + margin (som ville gitt overflow) — se .sidebar-tilbake. */
    width: calc(100% - 16px);
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
}
.sidebar-skjult-merke {
    font-size: 10px;
    background: rgba(220,53,69,0.12);
    color: #dc3545;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: auto;
}
/* Antall sider (kategori) / antall bilder (Skjermbilder-lenken) — sitter rett etter
   navnet, IKKE margin-left:auto som .sidebar-skjult-merke (som fortsatt skal presses
   helt til høyre når begge vises samtidig). */
.sidebar-antall-merke {
    font-size: 10px;
    font-weight: 600;
    background: var(--tema-kant);
    color: var(--tema-tekst-svak);
    padding: 1px 6px;
    border-radius: 10px;
    flex-shrink: 0;
    /* Bredden settes likt for alle badger av js/main.js (basert på den bredeste av dem, f.eks.
       et 2-sifret antall) — tallet skal fortsatt vises midtstilt i den (nå eventuelt bredere)
       badgen, ikke klistret til venstre. */
    text-align: center;
}
/* Skjermbilder-lenken ligger nå i samme rad-wrapper-mønster som kategoriene
   (.sidebar-kategori-item-rad, se lenger opp) — øye-knappen (kun innlogget) er en EGEN
   sibling ved siden av selve <a>-en, ikke nestet inni den som før. Nødvendig for at
   antall-badgen (.sidebar-antall-merke) alltid skal havne på nøyaktig samme x-posisjon som
   badgene i kategori-listen over — når øye-knappen lå INNI <a>-en konkurrerte den (via sin
   egen margin-left:auto) med badgen om samme ledige plass etter navnet (som har flex:1),
   og presset badgen synlig lenger til venstre enn i kategori-radene. Skillelinjen over
   (background-image) flyttet til selve rad-wrapperen (.sidebar-skjermbilder-rad) slik at den
   fortsatt spenner over HELE radens bredde (inkl. under øye-knappen), ikke bare <a>-en. */
.sidebar-skjermbilder-rad {
    margin-top: 8px;
    padding-top: 12px;
    background-image: linear-gradient(var(--tema-kant), var(--tema-kant));
    background-repeat: no-repeat;
    background-size: calc(100% - 32px) 1px;
    background-position: 16px top;
}

/* --- Mobil sidebar-hamburger/bakteppe (posisjonert av #innhold-header) --- */
#sidebar-hamburger { display: none; }
#sidebar-bakteppe { display: none; }
#mobil-tittel { display: none; align-items: center; margin-right: 8px; }
#mobil-tittel img { height: 48px; width: auto; }

/* ===========================================================================
   Innholdskolonne: egen header (alltid synlig søk + tema-bryter + innlogging),
   brødsmulesti, og innhold+"På denne siden" side ved side.
   =========================================================================== */
#content-omrade {
    flex: 1;
    min-width: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

#innhold-header {
    position: relative; /* referanseramme for .header-sok-wrapper sin absolutte sentrering */
    /* z-index her løfter HELE headeren (og dermed søkeresultat-dropdownen inni) til en
       egen stacking context over #content-flex under — uten denne "fanges" dropdownen sin
       egen z-index:150 inni .header-sok-wrapper sin lokale stacking context (skapt av
       transform-en den bruker til sentrering), og taper mot vanlig innhold lenger ned på
       siden (f.eks. skjermbilde-miniatyrer) selv om 150 isolert sett er en høy verdi. */
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 16px;
    height: 84px; /* samme høyde som #sidebar-logo, slik at skillelinjene ligger i vater */
    padding: 0 20px;
    background: var(--tema-bakgrunn);
    border-bottom: 1px solid var(--tema-kant);
    flex-shrink: 0;
}
/* Sentrert med position:absolute (i stedet for flex+margin:auto) slik at søkefeltet
   havner på nøyaktig samme sted som det sentrerte søkefeltet på forsiden under — begge er
   nå sentrert på #innhold-header/#hovedinnhold sin FULLE bredde, uavhengig av at
   #header-hoyre (bryter+meny-knapp) bare tar plass i den ene enden og ellers ville dratt
   den flex-sentrerte midten skjevt til venstre. Samme maks-bredde (480px) begge steder. */
.header-sok-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 480px;
}
.header-sok-wrapper .hovedsok-wrapper { min-width: 0; }
#header-hoyre { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* --- Tema-bryter: slider med ikon på selve knotten, à la Nginx Proxy Manager --- */
.tema-bryter { display: inline-flex; cursor: pointer; }
.tema-bryter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tema-bryter-spor {
    position: relative;
    width: 52px;
    height: 28px;
    border-radius: 14px;
    background: var(--tema-bakgrunn);
    border: 1.5px solid var(--tema-kant);
    transition: background 0.2s, border-color 0.2s;
}
.tema-bryter-knapp {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--tema-overflate);
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}
.tema-bryter-knapp i { position: absolute; font-size: 11px; transition: opacity 0.15s; }
.tema-bryter-knapp .fa-sun { color: #d9a441; opacity: 1; }
.tema-bryter-knapp .fa-moon { color: var(--tema-tekst-svak); opacity: 0; }
.tema-bryter:hover .tema-bryter-spor { border-color: rgba(var(--tema-primaer-rgb),0.5); box-shadow: 0 0 0 3px rgba(var(--tema-primaer-rgb),0.12); }
.tema-bryter input:checked ~ .tema-bryter-spor { border-color: rgba(var(--tema-primaer-rgb),0.5); }
.tema-bryter input:checked ~ .tema-bryter-spor .tema-bryter-knapp { transform: translateX(24px); }
.tema-bryter input:checked ~ .tema-bryter-spor .fa-sun { opacity: 0; }
.tema-bryter input:checked ~ .tema-bryter-spor .fa-moon { opacity: 1; color: var(--tema-primaer); }
.tema-bryter input:focus-visible ~ .tema-bryter-spor { outline: 2px solid var(--tema-primaer); outline-offset: 2px; }

#topplinje-meny { position: relative; }
#meny-knapp {
    background: none;
    border: none;
    color: var(--tema-tekst-svak);
    font-size: 18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
}
#meny-knapp:hover { background: rgba(var(--tema-primaer-rgb),0.08); color: var(--tema-primaer); }
#meny-innhold {
    display: none;
    position: absolute;
    top: 44px;
    right: 0;
    min-width: 240px;
    background: var(--tema-overflate);
    border: 1px solid var(--tema-kant);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    padding: 6px;
    z-index: 200;
}
#meny-innhold.aktiv { display: block; }
.meny-lenke {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--tema-tekst);
}
.meny-lenke:hover { background: rgba(var(--tema-primaer-rgb),0.08); text-decoration: none; }
.meny-lenke-dev { color: var(--tema-tekst-svak); font-size: 13px; }
#innlogget-som { padding: 6px 10px; font-size: 12px; color: var(--tema-tekst-svak); }
.meny-skille { height: 1px; background: var(--tema-kant); margin: 6px 4px; }

/* Lys/mørk-bryteren duplisert inni tre-prikker-menyen — skjult som standard (den vanlige,
   alltid synlige bryteren i headeren brukes da), vises kun på smale skjermer der det ikke
   er plass til den ved siden av søk/logo/hamburger (se @media under). */
.tema-bryter-i-meny, .tema-bryter-i-meny-skille { display: none; }
.tema-bryter-i-meny {
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--tema-tekst);
    cursor: pointer;
}
.tema-bryter-i-meny:hover { background: rgba(var(--tema-primaer-rgb),0.08); }
.tema-bryter-i-meny-tekst { flex: 1; }

/* --- Innhold + "På denne siden" side ved side --- */
/* Scroller som ÉN enhet (hovedinnhold + "På denne siden" sammen) — scrollbaren havner
   dermed helt ute til høyre på hele siden, ikke bare til høyre for hovedinnhold-seksjonen.
   align-items:flex-start (i stedet for flex-stretch, standardverdien) er nødvendig for at
   #hovedinnhold sin faktiske innholdshøyde skal kunne måles/vokse riktig i JS-en som sikrer
   at selv den siste overskriften i "På denne siden" kan scrolles helt til toppen — med
   stretch blir høyden kunstig låst til containerens synlige høyde. */
/* scroll-behavior:smooth er BEVISST ikke satt her — den kan gjøre vanlig musehjul-
   scrolling hakkete i Chrome/Firefox (nettleseren "glatter ut" hvert enkelt hjul-hakk som
   egen animasjon). "På denne siden"-klikk bruker i stedet en egen JS-styrt
   scrollTo({behavior:'smooth'}) kun for den ene handlingen, se js/main.js. */
#content-flex { flex: 1; min-height: 0; display: flex; overflow-y: auto; align-items: flex-start; }
#hovedinnhold { flex: 1; min-width: 0; padding: 28px 32px 60px; }
.innhold-bredde { max-width: 780px; margin: 0 auto; }

#pa-denne-siden {
    width: 220px;
    flex-shrink: 0;
    align-self: flex-start;
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
    padding: 28px 20px 40px;
    border-left: 1px solid var(--tema-kant);
}
#pa-denne-siden h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--tema-tekst-svak); margin: 0 0 10px; }
#pa-denne-siden-liste { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--tema-kant); }
#pa-denne-siden-liste li { margin: 0; }
#pa-denne-siden-liste a {
    display: block;
    padding: 5px 0 5px 14px;
    margin-left: -2px;
    border-left: 2px solid transparent;
    color: var(--tema-tekst-svak);
    font-size: 13px;
    line-height: 1.4;
}
#pa-denne-siden-liste li.nivaa-3 a { padding-left: 26px; font-size: 12.5px; }
#pa-denne-siden-liste a:hover { color: var(--tema-primaer); text-decoration: none; }
#pa-denne-siden-liste a.aktiv { color: var(--tema-primaer); border-left-color: var(--tema-primaer); font-weight: 600; }

/* ===========================================================================
   Søk (delt mellom header-instansen og forsidens sentrerte hero-instans)
   =========================================================================== */
/* Grid med tre kolonner (1fr auto 1fr) i stedet for enkel text-align:center — lar
   overskriften forbli pikselnøyaktig sentrert i midtkolonnen uansett bredden på
   bredde-toggle-knappen i høyrekolonnen (venstrekolonnen er en usynlig, like bred
   motvekt). Samme max-width/padding som boksene under (#kategori-bokser osv.) — knappen
   skal sitte inntil DERES høyremarg, ikke #hovedinnholds egen, og flytte seg med når
   #forside-innhold-bredde.bredde-full slår inn (se lenger nede). */
#forside-sok-omrade { display: grid; grid-template-columns: 1fr auto 1fr; align-items: flex-start; max-width: 860px; margin: 0 auto; padding: 0 16px 8px; }
#forside-sok-omrade h1 { grid-column: 2; text-align: center; font-size: 26px; margin: 0 0 18px; color: var(--tema-tekst); }

.hovedsok-wrapper { position: relative; width: 100%; }
.hovedsok-felt {
    width: 100%;
    padding: 10px 16px 10px 40px;
    font-size: 14.5px;
    border-radius: 20px;
    border: 1.5px solid var(--tema-kant);
    background: rgba(var(--tema-sekundaer-rgb),0.35);
    color: var(--tema-tekst);
    outline: none;
}
/* Samme bakgrunnsfarge som #sidebar (--tema-overflate) i mørk modus, på brukerønske. */
html[data-mode="dark"] .hovedsok-felt { background: var(--tema-overflate); }
.hovedsok-felt:focus { border-color: rgba(var(--tema-primaer-rgb),1); box-shadow: 0 0 0 3px rgba(var(--tema-primaer-rgb),0.15); }
.hovedsok-wrapper i.fa-magnifying-glass {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: var(--tema-tekst-svak); pointer-events: none; font-size: 13px;
}
.sok-resultater {
    /* Skal alltid ligge fremst, over andre overlegg som mobil-sidemenyen (300) og
       tre-prikker-menyen (200) — se også #innhold-header sin egen z-index over. */
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 400;
    text-align: left;
    background: var(--tema-overflate); border: 1px solid var(--tema-kant); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    display: none; overflow: hidden; max-height: 70vh; overflow-y: auto;
}
.sok-resultater.aktiv { display: block; }
.sok-resultat-item { display: block; padding: 11px 16px; border-bottom: 1px solid var(--tema-kant); color: var(--tema-tekst); }
.sok-resultat-item:last-child { border-bottom: none; }
.sok-resultat-item:hover { background: rgba(var(--tema-primaer-rgb),0.06); text-decoration: none; }
.sok-resultat-kategori { font-size: 11px; color: var(--tema-tekst-svak); text-transform: uppercase; letter-spacing: 0.03em; }
.sok-resultat-tittel { font-weight: 600; }
.sok-resultat-tittel mark { background: rgba(var(--tema-sekundaer-rgb),0.7); color: inherit; border-radius: 2px; }
.sok-ingen-treff { padding: 14px 16px; color: var(--tema-tekst-svak); font-size: 13.5px; }

/* Bredde-toggle-knappen på linje med overskriften over — se #forside-sok-omrade sin egen
   grid-kommentar. Kun store skjermer, samme terskel og begrunnelse som #bredde-toggle-knapp
   (se side.php sin egen knapp). */
#forside-bredde-toggle-knapp { display: none; grid-column: 3; justify-self: end; }
@media (min-width: 1600px) {
    #forside-bredde-toggle-knapp { display: inline-flex; }
}
#forside-innhold-bredde.bredde-full #forside-sok-omrade,
#forside-innhold-bredde.bredde-full #forside-anbefalt-omrade,
#forside-innhold-bredde.bredde-full #forside-side-lister,
#forside-innhold-bredde.bredde-full #kategori-bokser {
    max-width: none;
}

#kategori-bokser {
    display: grid;
    /* auto-fit (IKKE auto-fill): auto-fill reserverer tomme "fantom-kolonner" for hvor mange
       220px-bokser som kunne fått plass i raden — i bredde-full-modus (se lenger opp) med få
       kategorier havnet dermed boksene klemt til venstre, med tom plass resten av raden.
       auto-fit kollapser de tomme kolonnene til 0px, slik at 1fr-andelen fordeles på de
       faktiske boksene i stedet, som da vokser for å fylle hele bredden. */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    max-width: 860px;
    margin: 32px auto 0;
    padding: 0 16px;
}
.kategori-boks {
    display: flex;
    /* flex-start (ikke center) — ikonet skal stå på linje med FØRSTE linje i overskriften,
       ikke sentreres mot hele (potensielt fler-linjers) tekstblokken. Se .kategori-boks i. */
    align-items: flex-start;
    gap: 12px;
    padding: 18px;
    background: var(--tema-overflate);
    border: 1px solid var(--tema-kant);
    border-radius: 10px;
    color: var(--tema-tekst);
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.kategori-boks:hover { background: rgba(var(--tema-sekundaer-rgb),0.25); text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
/* Lite ikon størrelsesmessig matchet til overskriftens linjehøyde (14.5px fet skrift,
   linjehøyde ~22px) — ikke lenger et stort "kort-ikon" som spenner hele tekstblokken (så
   feil ut når overskriften selv bryter til to linjer, se dokumentasjon.md). */
.kategori-boks i { font-size: 18px; line-height: 22px; color: var(--tema-primaer); }
.kategori-boks-navn { font-weight: 600; font-size: 14.5px; }
.kategori-boks-antall { font-size: 12px; color: var(--tema-tekst-svak); }

/* "Anbefalt" — manuelt pinnede sider (tblside.anbefalt), øverst på forsiden (over de
   automatisk genererte "Nyeste"/"Sist oppdatert"-boksene) siden dette er kuratert innhold
   admin bevisst har valgt å fremheve. Pill-kort i en rad (ikke en liste som boksene under)
   for å skille seg visuelt fra de automatiske listene. */
#forside-anbefalt-omrade { max-width: 860px; margin: 0 auto 24px; padding: 0 16px; }
#forside-anbefalt-liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.forside-anbefalt-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(var(--tema-sekundaer-rgb),0.35);
    border: 1px solid var(--tema-kant);
    border-radius: 999px;
    color: var(--tema-tekst);
    font-weight: 600;
    font-size: 13.5px;
    transition: background 0.15s;
}
.forside-anbefalt-item:hover { background: rgba(var(--tema-sekundaer-rgb),0.65); text-decoration: none; }
.forside-anbefalt-item i { color: var(--tema-primaer); font-size: 12px; }
/* Mørk modus: --tema-primaer er for lik pill-bakgrunnen (begge fra samme fargefamilie som
   --tema-sekundaer) til at ikonet skiller seg godt nok ut, spesielt ved hover. Samme farge
   som selve teksten i stedet — kun mørk modus, lys modus har god nok kontrast som den er. */
html[data-mode="dark"] .forside-anbefalt-item i { color: var(--tema-tekst); }

/* "Nyeste sider"/"Sist oppdatert" — to bokser rett under overskriften på forsiden. Samme
   bredde/luft som #kategori-bokser rett under, slik at de fremstår som én sammenhengende
   forside-seksjon. */
#forside-side-lister {
    display: grid;
    /* minmax(0,1fr) — IKKE bare 1fr — se .forside-liste-boks sin kommentar: uten dette
       nekter grid-sporet å krympe under innholdets naturlige (utekstede) bredde. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    max-width: 860px;
    margin: 0 auto 24px;
    padding: 0 16px;
}
.forside-liste-boks {
    /* Grid-elementer (og flex-elementer) har min-width:auto som standard — det overstyrer
       IKKE av seg selv av overflow:hidden/ellipsis lenger nede i treet (klassisk fallgruve).
       Uten denne nektet boksen å krympe under den lengste, ikke-avkortede tittelens
       naturlige bredde, og fløt synlig utenfor sitt eget grid-spor (og dermed høyre
       sidemarg) på mobil/nettbrett — fant og bekreftet ved å måle boksens faktiske bredde
       (466px) mot sitt tildelte grid-spor (358px) med Playwright, se dokumentasjon.md. */
    min-width: 0;
    padding: 18px;
    background: var(--tema-overflate);
    border: 1px solid var(--tema-kant);
    border-radius: 10px;
}
.forside-liste-boks h2 { font-size: 13px; font-weight: 700; color: var(--tema-tekst-svak); text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 12px; }
.forside-liste-boks ul { list-style: none; margin: 0; padding: 0; }
/* Tittel og dato på samme linje — tittelen får ellipsis fremfor å presse datoen ut av
   raden eller tvinge en linjebrytning når den er lang. */
.forside-liste-boks li {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 0;
    border-top: 1px solid var(--tema-kant);
}
.forside-liste-boks li:first-child { border-top: none; }
.forside-liste-boks li a {
    /* min-width:0 — samme fallgruve som over, denne gangen for selve flex-raden (li) sin
       ellipsis-tittel spesifikt. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: 14px;
    color: var(--tema-tekst);
}
.forside-liste-boks li a:hover { color: var(--tema-primaer); text-decoration: none; }
.forside-liste-dato { flex-shrink: 0; margin-left: auto; font-size: 12px; color: var(--tema-tekst-svak); }

/* Skjult kategori/side-indikator (kun synlig for innlogget bruker) */
.skjult-varsel {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(220,53,69,0.1);
    color: #b02a37;
    border: 1px solid rgba(220,53,69,0.25);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13.5px;
    margin-bottom: 18px;
}
html[data-mode="dark"] .skjult-varsel { color: #f0919c; }
.skjult-varsel button {
    margin-left: auto;
    background: rgba(1,91,100,1);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12.5px;
    cursor: pointer;
}

/* Sideinnhold */
.side-header { margin-bottom: 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.side-header-tekst { min-width: 0; }

/* Bredde-toggle-knappen: kun for store skjermer (se egen mediaquery under) — på mindre
   skjermer/nettbrett gir hele-bredden-visningen ikke nok gevinst til å ta plass i headeren. */
#bredde-toggle-knapp { display: none; flex-shrink: 0; }
@media (min-width: 1600px) {
    #bredde-toggle-knapp { display: inline-flex; }
}
.side-tittel { font-size: 24px; font-weight: 700; color: var(--tema-primaer); margin: 0; outline: none; }
.side-undertekst { color: var(--tema-tekst-svak); font-size: 13.5px; margin-top: 4px; }
.side-innhold { font-size: 15px; line-height: 1.7; }
.side-innhold img { border-radius: 6px; cursor: zoom-in; border: 1px solid var(--tema-kant); }
/* Sentrerer et avsnitt der eneste innhold er ett bilde (typisk et skjermbilde satt inn i
   Quill) — uten dette havner enkeltbilder venstrejustert, siden <img>/<a> (lysboks-lenken
   fra wrapBilderForGalleri()) begge forblir inline-elementer. Kravet om at <a>-en sin eneste
   barn må være selve bildet (ikke bare ETT barn generelt) unngår at et avsnitt med kun én
   vanlig tekstlenke også blir feilaktig sentrert. Vanlig tekst og avsnitt med FLERE bilder
   (side om side, se margin-regelen under) er upåvirket. */
.side-innhold p:has(> a:only-child > img:only-child) { text-align: center; }
/* Luft mellom bilder som ligger side om side i samme avsnitt — uten dette ligger de kant i
   kant, siden gap: ikke virker i vanlig inline-flyt (kun i flex/grid). */
.side-innhold p a + a { margin-left: 12px; }
/* Eksplisitte størrelser — uten disse brukte nettleseren standard h2/h3-størrelse (hhv.
   32px/25px), som ble STØRRE enn selve sidetittelen (.side-tittel, 24px). Nå følger de en
   fallende hierarki under sidetittelen i stedet for å overgå den. */
.side-innhold h1, .side-innhold h2, .side-innhold h3 { color: var(--tema-primaer); scroll-margin-top: 20px; }
.side-innhold h1 { font-size: 22px; }
.side-innhold h2 { font-size: 20px; }
.side-innhold h3 { font-size: 17px; }
/* Punktliste/nummerert liste (Quill sin «•»/«1.»-listeknapper) — Quill lagrer BEGGE som
   <ol><li data-list="bullet|ordered">, med selve punktet/tallet tegnet av CSS alene (kun i
   Quill sin egen quill.snow.css, koblet til .ql-editor — som verken lastes for anonyme
   besøkende eller noensinne er koblet til .side-innhold, uansett innloggingsstatus). Uten
   disse reglene rendret nettleseren <ol><li> med sin egen innebygde nummerering uansett
   data-list-verdi — punktlister ble dermed alltid nummererte lister ved visning/lagring.
   Reglene under er samme counter()-teknikk som Quill sin egen CSS, portert fra .ql-editor
   til .side-innhold (kun bullet/nummerert + nøstet nivå via Tab — sjekkliste/RTL finnes
   ikke i verktøylinjen og er ikke i bruk noe sted i denne appen). Gammelt <ul><li>-innhold
   fra BookStack-importen (uten data-list) er upåvirket — treffer ingen av disse reglene,
   fortsatt vanlig nettleser-punktliste. */
.side-innhold ol { padding-left: 1.5em; }
.side-innhold .ql-ui { position: absolute; }
.side-innhold li[data-list] {
    list-style-type: none;
    padding-left: 1.5em;
    position: relative;
    counter-reset: list-1 list-2 list-3;
}
.side-innhold li[data-list] > .ql-ui::before {
    display: inline-block;
    margin-left: -1.5em;
    margin-right: .3em;
    text-align: right;
    white-space: nowrap;
    width: 1.2em;
}
.side-innhold li[data-list=bullet] > .ql-ui::before { content: '\2022'; }
.side-innhold li[data-list=ordered] { counter-increment: list-0; }
.side-innhold li[data-list=ordered] > .ql-ui::before { content: counter(list-0, decimal) '. '; }
.side-innhold li[data-list=ordered].ql-indent-1 { counter-increment: list-1; }
.side-innhold li[data-list=ordered].ql-indent-1 > .ql-ui::before { content: counter(list-1, lower-alpha) '. '; }
.side-innhold li[data-list=ordered].ql-indent-2 { counter-increment: list-2; }
.side-innhold li[data-list=ordered].ql-indent-2 > .ql-ui::before { content: counter(list-2, lower-roman) '. '; }
.side-innhold li.ql-indent-1 { padding-left: 4.5em; }
.side-innhold li.ql-indent-2 { padding-left: 7.5em; }
.side-innhold p, .side-innhold h1, .side-innhold h2, .side-innhold h3 {
    counter-reset: list-0 list-1 list-2 list-3;
}
/* Sitat ("❝"-knappen i Quill) — samme rotårsak som punktliste-fiksen over: Quill sin egen
   blockquote-styling (venstre kant-strek) finnes KUN i quill.snow.css, koblet til
   .ql-editor — aldri til .side-innhold. Uten denne regelen ga nettleseren <blockquote> kun
   sin egen standard-innrykk (ingen kant/farge), som så ut som — og av bruker ble oppfattet
   som — helt vanlig tekst. Egne temafarger i stedet for Quill sin hardkodede grå (#ccc),
   samme mønster som resten av .side-innhold-reglene over/under.*/
.side-innhold blockquote {
    border-left: 4px solid var(--tema-primaer);
    margin: 10px 0;
    padding-left: 16px;
    color: var(--tema-tekst-svak);
    font-style: italic;
}
.side-innhold pre { background: rgba(var(--tema-primaer-rgb),0.06); padding: 12px 14px; border-radius: 6px; overflow-x: auto; }
.side-innhold code { background: rgba(var(--tema-primaer-rgb),0.08); color: var(--tema-primaer); padding: 1px 5px; border-radius: 4px; }
/* Quill sin kodeblokk-formatering ("</>"-knappen) gjør IKKE <pre>/<code> — den lager
   <div class="ql-code-block"> (én div per linje for flerlinjers kode), derfor traff ikke
   reglene over den i det hele tatt. */
.side-innhold .ql-code-block {
    background: rgba(var(--tema-primaer-rgb),0.06);
    color: var(--tema-primaer);
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 13.5px;
    padding: 2px 14px;
    white-space: pre-wrap;
}
.side-innhold .ql-code-block:first-of-type { padding-top: 10px; border-radius: 6px 6px 0 0; }
.side-innhold .ql-code-block:last-of-type { padding-bottom: 10px; border-radius: 0 0 6px 6px; }

/* Valgt språk (Quill sin syntax-modul, se redigering.js) vises øverst til høyre i
   kodeblokken — attr()-basert, ingen JS/PHP nødvendig. data-language mangler helt til
   brukeren faktisk velger et språk i nedtrekksmenyen (default "Plain" setter ikke
   attributtet), så ingen etikett vises for umerket kode. Containeren trenger
   position:relative som referanseramme for :first-of-type sin ::before. */
.side-innhold .ql-code-block-container { position: relative; }
.side-innhold .ql-code-block:first-of-type::before {
    content: attr(data-language);
    position: absolute;
    top: 8px;
    right: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 11px;
    text-transform: capitalize;
    color: var(--tema-tekst-svak);
    background: var(--tema-bakgrunn);
    padding: 1px 8px;
    border-radius: 4px;
}

/* Syntax-highlighting-fargene highlight.js/Quill setter som .hljs-*-klasser på tokens
   inni kodeblokken — bakt inn i selve HTML-en ved lagring (se redigering.js), så disse
   reglene trengs både i redigeringsvisningen (#quill-editor) og selve sidevisningen.
   .ql-code-block .hljs-x (i stedet for kun .hljs-x) sikrer at disse vinner over den mer
   generelle fargeregelen på selve blokken over, uansett hvor de vises. */
.ql-code-block .hljs-comment, .ql-code-block .hljs-quote { color: #6a737d; font-style: italic; }
.ql-code-block .hljs-keyword, .ql-code-block .hljs-selector-tag, .ql-code-block .hljs-literal { color: #d73a49; }
.ql-code-block .hljs-string, .ql-code-block .hljs-attr, .ql-code-block .hljs-template-tag, .ql-code-block .hljs-regexp { color: #032f62; }
.ql-code-block .hljs-number { color: #005cc5; }
.ql-code-block .hljs-title, .ql-code-block .hljs-name, .ql-code-block .hljs-section { color: #6f42c1; }
.ql-code-block .hljs-built_in, .ql-code-block .hljs-type { color: #e36209; }
.ql-code-block .hljs-variable, .ql-code-block .hljs-attribute { color: #005cc5; }
.ql-code-block .hljs-tag { color: #22863a; }
.side-innhold table { border-collapse: collapse; width: 100%; }
.side-innhold table td, .side-innhold table th { border: 1px solid var(--tema-kant); padding: 6px 10px; }

.rediger-knapp {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: 1px solid var(--tema-kant); color: var(--tema-tekst-svak);
    border-radius: 6px; padding: 5px 11px; font-size: 12.5px; cursor: pointer;
}
.rediger-knapp:hover { border-color: var(--tema-primaer); color: var(--tema-primaer); }
.rediger-knapp-fare:hover { border-color: #dc3545; color: #dc3545; }
[contenteditable="true"] { outline: 2px dashed rgba(var(--tema-primaer-rgb),0.4); outline-offset: 4px; border-radius: 4px; }

/* Bredde-toggle (styrt av #bredde-toggle-knapp, js/main.js): la side-teksten bruke hele
   tilgjengelig bredde i stedet for den faste lesebredden (780px, .innhold-bredde). Forrige/
   neste-side-knappene (.side-naviger under) beholder sin faste bredde og sentrerte posisjon
   uansett — eksplisitt brukerønske om at de ikke skal endre utseende i denne modusen.
   #side-wrapper-selektoren (ID) trumfer .innhold-bredde sin egen max-width uansett kildeorden. */
#side-wrapper.bredde-full { max-width: none; margin: 0; }
#side-wrapper.bredde-full .side-naviger { max-width: 780px; margin: 40px auto 0; }

/* --- Forrige/neste side (bunn av innholdet), à la Nginx Proxy Manager --- */
.side-naviger {
    display: flex;
    gap: 14px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--tema-kant);
}
.side-naviger-knapp {
    flex: 1;
    display: block;
    padding: 12px 16px;
    border: 1px solid var(--tema-kant);
    border-radius: 8px;
    color: var(--tema-tekst);
    transition: border-color 0.15s;
}
.side-naviger-knapp:hover { border-color: var(--tema-primaer); text-decoration: none; }
.side-naviger-neste { text-align: right; }
.side-naviger-label { display: block; font-size: 11.5px; color: var(--tema-tekst-svak); margin-bottom: 3px; }

/* «Neste kategori» på siste side i en kategori (2026-09-19). Dette er et større hopp enn en
   vanlig sidebytte, så knappen skal LESES som noe annet, ikke bare ha en annen tekst:
   tonet bakgrunn i temafargen, tydeligere kant, og kategorinavnet som øverste linje med
   bokikonet fra sidemenyen. color-mix mot transparent gjør at den samme regelen virker i
   både lys og mørk modus, samme grep som infoboksene. */
.side-naviger-ny-kategori {
    background: color-mix(in srgb, var(--tema-primaer) 8%, transparent);
    border-color: rgba(var(--tema-primaer-rgb), 0.45);
}
.side-naviger-ny-kategori:hover {
    background: color-mix(in srgb, var(--tema-primaer) 14%, transparent);
}
.side-naviger-ny-kategori .side-naviger-label { color: var(--tema-primaer); font-weight: 600; }
.side-naviger-kategori {
    display: block;
    font-weight: 700;
    font-size: 15px;
    color: var(--tema-primaer);
    margin-bottom: 2px;
}
/* Sidetittelen er underordnet kategorinavnet her, motsatt av en vanlig neste-side-knapp. */
.side-naviger-ny-kategori .side-naviger-tittel {
    font-weight: 500;
    font-size: 13px;
    color: var(--tema-tekst-svak);
}
.side-naviger-tittel { display: block; font-weight: 600; color: var(--tema-primaer); font-size: 14.5px; }

/* Skjermbilder-galleri — gruppert under redigerbare overskrifter (skjermbilder.php) */
.skjermbilde-seksjon { margin-bottom: 36px; }
.skjermbilde-seksjon-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.skjermbilde-seksjon-tittel { font-size: 17px; font-weight: 700; color: var(--tema-primaer); margin: 0; }
.skjermbilde-seksjon-header .sidebar-skjult-merke { margin-left: 0; }
.skjermbilde-seksjon-header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.skjermbilde-last-opp-knapp { cursor: pointer; }
.skjermbilde-tom { color: var(--tema-tekst-svak); font-size: 13.5px; margin: 0; }

.skjermbilder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}
.skjermbilde-kort-wrapper { position: relative; }
.skjermbilde-kort { display: block; border: 1px solid var(--tema-kant); border-radius: 8px; overflow: hidden; background: var(--tema-overflate); cursor: pointer; }
.skjermbilde-kort img { width: 100%; height: 120px; object-fit: cover; display: block; }
/* Samme knapp-mønster som .fjern-bilde-knapp i varelager sin rediger_dokumentasjon.php */
.skjermbilde-slett-knapp {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(var(--tema-primaer-rgb),1);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.skjermbilde-slett-knapp:hover { background: #dc3545; }
/* Dra-håndtak for rekkefølge (SortableJS, js/redigering.js) — speilvendt plassering av
   slett-knappen over (øverst til VENSTRE i stedet for høyre), samme sirkel-mønster. Egen
   touch-action:none er nødvendig for at SortableJS sin touch-håndtering skal virke — uten
   den prøver mobilnettleseren å SCROLLE siden når man trykker og drar på håndtaket, i
   stedet for å starte draget. */
.skjermbilde-drag-handle {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(var(--tema-primaer-rgb),1);
    color: #fff;
    font-size: 11px;
    cursor: grab;
    touch-action: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.skjermbilde-drag-handle:active { cursor: grabbing; }
/* Vises tydelig på "spøkelset" som markerer hvor bildet havner mens man drar det. */
.skjermbilde-kort-dra-ghost .skjermbilde-kort { opacity: 0.4; }

/* Quill-editor: tilpasset tema (samme mønster som varelager sin mørk-modus-overstyring) */
.ql-toolbar.ql-snow, .ql-container.ql-snow { border-color: var(--tema-kant) !important; }
.ql-container.ql-snow { background: var(--tema-overflate); color: var(--tema-tekst); border-radius: 0 0 6px 6px; }
.ql-toolbar.ql-snow { border-radius: 6px 6px 0 0; background: var(--tema-overflate); }
/* Fester verktøylinjen til toppen av #content-flex (den faktiske scroll-containeren, IKKE
   window/body — samme teknikk som #pa-denne-siden sin sticky lenger opp) mens man skriver
   nedover i en lang side, i stedet for at den scroller ut av syne sammen med resten av
   redigeringsverktøyet. z-index kun over vanlig sideinnhold (uten egen z-index) — trenger
   ikke måle seg mot #innhold-header sin egen 10/400 (den ligger uansett fysisk over
   #content-flex, ikke inni den, så de overlapper aldri). */
#side-innhold-editor .ql-toolbar.ql-snow { position: sticky; top: 0; z-index: 5; }
html[data-mode="dark"] .ql-toolbar .ql-stroke { stroke: rgba(232,232,232,0.7); }
html[data-mode="dark"] .ql-toolbar .ql-fill { fill: rgba(232,232,232,0.7); }
html[data-mode="dark"] .ql-toolbar .ql-picker-label { color: var(--tema-tekst); }

/* ===========================================================================
   Mobil/iPad
   =========================================================================== */
@media (max-width: 1100px) {
    #pa-denne-siden { display: none; }
}
@media (max-width: 900px) {
    #sidebar-hamburger {
        display: inline-flex; align-items: center; justify-content: center;
        width: 36px; height: 36px; border-radius: 50%;
        background: none; border: none; color: var(--tema-tekst); font-size: 18px; cursor: pointer;
        flex-shrink: 0;
    }
    /* Logo VISES som hovedregel her (i motsetning til en tidligere versjon som skjulte den
       permanent ≤900px) — bruker presiserte at det ikke var meningen, kun søkefeltet skal
       aldri flyttes ned på egen rad. Rekkefølgen når det blir trangt (se lenger ned i fila):
       1) søkefeltet krymper (og bytter til kortere placeholder-tekst via JS, main.js),
       2) mørk/lys-bryteren fjernes og legges i tre-prikker-menyen,
       3) til slutt, kun på de aller smaleste skjermene, skjules logoen (siste utvei). */
    #sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 300;
        transform: translateX(-100%);
        transition: transform 0.2s;
        box-shadow: 2px 0 16px rgba(0,0,0,0.2);
        /* Samme farge som ellers, men helt ugjennomsiktig — den vanlige (svakt
           gjennomsiktige) bakgrunnen ville ellers latt siden bak skinne gjennom når
           menyen ligger oppå innholdet som et overlegg på mobil. */
        background: #e2efed;
    }
    #sidebar.aktiv { transform: translateX(0); }
    #sidebar-bakteppe.aktiv {
        display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 250;
    }
    #hovedinnhold { padding: 20px 16px 48px; }
    #kategori-bokser { grid-template-columns: 1fr 1fr; }
    #innhold-header { padding: 0 16px; }
    #mobil-tittel { display: inline-flex; }

    /* Søkefeltet blir en VANLIG del av flex-raden her (ikke lenger absolutt sentrert som på
       desktop, se .header-sok-wrapper sin grunnregel) — sitter naturlig mellom hamburger og
       meny-knappen (DOM-rekkefølgen i innholdHeader()) og krymper trygt med skjermen
       (min-width:0 + flex sitt eget flex-shrink:1-standardverdi) i stedet for å overlappe
       naboene slik absolutt sentrering ville gjort. margin:auto sentrerer den i den
       gjenværende plassen når det er nok av den. */
    .header-sok-wrapper {
        position: static;
        transform: none;
        width: 100%;
        max-width: 480px;
        min-width: 0;
        margin: 0 auto;
    }
}
@media (max-width: 560px) {
    #kategori-bokser { grid-template-columns: 1fr; }
    #forside-side-lister { grid-template-columns: 1fr; }
    .side-tittel { font-size: 20px; }
    .side-naviger { flex-direction: column; }
}

/* Mørk/lys-bryteren skjules fra selve headeren og vises i tre-prikker-menyen i stedet
   (samme .tema-bryter-i-meny-mekanisme flere steder i appen bruker) — her for
   901-1010px-sonen: sidebaren vises fortsatt normalt (ingen hamburger), men
   innholdskolonnen (viewport minus 280px-sidebaren) er for smal til søk+bryter+meny på én
   linje. Søket skal ikke flyttes ned mens sidebaren er synlig, så bryteren viker i stedet.
   Se EGEN, smalere regel lenger ned for samme mekanisme ≤900px (mobil/hamburger-sonen) —
   der er det et par trinn til (søket krymper/bytter placeholder FØR bryteren viker) som
   ikke gjelder her. */
@media (min-width: 901px) and (max-width: 1010px) {
    #header-hoyre > .tema-bryter { display: none; }
    .tema-bryter-i-meny { display: flex; }
    .tema-bryter-i-meny-skille { display: block; }
}

/* ≤900px (mobil/hamburger-sonen): trinnvis nedprioritering når det blir trangt om plassen på
   linjen med hamburger+logo+søk+bryter+meny-knapp. Søkefeltet krymper alltid først (vanlig
   flex-oppførsel + placeholder-bytte via JS, se main.js) — det er ALDRI det som fjernes.
   Når selv et krympet søkefelt (med kort placeholder) ikke har nok albuerom, viker bryteren
   først (inn i tre-prikker-menyen); kun på de aller smaleste skjermene viker også logoen.
   Bruddpunktene er empirisk målt (se metoden i endringsloggen i dokumentasjon.md) mot faktisk
   overlapp, ikke gjettet. */
@media (max-width: 480px) {
    #header-hoyre > .tema-bryter { display: none; }
    .tema-bryter-i-meny { display: flex; }
    .tema-bryter-i-meny-skille { display: block; }
}
@media (max-width: 360px) {
    #mobil-tittel { display: none; }
}

/* --- Tema-modal (Utseende) --------------------------------------------------------------
   Kun synlig for innlogget. Følger samme fargevariabler som resten av modalene, så den
   virker i både lys og mørk modus uten egne mørk-modus-regler. */
.tema-felt { margin-bottom: 18px; }
.tema-felt:last-child { margin-bottom: 0; }

.tema-etikett {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--tema-primaer);
    margin-bottom: 6px;
}

.tema-hjelp {
    font-size: 12px;
    color: var(--tema-tekst-svak);
    margin-top: 4px;
}

#temaModal .form-control,
#temaModal .form-select {
    border-color: rgba(var(--tema-primaer-rgb), 0.4);
}

.tema-logo-rad {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.tema-logo-boks {
    flex: 1 1 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* Fast høyde med logoen sentrert: lys og mørk forhåndsvisning må stå på samme linje selv om
   de to filene har ulike proporsjoner (samme prinsipp som kortalignering ellers i appen). */
.tema-logo-forhandsvis {
    width: 100%;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: 1px solid rgba(var(--tema-primaer-rgb), 0.25);
    border-radius: 6px;
}

.tema-logo-forhandsvis img {
    max-width: 100%;
    max-height: 100%;
}

/* Forhåndsvisningene viser hver sin modus uansett hvilken modus siden står i — poenget er å
   se hvordan logoen ser ut mot BEGGE bakgrunnene. */
.tema-logo-forhandsvis-lys  { background: #ffffff; }
.tema-logo-forhandsvis-mork { background: #202124; }

.tema-liten-knapp {
    font-size: 12px;
    padding: 3px 12px;
}

.tema-farge-rad {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.tema-farge-felt {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
}

.tema-farge-felt input[type="color"] {
    width: 42px;
    height: 30px;
    padding: 2px;
    border: 1px solid rgba(var(--tema-primaer-rgb), 0.4);
    border-radius: 6px;
    background: none;
    cursor: pointer;
}

/* Tilbakestill til venstre, Avbryt/Lagre til høyre — tydelig skille mellom den destruktive
   handlingen og de vanlige. */
.tema-bunn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.tema-bunn-hoyre {
    display: flex;
    gap: 8px;
}

.tema-tilbakestill:hover {
    border-color: #dc3545;
    color: #dc3545;
}

@media (max-width: 420px) {
    .tema-bunn, .tema-bunn-hoyre { flex-direction: column; align-items: stretch; width: 100%; }
}

/* Favicon-feltet: liten firkantet forhåndsvisning ved siden av teksten, i stedet for de to
   brede boksene logoen bruker — et favikon er lite og kvadratisk, og en bred boks ville gitt
   et misvisende inntrykk av hvordan det faktisk ser ut i fanen. */
.tema-favicon-rad { display: flex; gap: 12px; align-items: center; }
.tema-favicon-boks { width: 64px; height: 64px; flex: 0 0 64px; }
.tema-favicon-boks img { max-width: 32px; max-height: 32px; }
.tema-favicon-tekst { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.tema-favicon-tekst .tema-hjelp { margin-top: 0; }

/* --- Infobokser (callouts) fra BookStack -------------------------------------------------
   Importert innhold fra BookStack bruker <p class="callout info|success|warning|danger">.
   BookStack sin egen CSS følger naturligvis ikke med i innholdet, så uten disse reglene ville
   boksene blitt vanlige avsnitt — samme type visningsbug som punktlistene og sitatene hadde
   (se dokumentasjon.md). Skopet til .side-innhold, altså selve sidevisningen.

   Fargene er halvgjennomsiktige (color-mix mot bakgrunnen) i stedet for faste flater, slik at
   den samme regelen fungerer i BÅDE lys og mørk modus uten egne mørk modus-varianter — en
   fast lys blåfarge ville blitt blendende mot #202124. */
.side-innhold .callout {
    position: relative;
    margin: 18px 0;
    padding: 14px 16px 14px 46px;
    border-left: 4px solid var(--callout-farge);
    border-radius: 0 6px 6px 0;
    background: color-mix(in srgb, var(--callout-farge) 12%, transparent);
    color: var(--tema-tekst);
}

/* Ikonet er tegnet med Font Awesome sine unicode-punkter — fonten er allerede lastet lokalt
   på alle sider (fontawesome/css/all.min.css), så dette krever ingen ny avhengighet.
   Begge familienavn er med fordi repoets fontawesome-mappe inneholder BÅDE versjon 7 og 5
   (ikke 6, som var et feilskudd i første forsøk — ingen font med det navnet finnes her, og
   ikonet ble da bare en tom plass). Kodepunktene f05a/f058/f071/f06a er de samme i alle tre
   versjonene, så stacken virker uansett hvilken som svarer først. */
.side-innhold .callout::before {
    content: var(--callout-ikon);
    font-family: "Font Awesome 7 Free", "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 16px;
    top: 14px;
    color: var(--callout-farge);
    font-size: 15px;
    line-height: 1.5;
}

.side-innhold .callout.info    { --callout-farge: #3b82c4; --callout-ikon: "\f05a"; }
.side-innhold .callout.success { --callout-farge: #3f9142; --callout-ikon: "\f058"; }
.side-innhold .callout.warning { --callout-farge: #c77c1d; --callout-ikon: "\f071"; }
.side-innhold .callout.danger  { --callout-farge: #cc3b3b; --callout-ikon: "\f06a"; }

/* Lysere kantfarger i mørk modus: de mettede tonene over er valgt for kontrast mot hvitt, og
   blir for mørke mot #202124. Kun fargen endres — layout og ikon er felles. */
html[data-mode="dark"] .side-innhold .callout.info    { --callout-farge: #6aa9e0; }
html[data-mode="dark"] .side-innhold .callout.success { --callout-farge: #6cc06f; }
html[data-mode="dark"] .side-innhold .callout.warning { --callout-farge: #e0a955; }
html[data-mode="dark"] .side-innhold .callout.danger  { --callout-farge: #e86a6a; }

/* Avsnitt og lister inni en boks skal ikke få dobbel luft. */
.side-innhold .callout > :first-child { margin-top: 0; }
.side-innhold .callout > :last-child  { margin-bottom: 0; }

