/* Lagerline – lyst administrasjonssystem: hvit sidemeny, lav topplinje og innholdskort på svært lys bakgrunn.
   Alle farger, avstander og typografi står som felles designverdier her. Avstander: 8 / 12 / 16 / 24 / 32 px. */
:root {
  /* Farger */
  --bg: #F7F9FC;
  --kort: #FFFFFF;
  --tekst: #202938;
  --demp: #77808F;
  --meny-tekst: #4B5563;
  --aksent: #2563EB;
  --aksent-hover: #1D4ED8;
  --aksent-lys: #EFF6FF;
  --rod: #DC2626;
  --rod-lys: #FEF2F2;
  --gronn: #16A34A;
  --oransje: #D97706;
  --lys: #F3F5F9;
  --linje: #E5EAF0;
  --felt: #FFFFFF;
  --felt-kant: #D9E0E8;
  /* Pastell bak ikoner */
  --p-bla: #EFF6FF; --p-bla-t: #2563EB;
  --p-gronn: #ECFDF3; --p-gronn-t: #16A34A;
  --p-oransje: #FFF7ED; --p-oransje-t: #EA580C;
  --p-lilla: #F5F3FF; --p-lilla-t: #7C3AED;
  --p-rosa: #FDF2F8; --p-rosa-t: #DB2777;
  --p-turkis: #ECFEFF; --p-turkis-t: #0891B2;
  /* Skygger: svært diskrete */
  --skygge: 0 1px 2px rgba(16, 24, 40, .04);
  --skygge-hover: 0 4px 12px rgba(16, 24, 40, .08);
  --skygge-flyt: 0 12px 32px rgba(16, 24, 40, .14);
  /* Avstander og former */
  --s1: 8px; --s15: 12px; --s2: 16px; --s3: 24px; --s4: 32px;
  --r: 10px; --r-liten: 8px;
  --meny-bredde: 220px; --topp-hoyde: 56px; --innhold-luft: 28px;
  --overgang: .18s ease;
  /* Typografi */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --tekst-str: 14px; --tittel-str: 24px;
  color-scheme: light;
}
:root[data-tema="natt"] {
  --bg: #0B1220;
  --kort: #111A2B;
  --tekst: #E6EAF2;
  --demp: #8A94A6;
  --meny-tekst: #B4BCC9;
  --aksent: #4F8BFF;
  --aksent-hover: #6B9DFF;
  --aksent-lys: #172A4A;
  --rod: #F87171;
  --rod-lys: #3A1A1F;
  --gronn: #4ADE80;
  --oransje: #FBBF24;
  --lys: #172033;
  --linje: #23304A;
  --felt: #0F1828;
  --felt-kant: #2C3A55;
  --p-bla: #172A4A; --p-bla-t: #7AA7FF;
  --p-gronn: #12301F; --p-gronn-t: #4ADE80;
  --p-oransje: #3A2414; --p-oransje-t: #FDBA74;
  --p-lilla: #2A1F45; --p-lilla-t: #C4B5FD;
  --p-rosa: #3A1730; --p-rosa-t: #F9A8D4;
  --p-turkis: #0F3038; --p-turkis-t: #67E8F9;
  --skygge: 0 1px 2px rgba(0, 0, 0, .4);
  --skygge-hover: 0 4px 12px rgba(0, 0, 0, .5);
  --skygge-flyt: 0 12px 32px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--tekst); font-family: var(--font); font-size: var(--tekst-str); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--aksent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { letter-spacing: -.01em; margin: 0; }
.skjult { display: none !important; }
.demp { color: var(--demp); }
.liten { font-size: 12.5px; }
:focus-visible { outline: 2px solid var(--aksent); outline-offset: 2px; }
.hopp { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--kort); padding: 8px 12px; border-radius: var(--r-liten); box-shadow: var(--skygge-flyt); }
.hopp:focus { left: 8px; }
.ikon { flex: none; }

/* ---- Rammen: sidemeny til venstre, topplinje og innhold til høyre ---- */
.ramme { min-height: 100vh; }
.sidemeny {
  position: fixed; inset: 0 auto 0 0; width: var(--meny-bredde); background: var(--kort); border-right: 1px solid var(--linje);
  display: flex; flex-direction: column; z-index: 70;
}
.logo-felt { height: var(--topp-hoyde); display: flex; align-items: center; padding: 0 14px; border-bottom: 1px solid var(--linje); flex: none; }
.logo-lenke { display: flex; align-items: center; width: 100%; padding: 4px 6px; border-radius: var(--r-liten); transition: background var(--overgang); }
.logo-lenke:hover { background: var(--lys); text-decoration: none; }
.logo { height: 44px; width: auto; max-width: 100%; object-fit: contain; display: block; filter: contrast(1.06); }
:root[data-tema="natt"] .logo { filter: brightness(0) invert(.95); }
.meny { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.meny-bunn { border-top: 1px solid var(--linje); padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.sidemeny a[data-side] {
  display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: var(--r-liten);
  color: var(--meny-tekst); font-weight: 500; transition: background var(--overgang), color var(--overgang); white-space: nowrap;
}
.sidemeny a[data-side]:hover { background: var(--lys); color: var(--tekst); text-decoration: none; }
.sidemeny a[data-side].aktiv { background: var(--aksent-lys); color: var(--aksent); font-weight: 600; }
.hoved { margin-left: var(--meny-bredde); min-width: 0; }
.topplinje {
  position: sticky; top: 0; z-index: 50; height: var(--topp-hoyde); background: var(--kort); border-bottom: 1px solid var(--linje);
  display: flex; align-items: center; gap: var(--s15); padding: 0 var(--innhold-luft);
}
.topp-hoyre { margin-left: auto; display: flex; align-items: center; gap: var(--s1); }
.ikonknapp.menyknapp { display: none; }
.dekke { position: fixed; inset: 0; background: rgba(15, 23, 42, .35); z-index: 65; }
.ikonknapp {
  width: 36px; height: 36px; border-radius: var(--r-liten); border: 0; background: transparent; cursor: pointer; display: grid;
  place-items: center; color: var(--meny-tekst); transition: background var(--overgang); flex: none;
}
.ikonknapp:hover { background: var(--lys); color: var(--tekst); }

/* Søkefeltet i topplinjen */
.sok { position: relative; width: 420px; max-width: 100%; }
.sok-felt {
  width: 100%; height: 38px; border-radius: var(--r-liten); border: 1px solid var(--felt-kant); background: var(--felt);
  padding: 0 36px 0 36px; font-size: var(--tekst-str); outline: none; transition: border-color var(--overgang), box-shadow var(--overgang);
}
.sok-felt::placeholder { color: var(--demp); }
.sok-felt::-webkit-search-cancel-button, .sok-felt::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.sok-felt:focus { border-color: var(--aksent); box-shadow: 0 0 0 3px var(--aksent-lys); }
.sok-lupe { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--demp); pointer-events: none; display: flex; }
.sok-tom {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 6px;
  border: 0; background: transparent; color: var(--demp); cursor: pointer; font-size: 13px; display: grid; place-items: center;
}
.sok-tom:hover { background: var(--lys); color: var(--tekst); }
.forslag {
  position: absolute; left: 0; right: 0; min-width: 320px; top: calc(100% + 6px); background: var(--kort); border-radius: var(--r);
  box-shadow: var(--skygge-flyt); border: 1px solid var(--linje); padding: 6px; z-index: 60; max-height: 60vh; overflow: auto;
  animation: inn .15s ease;
}
.forslag-valg {
  padding: 8px 12px; border-radius: var(--r-liten); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.forslag-valg.aktiv, .forslag-valg:hover { background: var(--aksent-lys); }
.forslag-valg.forste { font-weight: 600; color: var(--aksent); }

/* ---- Forsiden ---- */
.sidehode { margin-bottom: var(--s3); }
.kpi-rad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: var(--s4); }
.kpi {
  min-height: 110px; background: var(--kort); border: 1px solid var(--linje); border-radius: var(--r); box-shadow: var(--skygge);
  padding: var(--s2) 20px; display: flex; align-items: flex-start; gap: var(--s15); color: var(--tekst);
}
a.kpi:hover { text-decoration: none; box-shadow: var(--skygge-hover); border-color: var(--felt-kant); }
.kpi-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; }
.kpi-etikett { color: var(--demp); font-size: 13px; font-weight: 500; }
.kpi-verdi { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin-top: 6px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi-status { color: var(--demp); font-size: 12.5px; margin-top: auto; padding-top: 6px; }
.kpi-ikon, .kat-ikon, .hurtig-ikon { display: grid; place-items: center; border-radius: var(--r); flex: none; }
.kpi-ikon { width: 44px; height: 44px; }
.bla { background: var(--p-bla); color: var(--p-bla-t); }
.gronn { background: var(--p-gronn); color: var(--p-gronn-t); }
.oransje { background: var(--p-oransje); color: var(--p-oransje-t); }
.lilla { background: var(--p-lilla); color: var(--p-lilla-t); }
.rosa { background: var(--p-rosa); color: var(--p-rosa-t); }
.turkis { background: var(--p-turkis); color: var(--p-turkis-t); }
.seksjonshode { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); margin: 0 0 var(--s15); }
.seksjonshode h2 { font-size: 17px; font-weight: 650; }
.seksjonshode a { font-size: 13px; font-weight: 500; }
.kat-rutenett { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: var(--s4); }
.katkort {
  min-height: 170px; background: var(--kort); border: 1px solid var(--linje); border-radius: var(--r); box-shadow: var(--skygge);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s1); padding: var(--s3) var(--s2);
  cursor: pointer; text-align: center; transition: box-shadow var(--overgang), border-color var(--overgang);
}
.katkort * { cursor: pointer; }
.katkort:hover { box-shadow: var(--skygge-hover); border-color: #BFD3F8; background: #FBFCFF; }
.katkort:hover .kat-navn { color: var(--aksent); }
.katkort:active { transform: translateY(1px); }
.katkort:focus-visible { outline: 2px solid var(--aksent); outline-offset: 2px; border-color: var(--aksent); }
:root[data-tema="natt"] .katkort:hover { background: var(--lys); border-color: var(--felt-kant); }
/* Søkefeltet øverst på Varer-siden */
.side-sok { position: relative; margin-bottom: var(--s2); }
.side-sok .side-sok-felt { height: 46px; padding: 0 44px 0 42px; font-size: 15px; box-shadow: var(--skygge); }
.side-sok .sok-lupe { left: 14px; }
.side-sok .sok-tom { right: 10px; }
.side-sok-felt::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
/* Valgt kategori over varelisten */
.kategori-valgt {
  display: flex; align-items: center; gap: var(--s15); flex-wrap: wrap; background: var(--aksent-lys); border: 1px solid #BFDBFE;
  border-radius: var(--r); padding: var(--s15) var(--s2); margin-bottom: var(--s2);
}
:root[data-tema="natt"] .kategori-valgt { border-color: var(--linje); }
.kategori-valgt .kat-ikon { width: 36px; height: 36px; margin: 0; background: var(--kort); }
.kategori-navn { font-size: 16px; font-weight: 650; color: var(--tekst); }
.kat-ikon { width: 52px; height: 52px; margin-bottom: 4px; }
.kat-navn { font-size: 15px; font-weight: 600; color: var(--tekst); }
.kat-under { font-size: 12.5px; color: var(--demp); max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.kat-antall { font-size: 13px; color: var(--demp); margin-top: auto; }
.to-paneler { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.panel-kort { background: var(--kort); border: 1px solid var(--linje); border-radius: var(--r); box-shadow: var(--skygge); padding: 20px; min-width: 0; }
.aktivitet { list-style: none; margin: 0; padding: 0; }
.aktivitet li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s15); align-items: center; padding: 10px 0; border-top: 1px solid var(--linje); }
.aktivitet li:first-child { border-top: 0; }
.aktivitet li.tomt-panel { display: flex; gap: var(--s15); color: var(--demp); padding: var(--s2) 0; }
.aktivitet time { font-size: 12px; white-space: nowrap; }
.akt-merke { font-size: 12px; font-weight: 600; background: var(--aksent-lys); color: var(--aksent); border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.akt-tekst { min-width: 0; }
.akt-tekst > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.akt-vare { font-weight: 500; }
.akt-tekst .demp { font-size: 12.5px; }
.hurtig { display: grid; gap: var(--s1); }
.hurtigknapp {
  display: flex; align-items: center; gap: var(--s15); width: 100%; text-align: left; padding: 10px 12px; border-radius: var(--r-liten);
  border: 1px solid var(--linje); background: var(--kort); cursor: pointer; color: var(--meny-tekst); transition: all var(--overgang);
}
.hurtigknapp:hover { border-color: var(--felt-kant); background: var(--lys); }
.hurtigknapp.forsteknapp { background: var(--aksent); border-color: var(--aksent); color: #fff; }
.hurtigknapp.forsteknapp:hover { background: var(--aksent-hover); }
.hurtigknapp.forsteknapp .hurtig-ikon { background: rgba(255, 255, 255, .18); color: #fff; }
.hurtigknapp.forsteknapp .hurtig-tekst span { color: rgba(255, 255, 255, .85); }
.hurtig-ikon { width: 34px; height: 34px; border-radius: var(--r-liten); background: var(--aksent-lys); color: var(--aksent); }
.hurtig-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hurtig-tekst b { color: inherit; font-weight: 600; }
.hurtigknapp:not(.forsteknapp) .hurtig-tekst b { color: var(--tekst); }
.hurtig-tekst span { font-size: 12.5px; color: var(--demp); }

/* ---- Hovedinnhold ---- */
main { max-width: 1320px; padding: var(--innhold-luft) var(--innhold-luft) 64px; outline: none; }
.sidetittel { font-size: var(--tittel-str); font-weight: 700; margin: 0 0 4px; letter-spacing: -.02em; }
.undertittel { color: var(--demp); margin: 0; }
.seksjon { margin-top: var(--s4); }
.seksjon > h2 { font-size: 17px; margin-bottom: var(--s2); }

.kort {
  background: var(--kort); border-radius: var(--r); box-shadow: var(--skygge); padding: var(--s3); margin-bottom: var(--s2);
  border: 1px solid var(--linje); transition: box-shadow var(--overgang), transform var(--overgang);
  animation: inn .2s ease both;
}
.kort.tett { padding: var(--s2); }
@keyframes inn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.rad { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.rad.tett { gap: var(--s1); }
.rad.topp-just { align-items: flex-start; }
.vokse { flex: 1 1 auto; min-width: 0; }
.rutenett { display: grid; gap: var(--s2); }
.to-kol { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (max-width: 760px) { .to-kol { grid-template-columns: 1fr; } }

/* Knapper */
.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 14px;
  border-radius: var(--r-liten); border: 1px solid var(--felt-kant); background: var(--kort); color: var(--tekst); cursor: pointer;
  font-size: var(--tekst-str); font-weight: 500; white-space: nowrap; transition: all var(--overgang); text-decoration: none;
}
.knapp:hover { border-color: #C3CCD8; background: var(--lys); text-decoration: none; }
.knapp:active { transform: translateY(1px); }
.knapp:disabled { opacity: .4; cursor: default; pointer-events: none; }
.knapp.primar { background: var(--aksent); border-color: var(--aksent); color: #fff; }
.knapp.primar:hover { background: var(--aksent-hover); border-color: var(--aksent-hover); color: #fff; }
.knapp.tekst { border-color: transparent; background: transparent; color: var(--aksent); padding: 0 10px; }
.knapp.tekst:hover { background: var(--aksent-lys); }
.knapp.rod { color: var(--rod); background: var(--rod-lys); border-color: transparent; }
.knapp.rod:hover { background: var(--rod); color: #fff; }
.knapp.liten { min-height: 32px; padding: 0 10px; font-size: 13px; }
.knapp.bred { width: 100%; }
.rund { width: 40px; min-width: 40px; padding: 0; border-radius: 50%; font-size: 20px; font-weight: 600; }
.knapp.primar:hover, .knapp.primar:focus-visible { color: #fff; }
.knapper { display: flex; gap: var(--s1); flex-wrap: wrap; align-items: center; }

/* Skjemafelt */
label.felt { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; min-width: 0; color: var(--tekst); }
label.felt > span.hint { color: var(--demp); font-weight: 400; font-size: 12.5px; }
.inndata, select.inndata, textarea.inndata {
  height: 38px; border-radius: var(--r-liten); border: 1px solid var(--felt-kant); background: var(--felt); padding: 0 12px;
  font-size: var(--tekst-str); outline: none; transition: border-color var(--overgang), box-shadow var(--overgang); width: 100%; min-width: 0;
}
textarea.inndata { height: auto; min-height: 80px; padding: 10px 12px; resize: vertical; }
.inndata:focus { border-color: var(--aksent); box-shadow: 0 0 0 3px var(--aksent-lys); }
.inndata:disabled { opacity: .5; }
.skjema { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; }
.avkryss { display: inline-flex; align-items: center; gap: 8px; font-size: var(--tekst-str); cursor: pointer; user-select: none; }
.avkryss input { width: 18px; height: 18px; accent-color: var(--aksent); }

/* Segmentert valg (som i iOS) */
.segment { display: inline-flex; background: var(--lys); border: 1px solid var(--linje); border-radius: var(--r-liten); padding: 3px; gap: 2px; flex-wrap: wrap; }
.segment button {
  border: 0; background: transparent; border-radius: 6px; padding: 5px 12px; font-size: 13px; font-weight: 500; cursor: pointer;
  color: var(--tekst); transition: all var(--overgang);
}
.segment button.valgt { background: var(--kort); box-shadow: 0 1px 2px rgba(16, 24, 40, .1); color: var(--aksent); font-weight: 600; }

/* Merker */
.pille { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; background: var(--lys); color: var(--tekst); white-space: nowrap; }
.pille.aksent { background: var(--aksent-lys); color: var(--aksent); }
.pille.rod { background: var(--rod-lys); color: var(--rod); }
.pille.gronn { background: var(--p-gronn); color: var(--p-gronn-t); }
:root[data-tema="natt"] .pille.gronn { color: var(--gronn); }
.chip {
  display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--felt-kant);
  background: var(--kort); font-size: 13px; cursor: pointer; transition: all var(--overgang); color: var(--tekst);
}
.chip:hover { border-color: var(--aksent); color: var(--aksent); }
.chip.valgt { background: var(--aksent); border-color: var(--aksent); color: #fff; }

/* Beskjeder */
.melding { border-radius: var(--r-liten); padding: 10px 14px; margin-bottom: var(--s2); font-size: var(--tekst-str); border: 1px solid var(--linje); display: flex; gap: 10px; align-items: flex-start; animation: inn .2s ease; }
.melding.info { background: var(--aksent-lys); border-color: #BFDBFE; }
.melding.advarsel { background: var(--p-oransje); border-color: #FED7AA; }
.melding.feil { background: var(--rod-lys); border-color: #FECACA; }
.melding.ok { background: var(--p-gronn); border-color: #BBF7D0; }
.melding .vokse { white-space: pre-line; }

/* Tom tilstand */
.tom { text-align: center; padding: 56px 16px; }
.tom-ikon { font-size: 36px; margin-bottom: var(--s15); }
.tom h3 { font-size: 17px; margin-bottom: var(--s1); }
.tom p { color: var(--demp); max-width: 520px; margin: 0 auto var(--s2); }

/* Antall-linjen */
.antall-linje { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.antall-valg { font-size: 13px; color: var(--demp); font-weight: 400; margin-top: 2px; letter-spacing: 0; }

/* ---- Finn vare: resultatkort ---- */
.treffliste { display: grid; gap: var(--s15); }
.vare {
  display: grid; grid-template-columns: 72px 1fr auto; gap: var(--s2); align-items: center; background: var(--kort);
  border-radius: var(--r); box-shadow: var(--skygge); padding: var(--s2); border: 1px solid var(--linje); cursor: pointer;
  transition: box-shadow var(--overgang), transform var(--overgang); animation: inn .2s ease both;
}
.vare:hover { box-shadow: var(--skygge-hover); border-color: var(--felt-kant); }
.vare:focus-visible { outline: 3px solid var(--aksent-lys); outline-offset: 2px; }
.vare-bilde, .uten-bilde {
  width: 72px; height: 72px; border-radius: var(--r-liten); object-fit: contain; background: #fff; display: grid; place-items: center;
  font-size: 26px; border: 1px solid var(--linje);
}
.uten-bilde { background: var(--lys); color: var(--demp); }
.vare-navn { font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vare-nr { font-size: 15px; font-weight: 600; margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vare-nr .nr { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.vare-info { color: var(--demp); font-size: 13px; margin-top: 4px; overflow-wrap: anywhere; }
.kopier {
  border: 0; background: var(--lys); color: var(--demp); border-radius: 6px; font-size: 12px; padding: 2px 8px; cursor: pointer;
  transition: all var(--overgang);
}
.kopier:hover { background: var(--aksent); color: #fff; }
.kopier.ok { background: var(--gronn); color: #fff; }
.plasskode {
  text-align: center; min-width: 88px; padding: 8px 12px; border-radius: var(--r); background: var(--aksent-lys); color: var(--aksent);
}
.plasskode b { display: block; font-size: 24px; line-height: 1.05; letter-spacing: -.03em; }
.plasskode small { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; opacity: .85; margin-top: 2px; white-space: nowrap; }
.plasskode.ingen { background: var(--lys); color: var(--demp); }
.plasskode.ingen b { font-size: 14px; font-weight: 600; letter-spacing: 0; }
.eksakt { color: var(--oransje); }
@media (max-width: 640px) {
  .vare { grid-template-columns: 56px 1fr; gap: 12px; padding: 12px; }
  .vare-bilde, .uten-bilde { width: 56px; height: 56px; }
  .vare .plasskode { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: center; gap: 10px; }
  .vare-navn { font-size: 15px; }
  .vare-nr { font-size: 14px; }
}

/* Filtre */
.filtre { display: grid; gap: var(--s2); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .filtre { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .filtre { grid-template-columns: 1fr; } }
.merkerute { max-height: 280px; overflow: auto; border: 1px solid var(--linje); border-radius: var(--r-liten); padding: var(--s1); display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s1); }
details.utvid > summary { cursor: pointer; font-weight: 600; min-height: 28px; list-style: none; display: flex; align-items: center; gap: 8px; }
details.utvid > summary::-webkit-details-marker { display: none; }
details.utvid > summary::before { content: "›"; display: inline-block; transition: transform var(--overgang); font-size: 20px; line-height: 1; color: var(--demp); }
details.utvid[open] > summary::before { transform: rotate(90deg); }
details.utvid > .innhold { margin-top: var(--s2); }

/* Tabell */
.tabell-ramme { overflow: auto; max-height: 70vh; border-radius: var(--r); border: 1px solid var(--linje); background: var(--kort); }
table.tabell { border-collapse: collapse; width: 100%; font-size: var(--tekst-str); }
.tabell th, .tabell td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--linje); vertical-align: middle; }
.tabell th { position: sticky; top: 0; background: var(--lys); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--demp); z-index: 1; white-space: nowrap; }
.tabell tbody tr { transition: background var(--overgang); }
.tabell tbody tr.klikk { cursor: pointer; }
.tabell tbody tr:hover { background: #F9FBFD; }
.tabell tbody tr:last-child td { border-bottom: 0; }
.tabell tbody tr.klikk:hover { background: var(--aksent-lys); }
:root[data-tema="natt"] .tabell tbody tr:hover { background: var(--lys); }
.tabell td.tall { text-align: right; font-variant-numeric: tabular-nums; }
.tabell .inndata { height: 36px; }
.tabell img { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: #fff; }

/* Detaljer om én vare */
.detalj { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s3); }
@media (max-width: 760px) { .detalj { grid-template-columns: 1fr; } }
.detalj-bilde { width: 100%; border-radius: var(--r); background: #fff; object-fit: contain; max-height: 420px; border: 1px solid var(--linje); }
.detalj h3 { font-size: 20px; margin-bottom: var(--s1); overflow-wrap: anywhere; }
.felttabell { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: var(--s2); }
.felttabell td { padding: 7px 0; border-bottom: 1px solid var(--linje); vertical-align: top; overflow-wrap: anywhere; }
.felttabell td:first-child { color: var(--demp); width: 38%; padding-right: var(--s2); }

/* ---- Finn plass ---- */
.svar { font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin: var(--s1) 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kodemerke { display: inline-block; font-weight: 700; color: var(--aksent); background: var(--aksent-lys); border-radius: 6px; padding: 2px 10px; font-size: 15px; letter-spacing: -.01em; cursor: pointer; border: 0; }
.kodemerke:hover { background: var(--aksent); color: #fff; }
.plasshode { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s2); }
.stor-kode { font-size: 28px; line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--aksent); background: var(--aksent-lys); border-radius: var(--r); padding: 8px 16px; min-width: 80px; text-align: center; }
.omr-tekst { font-size: 12px; font-weight: 600; color: var(--demp); text-transform: uppercase; letter-spacing: .05em; }
.hvor { font-size: 15px; font-weight: 600; margin-top: 2px; }
.hvor span { color: var(--demp); font-weight: 400; }
.sum { margin-left: auto; font-weight: 600; font-size: 13px; background: var(--lys); border: 1px solid var(--linje); border-radius: 6px; padding: 4px 12px; }
.varerad { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto auto; gap: var(--s2); align-items: center; padding: 12px 0; border-top: 1px solid var(--linje); }
.varerad.uten-bilder { grid-template-columns: minmax(0, 1fr) auto auto; }
.varerad .vare-bilde, .varerad .uten-bilde { width: 84px; height: 84px; }
.rad-tekst { font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.kobling { color: var(--demp); font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.kobling.ukjent { color: var(--oransje); }
.teller { display: flex; align-items: center; gap: 8px; }
.tall { font-size: 20px; font-weight: 700; line-height: 1; text-align: center; min-width: 48px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tall small { display: block; font-size: 11px; font-weight: 500; color: var(--demp); margin-top: 3px; letter-spacing: 0; }
.tall.ukjent { color: var(--demp); font-weight: 500; }
.tall.null { color: var(--rod); }
.tall.puls { animation: puls .35s ease; }
@keyframes puls { 50% { transform: scale(1.18); color: var(--aksent); } }
.radknapper { display: flex; gap: 6px; }
.radknapper .knapp { width: 40px; min-width: 40px; padding: 0; border-radius: var(--r-liten); }
.handling { display: contents; }
@media (max-width: 640px) {
  .varerad { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; }
  .varerad.uten-bilder { grid-template-columns: minmax(0, 1fr); }
  .varerad .vare-bilde, .varerad .uten-bilde { width: 56px; height: 56px; }
  .varerad .handling { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .stor-kode { font-size: 28px; min-width: 64px; }
}
.panel { background: var(--lys); border: 1px solid var(--linje); border-radius: var(--r); padding: var(--s2); margin-top: var(--s2); animation: inn .2s ease; }
.panel > h4 { font-size: 15px; margin-bottom: var(--s1); }

/* Oversiktskartet */
.kart { position: relative; width: 100%; max-width: 460px; line-height: 0; border-radius: var(--r-liten); overflow: hidden; background: #1c1c1c; }
.kart img { width: 100%; height: auto; display: block; }
.kart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.kart polygon { fill: #fff; fill-opacity: .02; stroke: transparent; stroke-width: 3; stroke-linejoin: round; cursor: pointer; vector-effect: non-scaling-stroke; transition: fill-opacity var(--overgang), stroke var(--overgang); }
.kart polygon:hover { fill: var(--aksent); fill-opacity: .25; }
.kart polygon.treff { fill: var(--aksent); fill-opacity: .5; stroke: var(--aksent); }
.kart polygon.valgt { fill: var(--aksent); fill-opacity: .18; stroke: var(--aksent); }
.kart-tips { position: absolute; pointer-events: none; background: var(--tekst); color: var(--bg); font-size: 13px; line-height: 1.3; padding: 6px 10px; border-radius: 8px; white-space: nowrap; transform: translate(-50%, -120%); opacity: 0; transition: opacity .12s; }

/* Enhetskartet (reoler sett forfra) */
.enhetskart { overflow-x: auto; }
.enhetskart table { border-collapse: separate; border-spacing: 6px; }
.enhetskart th { font-size: 12px; font-weight: 600; color: var(--demp); text-transform: uppercase; letter-spacing: .05em; padding: 0 4px; white-space: nowrap; }
.enhetskart td.etikett { color: var(--demp); font-size: 13px; text-align: right; white-space: nowrap; line-height: 1.2; padding-right: 4px; }
.plassknapp { min-width: 84px; min-height: 44px; border-radius: var(--r-liten); border: 1px solid var(--felt-kant); background: var(--kort); cursor: pointer; font-size: 14px; font-weight: 600; transition: all var(--overgang); padding: 0 10px; white-space: nowrap; color: var(--tekst); }
.plassknapp:hover { border-color: var(--aksent); color: var(--aksent); }
.plassknapp.treff { background: var(--aksent); border-color: var(--aksent); color: #fff; }
.plassknapp.tom-plass { color: var(--demp); font-weight: 500; }

/* Administrer plasser */
.enhet-tittel { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.adm-plass { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s2); align-items: center; padding: 10px 0; border-top: 1px solid var(--linje); }
.adm-kode { min-width: 64px; font-size: 15px; font-weight: 700; color: var(--aksent); background: var(--aksent-lys); border-radius: 6px; padding: 2px 8px; text-align: center; }
.faner { display: flex; gap: 4px; border-bottom: 1px solid var(--linje); margin-bottom: var(--s2); overflow-x: auto; }
.faner button { border: 0; background: transparent; padding: 10px 14px; font-size: var(--tekst-str); font-weight: 500; cursor: pointer; color: var(--demp); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: all var(--overgang); }
.faner button.valgt { color: var(--aksent); border-bottom-color: var(--aksent); }

/* Gjøremål */
.oppgave { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--s2); align-items: start; }
.oppgave input[type="checkbox"] { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--aksent); cursor: pointer; }
.oppgave-tittel { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; letter-spacing: -.01em; }
.oppgave-tittel.ferdig { text-decoration: line-through; color: var(--demp); font-weight: 500; }
.oppgave-detaljer { color: var(--demp); font-size: var(--tekst-str); margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.oppgave-meta { color: var(--demp); font-size: 13px; margin-top: var(--s1); }
.kort.passert { border-left: 4px solid var(--rod); }
.kort.hoy { border-left: 4px solid var(--oransje); }
@media (max-width: 640px) { .oppgave { grid-template-columns: 28px minmax(0, 1fr); } .oppgave .knapper { grid-column: 2; } }

/* Dialog og varsler */
dialog.vindu {
  border: 1px solid var(--linje); border-radius: 12px; padding: 0; width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  background: var(--kort); color: var(--tekst); box-shadow: var(--skygge-flyt);
}
dialog.vindu[open] { animation: inn .2s ease; }
dialog.vindu::backdrop { background: rgba(15, 23, 42, .35); }
.vindu-hode { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--linje); position: sticky; top: 0; background: var(--kort); z-index: 2; }
.vindu-hode h3 { font-size: 16px; flex: 1; }
.vindu-innhold { padding: var(--s3); overflow: auto; }
@media (max-width: 640px) {
  dialog.vindu { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: 14px 14px 0 0; }
  .vindu-innhold { padding: var(--s2); }
}
.varsler { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: calc(100% - 32px); }
.varsel { background: #1F2937; color: #fff; padding: 10px 16px; border-radius: var(--r-liten); font-size: var(--tekst-str); box-shadow: var(--skygge-hover); animation: inn .2s ease; max-width: 560px; text-align: center; }
.varsel.feil { background: #B91C1C; }
.varsel.advarsel { background: #92400E; }
.angre { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.angre .vokse { min-width: 200px; }
.endringslinje { background: var(--p-oransje); border: 1px solid #FED7AA; border-radius: var(--r-liten); padding: 10px 16px; margin-bottom: var(--s2); display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; font-size: 14px; }
.laster { display: grid; place-items: center; padding: 80px 16px; color: var(--demp); gap: 16px; }
.snurr { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--linje); border-top-color: var(--aksent); animation: snurr .8s linear infinite; }
@keyframes snurr { to { transform: rotate(360deg); } }

/* ---- Soner, lageroversikt, lagerplasser og varetelling ---- */
.meny-overskrift { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--demp); padding: 16px 12px 6px; }
.meny-soner { display: flex; flex-direction: column; gap: 2px; }
.sidemeny a[data-sone] { height: 36px; }
.sone-bokstav { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--lys); border: 1px solid var(--linje); font-size: 12px; font-weight: 700; color: var(--meny-tekst); flex: none; }
.sidemeny a.aktiv .sone-bokstav { background: var(--aksent); border-color: var(--aksent); color: #fff; }
.sone-navn { overflow: hidden; text-overflow: ellipsis; }
.sone-bokstav.stor { width: 40px; height: 40px; font-size: 18px; border-radius: var(--r-liten); background: var(--aksent-lys); color: var(--aksent); border-color: #BFDBFE; }
.sone-bokstav.storst { width: 56px; height: 56px; font-size: 26px; border-radius: var(--r); background: var(--aksent); color: #fff; border-color: var(--aksent); }
.lager-topp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.sone-rutenett { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s15); }
.lager-topp .sone-rutenett { grid-template-columns: 1fr; gap: var(--s1); }
.sonekort { display: flex; align-items: center; gap: var(--s15); padding: 12px 14px; border: 1px solid var(--linje); border-radius: var(--r); background: var(--kort); cursor: pointer; text-align: left; color: var(--demp); transition: all var(--overgang); width: 100%; }
.sonekort:hover { border-color: #BFD3F8; box-shadow: var(--skygge-hover); }
.sonekort:hover .sonekort-navn { color: var(--aksent); }
.sonekort-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sonekort-navn { font-weight: 600; font-size: 15px; color: var(--tekst); }
.brodsmuler { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--demp); margin-bottom: var(--s15); flex-wrap: wrap; }
.sone-hode { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s3); }
.sone-hode .sidetittel { margin: 0; }
.sone-tall { display: flex; gap: var(--s2); flex-wrap: wrap; color: var(--demp); margin-top: 4px; font-size: 13px; }
.sone-tall b { color: var(--tekst); font-size: 15px; }
.sone-sok { margin-bottom: var(--s2); }
.treffplasser { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.treffplasser button { width: 100%; display: flex; align-items: center; gap: var(--s15); padding: 8px 12px; border: 1px solid var(--linje); border-radius: var(--r-liten); background: var(--kort); cursor: pointer; text-align: left; color: var(--demp); }
.treffplasser button:hover { border-color: #BFD3F8; background: var(--aksent-lys); }
.treffplasser .vokse { display: flex; flex-direction: column; min-width: 0; }
.treff-hvor { color: var(--tekst); font-weight: 500; }
.sone-oppsett { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); gap: 20px; align-items: start; }
.plassdetalj { position: sticky; top: calc(var(--topp-hoyde) + 16px); }
.sone-foto { margin: 0; }
.sone-foto img { width: 100%; height: auto; border-radius: var(--r-liten); border: 1px solid var(--linje); display: block; }
.sone-foto figcaption { margin-top: 8px; }
.plassknapp.treff { box-shadow: 0 0 0 3px var(--aksent-lys); }
.tomt-panel-stor { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 32px 16px; color: var(--demp); }
.tomt-panel-stor b { color: var(--tekst); }
.plassvarer { list-style: none; margin: 12px 0 0; padding: 0; }
.plassvarer li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--s15); align-items: center; padding: 10px 0; border-top: 1px solid var(--linje); }
.plassvarer .vare-bilde, .plassvarer .uten-bilde { width: 56px; height: 56px; font-size: 20px; }
.plassvare-navn { font-weight: 500; overflow-wrap: anywhere; }
.uavklart { color: var(--oransje); }
.beh { font-size: 12.5px; font-weight: 600; border-radius: 6px; padding: 3px 8px; white-space: nowrap; }
.beh.kjent { background: var(--p-gronn); color: var(--p-gronn-t); }
.beh.null { background: var(--rod-lys); color: var(--rod); }
.beh.ukjent { background: var(--lys); color: var(--demp); border: 1px dashed var(--felt-kant); }
.tabell tr.valgt-rad td { background: var(--aksent-lys); }
.status-merke { font-size: 12px; font-weight: 600; border-radius: 6px; padding: 3px 8px; white-space: nowrap; }
.status-merke.gul { background: #FEF9C3; color: #854D0E; }
.status-merke.bla { background: var(--p-bla); color: var(--p-bla-t); }
.status-merke.gronn { background: var(--p-gronn); color: var(--p-gronn-t); }
.status-merke.rod { background: var(--rod-lys); color: var(--rod); }
.status-merke.gra, .kpi-ikon.gra { background: var(--lys); color: var(--demp); }
:root[data-tema="natt"] .status-merke.gul { background: #3A3112; color: #FDE68A; }
.telle-steg { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 var(--s2); flex-wrap: wrap; }
.telle-steg li { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--kort); border: 1px solid var(--linje); color: var(--demp); font-size: 13px; font-weight: 600; }
.telle-steg li.aktiv { background: var(--aksent-lys); border-color: var(--aksent); color: var(--aksent); }
.telle-steg li.ferdig { color: var(--gronn); border-color: var(--gronn); }
.telle-steg-nr { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--lys); }
.telle-steg li.aktiv .telle-steg-nr { background: var(--aksent); color: #fff; }
.telle-steg li.ferdig .telle-steg-nr { background: var(--gronn); color: #fff; }
.telle-ny-boks { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--linje); }
.telle-hode { margin-bottom: var(--s15); }
.telle-plass-topp { margin-bottom: var(--s15); }
.telle-plass-hode { display: flex; align-items: flex-start; gap: 14px; }
.telle-plass-beskrivelse { font-weight: 700; font-size: 16px; color: var(--tekst); }
.telle-plass-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; font-size: 13px; color: var(--demp); }
.telle-plass-teller { font-weight: 600; color: var(--tekst); }
.telle-fremdrift-spor { width: 100%; max-width: 340px; height: 6px; background: var(--lys); border-radius: 999px; overflow: hidden; margin-top: 8px; border: 1px solid var(--linje); }
.telle-fremdrift-fyll { height: 100%; background: var(--aksent); border-radius: 999px; transition: width .2s ease; }
.telle-plass-sekundaer { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linje); }
.telle-plass-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.telle-plass-knapper { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.telle-plass-knapp { min-width: 36px; height: 30px; padding: 0 9px; border-radius: var(--r-liten); border: 1px solid var(--linje); background: var(--kort); color: var(--tekst); font-weight: 600; font-size: 13px; cursor: pointer; transition: background var(--overgang), border-color var(--overgang); }
.telle-plass-knapp:hover { background: var(--lys); border-color: var(--aksent); }
.telle-plass-knapp.aktiv { background: var(--aksent); border-color: var(--aksent); color: #fff; }
.telle-plass-knapp.ferdig:not(.aktiv) { background: var(--p-gronn); border-color: var(--gronn); color: var(--p-gronn-t); }
.telle-plasskode { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--aksent); background: var(--aksent-lys); padding: 8px 14px; border-radius: var(--r-liten); line-height: 1.1; flex-shrink: 0; }
.telle-feil:not(:empty) { margin-bottom: var(--s15); }
.tellekort { margin-bottom: var(--s15); }
.telle-liste-hode { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.telle-tabell-hode,
.telle-rad {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(115px, .75fr) minmax(150px, .85fr) minmax(115px, .65fr) minmax(130px, .8fr);
  gap: 12px;
  align-items: center;
}
.telle-tabell-hode {
  padding: 6px 8px 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--demp);
  border-bottom: 1px solid var(--linje);
}
.telle-rad { padding: 12px 8px; border-bottom: 1px solid var(--linje); border-radius: var(--r-liten); }
.telle-rad:last-child { border-bottom: 0; }
.telle-rad.markert { background: var(--aksent-lys); outline: 2px solid var(--aksent); }
.telle-rad.ny { background: var(--p-oransje); border-radius: var(--r-liten); padding: 12px 8px; margin-top: 6px; border-bottom: 0; }
.telle-col-vare { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.telle-vare { min-width: 0; flex: 1; }
.telle-vare-handlinger { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.telle-bilde { width: 48px; height: 48px; border-radius: var(--r-liten); object-fit: cover; display: grid; place-items: center; font-size: 20px; background: var(--lys); flex-shrink: 0; }
.telle-reg-verdi { font-weight: 600; font-size: 14px; color: var(--tekst); white-space: nowrap; }
.talt-felt { width: 140px; font-size: 16px; font-weight: 600; }
.talt-felt.stor { width: 100%; min-width: 140px; max-width: 170px; height: 44px; font-size: 18px; font-weight: 700; text-align: center; padding: 6px 10px; }
.talt-felt.ugyldig { border-color: var(--rod); box-shadow: 0 0 0 3px var(--rod-lys); }
.enhet-velg { width: 100%; min-width: 100px; height: 44px; font-size: 15px; font-weight: 600; }
.enhet-velg.mangler { border-color: var(--oransje); color: var(--oransje); }
.telle-status-innhold { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.telle-lagre-merke { font-size: 11.5px; font-weight: 600; }
.telle-lagre-merke.lagret { color: var(--gronn); }
.telle-lagre-merke.ulagret { color: var(--oransje); }
.telle-lagre-status.ulagret { color: var(--oransje); font-weight: 600; }
.telle-mobil-etikett { display: none; font-size: 12px; font-weight: 600; color: var(--demp); margin-bottom: 4px; }
.telle-tom-bekreft { padding: 12px; background: var(--lys); border-radius: var(--r-liten); font-weight: 500; }
.telle-bunn { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; background: var(--kort); border: 1px solid var(--linje); border-radius: var(--r); box-shadow: var(--skygge-flyt); padding: 12px 16px; margin-top: var(--s2); }
.tabell tr.ikke-telt td { color: var(--demp); background: rgba(148, 163, 184, .06); }
.tabell tr.rad-avvik td { background: rgba(239, 68, 68, .05); }
.avvik-null { color: var(--gronn); }
.avvik-pluss { color: var(--aksent); }
.avvik-minus { color: var(--rod); }
@media (max-width: 1100px) { .lager-topp, .sone-oppsett { grid-template-columns: minmax(0, 1fr); } .plassdetalj { position: static; } }
@media (max-width: 820px) {
  .telle-tabell-hode { display: none; }
  .telle-rad {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    border: 1px solid var(--linje);
    border-radius: var(--r);
    padding: 12px;
    margin-bottom: 10px;
    background: var(--kort);
  }
  .telle-rad.ny { margin-top: 0; margin-bottom: 10px; }
  .telle-col-vare { grid-column: 1 / -1; }
  .telle-col-reg, .telle-col-status { display: flex; flex-direction: column; }
  .telle-col-talt, .telle-col-enhet { display: flex; flex-direction: column; }
  .telle-mobil-etikett { display: block; }
  .talt-felt.stor { max-width: none; min-width: 0; }
  .telle-bilde { width: 44px; height: 44px; }
  .sone-bokstav.storst { width: 44px; height: 44px; font-size: 20px; }
}
/* Merke når testdata er i bruk */
.testdata-merke { background: repeating-linear-gradient(-45deg, #FEF3C7, #FEF3C7 10px, #FDE68A 10px, #FDE68A 20px); color: #78350F; border: 1px solid #F59E0B; border-radius: var(--r-liten); padding: 8px 14px; margin-bottom: var(--s2); font-size: 13px; }
/* Slett vare (i varedetaljene) */
.slett-vare { display: flex; align-items: center; gap: var(--s15); flex-wrap: wrap; margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--linje); }

/* ---- Diagrammet «Lagerutvikling» på forsiden (samlet lagerverdi) ---- */
.diagram-panel { margin-bottom: var(--s4); }
.diagram-hode { flex-wrap: wrap; align-items: center; row-gap: var(--s1); }
.diagram-hode .segment button { padding: 5px 11px; }
.diagram-tom { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; min-height: 200px; color: var(--demp); padding: var(--s3) var(--s2); border: 1px dashed var(--linje); border-radius: var(--r-liten); }
.diagram-tom b { color: var(--tekst); }
.diagram-tom .snurr { width: 22px; height: 22px; border-width: 2px; }
.diagram-boks { position: relative; width: 100%; }
.diagram-boks svg { display: block; width: 100%; height: auto; touch-action: pan-y; cursor: crosshair; }
.d-enhet { font-weight: 600; }
/* Nøytral blå linje: økt lagerverdi er ikke nødvendigvis bra, redusert ikke nødvendigvis dårlig */
:root { --diagram: #2563EB; }
:root[data-tema="natt"] { --diagram: #60A5FA; }
.d-hjelp { stroke: var(--linje); stroke-width: 1; stroke-dasharray: 3 4; }
.d-xakse { stroke: var(--demp); stroke-width: 1.25; }
.d-akse { fill: var(--demp); font-size: 11.5px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.d-linje { fill: none; stroke: var(--diagram); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.d-toning-topp { stop-color: var(--diagram); stop-opacity: .14; }
.d-toning-bunn { stop-color: var(--diagram); stop-opacity: 0; }
.d-punkt { fill: var(--diagram); stroke: var(--kort); stroke-width: 1.5; }
.d-grunnlag { fill: var(--kort); stroke: var(--diagram); stroke-width: 2; }
.d-siste { fill: var(--diagram); stroke: var(--kort); stroke-width: 3; }
.d-valgt { fill: var(--kort); stroke: var(--diagram); stroke-width: 3; pointer-events: none; }
.d-sikte { stroke: var(--diagram); stroke-width: 1; stroke-dasharray: 3 3; opacity: .6; pointer-events: none; }
.diagram-nokkel { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s15) var(--s2); flex-wrap: wrap; margin: 2px 0 6px; }
.diagram-verdi { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.diagram-verdi span { font-size: 13px; font-weight: 500; color: var(--demp); letter-spacing: 0; }
.diagram-endringer { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.diagram-endring { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 4px; font-size: 13px; border-radius: 999px; padding: 5px 12px; background: var(--lys); color: var(--tekst); font-variant-numeric: tabular-nums; }
.diagram-endring .d-pil { font-size: 12px; color: var(--diagram); }
.diagram-endring .d-periode { color: var(--demp); }
.diagram-smaa { display: flex; flex-wrap: wrap; gap: 2px 18px; font-size: 13px; color: var(--demp); margin-bottom: var(--s15); }
.diagram-smaa b { color: var(--tekst); font-variant-numeric: tabular-nums; }
.diagram-mangler { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.45; padding: 8px 12px; border-radius: var(--r-liten); background: var(--lys); margin-bottom: var(--s15); }
.diagram-mangler > svg { flex: none; margin-top: 1px; color: #B45309; }
:root[data-tema="natt"] .diagram-mangler > svg { color: #FBBF24; }
.d-ukjent { fill: none; stroke: var(--demp); stroke-dasharray: 2 2; }
.d-grunnlag-forklaring { display: inline-block; width: 7px; height: 7px; border: 2px solid var(--diagram); background: var(--kort); transform: rotate(45deg); margin: 0 3px; vertical-align: 0; }
.d-boble { position: absolute; transform: translate(-50%, calc(-100% - 12px)); background: #1F2937; color: #fff; font-size: 12.5px; line-height: 1.4; padding: 8px 10px; border-radius: var(--r-liten); pointer-events: none; opacity: 0; transition: opacity .12s; width: max-content; max-width: min(260px, 90%); box-shadow: var(--skygge-flyt); z-index: 3; }
.d-boble.synlig { opacity: 1; }
.d-boble .demp { color: #CBD5E1; }
.d-boble-verdi { font-weight: 700; font-size: 14px; }
.diagram-forklaring { margin: 8px 0 0; }
@media (max-width: 560px) { .diagram-endringer { align-items: flex-start; } .diagram-hode .segment button { padding: 5px 8px; } .diagram-verdi { font-size: 26px; } }
/* ---- Menygrupper i sidemenyen (faste overskrifter) ---- */
.meny-gruppe { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.meny-gruppe .meny-overskrift { padding: 6px 12px 4px; }/* Sidehode med handling til høyre */
.sidehode-rad { display: flex; align-items: flex-start; gap: var(--s2); flex-wrap: wrap; }
.sidehode-rad .knapper { margin-top: 4px; }
/* Kompakt sonevelger */
.sone-topp { display: flex; align-items: center; justify-content: space-between; gap: var(--s15); flex-wrap: wrap; margin-bottom: var(--s15); }
.sone-topp .brodsmuler { margin: 0; }
.sonevelger { display: flex; gap: 4px; flex-wrap: wrap; }
.sonevelger a { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--linje); background: var(--kort); color: var(--meny-tekst); font-size: 12.5px; font-weight: 700; }
.sonevelger a:hover { border-color: #BFD3F8; color: var(--aksent); text-decoration: none; }
.sonevelger a.valgt { background: var(--aksent); border-color: var(--aksent); color: #fff; }
/* ---- Tilpasning til skjermstørrelse ---- */
@media (max-width: 1180px) {
  .kpi-rad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .kat-rutenett { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .to-paneler { grid-template-columns: minmax(0, 1fr); }
}
/* Mobil: sidemenyen skjules og åpnes med menyknappen */
@media (max-width: 760px) {
  :root { --innhold-luft: 16px; }
  .sidemeny { transform: translateX(-100%); transition: transform .22s ease; box-shadow: none; width: min(280px, 84vw); }
  body.meny-apen .sidemeny { transform: none; box-shadow: var(--skygge-flyt); }
  body.meny-apen { overflow: hidden; }
  .hoved { margin-left: 0; }
  .ikonknapp.menyknapp { display: grid; width: 40px; height: 40px; }
  .topplinje { gap: var(--s1); }
  .sok { flex: 1; width: auto; }
  .sok-felt { height: 40px; font-size: 16px; }
  .forslag { min-width: 0; left: -48px; right: -48px; }
  .sidemeny a[data-side] { height: 44px; }
  .kpi-rad { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s15); }
  .kpi { min-height: 104px; padding: 14px; }
  .kpi-verdi { font-size: 22px; }
  .kpi-ikon { width: 38px; height: 38px; }
  .kat-rutenett { gap: var(--s15); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .katkort { min-height: 140px; padding: var(--s2) var(--s15); }
  .kort { padding: var(--s2); }
  .sidetittel { font-size: 22px; }
}@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }


/* ---- Plasser vare-veiviser (3 steg) ---- */
.pv-dialog { max-width: 640px; width: 100%; }
.pv-hode { margin-bottom: 14px; }
.pv-steg-indikator { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.pv-steg {
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: var(--flate2, #f1f5f9); color: var(--tekst-demp, #64748b);
  border: 1px solid var(--linje, #e2e8f0);
}
.pv-steg.aktiv { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }
.pv-steg.ferdig { background: #dcfce7; color: #166534; border-color: #86efac; }
.pv-kropp { display: flex; flex-direction: column; gap: 12px; }
.pv-sok-stor {
  width: 100%; padding: 14px 16px; font-size: 16px; border-radius: 12px;
  border: 2px solid #cbd5e1; background: #fff; box-sizing: border-box;
}
.pv-sok-stor:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.pv-treff-liste { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; }
.pv-treff-kort {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 12px; border: 1px solid var(--linje, #e2e8f0); border-radius: 12px;
  background: #fff; cursor: pointer; transition: border-color .15s, background .15s;
}
.pv-treff-kort:hover, .pv-treff-kort:focus-visible { border-color: #2563eb; background: #f8fafc; outline: none; }
.pv-bilde { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; background: #f8fafc; flex-shrink: 0; border: 1px solid #e2e8f0; }
.pv-bilde-tom {
  width: 48px; height: 48px; border-radius: 8px; background: #f1f5f9;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 20px;
}
.pv-treff-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pv-treff-tekst strong { font-size: 15px; color: var(--tekst, #0f172a); }
.pv-treff-velg { color: #2563eb; font-weight: 600; font-size: 13px; flex-shrink: 0; }
.pv-valgt-rad {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; background: #f8fafc; border: 1px solid var(--linje, #e2e8f0); border-radius: 10px;
}
.pv-felt { display: flex; flex-direction: column; gap: 5px; }
.pv-felt label { font-size: 13px; font-weight: 600; color: var(--tekst, #0f172a); }
.pv-felt select, .pv-felt input {
  width: 100%; padding: 11px 12px; font-size: 15px; border-radius: 10px;
  border: 1px solid #cbd5e1; background: #fff; box-sizing: border-box;
}
.pv-auto-plass {
  padding: 10px 12px; border-radius: 10px; background: #eff6ff; border: 1px solid #bfdbfe;
  display: flex; flex-direction: column; gap: 2px;
}
.pv-diskret-lenke {
  background: none; border: none; color: #2563eb; font-size: 13px; padding: 4px 0;
  cursor: pointer; text-align: left; text-decoration: underline; align-self: flex-start;
}
.pv-ny-plass-boks {
  padding: 12px; border-radius: 10px; background: #f8fafc; border: 1px solid #cbd5e1;
  display: flex; flex-direction: column; gap: 10px;
}
.pv-rad-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pv-oppsummering {
  padding: 12px 14px; border-radius: 12px; background: #f8fafc;
  border: 1px solid var(--linje, #e2e8f0); display: flex; flex-direction: column; gap: 4px;
}
.pv-plass-linje { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #cbd5e1; font-size: 14px; }
.pv-antall-boks {
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--linje, #e2e8f0);
  background: #fff; display: flex; flex-direction: column; gap: 10px;
}
.pv-sjekk-label { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; font-size: 14px; }
.pv-duplikat {
  padding: 12px 14px; border-radius: 12px; background: #fef3c7; border: 1px solid #f59e0b;
  color: #78350f; display: flex; flex-direction: column; gap: 4px; font-size: 14px;
}
.pv-feil {
  padding: 10px 12px; border-radius: 10px; background: #fee2e2; border: 1px solid #fca5a5;
  color: #991b1b; font-size: 14px; font-weight: 500;
}
.pv-ferdig-boks {
  padding: 18px 16px; border-radius: 12px; background: #ecfdf5; border: 1px solid #6ee7b7;
  color: #065f46; display: flex; flex-direction: column; gap: 6px; font-size: 15px;
}
.pv-bunn {
  display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px;
  padding-top: 12px; border-top: 1px solid var(--linje, #e2e8f0); flex-wrap: wrap;
}
@media (max-width: 640px) {
  .pv-rad-2 { grid-template-columns: 1fr; }
  .pv-bunn { flex-direction: column-reverse; }
  .pv-bunn .knapp { width: 100%; justify-content: center; }
  .pv-treff-kort { padding: 12px; }
}


/* ---- Vareplassering (kompakt oversikt + detaljpanel) ---- */
.vp-filter-kort {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 14px; background: #fff; border: 1px solid var(--linje, #e2e8f0);
  border-radius: 12px;
}
.vp-filter-rad {
  display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 10px; align-items: center;
}
.vp-filter-rad select {
  padding: 9px 10px; font-size: 14px; border-radius: 8px;
  border: 1px solid #cbd5e1; background: #fff; min-width: 0;
}
.vp-tabell th { white-space: nowrap; }
.vp-tabell td { vertical-align: top; }
.vp-vare-celle { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.vare-bilde.liten { width: 38px; height: 38px; border-radius: 8px; object-fit: contain; flex-shrink: 0; }
.vare-bilde.stor { width: 56px; height: 56px; border-radius: 10px; object-fit: contain; flex-shrink: 0; }
.vp-vnr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; white-space: nowrap; }
.vp-plass-liste, .vp-antall-liste { display: flex; flex-direction: column; gap: 6px; }
.vp-plass-linje { display: flex; align-items: center; gap: 8px; min-height: 26px; }
.vp-plass-tekst { font-size: 13px; color: var(--tekst-demp, #475569); }
.vp-antall-linje { display: flex; align-items: center; gap: 6px; min-height: 26px; white-space: nowrap; }
.vp-antall-merke {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: #eff6ff; color: #1d4ed8;
}
.vp-antall-merke.ukjent { background: #f1f5f9; color: #64748b; font-weight: 500; }
.vp-antall-merke.null { background: #fef2f2; color: #b91c1c; }
.vp-mini-knapp {
  width: 24px; height: 24px; border-radius: 999px; border: 1px solid #cbd5e1;
  background: #fff; cursor: pointer; font-weight: 700; line-height: 1; padding: 0;
}
.vp-mini-knapp:hover:not(:disabled) { border-color: #2563eb; color: #2563eb; }
.vp-mini-knapp:disabled { opacity: .4; cursor: not-allowed; }
.vp-mobil-liste { display: none; flex-direction: column; gap: 10px; }
.vp-mobil-kort {
  background: #fff; border: 1px solid var(--linje, #e2e8f0); border-radius: 12px;
  padding: 12px; display: flex; flex-direction: column; gap: 8px; cursor: pointer;
}
.vp-mobil-plasser { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--linje, #e2e8f0); }
.vp-mobil-plass-rad { display: flex; align-items: center; gap: 8px; }
.vp-detalj-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.vp-detalj-rad {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--linje, #e2e8f0); border-radius: 10px; background: #f8fafc;
}
.vp-detalj-plass { display: flex; align-items: center; gap: 10px; min-width: 180px; flex: 1; }
.vp-detalj-antall { display: flex; align-items: center; gap: 6px; }
@media (max-width: 760px) {
  .vp-filter-rad { grid-template-columns: 1fr; }
  .vp-tabell-desktop { display: none; }
  .vp-mobil-liste { display: flex; }
}


/* ---- Lageroversikt: 3/2/1-kolonners sonekort ---- */
.sone-rutenett-oversikt {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.sone-rutenett-oversikt .sonekort {
  height: 100%; align-items: center;
}
@media (max-width: 980px) {
  .sone-rutenett-oversikt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sone-rutenett-oversikt { grid-template-columns: 1fr; }
}

/* ---- Valgt lagerplass: varehandlinger ---- */
.plassvare-hoyre {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.plassvare-handlinger {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end;
}
@media (max-width: 640px) {
  .plassvarer li { grid-template-columns: 48px minmax(0, 1fr); align-items: start; }
  .plassvarer .vare-bilde, .plassvarer .uten-bilde { width: 48px; height: 48px; }
  .plassvare-hoyre { grid-column: 1 / -1; align-items: flex-start; }
  .plassvare-handlinger { justify-content: flex-start; }
}

/* ---- Innlogging, brukermeny og brukeradministrasjon ---- */
/* Innloggingssiden har egen layout: hele vinduet, uten sidemeny og uten appens innholdskolonne.
   Den globale «main»-regelen (maks 1320 px og appens innerluft) nullstilles her. */
:root { --inn-bg: #F1F4F8; }
:root[data-tema="natt"] { --inn-bg: var(--bg); }
body.ikke-innlogget { background: var(--inn-bg); }
body.ikke-innlogget .ramme, body.ikke-innlogget .hopp { display: none; }
main.innlogging { box-sizing: border-box; max-width: none; width: 100%; min-height: 100vh; min-height: 100dvh; margin: 0; padding: 20px;
  display: flex; align-items: center; justify-content: center; background: var(--inn-bg); }
.inn-kort { box-sizing: border-box; width: 100%; max-width: 420px; background: var(--kort); border: 1px solid var(--linje); border-radius: 16px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, .08), 0 2px 6px rgba(16, 24, 40, .05); padding: 32px; text-align: left; }
.inn-logo { display: block; width: 210px; max-width: 75%; height: auto; margin: 0 auto 22px; }
:root[data-tema="natt"] .inn-logo { filter: brightness(0) invert(1); }
.inn-skjema { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.inn-intro { text-align: center; }
.inn-tittel { font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; }
.inn-undertekst { margin: 6px 0 0; color: var(--demp); font-size: 15px; line-height: 1.45; }
.inn-meldinger:empty { display: none; }
.inn-meldinger .melding { margin: 0; }
.inn-felt { display: flex; flex-direction: column; gap: 6px; }
.inn-etikett { font-size: 14px; font-weight: 600; color: var(--tekst); text-align: left; }
.inn-hint { font-size: 13px; color: var(--demp); }
.inn-input { box-sizing: border-box; display: block; width: 100%; height: 48px; margin: 0; padding: 0 14px; font-size: 16px; color: var(--tekst);
  background: var(--felt); border: 1px solid var(--felt-kant); border-radius: 10px; transition: border-color var(--overgang), box-shadow var(--overgang); }
.inn-input:focus { outline: none; border-color: var(--aksent); box-shadow: 0 0 0 3px var(--aksent-lys); }
.inn-passord { position: relative; }
.inn-passord .inn-input { padding-right: 78px; }
.inn-vis { position: absolute; top: 6px; right: 6px; height: 36px; min-width: 60px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent;
  color: var(--aksent); font-size: 14px; font-weight: 600; cursor: pointer; }
.inn-vis:hover { background: var(--aksent-lys); }
.inn-knapp { box-sizing: border-box; width: 100%; height: 48px; margin: 4px 0 0; border: 0; border-radius: 10px; background: var(--aksent); color: #fff;
  font-size: 16px; font-weight: 600; cursor: pointer; transition: background var(--overgang); }
.inn-knapp:hover:not(:disabled) { background: var(--aksent-hover); }
.inn-knapp:disabled { opacity: .75; cursor: progress; }
.inn-knapp.sekundaer { margin-top: 0; background: transparent; color: var(--tekst); border: 1px solid var(--felt-kant); }
.inn-knapp.sekundaer:hover { background: var(--lys); }
.inn-vis:focus-visible, .inn-knapp:focus-visible { outline: 3px solid var(--aksent); outline-offset: 2px; }
.inn-hjelp { margin: 0; text-align: center; color: var(--demp); font-size: 14px; }
@media (max-width: 480px) { .inn-kort { padding: 24px; } .inn-tittel { font-size: 20px; } }
/* Skjemaene i brukeradministrasjonen (egen klasse – endrer ikke appens felles «.skjema») */
.kontoskjema { display: flex; flex-direction: column; gap: 14px; }
.kontoskjema .melding[hidden] { display: none; }
.kontoskjema .melding { margin: 0; }
.passord-boks { display: flex; gap: 6px; }
.passord-boks .inndata { flex: 1; min-width: 0; }
.passord-vis { flex: none; border: 1px solid var(--felt-kant); background: var(--kort); color: var(--tekst); border-radius: var(--r-liten); padding: 0 12px; font-size: 13px; cursor: pointer; }
.passord-vis:hover { background: var(--lys); }
hr.skille { border: 0; border-top: 1px solid var(--linje); margin: 4px 0; width: 100%; }
.kilde-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--linje);
  background: var(--lys); color: var(--tekst); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.kilde-status:hover { border-color: var(--aksent); }
.kilde-status-lokal { background: var(--lys); color: var(--tekst); }
.kilde-status-supabase-tilkoblet { background: var(--aksent-lys); color: var(--aksent); border-color: transparent; }
.kilde-status-supabase-frakoblet, .kilde-status-ingen { background: var(--advarsel-bak, var(--lys)); color: var(--advarsel-tekst, var(--demp)); }
.brukermeny { position: relative; }
.brukerknapp { display: flex; align-items: center; gap: 8px; border: 1px solid transparent; background: transparent; color: var(--tekst); border-radius: var(--r-liten); padding: 4px 8px 4px 4px; cursor: pointer; font: inherit; }
.brukerknapp:hover, .brukerknapp[aria-expanded="true"] { background: var(--lys); border-color: var(--linje); }
.bruker-initialer { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--aksent-lys); color: var(--aksent); font-weight: 700; font-size: 13px; flex: none; }
.bruker-tekst { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: left; }
.bruker-tekst b { font-size: 13px; }
.bruker-tekst span { font-size: 12px; color: var(--demp); }
.brukermeny-panel { position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px; background: var(--kort); border: 1px solid var(--linje); border-radius: var(--r); box-shadow: var(--skygge-flyt); padding: 6px; z-index: 60; }
.brukermeny-hode { display: flex; flex-direction: column; padding: 8px 10px 10px; border-bottom: 1px solid var(--linje); margin-bottom: 4px; }
.brukermeny-punkt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: transparent; color: var(--tekst); border-radius: var(--r-liten); cursor: pointer; font: inherit; font-size: 14px; text-align: left; }
.brukermeny-punkt:hover, .brukermeny-punkt:focus-visible { background: var(--lys); outline: none; }
.brukere-topp { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s2); }
.brukere-tall { display: flex; gap: 10px; flex-wrap: wrap; }
.brukere-tall > div { background: var(--kort); border: 1px solid var(--linje); border-radius: var(--r); padding: 10px 16px; display: flex; flex-direction: column; min-width: 110px; }
.brukere-tall b { font-size: 22px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.brukere-tall span { font-size: 13px; color: var(--demp); }
.brukere-filter { display: flex; gap: var(--s15); align-items: center; flex-wrap: wrap; margin-bottom: var(--s15); }
.brukere-filter .vokse { min-width: 220px; }
.brukertabell-handling { text-align: right; }
@media (max-width: 760px) {
  .bruker-tekst { display: none; }
  .brukerknapp { padding: 2px; }
  .brukertabell-ramme { border: 0; background: transparent; max-height: none; }
  .brukertabell thead { display: none; }
  .brukertabell, .brukertabell tbody, .brukertabell tr, .brukertabell td { display: block; width: 100%; }
  .brukertabell tr { background: var(--kort); border: 1px solid var(--linje); border-radius: var(--r); padding: 10px 14px; margin-bottom: 10px; }
  .brukertabell td { border: 0; padding: 4px 0; display: flex; justify-content: space-between; gap: 12px; }
  .brukertabell td[data-etikett]::before { content: attr(data-etikett); color: var(--demp); font-size: 13px; }
  .brukertabell-handling { text-align: left; padding-top: 8px !important; }
  .brukertabell-handling .knapp { width: 100%; justify-content: center; }
  .innlogging-kort { padding: 22px 18px 18px; }
}

/* ---- Filterpanelet på Varer-siden (bare klassene «vf-…») ---- */
.vf-panel { background: var(--kort); border: 1px solid var(--linje); border-radius: 12px; padding: 24px; margin-bottom: var(--s2); }
.vf-topp { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.vf-tittel { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vf-ikon { display: inline-flex; color: var(--demp); }
.vf-tittel h2 { margin: 0; font-size: 16px; font-weight: 650; color: var(--tekst); }
.vf-antall { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--aksent); color: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vf-handlinger { display: flex; gap: 4px; }
.vf-lenkeknapp { border: 0; background: transparent; color: var(--aksent); font: inherit; font-size: 14px; font-weight: 500;
  padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.vf-lenkeknapp:hover:not(:disabled) { background: var(--aksent-lys); }
.vf-lenkeknapp:disabled { color: var(--demp); opacity: .55; cursor: default; }
.vf-lenkeknapp:focus-visible, .vf-fjern:focus-visible, .vf-om > summary:focus-visible { outline: 2px solid var(--aksent); outline-offset: 2px; }
.vf-innhold { display: flex; flex-direction: column; gap: 24px; margin-top: 20px; }
.vf-innhold[hidden] { display: none; }
.vf-gruppe { min-width: 0; }
.vf-gruppetittel { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--demp); }
.vf-rutenett { display: grid; gap: 16px; }
.vf-rutenett.vf-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vf-rutenett.vf-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vf-rutenett.vf-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vf-felt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vf-etikett { font-size: 13px; font-weight: 500; color: var(--tekst); text-align: left; }
.vf-panel .vf-select, .vf-resultatlinje .vf-select { box-sizing: border-box; width: 100%; height: 42px; font-size: 14px; color: var(--tekst); border-radius: 8px; }
.vf-select:focus { outline: none; border-color: var(--aksent); box-shadow: 0 0 0 3px var(--aksent-lys); }
.vf-select:disabled { background: var(--lys); color: var(--demp); cursor: not-allowed; }
.vf-hint { margin: 0; font-size: 12.5px; color: var(--demp); line-height: 1.4; }
.vf-verdi { display: flex; align-items: center; min-height: 42px; padding: 0 12px; border: 1px dashed var(--felt-kant); border-radius: 8px; font-size: 14px; color: var(--demp); }
.vf-merkevalg { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.vf-merkerute { max-height: 180px; margin-top: 0; }
.vf-utvid > summary { font-size: 14px; font-weight: 500; }
.vf-aktive { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; border-top: 1px solid var(--linje); }
.vf-merke { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-height: 30px; padding: 3px 4px 3px 12px; border-radius: 999px;
  background: var(--aksent-lys); color: var(--aksent); font-size: 13px; font-weight: 500; line-height: 1.3; }
.vf-merke > span { overflow-wrap: anywhere; }
.vf-fjern { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent;
  color: inherit; font-size: 12px; cursor: pointer; }
.vf-fjern:hover { background: rgba(37, 99, 235, .14); }
.vf-om { border-top: 1px solid var(--linje); padding-top: 14px; font-size: 13px; color: var(--demp); }
.vf-aktive + .vf-om { border-top: 0; padding-top: 0; }
.vf-om > summary { cursor: pointer; width: max-content; max-width: 100%; color: var(--demp); font-weight: 500; border-radius: 4px; }
.vf-om > summary:hover { color: var(--aksent); }
.vf-om-tekst p { margin: 8px 0 0; line-height: 1.5; max-width: 760px; }
.vf-resultatlinje { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin: 8px 0 16px; }
.vf-resultattekst { flex: 1 1 280px; min-width: 0; }
.vf-resultatvalg { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.vf-sorter { display: flex; flex-direction: column; gap: 6px; min-width: 210px; }
@media (max-width: 1100px) {
  .vf-rutenett.vf-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .vf-panel { padding: 16px; }
  .vf-rutenett.vf-2, .vf-rutenett.vf-3, .vf-rutenett.vf-4 { grid-template-columns: minmax(0, 1fr); }
  .vf-resultatlinje { flex-direction: column; align-items: stretch; }
  .vf-resultattekst { order: 2; flex-basis: auto; }
  .vf-resultatvalg { order: 1; align-items: stretch; }
  .vf-sorter { flex: 1 1 100%; min-width: 0; }
}

/* ---- Værvisningen på forsiden (bare klassene «vaer…», «vs-…» og «forside-hode») ---- */
.forside-hode { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.forside-velkommen { min-width: 0; flex: 1 1 260px; }
.vaer { position: relative; flex: 0 1 auto; max-width: 100%; }
.vaer-knapp { display: flex; align-items: center; gap: 12px; max-width: 100%; min-height: 64px; padding: 10px 16px 10px 12px; background: var(--kort);
  border: 1px solid var(--linje); border-radius: 12px; color: var(--tekst); font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--overgang), box-shadow var(--overgang); }
.vaer-knapp:hover { border-color: var(--felt-kant); box-shadow: var(--skygge); }
.vaer-knapp:focus-visible { outline: 2px solid var(--aksent); outline-offset: 2px; }
.vaer-knapp[aria-expanded="true"] { border-color: var(--aksent); }
.vaer-symbol { display: inline-flex; flex: none; }
.vaer-tekst { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.vaer-sted { font-size: 13px; color: var(--demp); font-weight: 500; }
.vaer-temp { font-size: 22px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.vaer-sek { display: flex; flex-direction: column; gap: 2px; padding-left: 12px; margin-left: 2px; border-left: 1px solid var(--linje);
  font-size: 12.5px; color: var(--demp); line-height: 1.35; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vaer-laster { font-size: 13px; color: var(--demp); padding: 0 4px; }
.vaer-merke { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--p-oransje); color: #B45309; font-size: 12px; font-weight: 700; }
.vaer-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: min(360px, calc(100vw - 32px)); background: var(--kort);
  border: 1px solid var(--linje); border-radius: 12px; box-shadow: var(--skygge-flyt); padding: 16px 18px; font-size: 14px; }
.vaer-panel[hidden] { display: none; }
.vaer-panel:focus { outline: none; }
.vaer-panel-hode { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.vaer-panel-hode h2 { margin: 0; font-size: 16px; font-weight: 650; }
.vaer-lukk { border: 0; background: transparent; color: var(--demp); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; flex: none; }
.vaer-lukk:hover { background: var(--lys); color: var(--tekst); }
.vaer-lukk:focus-visible, .vaer-yr:focus-visible, .vaer-kilde a:focus-visible { outline: 2px solid var(--aksent); outline-offset: 2px; }
.vaer-dempet { color: var(--demp); font-size: 12.5px; }
.vaer-naa { display: flex; align-items: center; gap: 12px; margin: 12px 0 10px; }
.vaer-temp-stor { font-size: 30px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.vaer-detaljer { margin: 0 0 12px; padding: 10px 0; border-top: 1px solid var(--linje); border-bottom: 1px solid var(--linje); display: grid; gap: 4px; }
.vaer-detaljer > div { display: flex; justify-content: space-between; gap: 12px; }
.vaer-detaljer dt { color: var(--demp); }
.vaer-detaljer dd { margin: 0; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.vaer-timer h3 { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--demp); }
.vaer-timer ol { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; text-align: center; }
.vaer-timer li { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; font-variant-numeric: tabular-nums; }
.vaer-timer li .vaer-dempet { font-size: 11.5px; white-space: nowrap; }
.vaer-tid { margin: 0 0 8px; }
.vaer-tom { margin: 12px 0; font-weight: 500; }
.vaer-advarsel { margin: 0 0 8px; padding: 6px 10px; border-radius: 8px; background: var(--p-oransje); color: #92400E; font-size: 12.5px; }
.vaer-yr { display: inline-block; margin: 2px 0 8px; font-weight: 600; }
.vaer-kilde { margin: 0; color: var(--demp); font-size: 11.5px; line-height: 1.45; }
/* Symbolene */
.vs-sol { fill: #F5B301; }
.vs-straale { stroke: #F5B301; stroke-width: 2.2; stroke-linecap: round; }
.vs-horisont { stroke: #94A3B8; stroke-width: 2; stroke-linecap: round; }
.vs-maane { fill: #8796B0; }
.vs-sky { fill: #EEF2F7; stroke: #8A97AB; stroke-width: 1.6; stroke-linejoin: round; }
.vs-sky.vs-bak { fill: #D9E0EA; }
.vs-sky.vs-mork { fill: #C3CCD9; stroke: #6B7A90; }
.vs-regn { stroke: #2563EB; stroke-width: 2.4; stroke-linecap: round; }
.vs-sno line { stroke: #60A5FA; stroke-width: 1.6; stroke-linecap: round; }
.vs-lyn { fill: #F5B301; stroke: #B45309; stroke-width: .8; stroke-linejoin: round; }
.vs-taake { stroke: #94A3B8; stroke-width: 2.2; stroke-linecap: round; }
.vs-ukjent { fill: var(--demp); font-size: 22px; font-family: var(--font); }
:root[data-tema="natt"] .vs-sky { fill: #33415A; stroke: #8A97AB; }
:root[data-tema="natt"] .vs-sky.vs-bak { fill: #283550; }
:root[data-tema="natt"] .vs-sky.vs-mork { fill: #1E293F; }
:root[data-tema="natt"] .vs-regn { stroke: #60A5FA; }
:root[data-tema="natt"] .vaer-advarsel { color: #FCD34D; }
@media (max-width: 760px) {
  .forside-hode { flex-direction: column; align-items: stretch; }
  .forside-velkommen { flex: none; }
  .vaer { width: 100%; }
  .vaer-knapp { width: 100%; }
  .vaer-sek { margin-left: auto; }
  .vaer-panel { left: 0; right: auto; width: 100%; }
}

/* ---- «Min arbeidstid» (bare klassene «at-…») ---- */
.at-hode { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; background: var(--kort);
  border: 1px solid var(--linje); border-radius: 12px; padding: 24px; margin-bottom: var(--s2); }
.at-info { flex: 1 1 320px; min-width: 0; }
.at-dato { font-size: 15px; color: var(--demp); font-weight: 500; }
.at-status { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 12px; font-size: 22px; font-weight: 700; }
.at-prikk { width: 12px; height: 12px; border-radius: 50%; background: var(--felt-kant); flex: none; }
.at-status.pa .at-prikk { background: #16A34A; box-shadow: 0 0 0 4px rgba(22, 163, 74, .18); }
.at-fakta { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0; }
.at-fakta dt { font-size: 13px; color: var(--demp); }
.at-fakta dd { margin: 2px 0 0; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.at-handling { display: flex; flex-direction: column; align-items: stretch; gap: 10px; flex: 0 1 300px; min-width: 240px; }
.at-knapp { min-height: 64px; padding: 0 28px; border: 0; border-radius: 12px; font: inherit; font-size: 20px; font-weight: 700; color: #fff;
  background: var(--aksent); cursor: pointer; transition: background var(--overgang), transform .05s; }
.at-knapp:hover:not(:disabled) { background: var(--aksent-hover); }
.at-knapp.ut { background: #B91C1C; }
.at-knapp.ut:hover:not(:disabled) { background: #991B1B; }
.at-knapp:active:not(:disabled) { transform: translateY(1px); }
.at-knapp:disabled { opacity: .7; cursor: progress; }
.at-knapp:focus-visible { outline: 3px solid var(--aksent); outline-offset: 3px; }
.at-bekreft { padding: 8px 12px; border-radius: 8px; background: var(--p-gronn); color: var(--p-gronn-t); font-weight: 600; font-size: 14px; }
.at-summer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: var(--s3); }
.at-summer > div { background: var(--kort); border: 1px solid var(--linje); border-radius: 12px; padding: 16px 20px; display: flex; flex-direction: column; gap: 2px; }
.at-summer span { font-size: 13px; color: var(--demp); }
.at-summer b { font-size: 22px; font-variant-numeric: tabular-nums; }
.at-summer small { font-size: 12.5px; color: var(--demp); }
.at-maned { margin-bottom: var(--s3); }
.at-maned-topp { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.at-mndvelger { display: flex; align-items: center; gap: 6px; }
.at-mndvelger h2 { margin: 0; font-size: 18px; min-width: 150px; text-align: center; }
.at-mndvelger .ikonknapp { font-size: 22px; border: 1px solid var(--linje); }
.at-tabell-ramme { max-height: none; }
.at-tabell td, .at-tabell th { white-space: normal; }
.at-tabell .at-tall { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: var(--tekst-str); }
.at-tom-knapp { display: inline-block; width: 36px; }
.at-tabell tr.at-pagar td { background: var(--aksent-lys); }
.at-tabell tfoot td { font-weight: 600; border-top: 2px solid var(--linje); background: var(--lys); }
.at-korr { background: var(--p-oransje); color: #92400E; margin-right: 4px; }
.at-handlinger { text-align: right; }
.at-historikk { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; display: grid; gap: 6px; }
@media (max-width: 760px) {
  .at-hode { padding: 18px; }
  .at-handling { flex: 1 1 100%; min-width: 0; }
  .at-knapp { width: 100%; }
  .at-summer { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .at-tabell thead { display: none; }
  .at-tabell, .at-tabell tbody, .at-tabell tfoot, .at-tabell tr, .at-tabell td { display: block; width: 100%; }
  .at-tabell tr { padding: 8px 12px; border-bottom: 1px solid var(--linje); }
  .at-tabell td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .at-tabell td[data-etikett]::before { content: attr(data-etikett); color: var(--demp); text-align: left; flex: none; }
  .at-tabell .at-handlinger { justify-content: flex-end; }
  .at-tabell tfoot td { display: flex; }
}

/* ---- «Om og personvern» (bare klassene «om-…») ---- */
.om-intro { max-width: 860px; margin-bottom: var(--s3); }
.om-intro p { margin: 0 0 8px; line-height: 1.6; }
.om-dato { color: var(--demp); font-size: 13px; }
.om-status { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.om-status > div { background: var(--kort); border: 1px solid var(--linje); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.om-status span { font-size: 12.5px; color: var(--demp); }
.om-status b { font-size: 14px; overflow-wrap: anywhere; }
.om-del { background: var(--kort); border: 1px solid var(--linje); border-radius: 12px; padding: 24px; margin-bottom: var(--s2); }
.om-del h2 { margin: 0 0 12px; font-size: 18px; }
.om-del h3 { margin: 18px 0 6px; font-size: 15px; }
.om-del p, .om-del li { line-height: 1.6; max-width: 860px; overflow-wrap: anywhere; }
.om-del p { margin: 0 0 10px; }
.om-del ul { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 6px; }
.om-uavklart { display: inline; background: var(--p-oransje); color: var(--tekst); border-radius: 4px; padding: 1px 4px; }
.om-tabell-ramme { overflow-x: auto; border: 1px solid var(--linje); border-radius: 10px; margin: 8px 0 12px; }
.om-tabell { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.om-tabell th, .om-tabell td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--linje); line-height: 1.45; }
.om-tabell th { background: var(--lys); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--demp); }
.om-tabell tbody tr:last-child td { border-bottom: 0; }
.om-tabell td:first-child { font-weight: 600; min-width: 130px; }
@media (max-width: 900px) { .om-status { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .om-del { padding: 16px; }
  .om-status { grid-template-columns: minmax(0, 1fr); }
  .om-tabell-ramme { border: 0; overflow: visible; }
  .om-tabell thead { display: none; }
  .om-tabell, .om-tabell tbody, .om-tabell tr, .om-tabell td { display: block; width: 100%; }
  .om-tabell tr { border: 1px solid var(--linje); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
  .om-tabell td { border: 0; padding: 4px 0; }
  .om-tabell td[data-etikett]:not(:first-child)::before { content: attr(data-etikett) ": "; color: var(--demp); font-weight: 600; }
  .om-tabell td:first-child { font-size: 15px; }
}