/**
 * 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;

  /* 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;
}

/* ── 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;
}

/* ── 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;
  }
}