/**
 * Kort - kortramme, seksjonsramme, demo-kort og kortrad.
 *
 * Kortet er en tett flate: `--card-bg` med `--border` og `--shadow`, uten
 * glass. Glass (blur av det som ligger bak) hører bare til lag
 * som faktisk ligger over innhold: topplinja (spa-shell.css) og slide-in
 * (slidein.css). Et kort ligger på sidebakgrunnen, og hvert kort med
 * glass ble et eget komposittlag med eget render-pass.
 * Løftet fra bakgrunnen kommer av at `--card-bg` er et hakk lysere (mørkt)
 * eller graaere (lyst) enn `--bg`, pluss skyggen.
 */

/* ------------------------------------------------------------------- kort */

.kort {
  background: var(--card-bg, var(--color-bg, #fff));
  border: 1px solid var(--border, var(--color-border, #e4e4e7));
  border-radius: var(--radius, 6px);
  padding: var(--ds1-rom-kort, 10px);  /* som grunn.css */
  margin: 0 0 var(--ds1-rom-mellom, var(--space-4));
  color: var(--text, var(--color-text));
  box-shadow: none;  /* ingen skygger; den tynne kanten skiller */
}

/* Kortet rundt et filter er beholder: kolonnene i .filter styres av KORTETS
   bredde, ikke viewporten. Selve @container-regelen bor i
   tabell.css sammen med .filter. */
.kort:has(> .filter) { container-type: inline-size; }

/* Satt av tabell.js mens et panel i kortet står åpent, så panelet ligger over neste kort. */
.kort.tabell-loftet { position: relative; z-index: 60; }

.kort__hode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);   /* tynn skillelinje under hodet */
}
.kort__hode h2 {
  margin: 0;
  font-size: var(--tt-ui-text, 13px);   /* ikke større enn sidetittelen */
  font-weight: 400;
  color: var(--text, var(--color-text));
}
/* Lite, dempet ikon foran tittelen, som i menyen. */
.kort__hode h2 > i:first-child { color: var(--text-muted); margin-right: 6px; }

/* Foten: knapper og felt på ei linje under innholdet, det sekundære til
   venstre og hovedhandlingen til høyre («Logg ut» ... «Lagre»). Bryter til
   flere linjer når det ikke er plass (390 px). `--hoyre` samler alt til
   høyre, for kort der ingenting hører til venstre. */
.kort__fot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
}
.kort__fot--hoyre { justify-content: flex-end; }

/* Kortfot som verktøylinje (laderpanelet): kant til kant i bunnen av kortet. Negativ marg
   lik kortets polstring, svak skillelinje over, flate som fanerada (text 2 %) og kortets nedre hjørner. Et
   ds1_segment i foten står fra venstre uten egen ramme; valgene skilles av segmentets skillestrek. */
.kort__fot.kort__fot--verktoy {
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0;
  margin: var(--space-3) calc(-1 * var(--ds1-rom-kort, 10px)) calc(-1 * var(--ds1-rom-kort, 10px));
  padding: 0;
  border-top: 1px solid var(--border-alpha, var(--border));
  background: color-mix(in srgb, var(--text) 2%, transparent);
  border-radius: 0 0 calc(var(--radius, 6px) - 1px) calc(var(--radius, 6px) - 1px);
}
.kort__fot--verktoy .ds1_segment,
.kort__fot--verktoy .ds1_segment:focus-within {
  border: 0;
  border-right: 1px solid var(--border-alpha, var(--border));
  border-radius: 0 0 0 calc(var(--radius, 6px) - 1px);
  background: transparent;
}
.kort__fot--verktoy .ds1_segment__valg:not([aria-pressed="true"]) { background: transparent; }
.kort__fot--verktoy .ds1_segment__valg:not([aria-pressed="true"]):hover { background: color-mix(in srgb, var(--primary) 12%, transparent); }

/* Redigermodus (components/redigermodus/redigermodus.js): kortet bærer
   `data-modus="vis"` eller `"rediger"`. Feltene står i begge modus
   (skriptet slår `disabled` av og på), men det som er merket
   `data-vis-i="rediger"` (Lagre i foten) eller `data-vis-i="vis"` er borte
   fra layouten i motsatt modus, også for skjermlesere. En fot der alt
   hører til redigering skjules helt i vis-modus, så den ikke legger
   igjen tom luft. */
.kort[data-modus="vis"] [data-vis-i="rediger"]:not([data-vis-plass]),
.kort[data-modus="rediger"] [data-vis-i="vis"]:not([data-vis-plass]) {
  display: none !important;
}
/* `data-vis-plass` i tillegg: elementet holder plassen sin, bare usynlig,
   så kortet har samme høyde i begge modus (Lagre i profilkortet). */
.kort[data-modus="vis"] [data-vis-i="rediger"][data-vis-plass],
.kort[data-modus="rediger"] [data-vis-i="vis"][data-vis-plass] {
  visibility: hidden;
}
.kort[data-modus="vis"] .kort__fot:not(:has(> :not([data-vis-i="rediger"]), > [data-vis-plass])) {
  display: none;
}

/* Mobil: rommet kommer fra --ds1-rom-kort (grunn.css). Reserveverdien
   gjelder bare apper som laster kort.css uten grunn.css. */
@media (max-width: 640px) {
  .kort { padding: var(--ds1-rom-kort, 14px); }
}

/* Flatt kort: bare når ds1_kort--flat er satt. Et kort er alltid et
   kort; malen flater aldri ut av seg selv. Regelen er å ikke
   designe kort i kort. */
.kort.ds1_kort--flat {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
/* ~ og ikke +: et skjult søsken mellom to seksjoner skal ikke ta bort avstanden (Varebil). */
.kort.ds1_kort--flat ~ .kort.ds1_kort--flat {
  /* Avstand, ikke strek: mer luft over overskriften enn under (8 px), så den hører til
     seksjonen under. Ingen skillelinje. */
  margin-top: 32px;
}
.kort.ds1_kort--flat > .kort__hode { margin-bottom: var(--space-2, 8px); }

/* Demo-kortet i designmalen: samme flate som `.kort`, men uten bunnmarg (det
   står alene i sin egen seksjon) og med full polstring også på smal
   skjerm. Star etter mobilregelen over slik at polstringen vinner der. */
.kort--demo {
  margin: 0;
  padding: var(--ds1-rom-kort, 18px);
}

/* Kort wrapper på komponent-siden */
.ds1_seksjon {
    margin-bottom: 28px;
}
.ds1_seksjon h2 {
    /* Tekststørrelse og vekt 400, aldri større enn sidetittelen. */
    font-size: var(--tt-ui-text, 13px);
    font-weight: 400;
    color: var(--text);
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-alpha);
}
.ds1_seksjon p.hint {
    font-size: var(--ui-font-sm, 14px);
    color: var(--text-muted);
    margin-bottom: 14px;
    line-height: 1.5;
    max-width: 65ch;
}


/* ------------------------------------------------------------- kortrad

   Kort side ved side på brede skjermer, under hverandre på smale.
   Bryter på BREDDE, ikke på enhet: et delt vindu på nettbrett og en
   zoomet side skal fa samme oppsett som en smal telefon.

   `auto-fit` med `minmax` gjor at antall spalter folger plassen av seg selv -
   ingen brytepunkter å vedlikeholde. Kort som står alene fyller bredden. */

/* Rad med kort side ved side. Kortene får samme hoyde: står to grafkort
   ved siden av hverandre og det ene er lavere, leses forskjellen som at det
   inneholder mindre - ikke som at innholdet tilfeldigvis er kortere.
   Trenger en side kort som slutter der innholdet slutter, brukes
   .ds1_kortrad--toppstilt. */
.ds1_kortrad {
  display: grid;
  gap: var(--ds1-rom-mellom, 16px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  align-items: stretch;
  margin: 0 0 var(--ds1-rom-mellom, 16px);
}

.ds1_kortrad--toppstilt { align-items: start; }

/* Kortet fyller sin egen rutecelle, og innholdet får plassen som blir til
   overs - ellers gjor stretch bare rammen hoy og lar innholdet ligge oppe. */
.ds1_kortrad > .kort { display: flex; flex-direction: column; margin: 0; }
/* Kort som tar hele raden, også i kortrutenettet i bredt panel (slidein.css). */
.ds1_kortrad > .kort--hel { grid-column: 1 / -1; }
.ds1_kortrad > .kort > :last-child:not(.kort__fot) { flex: 1 1 auto; }
/* Har kortet en fot, er det foten som er sist: den skal ligge i bunnen av
   kortet, ikke vokse. Lufta over blir margin (auto) pluss polstring, så
   avstanden er minst den samme som i et kort som ikke strekkes. */
.ds1_kortrad > .kort > .kort__fot:last-child {
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: var(--space-4);
}

/* Kortrad som IKKE strekker et enslig kort over hele bredden.

   `ds1_kortrad` bruker `auto-fit`, som slår sammen tomme spor. Med ett
   kort blir raden derfor én kolonne, og kortet spenner hele flata - det
   ser ut som et banner, ikke som et kort blant de andre.

   `auto-fill` beholder de tomme sporene, så kortet får samme bredde som
   naboene over og stiller seg opp i kolonnen. Bruk denne når antallet
   kort varierer og ett av dem kan bli stående alene. */
.ds1_kortrad--fyll {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
}

/* Kortrad for skjema: kolonnen er akkurat så bred som et skjemakort.
   Feltene har `max-width: min(420px, 100%)` (felt.css); kortet legger til
   polstring 2 × --ds1-rom-kort og kant 2 × 1 px. Faste spor i stedet for
   `1fr`, ellers blir kortrammen mye bredere enn feltene. Stables på mobil. */
.ds1_kortrad--skjema {
    grid-template-columns: repeat(auto-fill, min(100%, calc(420px + 2 * var(--ds1-rom-kort, 18px) + 2px)));
}

/* Kompakt kortrad: smalere kolonner (260 px), så små kort står side om side. Kortene får lik høyde og foten
   ligger nederst. Virker også på .slidein__innhold i bredt panel, som allerede er et rutenett (slidein.css). */
.ds1_kortrad--kompakt,
:is(.slidein--bred, .slidein--full) .slidein__innhold.ds1_kortrad--kompakt {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    align-items: stretch;
}
.ds1_kortrad--kompakt > .kort { display: flex; flex-direction: column; min-width: 0; }
.ds1_kortrad--kompakt > .kort > .kort__fot:last-child { margin-top: auto; }

/* Verktøylinjefoten i en kortrad: det over foten vokser, så foten ligger nederst med sin egen luft over og ingen
   ekstra polstring inne i linja. */
:is(.ds1_kortrad, .ds1_kortrad--kompakt) > .kort > :has(+ .kort__fot--verktoy:last-child) { flex: 1 1 auto; }
:is(.ds1_kortrad, .ds1_kortrad--kompakt) > .kort > .kort__fot--verktoy:last-child { margin-top: var(--space-3); padding-top: 0; }

/* Undertekst i korthodet. Tittelen sier hva kortet ER, underteksten hva det
   GJELDER: «Vald historikk» over «Laudal Viltlag». Uten den måtte navnet
   inn i tittelen, og da blir tittelen ulik fra kort til kort. */
.kort__tittelgruppe {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
/* Tittel med i-ikon (`tittelInfo` i kort.php). */
.kort__tittelrad { display: flex; align-items: center; gap: var(--space-1, 4px); min-width: 0; }
.kort__undertittel {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
}

/* Valgfri undertittel til høyre, med uendret typografi og plass til lange navn. */
.ds1_kort--undertittel-inline > .kort__hode > .kort__tittelgruppe {
    flex: 1;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.ds1_kort--undertittel-inline > .kort__hode > .kort__tittelgruppe > h2 { flex-shrink: 0; }
.ds1_kort--undertittel-inline > .kort__hode .kort__undertittel { text-align: right; overflow-wrap: anywhere; min-width: 0; }

/* Tittelplassen tegnes av sida (`tittelInnhold` i kort.php), typisk et
   skjemafelt som ER kortets navn. Gruppa tar resten av hodet, og hodet
   bryter så handlingene legger seg under feltet når det ikke er plass
   til begge på ei linje (390 px). 260 px er den minste bredden feltet
   får før det bryter; på skrivebord vokser det til alt handlingene
   ikke bruker. */
.kort__hode:has(> .kort__tittelgruppe--egen) {
    flex-wrap: wrap;
}
.kort__tittelgruppe--egen {
    flex: 1 1 260px;
}

/* Statusramme (forbilde Easee-appen): rammefargen sier status. Tilvalg. */
.kort.kort--ok       { border-color: rgb(var(--success-rgb)); }
.kort.kort--advarsel { border-color: rgb(var(--warning-rgb)); }
.kort.kort--feil     { border-color: rgb(var(--destructive-rgb)); }
/* Tynt skille mellom flate seksjoner: bare med kort--skille på kortet; uten står avstanden over. */
.kort.kort--skille > .kort.ds1_kort--flat ~ .kort.ds1_kort--flat {
  margin-top: var(--space-2, 8px);
  padding-top: var(--space-2, 8px);
  border-top: 1px solid var(--border-alpha, var(--border));
}
/* Kortrad uten egen nedre marg (Dekklager): når forelderen alt har gap. Tilvalg. */
.ds1_kortrad.ds1_kortrad--uten-marg { margin-bottom: 0; }

/* Flat seksjon som kan foldes sammen (LoadREG): <details class="kort ds1_kort--flat"> med
   <summary class="kort__hode"><div class="kort__tittelgruppe"><h2><i class="fas fa-chevron-right ds1_kort__fold"></i> Tittel</h2></div></summary>.
   Pila dreies når seksjonen er åpen. */
details.kort.ds1_kort--flat > summary { cursor: pointer; list-style: none; }
details.kort.ds1_kort--flat > summary::-webkit-details-marker { display: none; }
details.kort.ds1_kort--flat > summary .ds1_kort__fold { margin-right: 6px; transition: transform .15s ease; }
details.kort.ds1_kort--flat[open] > summary .ds1_kort__fold { transform: rotate(90deg); }
details.kort.ds1_kort--flat:not([open]) > summary.kort__hode { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { details.kort.ds1_kort--flat > summary .ds1_kort__fold { transition: none; } }

/* Ikonknapp i korthodet: 32 px synlig, så hodet blir like høyt som uten knapp.
   Trykkflata er fortsatt 44 px via et usynlig lag rundt knappen. */
.kort__hode .ds1_knapp--ikon {
  position: relative;
  width: 32px;
  height: 32px;
  min-height: 32px;
  margin-block: -6px;
}
.kort__hode .ds1_knapp--ikon::after {
  content: "";
  position: absolute;
  inset: -6px;
}

/* Jaktleder: forklaring øverst i kortet (skjemakort, component('kort', ['info' => …])): liten, dempet
   tekst over feltene, flere linjer. Ttas har ikke `info`. */
.kort__info {
    margin: 0 0 var(--space-3);
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-muted);
}
/* Infotekst med i-ikon (kort.php `infoMer`): ikonet står etter teksten på første linje, ikke inne i avsnittet. */
.kort__inforad {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1, 4px);
    margin: 0 0 var(--space-3);
    font-size: 12px;
    line-height: 1.45;
}
.kort__inforad .kort__info { margin: 0; }

/* Jaktleder: deltittel inne i et kort, `<h3 class="kort__deltittel">` over en liste eller tabell som ikke er eget
   kort. Samme størrelse og vekt som korttittelen (tekst, 400). Egen seksjon med strek: flatt kort (ds1_kort--flat).
   I sidepanel: .slidein__bolk h3. Ttas har ikke klassen. */
.kort__deltittel {
    margin: var(--space-4) 0 var(--space-2);
    font-size: var(--tt-ui-text, 13px);
    font-weight: 400;
    color: var(--text);
}
.kort__deltittel:first-child { margin-top: 0; }