/* incounting — designsystem
 *
 * Tokens og komponenter er hentet ORDRETT fra designfilene
 * (docs/design/screens/, oppmålt i _inventar.md). Endrer du en verdi her, avviker
 * flaten fra leveransen — sjekk inventaret først.
 *
 * To bevisste avvik fra designfilene, begge fordi filene er mockups av en telefon:
 *  1. Den falske statuslinja («9:41» + batteri) og home-indikatoren er IKKE med. En ekte
 *     app tegner ikke telefonens eget chrome; det gjør operativsystemet. I stedet brukes
 *     env(safe-area-inset-*) slik at innholdet ikke havner under hakket eller
 *     hjemmestripa.
 *  2. width:390px er designbredden, ikke en app-bredde. Flaten er flytende med et tak,
 *     slik at den ikke blir en 390 px-strimmel midt på en stor skjerm.
 */

/* ── Tokens ────────────────────────────────────────────────────────────────── */
:root {
  --tekst: #1d1b2c;
  --tekst-2: #605e72;
  --tekst-3: #44425a;
  --dempet: #8b899e;
  --dempet-2: #a3a1b5;
  --nav-inaktiv: #918fa3;

  --aksent: #3d3a6b;
  --aksent-tint: #edecf5;
  --aksent-tint-2: #f4f3f9;
  --aksent-ramme: #c9c6dd;
  --aksent-flate: #f9f8fc;

  --skjerm: #f7f6fa;
  --kort: #ffffff;
  --kort-ramme: #e8e6f0;
  --delelinje: #f0eef5;
  --felt-ramme: #dfdde9;
  --pille-ramme: #e3e1ec;
  --deaktivert: #d9d7e4;

  --gronn: #0f6a3d;
  --gronn-flate: #e3f1e9;
  --gul: #8a5a06;
  --gul-flate: #fbf1dc;
  --rod: #a23325;
  --rod-flate: #f9e7e4;
  --nøytral-tekst: #5d5b70;
  --nøytral-flate: #ececf1;

  --fab-skygge: 0 6px 16px rgba(61, 58, 107, .35);

  /* Designbredden. Flaten vokser til dette taket og sentreres over det. */
  --maksbredde: 430px;
}

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

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

body {
  margin: 0;
  font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--tekst);
  background: var(--skjerm);
  font-size: 17px;
  line-height: 1.35;
  /* Overrulling i iOS Safari skal ikke vise en hvit stripe under en grå flate. */
  overscroll-behavior-y: none;
}

button, input, select, textarea { font: inherit; color: inherit; }

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
}

a { color: var(--aksent); }

/* Fokusmarkering skal være synlig for tastatur, men ikke ramme inn hvert museklikk. */
:focus-visible { outline: 2.5px solid var(--aksent); outline-offset: 2px; border-radius: 4px; }

/* ── Skjermramme ───────────────────────────────────────────────────────────── */
#app {
  max-width: var(--maksbredde);
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--skjerm);
}

#app.hvit { background: var(--kort); }

/* Rullbart innholdsområde. Bunnpolstringen holder siste rad klar av bunnnavigasjonen
 * OG av hjemmestripa på telefoner uten fysisk knapp. */
.innhold {
  flex: 1;
  padding: 0 20px;
  padding-bottom: calc(92px + env(safe-area-inset-bottom));
}

.innhold.uten-nav { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }

/* ── Sidehode (listeskjermene) ─────────────────────────────────────────────── */
.sidehode { padding: calc(10px + env(safe-area-inset-top)) 20px 0; }

.sidehode-rad { display: flex; align-items: baseline; justify-content: space-between; }
.sidehode h1 { font-size: 26px; font-weight: 700; margin: 0; }
.sidehode-teller { font-size: 14px; color: var(--dempet); }

/* ── Detalj-hode med tilbakepil ────────────────────────────────────────────── */
.detaljhode {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(6px + env(safe-area-inset-top)) 20px 10px;
}

.detaljhode h1 { font-size: 20px; font-weight: 700; margin: 0; flex: 1; }
.detaljhode .tilbake { display: flex; align-items: center; margin-left: -6px; padding: 6px; }

/* ── Kort ──────────────────────────────────────────────────────────────────── */
.kort {
  background: var(--kort);
  border: 1px solid var(--kort-ramme);
  border-radius: 16px;
}

.kort--liste { overflow: hidden; }
.kort--p16 { padding: 16px; }
.kort--p16-20 { padding: 16px 20px; }
.kort--p18-20 { padding: 18px 20px; }
.kort--p6-20 { padding: 6px 20px; }

/* Farget kort uten ramme. */
.kort-tonet { border-radius: 16px; padding: 16px 18px; background: var(--aksent-tint); }
.kort-tonet--gul { background: var(--gul-flate); }

/* ── Listerad ──────────────────────────────────────────────────────────────── */
.rad {
  display: flex;
  gap: 12px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--delelinje);
  width: 100%;
  align-items: flex-start;
}

.rad:last-child { border-bottom: 0; }

.rad-verdi { min-width: 60px; font-size: 20px; font-weight: 700; }
.rad-midt { flex: 1; min-width: 0; }
.rad-tittel { font-size: 16px; font-weight: 600; }
.rad-under { font-size: 14px; color: var(--tekst-2); margin-top: 1px; }
.rad-chips { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.rad-pil { margin-top: 14px; flex: none; }

/* Beløp/verdi til høyre (reise, utlegg). */
.rad-hoyre { text-align: right; font-size: 18px; font-weight: 700; white-space: nowrap; }

/* «beløp ikke ført» — kursiv og dempet, ALDRI 0. Et beløp som mangler er en annen
 * tilstand enn et beløp som er null kroner, og de skal ikke se like ut. */
.mangler-belop { font-style: italic; font-weight: 400; font-size: 14px; color: var(--dempet); }

/* Kode uten navn i oppslaget: koden vises alene med stiplet understrek, aldri en tom
 * celle og aldri «undefined». */
.navn-mangler { border-bottom: 1.5px dotted var(--dempet-2); }

.kode { color: var(--dempet-2); font-weight: 400; }

/* ── Datogruppe ────────────────────────────────────────────────────────────── */
.datogruppe {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--dempet);
  margin: 18px 0 8px;
}

.datogruppe:first-of-type { margin-top: 16px; }

/* ── Chips ─────────────────────────────────────────────────────────────────── */
.chip {
  font-size: 13px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--nøytral-flate);
  color: var(--nøytral-tekst);
  display: inline-block;
}

.chip--gronn { background: var(--gronn-flate); color: var(--gronn); }
.chip--lilla { background: var(--aksent-tint); color: var(--aksent); }
.chip--rod { background: var(--rod-flate); color: var(--rod); }
.chip--gul { background: var(--gul-flate); color: var(--gul); }
.chip--omriss { background: none; border: 1.3px solid var(--deaktivert); color: var(--nøytral-tekst); }
.chip--stor { padding: 4px 11px; }
.chip--liten { font-size: 12px; padding: 2px 9px; height: fit-content; }

.vedleggsteller {
  font-size: 13px;
  color: var(--dempet);
  display: flex;
  align-items: center;
  gap: 3px;
}

/* ── Typebadge ─────────────────────────────────────────────────────────────── */
.typebadge {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--aksent-tint);
  color: var(--aksent);
  text-transform: uppercase;
  display: inline-block;
}

.typebadge--nav { background: var(--gronn-flate); color: var(--gronn); }
.typebadge--oppdrag { background: var(--gul-flate); color: var(--gul); }
.typebadge--smal { padding: 3px 8px; }

/* ── Filterpiller ──────────────────────────────────────────────────────────── */
.piller { display: flex; gap: 8px; margin-top: 14px; overflow-x: auto; padding-bottom: 2px; }
.piller::-webkit-scrollbar { display: none; }

.pille {
  font-size: 15px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 99px;
  background: var(--kort);
  border: 1.5px solid var(--pille-ramme);
  color: var(--tekst-3);
  white-space: nowrap;
  flex: none;
}

.pille[aria-pressed='true'] { background: var(--aksent); border-color: var(--aksent); color: #fff; }

/* ── Segmentveksler ────────────────────────────────────────────────────────── */
.segmenter { display: flex; gap: 8px; }

.segment {
  flex: 1;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1.5px solid var(--felt-ramme);
  font-size: 16px;
  font-weight: 600;
  color: var(--tekst-3);
  background: none;
  padding: 0 8px;
}

.segment[aria-pressed='true'] {
  background: var(--aksent-tint);
  border: 2px solid var(--aksent);
  font-weight: 700;
  color: var(--aksent);
}

/* Spor-variant (grå bakgrunn rundt to segmenter). */
.spor { display: flex; background: var(--nøytral-flate); border-radius: 12px; padding: 4px; margin-top: 12px; }
.spor .segment { border: 0; min-height: 42px; background: none; }
.spor .segment[aria-pressed='true'] { background: var(--kort); border: 0; color: var(--aksent); }

/* ── Felt ──────────────────────────────────────────────────────────────────── */
.feltgruppe { margin-top: 22px; }

.etikett {
  font-size: 15px;
  font-weight: 600;
  color: var(--tekst-3);
  margin-bottom: 8px;
  display: block;
}

.etikett .valgfritt { font-weight: 400; color: var(--dempet-2); }

.hjelpetekst { font-size: 14px; color: var(--dempet); margin-top: 7px; }
.hjelpetekst--midt { text-align: center; margin-top: 8px; }

.felt,
.nedtrekk {
  width: 100%;
  min-height: 56px;
  border: 1.5px solid var(--felt-ramme);
  border-radius: 14px;
  padding: 0 16px;
  font-size: 17px;
  font-weight: 600;
  background: var(--kort);
  color: var(--tekst);
}

.felt::placeholder { font-weight: 400; color: var(--dempet-2); }

.nedtrekk {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  /* Egen nedtrekkspil tegnes som SVG; nettleserens egen skjules. */
  appearance: none;
}

.nedtrekk-verdi { font-size: 17px; font-weight: 600; flex: 1; min-width: 0; }
.nedtrekk--sak { border-color: var(--aksent-ramme); background: var(--aksent-flate); }

textarea.felt {
  min-height: 84px;
  padding: 14px 16px;
  font-weight: 400;
  line-height: 1.4;
  resize: vertical;
}

/* ── Stepper ───────────────────────────────────────────────────────────────── */
.stepper { display: flex; align-items: center; gap: 14px; }

.stepper button {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 14px;
  border: 1.5px solid var(--felt-ramme);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kort);
}

.stepper button:disabled { opacity: .4; cursor: not-allowed; }
.stepper-verdi { flex: 1; text-align: center; font-size: 36px; font-weight: 700; }

/* ── Knapper ───────────────────────────────────────────────────────────────── */
.knapp {
  width: 100%;
  min-height: 58px;
  border-radius: 14px;
  background: var(--aksent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  padding: 0 16px;
}

.knapp:disabled,
.knapp[aria-disabled='true'] { background: var(--deaktivert); color: var(--dempet); cursor: not-allowed; }

.knapp--liten { min-height: 52px; border-radius: 12px; font-size: 16px; }

.knapp-omriss {
  padding: 9px 18px;
  min-height: 44px;
  border-radius: 10px;
  border: 1.5px solid var(--aksent);
  font-size: 15px;
  font-weight: 700;
  color: var(--aksent);
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

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

.knapp-stiplet {
  width: 100%;
  min-height: 52px;
  border: 1.5px dashed var(--aksent-ramme);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--aksent);
  margin-top: 10px;
  background: none;
}

.tekstlenke {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--aksent);
  padding: 12px 0;
  background: none;
}

/* ── FAB ───────────────────────────────────────────────────────────────────── */
.fab {
  position: fixed;
  right: max(20px, calc(50vw - var(--maksbredde) / 2 + 20px));
  bottom: calc(112px + env(safe-area-inset-bottom));
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--aksent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--fab-skygge);
  z-index: 20;
}

/* ── Varselkort ────────────────────────────────────────────────────────────── */
.varsel {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--gul-flate);
  font-size: 14px;
  font-weight: 600;
  color: var(--gul);
}

.varsel--rod { background: var(--rod-flate); color: var(--rod); }
.varsel--gronn { background: var(--gronn-flate); color: var(--gronn); }
.varsel--lilla { background: var(--aksent-tint); color: var(--aksent); }
.varsel--noytral { background: var(--aksent-tint-2); color: var(--tekst-3); }
.varsel svg { flex: none; margin-top: 1px; }
.varsel-tekst { font-weight: 600; }
.varsel-tekst .normal { font-weight: 400; display: block; margin-top: 3px; }

/* ── Statusprikk (drift) ───────────────────────────────────────────────────── */
.driftsrad {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--delelinje);
}

.driftsrad:last-child { border-bottom: 0; }

.prikk { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--dempet-2); }
.prikk--aktiv { background: var(--gronn); }
.prikk--test { background: #c98f1b; }
.prikk--utvikling { background: var(--aksent-ramme); }
.prikk--feil { background: var(--rod); }

/* ── Utfallsikon i sirkel ──────────────────────────────────────────────────── */
.utfall {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: var(--gronn-flate);
}

.utfall--rod { background: var(--rod-flate); }
.utfall--gul { background: var(--gul-flate); }

/* ── Initialsirkel ────────────────────────────────────────────────────────── */
.initial {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--aksent-tint);
  color: var(--aksent);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* ── Fordelingsrad (tidsvindu) ─────────────────────────────────────────────── */
.fordelingsrad {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--delelinje);
  font-size: 15px;
}

.fordelingsrad:last-child { border-bottom: 0; }
.fordelingsrad .tid { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fordelingsrad .hva { flex: 1; color: var(--tekst-3); }

/* ── Bunnnavigasjon ────────────────────────────────────────────────────────── */
.bunnnav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 15;
  display: flex;
  background: var(--kort);
  border-top: 1px solid var(--kort-ramme);
  padding-bottom: env(safe-area-inset-bottom);
  max-width: var(--maksbredde);
  margin: 0 auto;
}

.bunnnav a {
  flex: 1;
  min-height: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--nav-inaktiv);
}

.bunnnav a[aria-current='page'] { color: var(--aksent); font-weight: 700; }
.bunnnav svg { stroke: var(--nav-inaktiv); }
.bunnnav a[aria-current='page'] svg { stroke: var(--aksent); }

/* ── Sticky handlingsfelt (send inn hele saken) ────────────────────────────── */
.sticky-handling {
  position: sticky;
  bottom: 0;
  background: var(--skjerm);
  padding: 12px 0 calc(14px + env(safe-area-inset-bottom));
  margin-top: 8px;
  /* Innholdet over skal ikke se avskåret ut der feltet begynner. */
  box-shadow: 0 -12px 16px -12px rgba(29, 27, 44, .18);
}

/* ── Tilstander: laster, tomt, feil ────────────────────────────────────────── */
.laster,
.tomt {
  padding: 40px 20px;
  text-align: center;
  color: var(--dempet);
  font-size: 15px;
}

.tomt strong { display: block; color: var(--tekst); font-size: 17px; margin-bottom: 6px; }

.feilstripe {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--rod-flate);
  color: var(--rod);
  font-size: 15px;
  font-weight: 600;
}

/* Handlingen LYKTES, men skjermen ble ikke oppdatert. Gul, ikke rød: en rød stripe
   leses som «det gikk galt», og da trykker brukeren en gang til. */
.advarselstripe {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--gul-flate);
  color: var(--gul);
  font-size: 15px;
  font-weight: 600;
}

/* Skjermleser-only. Statusendringer må annonseres for den som ikke ser dem. */
.kun-skjermleser {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Innlogging ────────────────────────────────────────────────────────────── */
.innlogging {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 26px calc(32px + env(safe-area-inset-bottom));
  background: var(--kort);
}

.innlogging .logo {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: var(--aksent-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}

.innlogging h1 { font-size: 28px; font-weight: 700; margin: 0 0 6px; }
.innlogging .undertittel { font-size: 16px; color: var(--tekst-2); margin: 0 0 26px; }

@media (prefers-reduced-motion: no-preference) {
  .rad, .pille, .segment, .knapp { transition: background-color .12s ease, border-color .12s ease; }
}