/* Lys er standardpaletten. Mork defineres to steder: under prefers-color-scheme
   for de som ikke har valgt noe, og under [data-tema="mork"] for de som har
   trykket pa knappen. Da vinner knappen begge veier. */
:root {
  --bg: #fbfbfa;
  --flate: #ffffff;
  --flate-2: #f4f4f2;
  --kant: #e6e6e2;
  --kant-sterk: #d4d4ce;
  --tekst: #17171a;
  --dempet: #75757e;
  --svak: #9a9aa2;
  --aksent: #b23a3a;
  --aksent-flate: #fdf1f1;
  --ok: #1a7a4a;
  --ok-flate: #edf8f2;
  --varsel: #9a6b00;
  --varsel-flate: #fdf6e7;
  --skygge: 0 1px 2px rgba(20, 20, 25, .04), 0 4px 16px rgba(20, 20, 25, .04);
  --r: 10px;
  --r-liten: 7px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="lys"]) {
    --bg: #0e0e11;
    --flate: #17171b;
    --flate-2: #1e1e23;
    --kant: #26262d;
    --kant-sterk: #33333c;
    --tekst: #ececef;
    --dempet: #9b9ba6;
    --svak: #6e6e79;
    --aksent: #e8918f;
    --aksent-flate: #2a1a1c;
    --ok: #6fd3a0;
    --ok-flate: #14251d;
    --varsel: #e0b464;
    --varsel-flate: #262014;
    --skygge: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
  }
}
:root[data-tema="mork"] {
  --bg: #0e0e11;
  --flate: #17171b;
  --flate-2: #1e1e23;
  --kant: #26262d;
  --kant-sterk: #33333c;
  --tekst: #ececef;
  --dempet: #9b9ba6;
  --svak: #6e6e79;
  --aksent: #e8918f;
  --aksent-flate: #2a1a1c;
  --ok: #6fd3a0;
  --ok-flate: #14251d;
  --varsel: #e0b464;
  --varsel-flate: #262014;
  --skygge: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
}

* { box-sizing: border-box; }

/* header og nav settes til display:flex lenger nede, og det slar nettleserens
   egen [hidden]-regel. Uten denne blir de staende synlige nar de skjules. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--tekst);
  font: 15px/1.55 ui-sans-serif, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Topplinje ---------- */
header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .85rem 1.5rem;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--kant);
}
.merkenavn { font-size: 1rem; font-weight: 650; letter-spacing: -.02em; margin: 0; }
.merkenavn span { color: var(--aksent); }
.hoyre { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

.rolle {
  font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: .2rem .55rem; border-radius: 99px;
  background: var(--flate-2); color: var(--dempet); border: 1px solid var(--kant);
}

/* Temaknappen: sol i mork modus, mane i lys. */
#temaknapp {
  width: 34px; height: 34px; padding: 0; display: grid; place-items: center;
  border-radius: 99px; border: 1px solid var(--kant); background: var(--flate);
  color: var(--dempet); cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
#temaknapp:hover { color: var(--tekst); border-color: var(--kant-sterk); background: var(--flate-2); }
#temaknapp svg { width: 17px; height: 17px; display: block; }
#temaknapp .sol { display: none; }
:root[data-tema="mork"] #temaknapp .sol { display: block; }
:root[data-tema="mork"] #temaknapp .mane { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="lys"]) #temaknapp .sol { display: block; }
  :root:not([data-tema="lys"]) #temaknapp .mane { display: none; }
}

/* ---------- Fanerad ---------- */
nav {
  display: flex; gap: .1rem; padding: 0 1.5rem;
  border-bottom: 1px solid var(--kant); overflow-x: auto; scrollbar-width: none;
}
nav::-webkit-scrollbar { display: none; }
nav button {
  position: relative; background: none; border: 0;
  padding: .7rem .75rem .8rem; font: inherit; font-size: .9rem;
  color: var(--dempet); cursor: pointer; white-space: nowrap;
  transition: color .15s;
}
nav button::after {
  content: ""; position: absolute; left: .75rem; right: .75rem; bottom: -1px;
  height: 2px; border-radius: 2px 2px 0 0; background: transparent; transition: background .15s;
}
nav button:hover { color: var(--tekst); }
nav button[aria-current="true"] { color: var(--tekst); font-weight: 600; }
nav button[aria-current="true"]::after { background: var(--aksent); }
nav button[hidden] { display: none; }
#bytteteller { color: var(--aksent); font-weight: 600; }

main { max-width: 1120px; margin: 0 auto; padding: 2rem 1.5rem 3.5rem; }

/* Vises i stedet for hele appen nar databasen ikke er satt opp. */
#sperre { max-width: 34rem; margin: 4rem auto; padding: 0 1.5rem; }
#sperre p { color: var(--dempet); }
#sperre code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .88em; background: var(--flate-2);
  border: 1px solid var(--kant); border-radius: 4px; padding: .05em .3em;
}

footer {
  max-width: 1120px; margin: 0 auto; padding: 1.5rem 1.5rem 2.75rem;
  border-top: 1px solid var(--kant);
  text-align: center;
}
.avsender { margin: 0; font-size: .82rem; color: var(--svak); }
.avsender span { color: var(--dempet); font-weight: 550; }
section[hidden] { display: none; }
h2 { font-size: 1.15rem; font-weight: 650; letter-spacing: -.02em; margin: 0 0 .3rem; }
.hjelp { color: var(--dempet); font-size: .88rem; margin: 0 0 1.4rem; max-width: 62ch; }

/* ---------- Verktoylinje ---------- */
.verktoylinje { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.1rem; }
.verktoylinje .skille { margin-left: auto; }

/* ---------- Tabeller ---------- */
.tabellramme {
  overflow-x: auto; background: var(--flate);
  border: 1px solid var(--kant); border-radius: var(--r); box-shadow: var(--skygge);
}
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: .62rem .85rem; text-align: left; white-space: nowrap; }
thead th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--svak); font-weight: 600; border-bottom: 1px solid var(--kant);
  background: var(--flate);
}
tbody td { border-bottom: 1px solid var(--kant); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--flate-2); }
td.tall, th.tall { text-align: right; font-variant-numeric: tabular-nums; }
td.bred, th.bred { white-space: normal; min-width: 15rem; }
td.dato { font-variant-numeric: tabular-nums; }
tfoot td {
  font-weight: 650; border-top: 1px solid var(--kant-sterk);
  background: var(--flate-2); font-variant-numeric: tabular-nums;
}
tr.min td:first-child { box-shadow: inset 2px 0 0 var(--aksent); }
td.uke { color: var(--dempet); font-variant-numeric: tabular-nums; }
td.uke.min { color: var(--aksent); font-weight: 600; }
.tom { color: var(--svak); padding: 2.5rem 1rem; text-align: center; white-space: normal; }

/* ---------- Knapper ---------- */
button, .knapp {
  font: inherit; font-size: .875rem; padding: .42rem .8rem;
  border-radius: var(--r-liten); border: 1px solid var(--kant);
  background: var(--flate); color: var(--tekst); cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
button:hover:not(:disabled) { border-color: var(--kant-sterk); background: var(--flate-2); }
button:disabled { opacity: .4; cursor: default; }
button.primar { background: var(--tekst); border-color: var(--tekst); color: var(--bg); }
button.primar:hover:not(:disabled) { opacity: .85; background: var(--tekst); color: var(--bg); }
button.liten { padding: .22rem .55rem; font-size: .8rem; }
button.fare:hover:not(:disabled) { color: var(--aksent); border-color: var(--aksent); }
:focus-visible { outline: 2px solid var(--aksent); outline-offset: 2px; }

/* ---------- Skjemafelt ---------- */
select,
input[type="date"], input[type="time"], input[type="text"],
input[type="number"], input[type="password"], input[type="email"] {
  font: inherit; font-size: .875rem; padding: .38rem .55rem;
  border: 1px solid var(--kant); border-radius: var(--r-liten);
  background: var(--flate); color: var(--tekst);
  transition: border-color .15s;
}
select:hover, input:hover { border-color: var(--kant-sterk); }
input[type="checkbox"] { accent-color: var(--aksent); }
label { font-size: .85rem; color: var(--dempet); display: inline-flex; gap: .4rem; align-items: center; }

/* ---------- Merkelapper ---------- */
.flagg {
  font-size: .7rem; font-weight: 550; padding: .12rem .45rem;
  border-radius: 5px; white-space: nowrap; vertical-align: 1px;
}
.flagg.usikker { background: var(--varsel-flate); color: var(--varsel); }
.flagg.justert, .flagg.manuell { background: var(--aksent-flate); color: var(--aksent); }
.flagg.noytral { background: var(--flate-2); color: var(--dempet); }

/* ---------- Meldinger ---------- */
.melding {
  padding: .7rem .95rem; border-radius: var(--r); margin-bottom: 1.1rem;
  font-size: .88rem; border: 1px solid var(--kant); background: var(--flate);
}
.melding a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.melding a:hover { opacity: .75; }
.melding.feil { border-color: color-mix(in srgb, var(--aksent) 40%, transparent); background: var(--aksent-flate); color: var(--aksent); }
.melding.ok { border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: var(--ok-flate); color: var(--ok); }
.melding.varsel { border-color: color-mix(in srgb, var(--varsel) 35%, transparent); background: var(--varsel-flate); color: var(--varsel); }

/* ---------- Opplasting ---------- */
.slippsone {
  border: 1.5px dashed var(--kant-sterk); border-radius: var(--r);
  padding: 2.75rem 1.5rem; text-align: center; color: var(--dempet);
  background: var(--flate); font-size: .9rem;
  transition: border-color .15s, background .15s, color .15s;
}
.slippsone.over { border-color: var(--aksent); color: var(--aksent); background: var(--aksent-flate); }

/* ---------- Redigeringsrad ---------- */
tr.rediger td { background: var(--flate-2); white-space: normal; }
.redigerfelt { display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; }
.redigerfelt input[type="text"] { min-width: 14rem; flex: 1; }

/* ---------- Dialog ---------- */
dialog {
  border: 1px solid var(--kant); border-radius: var(--r);
  background: var(--flate); color: var(--tekst);
  padding: 1.4rem; max-width: 27rem; width: calc(100% - 2rem);
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
}
dialog::backdrop { background: rgba(10,10,14,.45); backdrop-filter: blur(2px); }
dialog h3 { margin: 0 0 .35rem; font-size: 1rem; font-weight: 650; letter-spacing: -.015em; }
dialog .hjelp { margin-bottom: 1rem; }
.felt { display: grid; gap: .25rem; }
.felt > span { font-size: .8rem; color: var(--dempet); }
.forslag {
  font-size: .83rem; color: var(--dempet); line-height: 1.5;
  background: var(--flate-2); border: 1px solid var(--kant);
  border-radius: var(--r-liten); padding: .6rem .7rem;
}
.forslag strong { color: var(--tekst); font-weight: 600; }
.forslag button { margin-top: .4rem; }
.felt input, .felt select { width: 100%; }
.dialogknapper { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1.2rem; }

@media (max-width: 640px) {
  header, nav, main { padding-left: 1rem; padding-right: 1rem; }
  .hjelp { font-size: .85rem; }
}

/* ---------- Innlogging ---------- */
#innlogging { max-width: 21rem; margin: 4.5rem auto; padding: 0 1.5rem; }
#skjemaInnlogging { display: grid; gap: .9rem; }
#skjemaInnlogging h2 { margin: 0; }
#skjemaInnlogging .hjelp { margin: -.5rem 0 .2rem; }
#skjemaInnlogging input { width: 100%; padding: .5rem .6rem; }
#skjemaInnlogging button { margin-top: .3rem; padding: .55rem; }
#innloggingFeil { margin-bottom: 0; }
#navnVist { font-size: .9rem; font-weight: 600; }

/* Nettleserens autofyll maler feltet hvitt. Overstyres, ellers blir
   passordfeltet lyst midt i et morkt skjermbilde. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--tekst);
  -webkit-box-shadow: 0 0 0 1000px var(--flate) inset;
  caret-color: var(--tekst);
}