/* Hjelpetekst-komponenter — fra 05-frontend §10.3.
   Brukes på skjema, tomme tilstander, og terminologi-forklaringer. */

/* --------- .felt-hjelp: liten dempet tekst under et input-felt --------- */
.felt-hjelp {
  display: block;
  font-size: var(--font-liten);
  color: var(--farge-tekst-svak);
  line-height: var(--linje-hoyde-tett);
  margin-top: 4px;
}
.felt-hjelp--feil {
  color: var(--farge-feil, #dc2626);
}

/* --------- .felt-gruppe: label + input + hjelpetekst som en enhet ---------
 *
 * Skjema bryter med "less-is-more"-tetheten (05 §10.1): dashbord skal være
 * tett for å se mye data, men skjema skal være luftige for å fokusere på
 * få felter og lese hver verdi tydelig. Bootstrap-mønster — større felter,
 * 100% bredde, god padding, normal linjehøyde så "g" og "y" ikke kuttes.
 */
.felt-gruppe {
  display: block;
  margin-bottom: var(--avstand-4);
}
.felt-gruppe:last-child {
  margin-bottom: 0;
}
.felt-gruppe__label {
  display: block;
  font-size: var(--font-base);
  color: var(--farge-tekst);
  margin-bottom: 6px;
  font-weight: 500;
}
.felt-gruppe__label--paakrevd::after {
  content: ' *';
  color: var(--farge-feil, #dc2626);
}

/* Overstyrr .felt for skjema-kontekst — større padding og høyde, normal
 * linjehøyde. Påvirker bare .felt inni .felt-gruppe; toolbar/tabell
 * beholder den tette varianten. */
.felt-gruppe .felt {
  height: auto;
  min-height: 38px;
  padding: 8px 12px;
  line-height: 1.5;
  font-size: var(--font-stor);
}
.felt-gruppe textarea.felt {
  min-height: 80px;
  padding: 10px 12px;
}
.felt-gruppe select.felt {
  min-height: 38px;
  padding: 8px 32px 8px 12px;
}
.felt-gruppe .felt--farge {
  min-height: 38px;
  width: 64px;
  padding: 4px;
}

.felt-hjelp {
  margin-top: 6px;
}

/* --------- .tom-tilstand: sentrert "ingenting her ennå"-blokk --------- */
.tom-tilstand {
  text-align: center;
  padding: var(--avstand-5) var(--avstand-4);
  border: 1px dashed var(--farge-kant);
  border-radius: var(--radius);
  color: var(--farge-tekst-svak);
}
.tom-tilstand__tittel {
  font-size: var(--font-stor);
  color: var(--farge-tekst);
  margin: 0 0 var(--avstand-2) 0;
  font-weight: 500;
}
.tom-tilstand__forklaring {
  margin: 0 0 var(--avstand-3) 0;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}
.tom-tilstand__handling {
  margin-top: var(--avstand-3);
}

/* --------- .tooltip + (?)-ikon: hover/focus-forklaring --------- */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
}
.tooltip__ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--farge-overflate);
  color: var(--farge-tekst-svak);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  margin-left: 4px;
  vertical-align: middle;
  border: 1px solid var(--farge-kant);
  /* Ikon kan stå i en overskrift med text-transform:uppercase — nullstill
     så «i» ikke arver caps (samme grunn som innholdet under). */
  text-transform: none;
  letter-spacing: normal;
}
/* Tooltip-innhold bruker position: fixed slik at det unnslipper clipping
   fra forfedre med overflow:auto (som side-panelets innhold). JS-en i
   tooltip.js beregner top/left ved hover/focus og clamper innenfor
   viewport. */
.tooltip__innhold {
  position: fixed;
  top: 0;
  left: 0;
  background: var(--farge-tekst);
  color: var(--farge-bakgrunn);
  padding: var(--avstand-2) var(--avstand-3);
  border-radius: var(--radius);
  font-size: var(--font-liten);
  line-height: 1.4;
  white-space: normal;
  width: max-content;
  max-width: 24rem;
  /* Tooltip-tekst er hele setninger. Arv ALDRI text-transform/letter-spacing
     fra trigger-konteksten (f.eks. en uppercase seksjons-overskrift) — bare
     caps er vanskelig å lese (WCAG). */
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease-out;
  z-index: 1000;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.tooltip:hover .tooltip__innhold,
.tooltip:focus-within .tooltip__innhold {
  opacity: 1;
}

/* --------- .veiviser: trinn-indikator for flertrinns-skjema --------- */
.veiviser {
  display: flex;
  gap: var(--avstand-2);
  margin-bottom: var(--avstand-4);
  border-bottom: 1px solid var(--farge-kant);
  padding-bottom: var(--avstand-3);
}
.veiviser__steg {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--avstand-2);
  border-radius: var(--radius);
  background: transparent;
  color: var(--farge-tekst-svak);
}
.veiviser__steg--aktiv {
  background: var(--farge-overflate);
  color: var(--farge-tekst);
}
.veiviser__steg--fullfort {
  color: var(--farge-tekst);
}
.veiviser__nummer {
  font-size: var(--font-liten);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.veiviser__navn {
  font-size: var(--font-base);
}

/* --------- .hjelp-lenke: "Se hjelp →"-lenke konsistent stylet --------- */
.hjelp-lenke {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-liten);
  color: var(--farge-tekst-lenke, #3b82f6);
  text-decoration: none;
}
.hjelp-lenke:hover {
  text-decoration: underline;
}
.hjelp-lenke::after {
  content: '→';
}