/* Etman-side 1.1 (docs/mal i Etman/etman-portal). Sideoppbyggingen fra docs/layout.md som klasser med
   prefiks e-: topplinje, fanerad, sidehode, bokser, nøkkeltall, tabell + sidepanel, knapper, felt,
   chips, meldinger, status, TEST-lapp og tomtilstand. Kopieres ordrett til hver løsning, ved siden av
   etman-tema.css, og lastes etter den og før løsningens eget stilark. Bruker bare --e-*-variablene
   fra etman-tema.css (ingen egne fargekoder). Endres aldri i kopien; ny regel = ny versjon i
   portal-repoet, kopieres ut til alle. Fasit: DESIGN.md, docs/tema.md, docs/layout.md og portalens
   static/style.css. */

/* ------------------------------------------------------------------ grunnlag (bare under .e-side) */

.e-side { margin: 0; min-height: 100vh; background: var(--e-papir); color: var(--e-blekk);
  font: 400 15px/1.45 var(--e-font); -webkit-text-size-adjust: 100%; }
.e-side, :where(.e-side) *, :where(.e-side) *::before, :where(.e-side) *::after { box-sizing: border-box; }
:where(.e-side) :is(h1, h2, h3) { margin: 0; line-height: 1.2; text-wrap: balance; }
:where(.e-side) h1 { font-weight: 400; }
:where(.e-side) h2 { font-weight: 600; font-size: 19px; }
:where(.e-side) p { margin: 0 0 12px; }
/* :where() gir null spesifisitet, så e-klassene og løsningens egne regler vinner over grunnlaget. */
:where(.e-side) a { color: var(--e-aksent); text-underline-offset: 3px; }
:where(.e-side) :is(button, input, select, textarea) { font: inherit; color: inherit; }
.e-side [hidden] { display: none !important; }
.e-side :focus-visible,
.e-knapp:focus-visible, .e-ikonknapp:focus-visible, .e-chip:focus-visible, .e-faner a:focus-visible,
.e-faner button:focus-visible, .e-inndata:focus-visible, .e-felt :focus-visible, .e-sok input:focus-visible {
  outline: 2px solid var(--e-fokus); outline-offset: 2px; }
:where(.e-side) :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--e-skall); }

.e-etikett { font-size: 12.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--e-dempet); }
.e-svak { font-size: 13px; color: var(--e-dempet); }
.e-num { font-family: var(--e-font-tall); font-variant-numeric: tabular-nums; }
.e-skjult { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.e-ikon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------ topplinje (bare alene) og fanerad */

.e-topp { display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 clamp(20px, 3vw, 44px);
  background: var(--e-flate); border-bottom: 1px solid var(--e-linje); }
[data-i-portal] .e-topp { display: none; }
.e-merke { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 500; color: var(--e-blekk); text-decoration: none; }
.e-merke { min-width: 0; }
.e-merke img, .e-merke svg { width: 28px; height: 28px; flex: none; }
.e-merke-navn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e-topp-hoyre { flex: none; margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13.5px; color: var(--e-dempet); }
.e-topp-hoyre a { color: var(--e-grafitt); }

/* R1: raden ruller vannrett (mobil) men aldri loddrett. Fanene har margin-bottom 0; den 3 px valgte streken
   ligger oppå 1 px-linja som er bakgrunnen på raden. Med -1px flyter raden 1 px over og Chrome tegner et
   loddrett rullefelt med piler ved siden av fanene. */
.e-faner { --e-side-luft: clamp(20px, 3vw, 44px); display: flex; gap: 22px; overflow-x: auto; overflow-y: hidden; white-space: nowrap;
  scrollbar-width: thin; padding: 18px var(--e-side-luft) 0;
  background: linear-gradient(var(--e-linje), var(--e-linje)) no-repeat center bottom / calc(100% - 2 * var(--e-side-luft)) 1px; }
.e-faner a, .e-faner button { flex: none; padding: 6px 0 11px; margin: 0; border: 0; border-bottom: 3px solid transparent;
  background: none; border-radius: 0; color: var(--e-grafitt); font: 500 14.5px/1.45 var(--e-font); text-decoration: none; cursor: pointer; }
.e-faner a:hover, .e-faner button:hover { color: var(--e-blekk); }
.e-faner [aria-current="page"], .e-faner [aria-selected="true"] { color: var(--e-blekk); font-weight: 600; border-bottom-color: var(--e-skall); }
:root[data-tema="mork"] .e-faner [aria-current="page"], :root[data-tema="mork"] .e-faner [aria-selected="true"] { border-bottom-color: var(--e-ikon); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="lys"]) .e-faner [aria-current="page"],
  :root:not([data-tema="lys"]) .e-faner [aria-selected="true"] { border-bottom-color: var(--e-ikon); }
}

/* ------------------------------------------------------------------ innhold og sidehode */

/* R2: full bredde, ingen maks-bredde på fanerad, innhold og bunn. Løpende tekst begrenses i stedet. */
.e-innhold { padding: 32px clamp(20px, 3vw, 44px) 24px; }
.e-innhold > p, .e-boks-kropp :where(p, li) { max-width: 80ch; }
.e-bunn { padding: 8px clamp(20px, 3vw, 44px) 32px; font-size: 12px; color: var(--e-dempet);
  display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap; }

.e-sidehode { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 20px; margin-bottom: 22px; flex-wrap: wrap; }
.e-sidehode h1 { font-size: 34px; font-weight: 400; line-height: 1.1; letter-spacing: -.01em; }
.e-sidehode p { margin: 6px 0 0; color: var(--e-grafitt); font-size: 15px; max-width: 80ch; }
.e-verktoy { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.e-sok { position: relative; display: block; width: 260px; }
.e-sok .e-ikon { position: absolute; left: 11px; top: 50%; translate: 0 -50%; width: 17px; height: 17px; color: var(--e-dempet); pointer-events: none; }

/* ------------------------------------------------------------------ bokser, rader, nøkkeltall */

.e-boks { background: var(--e-flate); border: 1px solid var(--e-linje); border-radius: var(--e-r-boks); margin: 0 0 20px; min-width: 0; }
.e-boks > h2 { display: flex; align-items: center; gap: 10px; padding: 14px 18px 8px; font-size: 12.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em; color: var(--e-dempet); }
.e-boks > h2 a, .e-boks > h2 .e-svak { margin-left: auto; font-size: 13.5px; text-transform: none; letter-spacing: 0; }
.e-boks-kropp { padding: 4px 18px 18px; }
.e-rad { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 13px 18px;
  border-top: 1px solid var(--e-linje); color: inherit; text-decoration: none; }
.e-boks > h2 + .e-rad { border-top: 0; }
.e-rad b { display: block; font-size: 16px; font-weight: 600; }
.e-rad small { display: block; font-size: 13.5px; color: var(--e-dempet); }
a.e-rad:hover, button.e-rad:hover { background: var(--e-lysgronn-tint); }
.e-boks > .e-rad:last-child, .e-boks > .e-tom:last-child { border-bottom-left-radius: var(--e-r-boks); border-bottom-right-radius: var(--e-r-boks); }

.e-kolonner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 24px; align-items: start; }

.e-tall { overflow: hidden; }
.e-tall > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 0 -1px -1px 0; }
.e-tall-celle { display: flex; flex-direction: column; gap: 3px; padding: 14px 18px 15px; min-width: 0;
  border-right: 1px solid var(--e-linje); border-bottom: 1px solid var(--e-linje); }
.e-tall-celle > span { font-size: 12.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--e-dempet); }
.e-tall-celle > b { font: 600 30px/1.15 var(--e-font-tall); font-variant-numeric: tabular-nums; }
.e-tall-celle > small { font-size: 13px; color: var(--e-dempet); }

.e-tom { margin: 0; padding: 22px 18px; color: var(--e-grafitt); }

/* ------------------------------------------------------------------ tabell og sidepanel */

.e-tabell { background: var(--e-flate); border: 1px solid var(--e-linje); border-radius: var(--e-r-boks); overflow-x: auto; margin: 0 0 20px; }
.e-boks > .e-tabell { border: 0; border-radius: 0 0 var(--e-r-boks) var(--e-r-boks); margin: 0; }
.e-boks > h2 + .e-tabell th { border-top: 1px solid var(--e-linje); }
.e-tabell table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.e-tabell th { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--e-linje); font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em; color: var(--e-dempet); white-space: nowrap; }
.e-tabell td { padding: 11px 14px; border-bottom: 1px solid var(--e-linje); vertical-align: top; }
.e-tabell tbody tr:last-child td { border-bottom: 0; }
.e-tabell th.e-num, .e-tabell td.e-num { text-align: right; white-space: nowrap; }
.e-tabell .e-nowrap { white-space: nowrap; }
/* R3: korte kolonner (dato, status, tall) krymper til innholdet, så ledig bredde går til tekstkolonnene. */
@media (min-width: 721px) { .e-tabell th.e-krymp, .e-tabell td.e-krymp { width: 1%; white-space: nowrap; } }
.e-tabell td small { display: block; font-size: 13px; color: var(--e-dempet); }
.e-tabell td small.e-kun-mobil { display: none; }
.e-tabell tr.e-klikk { cursor: pointer; }
.e-tabell tr.e-klikk:hover td, .e-tabell tr[aria-selected="true"] td { background: var(--e-lysgronn-tint); }
.e-tabell tr[aria-selected="true"] td { font-weight: 500; }
.e-tabell tr[aria-selected="true"] .e-brikke { background: var(--e-flate); border-color: var(--e-linje); }

.e-med-panel { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; margin: 0 0 20px; }
.e-med-panel > * { margin-bottom: 0; }
.e-panel { position: sticky; top: 20px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; min-width: 0;
  background: var(--e-flate); border: 1px solid var(--e-linje); border-radius: var(--e-r-boks); }
.e-panel > form { display: flex; flex-direction: column; min-height: 0; }
.e-panel-hode { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 13px; border-bottom: 1px solid var(--e-linje); }
.e-panel-hode h2 { font-size: 19px; font-weight: 600; }
.e-panel-hode p { margin: 2px 0 0; font-size: 13.5px; color: var(--e-dempet); overflow-wrap: anywhere; }
.e-panel-hode .e-ikonknapp { margin-left: auto; }
.e-panel-kropp { overflow-y: auto; min-height: 0; }
.e-panel-del { display: grid; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--e-linje); }
.e-panel-del:last-child { border-bottom: 0; }
.e-panel-del h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--e-dempet); }
.e-panel-del .e-melding { margin: 0; }
.e-panel-bunn { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 18px; border-top: 1px solid var(--e-linje); }
.e-panel-bunn .e-skyv { margin-left: auto; }

/* ------------------------------------------------------------------ knapper */

.e-knapp { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: var(--e-hoyde); padding: 0 15px;
  border: 1px solid var(--e-linje); border-radius: var(--e-r); background: var(--e-flate); color: var(--e-blekk);
  font: 500 15px/1.2 var(--e-font); text-decoration: none; white-space: nowrap; cursor: pointer; }
.e-knapp:hover { border-color: var(--e-kant); background: var(--e-lysgronn-tint); }
.e-knapp.primar { background: var(--e-skall); border-color: var(--e-skall); color: var(--e-skall-tekst); }
.e-knapp.primar:hover { background: var(--e-skall-dyp); border-color: var(--e-skall-dyp); }
.e-knapp.fare { background: transparent; border-color: var(--e-feil); color: var(--e-feil); }
.e-knapp.fare:hover { background: var(--e-feil-tint); }
.e-knapp.liten { min-height: var(--e-hoyde-liten); padding: 0 10px; font-size: 13.5px; }
.e-knapp:disabled, .e-knapp[aria-disabled="true"] { opacity: .55; cursor: default; }
.e-ikonknapp { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; flex: none; cursor: pointer;
  border: 1px solid var(--e-linje); border-radius: var(--e-r); background: var(--e-flate); color: var(--e-grafitt); }
.e-ikonknapp:hover { color: var(--e-blekk); border-color: var(--e-kant); }
.e-lenkeknapp { padding: 0; border: 0; background: none; color: var(--e-aksent); font: inherit; text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; }

/* ------------------------------------------------------------------ felt */

.e-inndata, .e-felt input:not([type="checkbox"]):not([type="radio"]), .e-felt select, .e-felt textarea, .e-sok input, .e-verktoy select {
  width: 100%; min-height: var(--e-hoyde); padding: 7px 10px; border: 1px solid var(--e-linje); border-radius: var(--e-r);
  background: var(--e-flate); color: var(--e-blekk); font: 400 15px/1.45 var(--e-font); }
.e-verktoy select, select.e-inndata { width: auto; }
.e-inndata:hover, .e-felt input:hover, .e-felt select:hover, .e-felt textarea:hover, .e-sok input:hover, .e-verktoy select:hover { border-color: var(--e-kant); }
.e-sok input { padding-left: 36px; }
.e-felt textarea, textarea.e-inndata { min-height: 70px; resize: vertical; }
.e-felt { display: grid; gap: 4px; font-size: 14px; font-weight: 500; }
.e-felt.feil input, .e-felt.feil select, .e-felt.feil textarea { border-color: var(--e-feil); }
.e-felt.feil .e-hjelp { color: var(--e-feil); }
.e-hjelp { display: block; font-size: 13px; font-weight: 400; color: var(--e-dempet); }
.e-kryss { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; cursor: pointer; }
.e-kryss input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--e-skall); }
.e-feltpar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }

/* ------------------------------------------------------------------ chips, brikker, status, TEST-lapp */

.e-filterlinje { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.e-chip { padding: 5px 13px; border: 1px solid var(--e-linje); border-radius: var(--e-r-pille); background: var(--e-flate);
  color: var(--e-grafitt); font: 500 14px/1.3 var(--e-font); cursor: pointer; white-space: nowrap; }
.e-chip:hover { border-color: var(--e-kant); }
.e-chip[aria-pressed="true"] { background: var(--e-skall); border-color: var(--e-skall); color: var(--e-skall-tekst); }
.e-chip.feil[aria-pressed="true"] { background: var(--e-feil-tint); border-color: var(--e-feil); color: var(--e-feil); }
.e-brikke { display: inline-block; padding: 0 8px; border: 1px solid transparent; border-radius: var(--e-r-pille);
  background: var(--e-lysgronn-tint); color: var(--e-blekk); font-size: 13px; font-weight: 500; line-height: 1.5; white-space: nowrap; }
.e-brikke.noytral { background: var(--e-flate-dempet); color: var(--e-grafitt); }
.e-brikke.skall { background: var(--e-skall); color: var(--e-skall-tekst); }
.e-brikke.varsel { background: var(--e-varsel-tint); color: var(--e-varsel); }
.e-brikke.feil { background: var(--e-feil-tint); color: var(--e-feil); }
.e-brikke.info { background: var(--e-info-tint); color: var(--e-info); }

.e-status { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; white-space: nowrap; }
.e-status::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--e-dempet); }
.e-status.ok::before { background: var(--e-lysgronn); box-shadow: 0 0 0 2px var(--e-lysgronn-tint); }
.e-status.venter::before { background: var(--e-kant); }
.e-status.av::before { background: transparent; border: 1.5px solid var(--e-dempet); }
.e-status.feil::before { background: var(--e-feil); }

/* Huskelappen: eneste skygge utenom meny, skuff og dialog (DESIGN.md, «Huskelapp»). */
.e-test-lapp { display: inline-block; padding: 2px 7px 1px; border-radius: var(--e-r-lapp); background: var(--e-gul); color: var(--e-gul-tekst);
  font: 600 11px/1.3 var(--e-font); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 1px 2px var(--e-skygge); vertical-align: 2px; }
:where(.e-side) mark { background: var(--e-gul); color: var(--e-gul-tekst); border-radius: 1px; }

/* ------------------------------------------------------------------ meldinger og dialog */

.e-melding { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 10px 12px; border-radius: var(--e-r);
  font-size: 14px; background: var(--e-flate-dempet); color: var(--e-blekk); }
.e-melding .e-ikon { width: 18px; height: 18px; margin-top: 1px; }
.e-melding > div > :last-child { margin-bottom: 0; }
.e-melding.ok { background: var(--e-lysgronn-tint); color: var(--e-ok); }
.e-melding.varsel { background: var(--e-varsel-tint); color: var(--e-varsel); }
.e-melding.feil { background: var(--e-feil-tint); color: var(--e-feil); }
.e-melding.info { background: var(--e-info-tint); color: var(--e-info); }

/* Bare for dialoger som står igjen fra før (layout.md pkt 8: nye løsninger bruker sidepanelet). */
dialog.e-dialog { width: min(520px, 92vw); padding: 20px; border: 1px solid var(--e-linje); border-radius: var(--e-r-kort);
  background: var(--e-flate); color: var(--e-blekk); box-shadow: 0 8px 24px var(--e-skygge); }
dialog.e-dialog::backdrop { background: var(--e-bak); }

/* ------------------------------------------------------------------ smalere skjermer */

@media (max-width: 1180px) {
  .e-med-panel { grid-template-columns: minmax(0, 1fr); }
  .e-panel { position: static; max-height: none; }
}
@media (max-width: 960px) {
  .e-kolonner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .e-topp, .e-bunn { padding-left: 16px; padding-right: 16px; }
  .e-topp { gap: 10px; }
  .e-merke { font-size: 18px; }
  .e-topp-hoyre { gap: 10px; }
  .e-faner { --e-side-luft: 16px; gap: 18px; padding-top: 14px; }
  .e-innhold { padding: 20px 16px 16px; }
  .e-sidehode h1 { font-size: 28px; }
  .e-sidehode .e-verktoy { width: 100%; }
  .e-sok { width: 100%; flex: 1 1 100%; }
  .e-tall-celle > b { font-size: 26px; }
  .e-panel-hode, .e-panel-del, .e-panel-bunn { padding-left: 14px; padding-right: 14px; }
  .e-feltpar { grid-template-columns: minmax(0, 1fr); }
  .e-bare-pc { display: none !important; }
  .e-tabell td small.e-kun-mobil { display: block; }
}
@media print {
  .e-topp, .e-faner, .e-verktoy, .e-panel-bunn { display: none !important; }
  .e-side { background: none; }
}