:root {
  /* Flater — nettsidens krem, med hvite kort oppå */
  --bg: #f4f1eb;
  --flate: #ffffff;
  --flate-hev: #fbfaf7;
  --kant: rgba(36, 56, 74, 0.13);
  --kant-sterk: rgba(36, 56, 74, 0.26);

  /* Tekst — marine, som på nettsiden */
  --tekst: #24384a;
  --tekst-dempet: rgba(36, 56, 74, 0.68);
  --tekst-svak: rgba(36, 56, 74, 0.46);

  /* Aksent — cognac */
  --aksent: #96603a;
  --aksent-hev: #7d4f2e;
  --aksent-svak: rgba(150, 96, 58, 0.1);
  --paa-aksent: #fdfbf7;

  /* Status. `-tekst`-variantene er mørknet for kontrast mot lys tint. */
  --kritisk: #c04a2f;
  --kritisk-tekst: #97341c;
  --kritisk-svak: rgba(192, 74, 47, 0.11);

  --advarsel: #e7b32b;
  --advarsel-tekst: #7a5b08;
  --advarsel-svak: rgba(231, 179, 43, 0.18);

  --ok: #5d8046;
  --ok-tekst: #44602e;
  --ok-svak: rgba(93, 128, 70, 0.13);

  --info: #2c5878;
  --info-tekst: #234a66;
  --info-svak: rgba(44, 88, 120, 0.11);

  --nøytral: rgba(36, 56, 74, 0.55);
  --nøytral-svak: rgba(36, 56, 74, 0.07);

  /* Form */
  --radius: 10px;
  --radius-liten: 6px;
  --skygge: 0 1px 2px rgba(36, 56, 74, 0.06), 0 8px 24px -12px rgba(36, 56, 74, 0.18);

  /* Rytme */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  --maks-bredde: 1240px;

  --skrift: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --skrift-tall: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* ---------- Grunnlag ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/**
 * `hidden` skal alltid vinne over display fra en klasse.
 *
 * Nettleserens egen regel er `[hidden] { display: none }`, men den
 * ligger i UA-arket og taper mot enhver forfatterregel — også en med
 * lavere spesifisitet. `.varsel { display: flex }` gjorde derfor at et
 * tomt meldingsfelt sto synlig som en tom, rammet boks på alle sider.
 * !important er nødvendig fordi klassen ellers vinner uansett.
 */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--tekst);
  font-family: var(--skrift);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h1 {
  font-size: 1.5rem;
}
h2 {
  font-size: 1.125rem;
}
h3 {
  font-size: 0.95rem;
}

p {
  margin: 0 0 var(--sp-3);
}

a {
  color: var(--aksent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

code {
  font-family: var(--skrift-tall);
  font-size: 0.9em;
  background: var(--nøytral-svak);
  padding: 1px 5px;
  border-radius: 4px;
}

.dempet {
  color: var(--tekst-dempet);
}

.svak {
  color: var(--tekst-svak);
  font-size: 0.85rem;
}

:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

/* ---------- Layout ---------- */

.skall {
  max-width: var(--maks-bredde);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4) var(--sp-7);
}

.skjelett {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-4);
}

.rad {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.rad--mellomrom {
  justify-content: space-between;
}

.stabel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* ---------- Navigasjon ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(244, 241, 235, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--kant);
}

.nav__innhold {
  max-width: var(--maks-bredde);
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.nav__merke {
  font-weight: 650;
  letter-spacing: -0.02em;
  margin-right: auto;
}

.nav__lenke {
  color: var(--tekst-dempet);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-liten);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  position: relative;
}

.nav__lenke:hover {
  color: var(--tekst);
  background: var(--flate);
  text-decoration: none;
}

.nav__lenke[aria-current='page'] {
  color: var(--tekst);
  background: var(--flate);
}

/* Understrek i cognac på aktiv side, som på nettsiden */
.nav__lenke[aria-current='page']::after {
  content: '';
  position: absolute;
  left: var(--sp-3);
  right: var(--sp-3);
  bottom: 2px;
  height: 2px;
  background: var(--aksent);
  border-radius: 2px;
}

/* ---------- Kort ---------- */

.kort {
  background: var(--flate);
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  padding: var(--sp-4);
}

.kort--klikkbar {
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.kort--klikkbar:hover {
  border-color: var(--kant-sterk);
  box-shadow: var(--skygge);
  transform: translateY(-1px);
}

/* Venstre fargestripe for statusmarkering (HMS-02: forfalt = rød) */
.kort--forfalt {
  border-left: 3px solid var(--kritisk);
}
.kort--snart {
  border-left: 3px solid var(--advarsel);
}
.kort--utført {
  border-left: 3px solid var(--ok);
}

.kort__topp {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}

.kort__tittel {
  font-weight: 600;
}

.rutenett {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* ---------- KPI-linje (HMS-05) ---------- */

.kpi {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: var(--sp-5);
}

.kpi__boks {
  background: var(--flate);
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  padding: var(--sp-4);
}

.kpi__tall {
  font-family: var(--skrift-tall);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.kpi__etikett {
  color: var(--tekst-dempet);
  font-size: 0.8rem;
  margin-top: var(--sp-1);
}

.kpi__boks--kritisk .kpi__tall {
  color: var(--kritisk-tekst);
}
.kpi__boks--advarsel .kpi__tall {
  color: var(--advarsel-tekst);
}
.kpi__boks--ok .kpi__tall {
  color: var(--ok-tekst);
}

/* ---------- Merkelapper ---------- */

.merke {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--nøytral-svak);
  color: var(--nøytral);
}

.merke--kritisk {
  background: var(--kritisk-svak);
  color: var(--kritisk-tekst);
}
.merke--advarsel {
  background: var(--advarsel-svak);
  color: var(--advarsel-tekst);
}
.merke--ok {
  background: var(--ok-svak);
  color: var(--ok-tekst);
}
.merke--info {
  background: var(--info-svak);
  color: var(--info-tekst);
}

/* Teller i navigasjonen (MAIL-04, TKT-08) */
.teller {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--aksent);
  color: var(--paa-aksent);
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* `[hidden]` dekkes av grunnlagsregelen; :empty fanger telleren når
   settTeller har tømt den uten å skjule den. */
.teller:empty {
  display: none;
}

/* ---------- Knapper ---------- */

.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  min-height: 38px;
  border: 1px solid var(--kant-sterk);
  border-radius: var(--radius-liten);
  background: var(--flate);
  color: var(--tekst);
  font: inherit;
  font-weight: 550;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.knapp:hover:not(:disabled) {
  background: var(--flate-hev);
  border-color: var(--tekst-svak);
  text-decoration: none;
}

.knapp:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.knapp--primær {
  background: var(--aksent);
  border-color: var(--aksent);
  color: var(--paa-aksent);
}

.knapp--primær:hover:not(:disabled) {
  background: var(--aksent-hev);
  border-color: var(--aksent-hev);
}

.knapp--fare {
  border-color: var(--kritisk);
  color: var(--kritisk-tekst);
  background: var(--flate);
}

.knapp--fare:hover:not(:disabled) {
  background: var(--kritisk-svak);
  border-color: var(--kritisk);
}

/* Aktiv tilstand for en filtersnarvei, f.eks. «Mine saker» */
.knapp[aria-pressed='true'] {
  background: var(--aksent-svak);
  border-color: var(--aksent);
  color: var(--aksent-hev);
}

/* ---------- Skjema ---------- */

.felt {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.felt__etikett {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tekst-dempet);
}

.felt__inn,
.felt__valg,
.felt__tekst {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  min-height: 38px;
  border: 1px solid var(--kant-sterk);
  border-radius: var(--radius-liten);
  background: var(--flate);
  color: var(--tekst);
  /* 16px hindrer at iOS zoomer inn ved fokus */
  font: inherit;
  font-size: 16px;
}

.felt__tekst {
  min-height: 110px;
  resize: vertical;
}

.felt__inn:focus,
.felt__valg:focus,
.felt__tekst:focus {
  border-color: var(--aksent);
  outline: none;
  box-shadow: 0 0 0 3px var(--aksent-svak);
}

.felt__inn::placeholder,
.felt__tekst::placeholder {
  color: var(--tekst-svak);
}

.felt__hjelp {
  font-size: 0.8rem;
  color: var(--tekst-svak);
}

.filterlinje {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: flex-end;
  margin-bottom: var(--sp-4);
}

.filterlinje .felt {
  margin-bottom: 0;
  min-width: 160px;
}

/* Søkefeltet skal ha mer plass enn nedtrekkslistene */
.filterlinje .felt--sok {
  flex: 1 1 220px;
  min-width: 200px;
}

/* ---------- Meldinger ---------- */

/* HMS-08 / MAIL-07: én modul kan feile uten å skjule resten */
.varsel {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-liten);
  border: 1px solid var(--kant);
  background: var(--flate);
  font-size: 0.9rem;
  margin-bottom: var(--sp-4);
}

.varsel--feil {
  border-color: var(--kritisk);
  background: var(--kritisk-svak);
  color: var(--kritisk-tekst);
}

.varsel--advarsel {
  border-color: var(--advarsel);
  background: var(--advarsel-svak);
  color: var(--advarsel-tekst);
}

.varsel--ok {
  border-color: var(--ok);
  background: var(--ok-svak);
  color: var(--ok-tekst);
}

.tom {
  padding: var(--sp-6);
  text-align: center;
  color: var(--tekst-svak);
  border: 1px dashed var(--kant-sterk);
  border-radius: var(--radius);
  background: var(--flate);
}

/* ---------- Tabell ---------- */

.tabell-omslag {
  overflow-x: auto;
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  background: var(--flate);
}

.tabell {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.tabell th,
.tabell td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--kant);
  white-space: nowrap;
}

.tabell th {
  background: var(--flate-hev);
  color: var(--tekst-dempet);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tabell tbody tr:last-child td {
  border-bottom: none;
}

.tabell tbody tr:hover {
  background: var(--flate-hev);
}

/* ---------- Modal ---------- */

.modal {
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  background: var(--flate);
  color: var(--tekst);
  padding: 0;
  max-width: min(760px, calc(100vw - 2rem));
  width: 100%;
  box-shadow: 0 24px 48px -16px rgba(36, 56, 74, 0.35);
}

.modal::backdrop {
  background: rgba(36, 56, 74, 0.45);
  backdrop-filter: blur(2px);
}

.modal__topp {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--kant);
}

.modal__kropp {
  padding: var(--sp-4);
  max-height: 60vh;
  overflow-y: auto;
}

.modal__bunn {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border-top: 1px solid var(--kant);
}

/* ---------- Innlogging ---------- */

.logg-inn {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
}

.logg-inn__kort {
  width: 100%;
  max-width: 400px;
  background: var(--flate);
  border: 1px solid var(--kant);
  border-radius: 16px;
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  box-shadow: var(--skygge);
}

.logg-inn__logo {
  margin: 0 0 var(--sp-5);
  text-align: center;
  line-height: 0;
}

.logg-inn__logo img {
  height: 84px;
  width: auto;
}

/* Kort strek under tittelen, i samme cognac som tittelen — samme grep
   som seksjonsoverskriftene på den offentlige forsiden */
.logg-inn__tittel {
  margin: 0 0 var(--sp-6);
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aksent);
}

.logg-inn__tittel::after {
  content: '';
  display: block;
  width: 32px;
  height: 3px;
  margin: var(--sp-3) auto 0;
  border-radius: 2px;
  background: var(--aksent);
}

.logg-inn .felt {
  margin-bottom: var(--sp-5);
}

.logg-inn .felt__inn {
  min-height: 42px;
}

/* Grønn, ikke dashbordets cognac-primærknapp: på innloggingen er
   cognac allerede brukt på tittelen, og knappen skal skille seg ut */
.logg-inn__knapp {
  width: 100%;
  min-height: 44px;
  margin-top: var(--sp-2);
  background: var(--ok);
  border-color: var(--ok);
  color: var(--paa-aksent);
  font-weight: 600;
}

.logg-inn__knapp:hover:not(:disabled) {
  background: var(--ok-tekst);
  border-color: var(--ok-tekst);
}

.logg-inn__tilbake {
  margin: var(--sp-5) 0 0;
  text-align: center;
  font-size: 0.85rem;
}

.logg-inn__tilbake a {
  color: var(--tekst);
}

.logg-inn__tilbake span {
  margin-right: var(--sp-2);
}

/* ---------- Saksliste ---------- */

.sak-liste {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.sak {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--flate);
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.sak:hover {
  border-color: var(--kant-sterk);
  box-shadow: var(--skygge);
}

/* Alvorlighetsgrad som venstre stripe — synlig uten å lese teksten */
.sak--kritisk {
  border-left: 3px solid var(--kritisk);
}
.sak--høy {
  border-left: 3px solid var(--advarsel);
}

.sak--avsluttet {
  opacity: 0.62;
}

.sak__hoved {
  flex: 1;
  min-width: 0;
}

.sak__tittel {
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sak__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  margin-top: var(--sp-1);
  font-size: 0.8rem;
  color: var(--tekst-svak);
}

.sak__id {
  font-family: var(--skrift-tall);
  color: var(--tekst-svak);
  font-size: 0.8rem;
}

.sak__merker {
  display: flex;
  gap: var(--sp-2);
  flex-shrink: 0;
}

/* Treff fra fritekstsøk framheves */
.sak mark {
  background: var(--advarsel-svak);
  color: inherit;
  border-radius: 3px;
  padding: 0 2px;
}

/* ---------- Saksdetaljer ----------