/* hug web · mork modus og tekststorrelse (fase 7).

   Tre regler:
   - Én kilde til fargene: variablene i hug.css. Mork modus definerer de samme
     variablene paa nytt, ingen skjerm har egne farger.
   - «Folg systemet» er standarden. Da avgjor prefers-color-scheme, og en
     manuell velger overstyrer bare naar noen har valgt selv.
   - Filen lastes bare av administrasjonsskjermene. Kiosken laster den ikke og
     staar som den er: veggskjermen har sin egen natt/dag-logikk (ADR-0006).

   Fargene er hentet fra design/utkast-6/WebBeboereMork.dc.html. */

/* Gult i lys modus. Bare observasjoner er gule, aldri en tilstand. */
:root {
  --observasjon: #8A5A00;
  --observasjon-flate: #FDF4DE;
  --observasjon-kant: rgba(138, 90, 0, 0.35);
  --tekstskala: 1;
}


/* --------------------------------------------------------------- mork modus */

/* Systemet bestemmer, saa lenge ingen har valgt «lys» selv. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="lys"]) {
    --flate: #1A1D21;
    --flate-kort: #23272E;
    --tekst: #F3F4F6;
    --tekst-dempet: #A7ADB7;
    --tekst-svak: #9CA3AF;
    --kant: #343A43;
    --kant-sterk: #3F4650;
    --skygge: 0 1px 2px rgba(0, 0, 0, 0.5);

    --sover-flate: #1B2440;
    --vaken-flate: #1C2740;
    --vaken-markor: #3A4A6B;
    --bevegelse-flate: #16301F;
    --bevegelse-markor: #16936B;
    --alarm: #F0776C;
    --alarm-flate: #3A1E1C;
    --alarm-tone: rgba(240, 119, 108, 0.14);
    --alarm-kant: rgba(240, 119, 108, 0.45);
    --ingen-data: #343A43;
    --ingen-data-flate: #1E2228;
    --ingen-data-ikon: #A7ADB7;
    --ubrukt-markor: #23272E;
    --observasjon: #F3D28A;
    --observasjon-flate: #33291A;
    --observasjon-kant: rgba(243, 210, 138, 0.45);
  }
}

/* Valgt mork modus gjelder uansett hva systemet sier. */
:root[data-tema="mork"] {
  --flate: #1A1D21;
  --flate-kort: #23272E;
  --tekst: #F3F4F6;
  --tekst-dempet: #A7ADB7;
  --tekst-svak: #9CA3AF;
  --kant: #343A43;
  --kant-sterk: #3F4650;
  --skygge: 0 1px 2px rgba(0, 0, 0, 0.5);

  --sover-flate: #1B2440;
  --vaken-flate: #1C2740;
  --vaken-markor: #3A4A6B;
  --bevegelse-flate: #16301F;
  --bevegelse-markor: #16936B;
  --alarm: #F0776C;
  --alarm-flate: #3A1E1C;
  --alarm-tone: rgba(240, 119, 108, 0.14);
  --alarm-kant: rgba(240, 119, 108, 0.45);
  --ingen-data: #343A43;
  --ingen-data-flate: #1E2228;
  --ingen-data-ikon: #A7ADB7;
  --ubrukt-markor: #23272E;
  --observasjon: #F3D28A;
  --observasjon-flate: #33291A;
  --observasjon-kant: rgba(243, 210, 138, 0.45);
}

/* ------------------------------------------------------- tekststorrelse */

:root[data-tekst="stor"] { --tekstskala: 1.125; }
:root[data-tekst="storst"] { --tekstskala: 1.28; }

.adminflate {
  font-size: calc(15px * var(--tekstskala));
  background: var(--flate);
  color: var(--tekst);
}
.adminh1 { font-size: calc(30px * var(--tekstskala)); }
.seksjonshode h2 { font-size: calc(19px * var(--tekstskala)); }
.gruppetittel { font-size: calc(15px * var(--tekstskala)); }
.knapp { font-size: calc(15px * var(--tekstskala)); }
.knapp--stor { font-size: calc(16px * var(--tekstskala)); }
.smatekst, .melding-tekst, .toppbruker-rolle { font-size: calc(14px * var(--tekstskala)); }
.merkelapp, .etikett, .smuler { font-size: calc(12px * var(--tekstskala)); }
.tabell th { font-size: calc(12px * var(--tekstskala)); }

/* --------------------------------------------------------- visningsvelger */

.visningsvelger { display: flex; align-items: center; gap: var(--rom-3); margin: 0; }
.visningsvelger-felt { display: flex; flex-direction: column; gap: 2px; }
.visningsvelger select { padding: 2px var(--rom-2); }

/* ------------------------------------------------------ nye fase 5–7-deler */

.sakskortliste { display: grid; gap: var(--rom-4); }
.sakskort {
  border: 1px solid var(--kant);
  border-left: 12px solid var(--kant-sterk);
  border-radius: var(--runding);
  padding: var(--rom-4);
  background: var(--flate-kort);
}
.sakskort--alarm { border-left-color: var(--alarm); background: var(--alarm-tone); }
.sakskort--observasjon { border-left-color: var(--observasjon); background: var(--observasjon-flate); }
.sakskort--databrudd, .sakskort--teknisk { border-left-color: var(--ingen-data-ikon); background: var(--ingen-data-flate); }
.sakskort--lukket { opacity: 0.75; }
.sakskort-hode { display: flex; align-items: baseline; gap: var(--rom-3); flex-wrap: wrap; }
.sakskort-status { font-weight: 700; }
.sakskort-tittel { font-size: calc(19px * var(--tekstskala)); font-weight: 700; margin: var(--rom-2) 0; }
.sakskort-detalj { color: var(--tekst-dempet); margin-bottom: var(--rom-2); }
.merkelapp--alarm { background: var(--alarm-flate); border-color: var(--alarm-kant); color: var(--alarm); }
.merkelapp--observasjon { background: var(--observasjon-flate); border-color: var(--observasjon-kant); color: var(--observasjon); }
.merkelapp--databrudd, .merkelapp--teknisk { background: var(--ingen-data-flate); }

.sporblokk { border-top: 1px solid var(--kant); padding-top: var(--rom-4); margin-top: var(--rom-4); }
.sporblokk:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.merkerad { display: flex; gap: var(--rom-2); flex-wrap: wrap; margin-bottom: var(--rom-4); }

.setninger { padding-left: 1.6em; margin: 0 0 var(--rom-4); }
.setning { margin-bottom: var(--rom-3); }
.setning-noter { margin-left: var(--rom-2); }
.note {
  font-size: calc(12px * var(--tekstskala));
  color: var(--tekst-dempet);
  border-bottom: 1px dotted var(--kant-sterk);
  cursor: help;
}
.fotnoter { list-style: none; padding: 0; margin: var(--rom-1) 0 0; }
.fotnoter li { font-size: calc(13px * var(--tekstskala)); color: var(--tekst-dempet); }
.fotnoter code { font-family: ui-monospace, "SF Mono", Menlo, monospace; }

@media (max-width: 720px) {
  .fakta { grid-template-columns: 1fr; }
}

:root[data-tema="mork"] { color-scheme: dark; }
:root[data-tema="lys"] { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="lys"]) { color-scheme: dark; } }

/* Logoen på innloggingen er hvit i mørk modus, som på Zitadel-siden (H69). */
:root[data-tema="mork"] { --logo: #FFFFFF; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="lys"]) { --logo: #FFFFFF; } }