/* ============================================================
   Soltunet 4 Styredashboard — designsystem

   Lyst tema med samme palett som den offentlige nettsiden, slik at
   overgangen fra forsiden via «For styret» ikke føles som to ulike
   produkter. Kravspec §3.2 spesifiserte mørkt tema, men det ble skrevet
   før nettsiden fantes.

   Ingen byggsteg, ingen avhengigheter. Montserrat er selvhostet og
   lastes via /css/fonts.css.

   Fargebruk og kontrast: gul (#E7B32B) og grønn (#5D8046) har for lav
   kontrast mot hvitt til å brukes som tekstfarge. Merkelapper bruker
   derfor lys tint som bakgrunn med en mørkere variant av fargen som
   tekst — det gir både bedre lesbarhet og et roligere uttrykk.
   ============================================================ */

: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: 380px;
  background: var(--flate);
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  padding: var(--sp-6);
  box-shadow: var(--skygge);
}

/* ---------- 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 ---------- */

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

.detalj__seksjon {
  margin-top: var(--sp-5);
}

.detalj__seksjon h3 {
  margin-bottom: var(--sp-3);
  color: var(--tekst-dempet);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.beskrivelse {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--tekst-dempet);
}

.kommentar {
  padding: var(--sp-3);
  background: var(--bg);
  border: 1px solid var(--kant);
  border-radius: var(--radius-liten);
  margin-bottom: var(--sp-2);
}

.kommentar__topp {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
  font-size: 0.8rem;
}

.kommentar__navn {
  font-weight: 600;
}

.kommentar__tekst {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.logg {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
}

.logg li {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--kant);
  color: var(--tekst-dempet);
}

.logg li:last-child {
  border-bottom: none;
}

.logg__tid {
  flex-shrink: 0;
  color: var(--tekst-svak);
  font-variant-numeric: tabular-nums;
}

/* ---------- Mobil ---------- */

@media (max-width: 640px) {
  .skall {
    padding: var(--sp-4) var(--sp-3) var(--sp-6);
  }

  h1 {
    font-size: 1.25rem;
  }

  .kpi {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }

  .kpi__boks {
    padding: var(--sp-3);
  }

  .kpi__tall {
    font-size: 1.4rem;
  }

  .nav__merke {
    width: 100%;
    margin-right: 0;
  }

  .filterlinje .felt {
    min-width: 100%;
  }

  /* Knappene i sakslisten får plass under innholdet i stedet for
     å presse tittelen sammen */
  .sak {
    flex-wrap: wrap;
  }

  .sak__merker {
    width: 100%;
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}