/**
 * uu.css
 * Universell utforming – det som må gjelde overalt.
 *
 * HVORFOR EN EGEN FIL
 * Fokusmarkering og hopp-til-innhold sto tidligere bare på elevdashbordet,
 * som en <style>-blokk. Resten av portalen arvet det OneUI tilfeldigvis ga.
 * Her ligger reglene ett sted, lastes av head_end.php på hver eneste side, og
 * kan ikke bli glemt på en ny side.
 *
 * LASTES SIST
 * Fila kommer etter oneui.min.css og etter sidenes egne <style>-blokker.
 * Det er med vilje: flere editorer setter «outline:none» lokalt, og reglene
 * her må vinne uten å måtte ty til !important.
 */

:root {
  /* 4,54:1 mot hvit – holder som synlig fokusmarkering (WCAG 1.4.11) */
  --uu-fokus:      #0d6efd;
  /* Lysere variant til mørk sidemeny, header og mørk modus */
  --uu-fokus-mork: #8ab4ff;

  /* ── Statusfarger, målt ────────────────────────────────────────────
     Tre av OneUIs temafarger var for lyse til å brukes som tekst:

       success  #139a52  3,64:1
       warning  #ea580c  3,56:1
       info     #1391aa  3,71:1

     Kravet er 4,5:1 for tekst (1.4.3). Det gjaldt ikke bare .text-*, men
     også hvit tekst på .badge og .btn med samme bakgrunn – til sammen
     rundt 430 steder i portalen.

     Verdiene under er de samme fargene mørknet til de så vidt passerer.
     Det er ikke tilfeldig hvor de ligger: en bakgrunn kan bare bære både
     hvit OG svart tekst i et smalt vindu mellom 4,5:1 og 4,67:1, fordi
     produktet av de to kontrastene alltid er 21. Disse treffer vinduet,
     og derfor virker «badge bg-warning text-dark» fortsatt. */
  --bs-success:     #118647;   --bs-success-rgb: 17,134,71;
  --bs-warning:     #c94c0a;   --bs-warning-rgb: 201,76,10;
  --bs-info:        #118096;   --bs-info-rgb:    17,128,150;

  /* ── Tekstfargen er en annen enn flatefargen ────────────────────────
     Verdiene over holder 4,6:1 mot hvitt. Men den vanligste bruken i
     portalen er ikke tekst på hvitt – det er

       <span class="badge bg-success bg-opacity-10 text-success">

     altså fargen oppå sin egen 10 %-tone. Den tonen er ikke hvit, og da
     faller det samme fargeparet til 4,08:1. Målt i nettleser.

     Ni trinn mørkere holder 4,5:1 mot tonen OG 5,2:1 mot hvitt. Fargen er
     til å kjenne igjen; forskjellen ser man bare ved siden av hverandre.

     EGNE VARIABLER, IKKE MØRKERE --bs-*
     Det enkleste ville vært å mørkne --bs-success. Men den bærer tre ting:
     tekstfargen, tonen bak (via --bs-success-rgb) og – den dagen OneUIs
     .bg-* også blir rettet – flatefargen på solide merker. Mørkner man
     den, mørkner tonen med, og gevinsten spises opp. Verre: kommentaren
     over forklarer at flatefargene ligger i et smalt vindu nettopp for at
     «badge bg-warning text-dark» skal virke. Det vinduet må stå. */
  --uu-tekst-success: #097e3f;
  --uu-tekst-warning: #c04301;
  --uu-tekst-info:    #09788e;

  /* ── Flatefarger: merkelapper og knapper ────────────────────────────
     Her er det motsatt av tekstfargene: fargen ER bakgrunnen, og teksten
     står oppå. Verdiene er de samme som --bs-* over, og de er valgt for
     nettopp dette – de bærer BÅDE hvit (4,6:1) og svart (4,5:1) tekst.

     IKKE OVERSTYRT I MØRK MODUS
     En merkelapp er sin egen flate. Tekstfargene lysnes i mørk modus fordi
     de står på sidens bakgrunn, men en merkelapp tar med seg sin egen. Ble
     denne lysnet også, ville hvit tekst på den falt under kravet. Flatene
     er fortsatt godt synlige mot mørk bakgrunn: 3,46:1, over kravet på 3:1
     for grafiske elementer (1.4.11). */
  --uu-flate-success: #118647;
  --uu-flate-warning: #c94c0a;
  --uu-flate-info:    #118096;

  /* Hover og aktiv: 15 % mørkere. OneUIs egne hover-farger ble laget for
     de lysere flatene, og gir bare 1,13–1,17:1 mot de korrigerte – i
     praksis usynlig. Disse gir 1,29:1, som merkes. */
  --uu-flate-success-hover: #0e723c;
  --uu-flate-warning-hover: #ab4109;
  --uu-flate-info-hover:    #0e6d80;

  /* Statusprikker og små grafiske merker. Kravet her er 3:1 mot flaten
     de står på (1.4.11), ikke 4,5:1 – de er ikke tekst. */
  --uu-prikk-ok:    #16a34a;   /* 3,3:1  */
  --uu-prikk-treg:  #a16207;   /* 4,92:1 – gul måtte helt ned hit */
  --uu-prikk-feil:  #dc2626;   /* 4,83:1 */
  --uu-prikk-av:    #6b7280;   /* 4,83:1 */
}

/* Mørk modus snur kravet: nå er det de mørke variantene som forsvinner.
   Samme farger, lysnet til de passerer mot bakgrunnen #19222d. */
.dark-mode {
  --bs-success:     #14a357;   --bs-success-rgb: 20,163,87;
  --bs-warning:     #f85d0d;   --bs-warning-rgb: 248,93,13;
  --bs-info:        #159db8;   --bs-info-rgb:    21,157,184;

  /* Samme regnestykke motsatt vei: her er tonen mørk, og teksten må et
     hakk lysere for å holde 4,5:1 mot den. Oransje traff allerede. */
  --uu-tekst-success: #18a75b;
  --uu-tekst-warning: #f85d0d;
  --uu-tekst-info:    #18a0bb;
}

/* ── .text-* leste heller ikke variabelen ────────────────────────────
   Verdiene over ble satt i den tro at .text-success plukket dem opp, slik
   Bootstrap gjør:

     .text-success { color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) }

   OneUI legger en egen regel etter, med fast farge:

     .text-success { color: #139a52 !important; }

   Den leser ingen variabel. Å endre --bs-success gjorde derfor ingenting, og
   teksten ble malt med #139a52 – nøyaktig de 3,64:1 korreksjonen skulle bort
   fra. Målt i nettleser, ikke antatt.

   Reglene under setter fargen direkte. Samme spesifisitet som OneUIs (0,1,0),
   men uu.css lastes sist, så disse vinner. Mørk modus trenger sin egen linje:
   OneUIs .dark-mode .text-success er (0,2,0) og ville ellers stått igjen.

   Hover og fokus er IKKE med. OneUI har «a.text-success:hover» på (0,2,1),
   som overlever – og de fargene er alt mørkere enn kravet.

   primary #2356d7 (6,21:1) og danger #d61f47 (5,06:1) passerer som de er og
   røres ikke. */
.text-success { color: var(--uu-tekst-success) !important; }
.text-warning { color: var(--uu-tekst-warning) !important; }
.text-info    { color: var(--uu-tekst-info)    !important; }

.dark-mode .text-success { color: var(--uu-tekst-success) !important; }
.dark-mode .text-warning { color: var(--uu-tekst-warning) !important; }
.dark-mode .text-info    { color: var(--uu-tekst-info)    !important; }

/* ── Solide flater: merkelapper ──────────────────────────────────────
   Samme overstyring rammet .bg-* uten bg-opacity, altså vanlige
   merkelapper. Hvit tekst på #ea580c er 3,56:1. Målt, ikke antatt.

   Ingen .dark-mode-variant i OneUI for disse, så én linje holder. Regelen
   for tonede flater lenger ned har to selektorledd (0,2,0) og vinner
   fortsatt der bg-opacity er med. */
.bg-success { background-color: var(--uu-flate-success) !important; }
.bg-warning { background-color: var(--uu-flate-warning) !important; }
.bg-info    { background-color: var(--uu-flate-info)    !important; }

/* ── text-dark på farget flate ───────────────────────────────────────
   «badge bg-warning text-dark» brukes 79 steder, og var den verste av
   alle: OneUIs .text-dark er ikke svart, men skifer #334155. Det ga
   2,91:1 – og i mørk modus blir .text-dark til #9faec1, som ga 1,58:1.
   Nesten usynlig.

   Kommentaren om det «smale vinduet» lenger opp bygget på at mørk tekst
   var svart. Det stemte aldri. Med EKTE svart holder vinduet: 4,52:1 mot
   de korrigerte flatene.

   To selektorledd (0,2,0) slår både .text-dark (0,1,0) og OneUIs
   .dark-mode .text-dark (0,2,0, tidligere i kaskaden). */
.bg-success.text-dark,
.bg-warning.text-dark,
.bg-info.text-dark { color: #000 !important; }

/* ── Solide flater: knapper ──────────────────────────────────────────
   Knappene setter Bootstrap-variabler uten !important, så her trengs
   ingen overstyring – bare andre verdier. Deaktiverte knapper får samme
   flate; de dempes med opacity, ikke med farge. */
.btn-success {
  --bs-btn-bg:                   var(--uu-flate-success);
  --bs-btn-border-color:         var(--uu-flate-success);
  --bs-btn-hover-bg:             var(--uu-flate-success-hover);
  --bs-btn-hover-border-color:   var(--uu-flate-success-hover);
  --bs-btn-active-bg:            var(--uu-flate-success-hover);
  --bs-btn-active-border-color:  var(--uu-flate-success-hover);
  --bs-btn-disabled-bg:          var(--uu-flate-success);
  --bs-btn-disabled-border-color: var(--uu-flate-success);
}
.btn-warning {
  --bs-btn-bg:                   var(--uu-flate-warning);
  --bs-btn-border-color:         var(--uu-flate-warning);
  --bs-btn-hover-bg:             var(--uu-flate-warning-hover);
  --bs-btn-hover-border-color:   var(--uu-flate-warning-hover);
  --bs-btn-active-bg:            var(--uu-flate-warning-hover);
  --bs-btn-active-border-color:  var(--uu-flate-warning-hover);
  --bs-btn-disabled-bg:          var(--uu-flate-warning);
  --bs-btn-disabled-border-color: var(--uu-flate-warning);
}
.btn-info {
  --bs-btn-bg:                   var(--uu-flate-info);
  --bs-btn-border-color:         var(--uu-flate-info);
  --bs-btn-hover-bg:             var(--uu-flate-info-hover);
  --bs-btn-hover-border-color:   var(--uu-flate-info-hover);
  --bs-btn-active-bg:            var(--uu-flate-info-hover);
  --bs-btn-active-border-color:  var(--uu-flate-info-hover);
  --bs-btn-disabled-bg:          var(--uu-flate-info);
  --bs-btn-disabled-border-color: var(--uu-flate-info);
}

/* ── bg-opacity virker ikke i OneUI ──────────────────────────────────
   Bootstrap lar en flate tones ned med to klasser sammen:

     <span class="badge bg-success bg-opacity-10 text-success">

   .bg-opacity-10 setter --bs-bg-opacity: .1, og Bootstrap sin .bg-success
   leser variabelen. Men OneUI legger en EGEN regel etter Bootstrap sin:

     .bg-success { background-color: #139a52 !important; }

   Den ignorerer variabelen. Resultatet er ensfarget bunn – og siden disse
   stedene setter text-success oppå, står teksten i samme farge som flaten
   bak. I praksis usynlig. Det ble meldt inn fra fagkodefeltet i
   laerer_oppgaver.php, men gjaldt 15 steder: klassefiltre, snittsirkler,
   merkelapper og de uleste meldingene i innboksen.

   Reglene under gir variabelen tilbake. To selektorer (0,2,0) slår OneUIs
   ene (0,1,0), så !important mot !important avgjøres av spesifisitet og
   ikke av rekkefølge. Attributtvelgeren dekker alle trinnene: 10, 25, 50,
   75 og 100.

   Fargene hentes fra --bs-*-rgb, som er de kontrastkorrigerte verdiene
   lenger opp i denne fila – og som byttes ut igjen i mørk modus. Da følger
   tonen teksten den står bak.

   MERK OM TEMAER: temafilene i assets/css/themes/ overstyrer .bg-primary
   med en fast farge uten å sette --bs-primary-rgb. Slås et tema på, må de
   fargene legges inn her også. $one->theme er '' i dag. */
[class*="bg-opacity-"].bg-primary {
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important;
}
[class*="bg-opacity-"].bg-success {
  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important;
}
[class*="bg-opacity-"].bg-warning {
  background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important;
}
[class*="bg-opacity-"].bg-info {
  background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important;
}
[class*="bg-opacity-"].bg-danger {
  background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important;
}

/* ── Hopp til innhold ────────────────────────────────────────────────
   Første fokuserbare element på sida. Ligger utenfor synsfeltet til den
   får fokus. position:fixed, ikke absolute – med fast header ville en
   absolutt plassert lenke havnet under den. */
.uu-hopp {
  position: fixed;
  top: -4rem;
  left: 1rem;
  z-index: 5000;
  transition: top .12s ease-out;
}
.uu-hopp:focus {
  top: 1rem;
}

/* Målet for hoppet. tabindex="-1" gjør at fokus faktisk flytter seg dit;
   uten det følger bare rullefeltet med, mens tastaturfokus blir stående
   igjen i toppen. Ingen ring rundt hele hovedinnholdet – det er ikke en
   kontroll, og en 3px ramme rundt halve skjermen hjelper ingen. */
#main-container:focus {
  outline: none;
}

/* ── Fokusmarkering ──────────────────────────────────────────────────
   :focus-visible, ikke :focus – ellers får alle knapper en ring når de
   klikkes med mus, og da begynner folk å be om å få den fjernet igjen. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid var(--uu-fokus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Mørke flater: den blå ringen forsvinner i mørk sidemeny og header. */
.sidebar-dark #sidebar a:focus-visible,
.sidebar-dark #sidebar button:focus-visible,
.page-header-dark #page-header a:focus-visible,
.page-header-dark #page-header button:focus-visible,
.dark-mode a:focus-visible,
.dark-mode button:focus-visible,
.dark-mode input:focus-visible,
.dark-mode select:focus-visible,
.dark-mode textarea:focus-visible {
  outline-color: var(--uu-fokus-mork);
}

/* ── Tekstredigering ─────────────────────────────────────────────────
   TipTap-feltene setter «outline:none» på beholderen for å bli kvitt
   nettleserens standardramme. Uten erstatning ser ikke en elev som
   tabber seg fram hvor markøren er (WCAG 2.4.7).

   Ringen legges på beholderen med :focus-within, fordi det er det indre
   contenteditable-elementet som faktisk får fokus. */
.tiptap-elev:focus-within,
.tiptap-mixed:focus-within,
.tiptap-innhold:focus-within,
.tiptap-sam:focus-within,
[contenteditable="true"]:focus-visible {
  outline: 3px solid var(--uu-fokus);
  outline-offset: 2px;
}

/* ── Lærerkommentar rett i besvarelsen ─────────────────────────────────
   Læreren kan skrive kommentarer inni en kopi av elevens tekst (se
   laerer_retting.php). Bruker warning-fargeparet portalen allerede har
   målt kontrasten på over – oransje skiller seg godt fra elevens svarte
   tekst, uten å innføre nok en fargekombinasjon som må måles på nytt. */
.laerer-kommentar {
  background: rgba(var(--bs-warning-rgb), .15);
  color: var(--uu-tekst-warning);
  padding: 0 .2em;
  border-radius: .2em;
}

/* ── Statusprikker i monitorene ──────────────────────────────────────
   Lå identisk i både laerer_prove_live.php og vakt_prove_monitor.php.
   Samlet her, både for å slippe to kopier og fordi fargene måtte endres
   begge steder samtidig.

   Prikkene skiller seg nå også på form – fylt, ring, hul. Tilstanden står
   i klartekst ved siden av («nå», «3 min siden», «Aldri»), så fargen bærer
   ikke informasjonen alene, men når vakta skanner 25 rader er det formen
   og fargen øyet fanger. */
.hb-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: .35rem;
  vertical-align: baseline;
  box-sizing: border-box;
}
.hb-online  { background: var(--uu-prikk-ok); }
.hb-treg    { background: #fff; border: 3px solid var(--uu-prikk-treg); }
.hb-offline { background: #fff; border: 3px solid var(--uu-prikk-feil); }
.hb-aldri   { background: #fff; border: 1px solid var(--uu-prikk-av); }

/* ── Redusert bevegelse ──────────────────────────────────────────────
   Respekterer systeminnstillingen. Gjelder også animasjonene i malen. */
@media (prefers-reduced-motion: reduce) {
  .uu-hopp { transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}