/* hug web · administrasjon (fase 3 og 4).
   Designmerkene er de samme som kioskens: variablene i hug.css er kilden.
   Ingen stiler skrives inline i malene; alt bor her.
   Gult brukes bare for observasjoner (NOTATER.md, «prinsipper»); rødt betyr
   alarm. Bannerne her bruker derfor blaatt og graatt, aldri rødt for annet
   enn feil. */

.adminflate {
  margin: 0;
  background: var(--flate);
  color: var(--tekst);
  font-family: -apple-system, "SF Pro Text", system-ui, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.45;
}

/* toppen */
.topplinje {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 max(24px, calc((100% - 1184px) / 2));
  min-height: 68px;
  background: var(--flate-kort);
  border-bottom: 1px solid var(--kant);
}
.merke {
  font-size: 28px;
  font-weight: 800;
  color: var(--merke);
  letter-spacing: -0.5px;
  text-decoration: none;
}
.merke-prikk { font-size: 12px; vertical-align: top; }
.toppnav { display: flex; align-self: stretch; align-items: stretch; justify-content: flex-end; gap: 24px; flex: 1; }
.toppnav-lenke {
  color: var(--tekst-dempet);
  text-decoration: none;
  display: flex;
  align-items: center;
  font-weight: 500;
  padding: 0 4px;
  border-bottom: 3px solid transparent;
}
.toppnav-lenke--valgt { color: var(--tekst); border-bottom-color: var(--tekst); font-weight: 700; }
.toppbruker { text-align: right; }
.toppbruker-navn { font-weight: 700; }
.toppbruker-rolle { font-size: var(--sz-tegn-detalj); color: var(--tekst-dempet); }
.utlogging { margin: 0; }

/* siden */
.adminmain { max-width: 1232px; margin: 0 auto; padding: 36px 24px 56px; }
.smuler { font-size: var(--sz-legende); text-transform: uppercase; letter-spacing: 0.8px; color: var(--tekst-dempet); }
.adminh1 { font-size: 30px; font-weight: 700; margin: var(--rom-2) 0 var(--rom-2); }
.ingress { color: var(--tekst-dempet); max-width: 80ch; margin: 0 0 var(--rom-5); }
.adminbunn {
  max-width: 1232px;
  margin: 0 auto;
  padding: var(--rom-6);
  color: var(--tekst-svak);
  font-size: var(--sz-tegn-detalj);
  border-top: 1px solid var(--kant);
}

/* kort og seksjoner */
.kortflate {
  background: var(--flate-kort);
  border: 1px solid var(--kant);
  border-radius: var(--runding);
  padding: var(--rom-6);
  margin-bottom: var(--rom-6);
  box-shadow: var(--skygge);
}
.seksjonshode { display: flex; align-items: baseline; gap: var(--rom-4); margin-bottom: var(--rom-4); }
.seksjonshode h2 { font-size: 19px; font-weight: 700; margin: 0; flex: 1; }
.gruppetittel { font-size: 15px; font-weight: 700; margin: var(--rom-6) 0 var(--rom-2); }
.etikett { font-size: var(--sz-legende); font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--tekst-dempet); }
.smatekst { font-size: var(--sz-tegn-detalj); color: var(--tekst-dempet); }
.advarsel { font-size: var(--sz-tegn-detalj); color: var(--alarm); }

/* tabeller */
.tabell { width: 100%; border-collapse: collapse; margin-bottom: var(--rom-4); }
.tabell th {
  text-align: left;
  font-size: var(--sz-legende);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--tekst-dempet);
  border-bottom: 1px solid var(--kant);
  padding: var(--rom-2) var(--rom-3) var(--rom-2) 0;
  vertical-align: bottom;
}
.tabell td { border-bottom: 1px solid var(--kant); padding: var(--rom-3) var(--rom-3) var(--rom-3) 0; vertical-align: top; }
.tabell-handling a { display: inline-block; margin-right: var(--rom-3); }
.rad--av td { background: var(--ingen-data-flate); color: var(--tekst-dempet); }
.rad--advarsel td { background: var(--alarm-tone); }

/* bannere */
.melding { border-radius: var(--runding); padding: var(--rom-4); margin-bottom: var(--rom-4); border: 1px solid var(--kant); }
.melding-tittel { font-weight: 700; }
.melding-tekst { color: var(--tekst-dempet); }
.melding--ok { background: var(--bevegelse-flate); border-color: var(--bevegelse-markor); }
.melding--feil { background: var(--alarm-flate); border-color: var(--alarm-kant); }
.melding--venter { background: var(--vaken-flate); border-color: var(--vaken-markor); }
.melding--info { background: var(--ingen-data-flate); }

/* knapper og skjema */
.knapp {
  display: inline-flex;
  align-items: center;
  gap: var(--rom-2);
  background: var(--tekst);
  color: var(--flate-kort);
  border: 1px solid var(--tekst);
  border-radius: 8px;
  padding: var(--rom-2) var(--rom-4);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.knapp--stor { padding: var(--rom-3) var(--rom-6); font-size: 16px; }
.knapp--stille { background: var(--flate-kort); color: var(--tekst); border-color: var(--kant-sterk); }
.skjemarad { display: flex; align-items: baseline; gap: var(--rom-3); margin-bottom: var(--rom-3); flex-wrap: wrap; }
.skjemarad label { min-width: 20ch; font-weight: 600; }
.radskjema { display: inline-flex; align-items: center; gap: var(--rom-2); margin: 0; }
input:not([type]), input[type="text"], input[type="search"], input[type="date"], input[type="number"], input[type="tel"], select, textarea {
  font: inherit;
  padding: var(--rom-2);
  border: 1px solid var(--kant-sterk);
  border-radius: 6px;
  background: var(--flate-kort);
  color: var(--tekst);
}
textarea { width: 100%; box-sizing: border-box; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; }
.sonevelger { display: flex; align-items: center; gap: var(--rom-3); margin-bottom: var(--rom-5); }
.sonevelger label { font-weight: 600; }

/* faner */
.faner { display: flex; gap: var(--rom-4); border-bottom: 1px solid var(--kant); margin-bottom: var(--rom-5); }
.fane { padding: var(--rom-2) 0; text-decoration: none; color: var(--tekst-dempet); border-bottom: 2px solid transparent; font-weight: 600; }
.fane--valgt { color: var(--tekst); border-bottom-color: var(--tekst); font-weight: 700; }

/* forsiden */
.kortrutenett { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--rom-4); margin-bottom: var(--rom-6); }
.oppgavekort {
  display: flex;
  gap: var(--rom-4);
  background: var(--flate-kort);
  border: 1px solid var(--kant);
  border-radius: var(--runding);
  padding: var(--rom-5);
  text-decoration: none;
  color: inherit;
}
.oppgavekort-ikon { color: var(--vaken); }
.oppgavekort-tittel { display: block; font-weight: 700; }
.oppgavekort-under { display: block; font-size: var(--sz-tegn-detalj); color: var(--tekst-dempet); }
.merkelapp {
  display: inline-block;
  font-size: var(--sz-legende);
  background: var(--ingen-data-flate);
  border: 1px solid var(--kant);
  border-radius: 999px;
  padding: 1px var(--rom-2);
  color: var(--tekst-dempet);
}
.merkelapp--venter { background: var(--vaken-flate); border-color: var(--vaken-markor); color: var(--sover); }
.brikker { display: flex; gap: var(--rom-2); flex-wrap: wrap; }
.brikke { border: 1px solid var(--kant-sterk); border-radius: 999px; padding: 2px var(--rom-3); font-size: var(--sz-tegn-detalj); }

/* lister */
.fakta { display: grid; grid-template-columns: 22ch 1fr; gap: var(--rom-2) var(--rom-4); margin: 0; }
.fakta dt { font-weight: 600; }
.fakta dd { margin: 0; color: var(--tekst-dempet); }
.steg { padding-left: 1.4em; }
.steg li { margin-bottom: var(--rom-3); }
.punkter { padding-left: 1.4em; color: var(--tekst-dempet); }

/* innlogging: samme kort som Zitadel-siden (H69), så overgangen ser ut som ett system */
.innlogging {
  max-width: 420px;
  margin: 12vh auto 48px;
  background: var(--flate-kort);
  border: 1px solid var(--kant);
  border-radius: 12px;
  padding: 48px 32px 32px;
  text-align: center;
}
.innlogging-merke { color: var(--logo); margin-bottom: 32px; }
.innlogging-merke .hugmerke { display: block; width: 96px; height: auto; margin: 0 auto; }
.innlogging-tittel { font-size: 24px; font-weight: 600; margin: 0 0 24px; }
.innlogging .melding { text-align: left; margin-bottom: 16px; }
.innlogging .knapp--stor { width: 100%; min-height: 48px; justify-content: center; }
.innlogging-skille { height: 1px; background: var(--kant); margin: 24px 0; }
.innlogging .etikett, .innlogging .smatekst { text-align: left; }
.innlogging-dev { margin-bottom: 8px; }
.innlogging-dev .knapp { width: 100%; justify-content: center; }
.innlogging-hjelp { color: var(--tekst-dempet); font-size: 14px; margin: 24px 0 0; }
.malvalg { display: block; border: 1px solid var(--kant); border-radius: var(--runding); padding: var(--rom-4); margin-bottom: var(--rom-3); }
.malvalg-navn { font-weight: 700; margin-left: var(--rom-2); }
.malvalg-paa, .malvalg-av { display: block; font-size: var(--sz-tegn-detalj); color: var(--tekst-dempet); }
.paringskode { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 28px; letter-spacing: 6px; }

/* plantegning */
.plantegning { border: 1px solid var(--kant); border-radius: var(--runding); background: var(--flate); padding: var(--rom-4); }
.plantegning-lerret { max-width: 100%; height: auto; touch-action: none; }
.plantegning-rom rect { fill: var(--flate-kort); stroke: var(--kant-sterk); stroke-width: 0.03; }
.plantegning-rom text { font-size: 0.32px; fill: var(--tekst-dempet); }
.plantegning-sensor { fill: var(--vaken); stroke: var(--flate-kort); stroke-width: 0.05; cursor: grab; }
.plantegning-sensor:focus { outline: 2px solid var(--sover); }
.plantegning-sensor.dras { cursor: grabbing; fill: var(--sover); }

/* Mork modus og tekststorrelse ligger i tema.css, som definerer de samme
   variablene paa nytt. Ingen skjerm har egne farger her. */

/* Døgnakse og romrader fra WebTidslinje / WebKariTidslinje, utkast 6. */
.tidslinje-datovalg { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:20px 0; }
.tidslinje-datovalg input { font:inherit; color:var(--tekst); background:var(--flate-kort); border:1px solid var(--kant-sterk); border-radius:8px; padding:10px; }
.tidslinje-graf { overflow-x:auto; background:var(--flate); border-radius:12px; padding:16px 8px; margin:20px 0 12px; }
.tidslinje-graf svg { display:block; width:100%; min-width:700px; }
.graf-akse { font-size:12px; fill:var(--tekst-dempet); text-anchor:middle; }
text.graf-rom { font-size:13px; fill:var(--tekst); }
.graf-rutenett { stroke:var(--kant-sterk); stroke-dasharray:3 4; }
.graf-spor { stroke:var(--kant); }
.graf-fremtid { fill:var(--flate-kort); opacity:.55; }
.graf-stolpe.graf-rom, i.graf-rom { fill:var(--avatar); background:var(--avatar); }
.graf-seng { fill:var(--tekst); background:var(--tekst); }
.graf-dor { fill:var(--tekst-dempet); background:var(--tekst-dempet); }
.graf-lyd { fill:var(--observasjon); background:var(--observasjon); }
.graf-naa { stroke:var(--tekst); stroke-width:1.5; stroke-dasharray:4 3; }
.graf-stolpe:focus, .graf-punkt:focus { stroke:var(--tekst); stroke-width:3; outline:none; }
.tidslinje-forklaring { display:flex; gap:20px; flex-wrap:wrap; font-size:13px; color:var(--tekst-dempet); }
.tidslinje-forklaring span { display:inline-flex; align-items:center; gap:7px; }
.tidslinje-forklaring i { display:inline-block; width:18px; height:10px; border-radius:3px; }

/* Felles webmål fra utkast 6. Tabellen ruller lokalt på smale skjermer. */
.adminflate { --runding: 12px; }
.adminflate a:not(.knapp):not(.merke):not(.oppgavekort):not(.toppnav-lenke):not(.fane) { color: inherit; text-underline-offset: 3px; }
.adminflate a:hover { text-decoration-thickness: 2px; }
.adminflate :focus-visible { outline: 3px solid var(--vaken); outline-offset: 3px; }
.hopp-lenke { position: absolute; left: 16px; top: -80px; padding: 12px 20px; z-index: 10; background: var(--flate-kort); }
.hopp-lenke:focus { top: 8px; }
.toppbruker, .utlogging { flex-shrink: 0; }
.ingress { font-size: calc(16px * var(--tekstskala, 1)); }
.adminbunn { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.seksjonshode { flex-wrap: wrap; }
.seksjonshode h2 { flex-basis: 180px; }
.kortflate, .sakskort, .oppgavekort-tekst, .fakta dd { min-width: 0; overflow-wrap: anywhere; }
.kortflate > :last-child { margin-bottom: 0; }
.knapp { min-height: 44px; justify-content: center; text-align: center; line-height: 1.3; }
.knapp svg, .oppgavekort-ikon { flex-shrink: 0; }
.knapp:hover { filter: brightness(.95); }
button:disabled, input:disabled, select:disabled { cursor: not-allowed; opacity: .65; }
input:not([type]), input[type="text"], input[type="search"], input[type="date"], input[type="number"], input[type="tel"], select { min-height: 44px; max-width: 100%; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--tekst); vertical-align: middle; }
.skjemarad { align-items: center; }
.skjemarad > .smatekst { flex: 1 1 200px; }
.radskjema, .sonevelger { flex-wrap: wrap; }
.fakta { grid-template-columns: minmax(0, 22ch) minmax(0, 1fr); }
.tabellrull { max-width: 100%; overflow-x: auto; margin-bottom: 16px; scrollbar-width: thin; }
.tabellrull .tabell { margin-bottom: 0; }
.tabell th, .tabell td { padding: 14px 16px 14px 0; }
.tabell th { white-space: nowrap; }
.tabell td { min-width: 80px; }
.tabell td:last-child, .tabell th:last-child { padding-right: 0; }
.tabell-handling a { padding: 6px 0; }
.faner { flex-wrap: wrap; gap: 8px 24px; }
.fane { display: inline-flex; align-items: center; min-height: 44px; }
.oppgavekort { padding: 24px; box-shadow: var(--skygge); }
.oppgavekort:hover { border-color: var(--kant-sterk); }
.oppgavekort-ikon { color: var(--tekst); padding-top: 2px; }
.oppgavekort-tittel { font-size: calc(18px * var(--tekstskala, 1)); margin-bottom: 6px; }
.statuscelle { display: flex; align-items: center; gap: 12px; }
.statusmarkor { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; flex: 0 0 36px; background: var(--ingen-data-markor); color: var(--ingen-data-ikon); border: 1px solid var(--kant-sterk); }
.statusmarkor--sover { background: var(--sover-markor); color: var(--sover-ikon); border-color: var(--sover-markor); }
.statusmarkor--vaken_i_sengen { background: var(--vaken-markor); color: var(--vaken-ikon); border-color: var(--vaken-markor); }
.statusmarkor--bevegelse { background: var(--bevegelse-markor); color: var(--bevegelse-ikon); border-color: var(--bevegelse-markor); }
.statusmarkor--alarm { background: var(--alarm); color: var(--flate-kort); border-color: var(--alarm); }
.statusmarkor--ingen_bevegelse, .statusmarkor--ute { background: var(--flate-kort); color: var(--tekst-dempet); }
.statusforklaring { display: flex; flex-wrap: wrap; gap: 16px 24px; padding: 0; margin: 0; list-style: none; }
.statusforklaring li { display: flex; gap: 10px; align-items: center; flex: 1 1 240px; }
.beboersok { margin-bottom: 20px; }
.beboernavn { display: flex; align-items: center; gap: 12px; }
.beboeravatar { width: 36px; height: 36px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--vaken-flate); color: var(--tekst); font-size: 12px; font-weight: 700; }
.alarmoversikt { margin-bottom: 24px; }
.alarmoversikt .sakskort { border: 1px solid var(--alarm-kant); border-left: 8px solid var(--alarm); }
.detaljer { border-top: 1px solid var(--kant); padding-top: 12px; margin-top: 16px; }
.detaljer summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.detaljer[open] summary { margin-bottom: 12px; }
@media (max-width: 1100px) {
  .topplinje { flex-wrap: wrap; padding: 16px 24px 0; gap: 12px 20px; }
  .topplinje .merke { margin-right: auto; }
  .toppnav { order: 3; flex-basis: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 0 24px; }
  .toppnav-lenke { min-height: 48px; }
}
@media (max-width: 600px) {
  .adminmain { padding: 24px 16px 32px; }
  .topplinje { padding: 12px 16px 0; }
  .toppnav { gap: 0 16px; }
  .toppnav-lenke { font-size: .9em; }
  .toppbruker { max-width: 45%; overflow-wrap: anywhere; }
  .kortflate { padding: 16px; }
  .fakta { grid-template-columns: 1fr; gap: 4px; }
  .fakta dd { margin-bottom: 12px; }
  .skjemarad { align-items: stretch; flex-direction: column; gap: 6px; }
  .skjemarad > .smatekst { flex: auto; }
  .skjemarad label { min-width: 0; }
  .skjemarad input, .skjemarad select { width: 100%; }
  .tabell { min-width: 560px; }
  .innlogging { padding: 32px 20px 24px; margin: 24px auto; }
  .adminbunn { padding: 24px 16px; }
  .visningsvelger { flex-wrap: wrap; }
}

.oppgavekort-ikon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--ingen-data); flex-shrink: 0; }
.oppgavekort::after { content: "›"; color: var(--tekst-dempet); margin-left: auto; font-size: 22px; }
.plantegning-verktøy { padding: 16px; background: var(--flate); border: 1px solid var(--kant); border-radius: 12px; margin-bottom: 16px; }
.plan-maal { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.plan-maal label { display: flex; flex-direction: column; gap: 4px; width: 100px; }
.plan-maal input { width: 100%; }

.sakskort-beboer { font-weight: 700; margin-top: 12px; }
.sakskort-grunnlag { margin-top: 12px; }
.sakskort-grunnlag summary { cursor: pointer; font-size: .9em; color: var(--tekst-dempet); }
.sakskort-grunnlag[open] summary { margin-bottom: 12px; }
.soneliste { display: grid; gap: 12px; }
.sonerad { background: var(--flate); border-radius: 10px; padding: 20px; }
.sonerad h3 { margin: 0 0 4px; font-size: 18px; }
.sonerad .seksjonshode { justify-content: space-between; }
.sonelenker { display: flex; flex-wrap: wrap; gap: 16px; }
.sonerad summary { cursor: pointer; color: var(--tekst-dempet); font-size: .9em; }
.sonerad details[open] summary { margin-bottom: 16px; }
.tabell--beboere td:nth-child(2) { min-width: 180px; }
.tabell--beboere td:nth-child(3) { min-width: 200px; }
@media (max-width: 600px) {
  .tabell--beboere, .tabell--beboere tbody { display: block; min-width: 0; }
  .tabell--beboere thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabell--beboere tr { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--kant); padding: 16px 0; gap: 8px; }
  .tabell--beboere td { display: block; border: 0; padding: 0; min-width: 0 !important; }
  .tabell--beboere .beboerrom { color: var(--tekst-dempet); }
}
.webplankart { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.webplankart .fakta { grid-template-columns: 1fr; }
.webplankart .plantegning-sensor { cursor: default; }
@media (max-width: 900px) { .webplankart { grid-template-columns: minmax(0, 1fr); } }
.adminmain { overflow-wrap: anywhere; }

/* bevegelse (H43): varmekart, døgnstriper, aktivitet over tid og avvik.
   Én blåtone for minutter (sekvensiell), gult bare for avvik, skravert grått
   for ukjent. Fargene er variablene i hug.css/tema.css, også i mørk modus. */
.varme { fill:var(--avatar); background:var(--avatar); }
.varme-0 { fill:var(--kant); background:var(--kant); fill-opacity:.35; }
.varme-1 { fill-opacity:.25; opacity:1; }
.varme-2 { fill-opacity:.5; }
.varme-3 { fill-opacity:.75; }
.varme-4 { fill-opacity:1; }
i.varme-1 { opacity:.25; } i.varme-2 { opacity:.5; } i.varme-3 { opacity:.75; }
.varme.varme--ukjent { fill:url(#varme-skravur); }
.varme--ukjent.varme-1 { fill-opacity:.35; } .varme--ukjent.varme-2 { fill-opacity:.6; } .varme--ukjent.varme-3 { fill-opacity:.8; } .varme--ukjent.varme-4 { fill-opacity:1; }
.varme.varme--ukjent.varme-0 { fill:var(--kant); fill-opacity:.35; }
.varme-skravur-bunn { fill:var(--ingen-data-flate, var(--flate-kort)); }
.varme-skravur-strek { stroke:var(--tekst-svak); stroke-width:2; }
i.varme--ukjent-merke { background:repeating-linear-gradient(45deg, var(--tekst-svak) 0 2px, transparent 2px 6px); }
.varme:focus, .stripe:focus, .akt-stolpe:focus { stroke:var(--tekst); stroke-width:3; outline:none; }
/* Samme farger som stripen på pauseromsskjermen (hug.css, H44 del 3). */
.stripe--seng { fill:var(--sover); background:var(--sover); }
.stripe--inne { fill:var(--bevegelse); background:var(--bevegelse); }
.stripe--ute { fill:var(--flate-kort); stroke:var(--tekst); stroke-width:2; background:var(--flate-kort); box-shadow:inset 0 0 0 2px var(--tekst); }
.stripe--ukjent { fill:url(#stripe-skravur); }
.akt-vanlig { fill:var(--avatar); background:var(--avatar); }
.akt-utenfor { fill:var(--observasjon); background:var(--observasjon); }
.akt-mangler, .akt-forelopig { fill:url(#akt-skravur); background:repeating-linear-gradient(45deg, var(--tekst-svak) 0 2px, transparent 2px 6px); }
.akt-forelopig { stroke:var(--tekst-dempet); stroke-dasharray:3 2; }
.akt-baand { fill:var(--avatar); fill-opacity:.12; background:var(--avatar); opacity:1; }
i.akt-baand { opacity:.25; }
.akt-median { stroke:var(--tekst-dempet); stroke-width:1.5; stroke-dasharray:6 4; }
.graf-akse--y { text-anchor:end; }
.faner--sma { border-bottom:none; margin-bottom:8px; gap:4px 16px; }
.faner--sma .fane { min-height:36px; font-size:14px; }
.bare-skjermleser { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* Mønster siste 7 døgn på beboersiden (H71, utkast «Balansert»). Lyset er
   ikonet på kortet: grønn hake innenfor vanlig, gul fylt sirkel med pil for
   avvik meldt av Hug (fyll etter 1, 2–3 eller 4+ av 7 døgn), stiplet når
   vanlig nivå bygges, skravert ved for lite data. Aldri bare farge. */
.obsstripe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rom-2) var(--rom-3); background: var(--observasjon-flate); border: 1px solid var(--observasjon-kant); border-radius: 12px; padding: var(--rom-2) var(--rom-2) var(--rom-2) var(--rom-3); margin-bottom: var(--rom-4); }
.obsstripe-tekst { flex: 1 1 260px; min-width: 0; }
.obsstripe .knapp { min-height: 36px; }
.monster-hode { display: grid; gap: var(--rom-1); margin-bottom: var(--rom-4); }
.monster-hode h2 { font-size: 22px; margin: 0; }
.monster-hode p { margin: 0; }
.monster-kort { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--rom-3); }
.monsterkort { border: 1px solid var(--kant); border-radius: 12px; padding: var(--rom-3) 14px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.monsterkort-topp { display: flex; align-items: center; gap: var(--rom-2); }
.monsterkort-navn { font-weight: 700; }
.monsterkort-status { font-size: 14px; color: var(--tekst-dempet); }
.monsterkort--avvik .monsterkort-status { color: var(--observasjon); font-weight: 600; }
.monster-stolper { display: block; width: 100%; height: 40px; margin-top: var(--rom-1); }
.monster-vanlig { fill: var(--avatar); }
.monster-utenfor { fill: var(--observasjon); }
.monster-mangler { fill: var(--tekst-svak); }
.monster-ikkevurdert { fill: none; stroke: var(--tekst-dempet); stroke-width: 1.5; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.lys { width: 24px; height: 24px; border-radius: 999px; display: inline-grid; place-items: center; flex-shrink: 0; }
.lys--vanlig { background: var(--bevegelse-markor); color: #FFFFFF; }
.lys--avvik { background: var(--observasjon-flate); box-shadow: inset 0 0 0 2px var(--observasjon); color: var(--tekst); }
.lys--fyll1 { background: conic-gradient(var(--observasjon) 0 25%, var(--observasjon-flate) 25% 100%); }
.lys--fyll2 { background: conic-gradient(var(--observasjon) 0 50%, var(--observasjon-flate) 50% 100%); }
.lys--fyll4 { background: var(--observasjon); }
.lys--avvik b { min-width: 15px; height: 15px; border-radius: 999px; background: var(--flate-kort); display: grid; place-items: center; font-size: 10px; line-height: 1; }
.lys--larer { border: 2px dashed var(--tekst-dempet); }
.lys--ingen { background: repeating-linear-gradient(45deg, var(--tekst-svak) 0 2px, transparent 2px 6px); box-shadow: inset 0 0 0 1.5px var(--tekst-dempet); }
details.kortflate > summary { cursor: pointer; min-height: 32px; }
details.kortflate[open] > summary { margin-bottom: var(--rom-3); }
@media (max-width: 1100px) { .monster-kort { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .monster-kort { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* beboerhodet (H81, «Balansert»): initialer, navn og rom, sonen og tilstanden nå
   over fanene. Erstatter tittel, ingress og sonevelger på beboerfanene. */
.beboerhode { display: grid; gap: var(--rom-3); margin-bottom: var(--rom-5); }
.beboerhode-tilbake { justify-self: start; text-decoration: none; }
.beboerhode-tilbake::before { content: "‹ " / ""; }
.beboerhode-rad { display: flex; align-items: center; gap: var(--rom-4); }
.beboerhode-tekst { min-width: 0; }
.beboerhode .adminh1 { margin: 0; }
.beboerhode-rom { font-weight: 400; color: var(--tekst-dempet); }
.beboerhode-linje { margin: 4px 0 0; color: var(--tekst-dempet); }
.beboerhode-naa { color: var(--tekst); }
.beboeravatar--stor { width: 52px; height: 52px; flex-basis: 52px; font-size: 18px; }
.statusprikk { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; background: var(--ingen-data-markor); border: 1px solid var(--kant-sterk); }
.statusprikk--sover { background: var(--sover-markor); border-color: var(--sover-markor); }
.statusprikk--vaken_i_sengen { background: var(--vaken-markor); border-color: var(--vaken-markor); }
.statusprikk--bevegelse { background: var(--bevegelse-markor); border-color: var(--bevegelse-markor); }
.statusprikk--alarm { background: var(--alarm); border-color: var(--alarm); }
.statusprikk--ingen_bevegelse, .statusprikk--ute { background: var(--flate-kort); border-color: var(--tekst-dempet); }
/* Fanene står på én rad og ruller sidelengs på mobil. */
.beboerfaner { flex-wrap: nowrap; overflow-x: auto; margin-bottom: 0; scrollbar-width: thin; }
.beboerfaner .fane { white-space: nowrap; }
.beboersaker { margin-bottom: var(--rom-4); }
.beboerkorrigert { align-items: center; }
.beboerlenke { font-weight: 600; }
@media (max-width: 600px) {
  .beboeravatar--stor { width: 44px; height: 44px; flex-basis: 44px; font-size: 16px; }
  .beboerhode .adminh1 { font-size: 22px; }
}