/* 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 */
.innlogging {
  max-width: 460px;
  margin: 60px auto;
  background: var(--flate-kort);
  border-radius: var(--runding-stor);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
  padding: var(--rom-8);
}
.innlogging-merke { font-size: 40px; font-weight: 800; color: var(--merke); letter-spacing: -1px; line-height: 1; }
.innlogging-tittel { font-size: 26px; font-weight: 700; margin: var(--rom-2) 0; }
.innlogging-leverandor {
  border: 1px solid var(--kant-sterk);
  border-radius: 8px;
  padding: var(--rom-3);
  text-align: center;
  margin-top: var(--rom-3);
  font-weight: 600;
}
.innlogging-skille { height: 1px; background: var(--kant); margin: var(--rom-6) 0; }
.innlogging-dev { margin-bottom: var(--rom-2); }
.innlogging-dev .knapp { width: 100%; justify-content: center; }
.rolleliste { list-style: none; padding: 0; margin: var(--rom-3) 0; }
.rolleliste li { margin-bottom: var(--rom-3); }
.rolleliste-navn { display: block; font-weight: 700; }
.rolleliste-ser { display: block; font-size: 13px; color: var(--tekst-dempet); }
.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; }
.innlogging { max-width: 520px; margin: 44px auto; padding: 36px; border: 1px solid var(--kant); border-radius: 16px; }
.innlogging-merke { margin-bottom: 28px; }
.innlogging .knapp--stor { width: 100%; min-height: 48px; }
.innlogging-leverandor { border: 0; color: var(--tekst-dempet); font-size: 13px; font-weight: 400; padding: 0; }
.innlogging .rolleliste li { border-bottom: 1px solid var(--kant); padding-bottom: 12px; }
.innlogging .rolleliste li:last-child { border: 0; }
.innlogging-hjelp { text-align: center; color: var(--tekst-dempet); font-size: 14px; }
.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: 24px; margin: 0 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; }
.mobil-etikett { display: none; }
.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); }
  .tabell--beboere .tabell-handling { display: flex; flex-wrap: wrap; gap: 8px; }
  .mobil-etikett { display: inline; }
}
.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; }