/* Én høyde for ALLE skjemakontroller. Kontrollene under bruker den som `min-height` og sentrerer innholdet, så
   en komponent med mindre skrift blir like høy som en med stor. */
:root { --ds1-kontrollhoeyde: 42px; }

/* KOMPAKT - det ene NAVNGITTE unntaket fra 42. For tallruter i et tett rutenett, som
   kvotematrisen med 126 felt på én skjerm. Sida setter klassen `input--kompakt`, aldri egen
   min-height. */
:root { --ds1-kontrollhoeyde-kompakt: 35px; }

/**
 * Skjemafelt - etikett, kontroll, hjelp og feil.
 *
 * Formen følger Hjorteviltregisteret: liten fet etikett over feltet, rolig
 * kant, hjelpetekst under. Ingen flytende etiketter - de skjuler seg selv i
 * det øyeblikket brukeren trenger dem mest.
 */

/* Hjelpetekst i et nabofelt skal ikke strekke etikett og input. */
.felt { display: grid; gap: 4px; align-content: start; }

/* Skjemaets rytme: felt under hverandre med 20 px mellom.
   Sett ds1_skjema på beholderen for feltene (også inne i en flat seksjon). Felt med ekstra innhold
   under kontrollen (f.eks. bilinfo under Reg.nr.) holder seg inne i sitt eget .felt. */
.ds1_skjema { display: grid; gap: 20px; align-content: start; min-width: 0; }
.ds1_skjema > .felt { margin: 0; }

/* Som celle i et rutenett ville feltet ellers fått `auto` som minstebredde og presset kolonnen ut av kortet. */
.felt { min-width: 0; }

.felt__etikett {
  font-size: 12px;
  font-weight: 400;  /* etiketter er aldri fete */
  color: var(--text-muted, var(--color-text-muted));
}

/* Rammeetikett (.felt--ramme, Varebil): etiketten står i den øvre kantlinjen, venstrejustert,
   og bryter kanten som fieldset/legend. Kontrollen er .input (textarea/input) eller .felt__rammetekst
   for skrivebeskyttet tekst. Etikettens bakgrunn er kortets, så kanten brytes bak den.
     <div class="felt felt--ramme"><span class="felt__etikett">Notat</span><div class="felt__rammetekst">…</div></div> */
.felt--ramme { position: relative; gap: 0; padding-top: 7px; }
.felt--ramme > .felt__etikett {
  position: absolute; top: 0; left: 8px; z-index: 1;
  max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0 4px; line-height: 14px; font-weight: 400;
  background: var(--card-bg, var(--color-bg));
}
.felt--ramme > .input { padding-top: 12px; }
.felt__rammetekst {
  box-sizing: border-box; min-height: var(--ds1-kontrollhoeyde, 42px);
  padding: 12px 10px 8px;
  border: 1px solid var(--border, var(--color-divider)); border-radius: var(--radius, 6px);
  color: var(--text, var(--color-text)); white-space: pre-wrap; overflow-wrap: anywhere;
}

/* Stjerna er dekor for øyet. `required` på kontrollen er det som gjelder,
   og skjermlesere leser det derfra - derfor aria-hidden i markupen. */
.felt__krav { color: var(--color-danger); margin-left: 2px; }

/* Stilen henger på .input selv, så en kontroll uten etikett (tallfelt i en tabellrad) også får temaet.
 * Bredden settes av `.felt .input` under, så en tabellcelle ikke sprenges. */
.input {
  /* Polstring og ramme innenfor bredden, ellers krysser feltene kortets kant. */
  box-sizing: border-box;
  min-height: var(--ds1-kontrollhoeyde, 42px);
  font: inherit;
  color: var(--text, var(--color-text));
  /* Felles flate og ramme for alle skjemakontroller (felt, nedtrekk, dato). */
  background: var(--ds1-felt-flate, var(--input-bg, var(--color-bg)));
  border: 1px solid var(--ds1-felt-ramme, var(--border));
  border-radius: var(--radius, 6px);
  padding: 8px 10px;
}

.input--kompakt {
  min-height: var(--ds1-kontrollhoeyde-kompakt, 35px);
  padding: 6px 8px;
}

.felt .input { width: 100%; }

/* Smal variant: innholdsbredde, f.eks. velger og tall i en tabellrad (Varebil).
   Må slå size.css (html[data-ui-size] .input { width: 100% }) og .felt .input. */
.input.input--auto,
.felt .input.input--auto,
html[data-ui-size] .input.input--auto { width: auto; max-width: 100%; justify-self: start; }

/* Jaktleder: kort felt for verdier på få tegn (intervall, klokkeslett, år), `'klasse' => 'input--kort'` i felt.php.
   Bredden er åtte tegn pluss polstring og kant (2 × 10 px + 2 × 1 px), ikke min(420px, 100%). Klokke- og datofelt
   får nettleserens egen bredde, så velgerikonet får plass. Hele felt: `innholdsbredde` (felt--dato). Ttas: input--auto. */
.input.input--kort,
.felt .input.input--kort,
html[data-ui-size] .input.input--kort { width: calc(8ch + 22px); max-width: 100%; justify-self: start; }
.input.input--kort:is([type="time"], [type="date"]),
.felt .input.input--kort:is([type="time"], [type="date"]),
html[data-ui-size] .input.input--kort:is([type="time"], [type="date"]) { width: auto; }

/* Bredde i kort og skjema: `max-width: min(420px, 100%)`.
   420 er bredden det delte nedtrekket setter på seg selv; feltene følger
   den, ellers får skjemaet tre ulike bredder. `100%`-leddet holder feltet
   innenfor kortet på mobil. Regelen lå før i felling.css og jaktdag.css,
   og sidene uten den fikk 720 px felt (avsendere, maler).
   Unntak: `.felt--bred` (proppen `bred` i felt.php) for meldingstekst som
   skal ha hele kortet.
   `:where` holder spesifisiteten lav (0,1,0), slik at en side som legger
   felt på linje (jaktdag__obs) kan slippe taket med sin egen regel. */
.kort :where(.felt:not(.felt--bred), .datovelger, .tallvelger, .felt__rad) {
  max-width: min(420px, 100%);
  box-sizing: border-box;
}
/* Dato- og tidsfelt så bredt som verdien trenger («29.09.2026» og ikon), ikke 420 px.
   Valgfritt: klassen `felt--dato` eller proppen `innholdsbredde` i felt.php.
   Står etter taket over og vinner på rekkefølge; em følger størrelsesprofilen. */
.felt--dato { max-width: min(11em, 100%); box-sizing: border-box; }
/* Halv bredde (tilvalg): kort verdi som reg.nr., tall og dato fyller halve raden i skjemaet,
   også i kort (vinner over 420-taket på rekkefølge). Hele bredden under 641 px. Kontrollen inni fyller feltet.
     <div class="felt felt--halv"><label class="felt__etikett">Reg.nr.</label><input class="input"></div> */
.felt--halv { box-sizing: border-box; }
@media (min-width: 641px) { .felt--halv { max-width: 50%; } }
@media (max-width: 640px) { .felt--halv { max-width: none; } }

.felt textarea.input { min-height: 0; line-height: 1.5; resize: vertical; }

.input:focus-visible {
  outline: 2px solid var(--primary, var(--color-accent));
  outline-offset: -1px;
  border-color: var(--primary, var(--color-accent));
}

.input::placeholder { color: var(--color-text-subtle, var(--color-text-muted)); }

/* Native dato- og tidskontroller teiknar kalender, klokke og
   spinnarpiler med nettlesarens eigne fargar. Utan `color-scheme` blir
   panelet kvitt i mørk modus, med svart tekst mot mørk side.
   `color-scheme` er den einaste måten å nå den delen av kontrollen. */
[data-theme="dark"] .input[type="date"],
[data-theme="dark"] .input[type="time"],
[data-theme="dark"] .input[type="datetime-local"],
[data-theme="dark"] .input[type="month"],
[data-theme="dark"] .input[type="week"] {
  color-scheme: dark;
}

/* Ein bar filkontroll. Filvelgaren skjuler den native kontrollen og
   teiknar eigen knapp; dette gjeld feltet der komponenten ikkje er på. */
.felt input[type="file"] {
  font-size: 12px;
  color: var(--text-muted, var(--color-text-muted));
}

/* Låst felt skal se låst ut. `readonly` og `disabled` fikk før
   samme bakgrunn, tekst og ramme som et redigerbart felt, så mobilnummer og
   e-post på Min profil så ut som noe man kunne endre. Dempet bakgrunn,
   dempet tekst og forbudt-peker, og opacity 1 slik at nettleseren ikke
   legger sin egen blekhet oppå. */
.input:disabled,
.input[readonly] {
  background: color-mix(in srgb, var(--text, var(--color-text)) 7%, var(--input-bg, var(--color-bg)));
  color: var(--text-muted, var(--color-text-muted));
  border-style: dashed;
  cursor: not-allowed;
  opacity: 1;
}

/* Avstand mellom felt som står rett i et kort, i normal flyt.
   Kortet er en flexkolonne uten gap, så to felt - eller et skjema og feltet
   etter - hang sammen uten en piksel luft. Skjemaer med eget rutenett og
   `gap` (filter, felling, jaktdag) treffes ikke: regelen gjelder bare barn
   av `.kort` og av et `form` rett i kortet. */
:where(.kort, .kort > form) > :is(.felt, form) + .felt,
:where(.kort) > .felt + form {
  margin-top: var(--space-3);
}

/* Feil vises PAA feltet, ikke i et varsel på toppen. En bruker med ti felt
   skal se hvilket som er galt, ikke lete. */
.felt--feil .input { border-color: var(--color-danger); }
.felt__feil { font-size: 12px; color: var(--color-danger); }

/* Rød kant ved ugyldig verdi. `:user-invalid`, ikke `:invalid`, så et tomt påkrevd felt ikke er rødt før brukeren
   har skrevet og forlatt det. */
.input:user-invalid { border-color: var(--color-danger); }
/* Appens egen kontroll (LoadREG): .is-invalid på kontrollen gir samme røde kant. */
.input.is-invalid { border-color: var(--color-danger); }

/* Stjerne som følger required (LoadREG): tilvalg med ds1_krav-auto på skjemaet eller et forelder-element.
   Feltet får stjerne så lenge kontrollen er påkrevd, også når required settes eller fjernes underveis.
   Felt med .felt__krav i markupen får ikke en til. */
.ds1_krav-auto .felt:has([required], .is-required, [data-required]):not(:has(.felt__krav)) > .felt__etikett::after,
.ds1_krav-auto .felt:has([required], .is-required, [data-required]):not(:has(.felt__krav)) > .felt__etikettrad > .felt__etikett::after {
  content: ' *';
  color: var(--color-danger);
}

/* Etikett med i-ikon (`info` i felt.php): ikonet rett etter teksten, raden like høy som en etikett alene. */
.felt__etikettrad { display: flex; align-items: center; gap: var(--space-1, 4px); min-width: 0; }

.felt__hjelp { font-size: 12px; color: var(--text-muted, var(--color-text-muted)); }

/* --------------------------------------------------------------- to i bredden */

.felt-rad2 { display: grid; gap: var(--space-3); grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) {
  .felt-rad2:not(.felt-rad2--fast) { grid-template-columns: 1fr; }
}
/* Par som hører sammen (X/Y, bredde/høyde) står side om side også på mobil (Infoskjerm). */
.felt-rad2--fast { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* Felt med en handlingsknapp i høyre kant.

   Samme grep som tallvelgeren: input og knapp i én ramme, så de leses som
   ett felt. Rammen ligger på raden, ikke på inputen - ellers får man to
   kanter utenpå hverandre. */
.felt__rad {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--ds1-felt-ramme, var(--border));
    border-radius: var(--radius);
    background: var(--ds1-felt-flate, var(--input-bg, var(--color-bg)));
    overflow: hidden;
}
.felt__rad:focus-within {
    border-color: var(--primary);
}
.felt__rad .input {
    min-height: calc(var(--ds1-kontrollhoeyde, 42px) - 2px);
    border: 0;
    border-radius: 0;
    background: transparent;
    flex: 1 1 auto;
    min-width: 0;
}
.felt__rad .input:focus {
    box-shadow: none;
    outline: none;
}
.felt__knapp {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 0 10px;
    border: 0;
    border-left: 1px solid var(--border-alpha, var(--border));
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font: inherit;
}
/* Hover bare med mus; på berøring ble hoverfargen hengende etter trykk. */
@media (hover: hover) {
    .felt__knapp:hover { color: var(--primary); background: color-mix(in srgb, var(--text) 6%, transparent); }
}
.felt__knapp:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; color: var(--primary); }
.felt__knapp:active { background: color-mix(in srgb, var(--primary) 18%, transparent); }

/* Tallsteg (component('tallsteg')): tallfelt med «−» og «+» i høyre kant. Store trykkflater for mobil,
   ingen nettleserpiler, tallet midtstilt mot knappene. */
.tallsteg__felt {
    text-align: center;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    appearance: textfield;
}
.tallsteg__felt::-webkit-outer-spin-button,
.tallsteg__felt::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.felt__rad:has(.tallsteg__felt) .felt__knapp {
    min-width: 52px;
    min-height: var(--tap, 44px);   /* Jaktleder: 44 px trykkflate; ttas har kontrollhøyden - 2 px */
    font-size: 15px;
    color: var(--text);
}
/* Tallfelt knapper: 'ved-siden' - feltet har egen ramme, runde «−» og «+» står utenfor. */
.felt__rad:has(.tallsteg__felt--ved-siden) {
    border: 0; background: transparent; overflow: visible; gap: 6px; align-items: center;
}
.felt__rad .tallsteg__felt--ved-siden {
    flex: 0 0 72px; border: 1px solid var(--ds1-felt-ramme, var(--border)); border-radius: var(--radius); background: var(--ds1-felt-flate, var(--input-bg, var(--color-bg)));
}
.felt__rad .tallsteg__felt--ved-siden:focus { border-color: var(--primary); }
.felt__rad:has(.tallsteg__felt--ved-siden) .felt__knapp {
    min-width: 40px; width: 40px; min-height: 40px; height: 40px; border-radius: 50%;
    color: rgb(var(--primary-fg-rgb)); background: var(--primary);
}
.felt__rad:has(.tallsteg__felt--ved-siden) .felt__knapp:hover { color: rgb(var(--primary-fg-rgb)); background: var(--primary); opacity: .9; }
/* Egen tastaturknapp erstatter nettleserens ekstra dato-/tidsikon. */
.felt__rad:has([data-open-keyboard]) input[data-skjermtastatur]::-webkit-calendar-picker-indicator {
  display:none;
  -webkit-appearance:none;
}
.felt__rad:has([data-open-keyboard]) input[data-skjermtastatur]::-webkit-inner-spin-button {
  display:none;
  -webkit-appearance:none;
}
/* Bredt felt gjelder også den indre raden med velgerknapp. */
.kort .felt--bred > .felt__rad {
  width:100%;
  max-width:none;
  min-width:0;
}