/**
 * Delt sideoppsett og tabell. Kortet selv bor i components/kort/kort.css.
 *
 * Formen er hentet fra Hjorteviltregisterets statistikkside, som er den
 * ryddigste flaten vi har sett på for dette: rolig side, hvite kort,
 * filtrene i sitt EGET kort over tabellen, versaler i kolonnehodet, ingen
 * loddrette streker, og bare én farget knapp per skjermbilde. Alt annet er
 * stille tekstlenker.
 *
 * Fargene er våre egne (tokens.css) - det er formen som er lånt, ikke
 * paletten.
 */

/* ------------------------------------------------------------- sidetoppen */

.side__topp {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0 0 var(--space-4);
  flex-wrap: wrap;
}

.side__topp h1 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text, var(--color-text));
}

/* Ikon i sidetittelen: samme størrelse som ikonene i skallets header
   (`.header-icon-btn .fas`, spa-shell.css, 16 px), ikke h1-ens 1.35rem. */
.side__topp h1 .fas,
.side__topp h1 .fa-solid {
  font-size: 16px;
  line-height: 1;
  margin-right: 4px;
  vertical-align: 0.05em;
}

/* Undertittel rett under h1: ei kort linje som sier hva sida gjelder,
   eller status i tall, dempet farge. */
.side__undertittel {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--text-muted, var(--color-text-muted));
}

.side__handlinger { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }

.hint {
  margin: 0 0 var(--space-3);
  font-size: 13px;
  color: var(--text-muted, var(--color-text-muted));
}

/* Stille handling: ser ut som tekst, oppfører seg som knapp. «Nullstill»
   og «Last ned» skal ikke konkurrere med hovedknappen. */
.lenkeknapp {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--tt-ui-text, 14px);  /* Jaktleder: som brødteksten (15 px i Normal); ttas 14px */
  color: var(--primary, var(--color-accent-700, var(--color-accent)));
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------- filtrene */

.filter {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@container (min-width: 640px) {
  .filter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filter--to { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.filter .felt { display: grid; gap: 4px; }
.filter .felt__etikett {
  font-size: 12px;
  font-weight: 400;  /* Jaktleder: som .felt__etikett; ttas 600 */
  color: var(--text-muted, var(--color-text-muted));
}
.filter .input { width: 100%; min-height: 40px; }

.filter__bunn {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Knappegruppe som er et filter i seg selv - for eksempel et valg mellom
   kategorier der en nedtrekksliste ville vært unødvendig tungt. Spenner hele
   bredden slik at knappene ikke blir presset inn i en enkelt gridkolonne, og
   bryter til neste linje på smale skjermer. */
.filter__gruppe {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* --------------------------------------------------------------- tabellen */

.tabell { display: block; }

.tabell__topplinje {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}
.tabell__tittel { margin: 0; font-size: var(--tt-ui-text, 13px); font-weight: 400; color: var(--text, var(--color-text)); }
.tabell__teller { font-size: 13px; color: var(--text-muted, var(--color-text-muted)); font-variant-numeric: tabular-nums; }

.tabell__ramme { overflow-x: auto; container-type: inline-size; }
/* Jaktleder: ramma er containeren kortmodusen måler: tabellen bytter på SIN bredde, ikke vinduets.
   Ved siden av sidemenyen (901-960 px) og like over 640 px har ramma 560-600 px; der blir tabellen kort som på
   telefon. Samme tall (640), målt på riktig flate. Ttas bruker @media. Regler som gjelder selve ramma eller noe
   utenfor den (filterkortet), står i @media. */
/* 'rull' => true: tabellen ruller inni seg med fast kolonnehode, siden står stille. */
.tabell--rull .tabell__ramme { max-height: var(--tabell-rull-hoyde, min(70dvh, 640px)); overflow: auto; overscroll-behavior: contain; }
.tabell--rull .tabell__th { position: sticky; top: 0; z-index: 1; background: var(--card-bg, var(--color-bg)); }

.tabell__tabell {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tt-ui-text, 13px); /* appens tekst er taket i kort */
}

/* Kolonnehodet som i avansert tabell (tm-core__th): 12 px, vanlige bokstaver,
   EN strek under. Ingen versaler. Ingen loddrette streker. */
.tabell__th {
  text-align: left;
  font-size: 12px;
  font-weight: 400; /* vekt 400 som tm-core__th */
  color: var(--color-text-muted);
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--color-divider-strong, var(--color-divider));
  /* Jaktleder: overskriften bryter på mellomrom bare når kolonnen ellers ville presset tabellen bredere
     enn ramma. Ttas: nowrap. */
  white-space: normal;
  cursor: pointer;
  user-select: none;
}

/* Pila har fast plass også når kolonnen ikke er sortert - ellers hopper
   overskriftene sidelengs for hvert klikk. */
.tabell__th::after {
  content: "▲";
  display: inline-block;
  width: 9px;
  margin-left: 6px;
  font-size: 8px;
  opacity: 0;
}
.tabell__th[aria-sort="ascending"]::after  { opacity: .55; }
.tabell__th[aria-sort="descending"]::after { opacity: .55; content: "▼"; }
/* Kort tabell i kort uten sortering: ingen pilplass, ingen peker (LoadREG). */
.tabell--usortert .tabell__th { cursor: default; }
.tabell--usortert .tabell__th::after { content: none; }

.tabell__td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--color-divider);
  vertical-align: top;
}

/* Tallkolonner står til høyre. `padding-right: 0` er der for at SISTE
   kolonne skal flukte med tabellkanten - men står tallkolonna MIDT i
   tabellen, stoeter tallet rett i neste kolonne uten mellomrom:
   «182,5 kgOla Torgeir Bue». Derfor bare på siste celle. */
.tabell__tall { text-align: right; font-variant-numeric: tabular-nums; }
.tabell__tall:last-child { padding-right: 0; }

/* Jaktleder: lange verdier i en kolonne med `'klasse' => 'tabell__lang'` (melding, fil, sti): bryter hvor som helst
   i stedet for å presse tabellen bredere enn ramma. `tabell__kode` er det samme med fastbreddeskrift som
   .tabell__sokehjelp-eks, for id-er, ruter og kompakt JSON. Bare cellene; kolonnehodet beholder vanlig skrift.
   Størrelse og vekt følger tabellteksten. Ttas har ikke klassene. */
.tabell__td:is(.tabell__lang, .tabell__kode) { overflow-wrap: anywhere; }
.tabell__td.tabell__kode { font-family: var(--font-mono, monospace); }

.tabell__rad[data-id] { cursor: pointer; }
.tabell__rad:hover .tabell__td { background: var(--color-surface); }
.tabell__rad:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.tabell__rad.er-valgt .tabell__td { background: var(--color-surface); }
/* Ekstra ledd i velgeren: kortvisningen (.tabell--kort .tabell__rad { display: grid }) kom etter og
   overstyrte skjulingen, så filteret virket ikke på mobil. */
.tabell .tabell__rad.er-skjult,
.tabell .tabell__rad.er-utenfor { display: none; }

.tabell__tom { display: none; }
.tabell__tom p { margin: 0; padding: var(--space-6) 0; color: var(--color-text-muted); font-size: var(--tt-ui-text, 14px); }  /* Jaktleder: brødtekst; ttas 14px */
.tabell__tom .tomtilstand p { padding: 0; }
.tabell__tom.er-synlig { display: block; }
/* Tom liste: kolonnehodet skal ikke stå over «Ingen rader». */
.tabell--tom .tabell__tabell thead { display: none; }

.visuelt-skjult {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ------------------------------------------------------------------ smal skjerm

   Under 640 px blir tabellen en liste. To former:

     .tabell             cellene stables som etikett/verdi - lesbart fallback
     .tabell--kort       hver rad blir et KORT, komponert av rollene sida ga

   Vi ser på BREDDE, ikke på telefon: et delt vindu, en zoomet side og en
   smal nettleser skal alle få denne visningen. Det er samme grunnlag kildesystemet
   bruker (640 px i skallet og komponentene, bare sidemenyen skjules på 900).
   Jaktleder: bredden er tabellrammas egen (container query).
   ------------------------------------------------------------------------- */

@container (max-width: 640px) {
  .tabell__tabell, .tabell__tabell tbody, .tabell__tabell tr { display: block; }
  .tabell__tabell thead { display: none; }

  /* --- fallback: etikett og verdi --- */
  .tabell__rad { border-bottom: 1px solid var(--color-divider); padding: 8px 0; }
  .tabell__rad .tabell__td { border: 0; display: flex; gap: 12px; padding: 3px 0; }

  .tabell__td::before {
    content: attr(data-label);
    flex: 0 0 38%;
    font-size: 11px;
    text-transform: none;   /* ingen versaler */
    color: var(--color-text-muted);
  }
  .tabell__tall { text-align: left; }

  /* --- kort --- */
  /* Kort er kort: kortet rundt tabellen beholder rammen, og radene inne i et kort
     blir rader med svak skillelinje, ikke egne kort. Ingen ramme i ramme. Uten kort rundt er radene kort. */
  .kort .tabell--kort .tabell__rad {
    border: 0;
    border-bottom: 1px solid var(--color-divider);
    border-radius: 0;
    background: none;
    margin: 0;
    padding: 10px 0;
  }
  .kort .tabell--kort .tabell__rad:last-child { border-bottom: 0; }
  .tabell--kort .tabell__rad {
    display: grid;
    /* Jaktleder: høyre kolonne (merke, tall) tar høyst halve kortet; en lang melding der klemte tittelen til null
       bredde (jobber). Ttas: auto. */
    grid-template-columns: minmax(0, 1fr) fit-content(50%);
    align-items: start;
    gap: 2px 10px;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius, 6px);
    background: var(--color-bg);
    padding: 12px 14px;
    margin: 0 0 10px;
  }
  .tabell--kort .tabell__rad:hover .tabell__td { background: none; }
  .tabell--kort .tabell__rad.er-valgt {
    border-color: var(--color-accent);
    box-shadow: inset 3px 0 0 0 var(--color-accent);
  }

  /* Etiketter i kortet: tittel, meta og merke forklarer seg selv, og en
     etikett over hver av dem ville doblet hoyden uten å opplyse. Et tall
     («3», «0,05 EUR») sier derimot ingenting alene. Derfor: etiketten er PAA som
     standard (kolonneoverskriften fra data-label), og skrus av bare for
     rollene som bærer seg selv. Sumraden har sin egen etikettregel lenger
     ned. */
  /* Lange, ubrytelige ord (rollenavn som «Organisasjonsadministrator»)
     skal bryte før de går ut av sin egen rutekolonne og legger seg
     under merket til hoyre. Samme regel som kortmodusen i
     avansert-tabell/table-core.css. */
  .tabell--kort .tabell__td { padding: 0; display: block; overflow-wrap: anywhere; }
  .tabell--kort .tabell__td::before {
    content: attr(data-label);
    display: inline;
    margin-right: 6px;
    font-size: 11px;
    text-transform: none;   /* ingen versaler */
    color: var(--color-text-muted);
  }
  .tabell--kort [data-rolle="tittel"]::before,
  .tabell--kort [data-rolle="meta"]::before,
  .tabell--kort [data-rolle="merke"]::before,
  .tabell--kort [data-rolle="handling"]::before,
  .tabell--kort .tabell__td[data-label=""]::before { content: none; }

  /* Celler uten rolle er ikke med i kortet. Sida velger hva som vises på
     smal skjerm - alt annet er stoy når plassen er 360 px. */
  .tabell--kort .tabell__td:not([data-rolle]) { display: none; }

  /* Handlinger (slett, kopier) står som ei knapperad nederst i kortet, over
     hele bredden. Uten rollen forsvinner knappen i kortmodus. Knappene
     får 44 px trykkflate her fordi dette er fingerflaten. */
  .tabell--kort [data-rolle="handling"] {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 8px;
  }
  .tabell--kort [data-rolle="handling"]:empty { display: none; }
  .tabell--kort [data-rolle="handling"] .ds1_knapp,
  .tabell--kort [data-rolle="handling"] button { min-height: 44px; min-width: 44px; }

  /* Jaktleder: radkortets tittel som korttittelen (tekst, vanlig vekt), meta og tall i etikettstørrelse;
     ttas 16px/600 og 13px. */
  .tabell--kort [data-rolle="tittel"] {
    grid-column: 1;
    font-size: var(--tt-ui-text, 13px);
    line-height: 1.3;
    margin-bottom: 2px;
  }
  .tabell--kort [data-rolle="tittel"] .org__id { display: none; }

  .tabell--kort [data-rolle="meta"] {
    grid-column: 1;
    font-size: var(--tt-ui-label, 12px);
    color: var(--color-text-muted);
  }

  /* Merkene står øverst til hoyre og stables nedover om det er flere. */
  .tabell--kort [data-rolle="merke"] {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  .tabell--kort [data-rolle="merke"] ~ [data-rolle="merke"] { grid-row: auto; }

  .tabell--kort [data-rolle="tall"] {
    grid-column: 2;
    justify-self: end;
    font-size: var(--tt-ui-label, 12px);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
  }
}

/* Filterkortet tar hele bredden når det bare er plass til én kolonne. Jaktleder: filteret ligger utenfor
   tabellramma og følger derfor vinduet. */
@media (max-width: 640px) {
  .filter { grid-template-columns: 1fr; }
}

/* Stablet tabell - flagget `stablet` i tabell.php.

   Hver rad er en blokk med etiketten over verdien, uansett skjermbredde.
   For tabeller som står i en smal flate (slide-innen er 440 px) og har
   skjemafelt i cellene: fem kolonner med velger og flervalg får ikke plass
   ved siden av hverandre, men stablet leser de seg som et lite skjema per
   rad. Samme grunnlag som kortmodusen over, bare uten brytepunkt. */
.tabell--stablet .tabell__tabell,
.tabell--stablet .tabell__tabell tbody,
.tabell--stablet .tabell__tabell tr { display: block; }
.tabell--stablet .tabell__tabell thead { display: none; }
.tabell--stablet .tabell__rad {
  display: grid;
  gap: 8px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius, 6px);
  background: var(--color-bg);
  padding: 12px 14px;
  margin: 0 0 10px;
}
.tabell--stablet .tabell__rad:hover .tabell__td { background: none; }
.tabell--stablet .tabell__td {
  display: block;
  padding: 0;
  border: 0;
  text-align: left;
  overflow-wrap: anywhere;
}
.tabell--stablet .tabell__td::before {
  content: attr(data-label);
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: none;   /* ingen versaler */
  color: var(--color-text-muted);
}
.tabell--stablet .tabell__td[data-label=""]::before { content: none; }
.tabell--stablet .tabell__td .felt { margin: 0; }

/* Kompakt tabell - beholder tabellformen også på smal skjerm.

   Kortmodusen over er riktig for brede tabeller: ni kolonner blir
   uleselige på en telefon. Men en tabell med tre korte kolonner får
   god plass i 360 px, og kortmodusen gjør den DAARLIGERE - hver rad
   blir tre stablede linjer, og uten `data-label` står verdiene helt
   uten forklaring.

   Bruk denne når tabellen har få, korte kolonner. */
@container (max-width: 640px) {
  .tabell__tabell--kompakt,
  .tabell__tabell--kompakt tbody,
  .tabell__tabell--kompakt tr { display: table; }
  .tabell__tabell--kompakt { display: table; width: 100%; }
  .tabell__tabell--kompakt tbody { display: table-row-group; }
  .tabell__tabell--kompakt tr { display: table-row; }
  .tabell__tabell--kompakt thead { display: table-header-group; }
  .tabell__tabell--kompakt .tabell__td,
  .tabell__tabell--kompakt .tabell__th {
    display: table-cell;
    padding: 8px 10px;
  }
  .tabell__tabell--kompakt .tabell__td::before { content: none; }
  .tabell__tabell--kompakt .tabell__rad { padding: 0; }
}

/* ------------------------------------------------------ tillegg i standardtabellen

   Alt under gjelder BARE når sida har slått på et tillegg
   (`velg`, `verktoy`, `sumrad`, `smartsok` i component('tabell', ...)).
   Uten dem finnes ikke markupen, og reglene treffer ingenting.
   ------------------------------------------------------------------------- */

/* --- verktoylinja over tabellen --- */

.tabell__verktoylinje {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
}
.tabell__verktoyfyll { flex: 1 1 auto; }

.tabell__valgteller {
  font-size: 13px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* --- meny (flervalg og tabellmeny) --- */

.tabell__meny { position: relative; display: inline-flex; }

.tabell__menyknapp {
  min-width: 30px;
  height: 30px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-divider-strong, var(--color-divider));
  border-radius: var(--radius, 6px);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.tabell__menyknapp:hover { background: var(--color-surface); }
.tabell__menyknapp[aria-expanded="true"] { border-color: var(--color-accent); }

.tabell__menypanel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  min-width: 200px;
  padding: 4px;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-divider-strong, var(--color-divider));
  border-radius: var(--radius, 6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  font-size: 13px;
  text-align: left;
}
/* Tabellmenyen står helt til hoyre; et panel forankret i venstre kant ville
   stukket ut av kortet. */
.tabell__verktoylinje > .tabell__meny:last-child .tabell__menypanel {
  left: auto;
  right: 0;
}

.tabell__menyvalg {
  display: block;
  width: 100%;
  padding: 6px 10px;
  border: 0;
  border-radius: calc(var(--radius, 6px) - 2px);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.tabell__menyvalg:hover { background: var(--color-surface); }
.tabell__menyvalg.er-valgt { font-weight: 600; }

.tabell__menyskille {
  height: 1px;
  margin: 2px 0;
  background: var(--color-divider);
}
.tabell__menystatus {
  padding: 6px 10px;
  font-size: 12px;
  color: var(--color-text-muted);
}

/* --- avkryssing --- */

.tabell__th--velg, .tabell__td--velg {
  width: 34px;
  padding-right: 8px;
  cursor: default;
}
.tabell__th--velg::after { content: none; }
.tabell__avkryss { margin: 0; cursor: pointer; }
/* Ruta er 15 px, men trykkflata skal være `--tap` (44 px): etiketten rundt
   får en usynlig flate sentrert på ruta, uten at rad eller rute vokser. */
.tabell__avkryssflate {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  cursor: pointer;
}
.tabell__avkryssflate::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--tap, 44px);
  height: var(--tap, 44px);
  transform: translate(-50%, -50%);
}
.tabell__rad.er-avkrysset .tabell__td { background: var(--color-surface); }

/* --- sumrad --- */

.tabell__sumrad .tabell__td {
  border-top: 1px solid var(--color-divider-strong, var(--color-divider));
  border-bottom: 0;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.tabell__sumcelle--klikkbar { position: relative; cursor: pointer; }
.tabell__sumcelle--klikkbar:hover { background: var(--color-surface); }
.tabell__sumcelle--klikkbar:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}
/* Merket sier HVILKET aggregat tallet er - «Sum 182,5» leses av seg selv,
   «182,5» må slås opp. */
.tabell__summerke {
  font-size: 10px;
  font-weight: 600;
  text-transform: none;   /* ingen versaler */
  color: var(--color-text-muted);
}
/* Sumraden er nederste rad i tabellen. En meny som faller NEDOVER havner
   utenfor kortet og blir klippet. Den åpner oppover. */
.tabell__summeny {
  top: auto;
  bottom: calc(100% + 2px);
  min-width: 130px;
}
.tabell__tall .tabell__summeny { left: auto; right: 0; }

/* --- hjelpepopover for soekesyntaksen --- */

.tabell__sokehjelp {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 45;
  min-width: 300px;
  max-width: 420px;
  padding: 12px 14px;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-divider-strong, var(--color-divider));
  border-radius: var(--radius, 6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  font-size: 12px;
  line-height: 1.45;
}
.tabell__sokehjelp-topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.tabell__sokehjelp-lukk {
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.tabell__sokehjelp p { margin: 0 0 8px; }
.tabell__sokehjelp table { width: 100%; border-collapse: collapse; }
.tabell__sokehjelp td { padding: 3px 8px 3px 0; vertical-align: top; }
.tabell__sokehjelp code {
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--color-surface);
  font-size: 11px;
}
.tabell__sokehjelp-eks {
  color: var(--color-text-muted);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  white-space: nowrap;
}
.tabell__sokehjelp-tips { margin: 10px 0 0; color: var(--color-text-muted); font-size: 11px; }

@container (max-width: 640px) {
  /* Avkryssingsboksen skal ikke bli en «etikett: verdi»-linje som alle andre
     celler, og den skal ikke forsvinne. */
  .tabell__td--velg::before { content: none; }
  .tabell__td--velg { width: auto; }

  /* Kortmodus med avkryssing: boksen får sin egen kolonne helt til
     venstre, over alle radene i kortet, og innholdet flyttes én kolonne
     til hoyre. Uten dette ville boksen delt rute med tittelen. */
  .tabell--velg.tabell--kort .tabell__rad {
    grid-template-columns: auto minmax(0, 1fr) fit-content(50%);  /* Jaktleder: som over */
  }
  .tabell--velg.tabell--kort [data-rolle="velg"] {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: start;
    padding-top: 3px;
  }
  .tabell--velg.tabell--kort [data-rolle="tittel"],
  .tabell--velg.tabell--kort [data-rolle="meta"] { grid-column: 2; }
  .tabell--velg.tabell--kort [data-rolle="merke"],
  .tabell--velg.tabell--kort [data-rolle="tall"]  { grid-column: 3; }
  .tabell--velg.tabell--kort [data-rolle="handling"] { grid-column: 2 / -1; }

  /* Sumraden står som en stablet liste, ikke som en tabellrad. `tfoot` og
     radene inni må gjores til blokk på samme måte som `tbody` over. */
  .tabell__tabell tfoot, .tabell__sumrad { display: block; }
  .tabell__sumrad {
    padding: 8px 0 0;
    border-top: 1px solid var(--color-divider-strong, var(--color-divider));
  }
  .tabell--kort .tabell__sumrad .tabell__sumcelle,
  .tabell__sumrad .tabell__sumcelle {
    display: flex;
    gap: 12px;
    padding: 3px 0;
    border: 0;
    white-space: normal;
  }
  .tabell__sumrad .tabell__sumcelle:empty { display: none; }
  .tabell__sumrad .tabell__sumcelle::before {
    content: attr(data-label);
    flex: 0 0 38%;
    font-size: 11px;
    font-weight: 400;
    text-transform: none;   /* ingen versaler */
    color: var(--color-text-muted);
  }
  .tabell__sumrad .tabell__td--velg { display: none; }
}

/* Tabell i panel og kort (LoadREG: «uoversiktlig»): hodet får svak flate, første kolonne
   luft mot kanten, rullefelt etter temaet. På smal skjerm er valgt rad én flate, ikke flekker bak cellene. */
.tabell__th { background: color-mix(in srgb, var(--text, #000) 5%, transparent); font-size: var(--tt-ui-label, 12px); }
.tabell__th:first-child, .tabell__td:first-child { padding-left: 8px; }
.tabell__ramme { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
@container (max-width: 640px) {
  .tabell__td:first-child { padding-left: 0; }
  .tabell--kort .tabell__rad.er-valgt .tabell__td { background: none; }
  .kort .tabell--kort .tabell__rad { padding-left: 8px; padding-right: 8px; }
  .kort .tabell--kort .tabell__rad.er-valgt { background: var(--color-surface); box-shadow: inset 3px 0 0 0 var(--color-accent); }
  .tabell--kort .tabell__td::before, .tabell__td::before { font-size: var(--tt-ui-label, 12px); }
}

/* Innrammet tabell (tilvalg: tabellene i panelet gikk i ett med bakgrunnen):
     <div class="tabell tabell--kort tabell--usortert tabell--ramme">…
   Tynn ramme med kortets hjørner, tydelig hodeflate, streker mellom radene og valgt rad i primærtone.
   På smal skjerm står radene i samme ramme med streker mellom. */
.tabell--ramme .tabell__ramme {
  border: 1px solid var(--border, var(--color-divider));
  border-radius: var(--radius, 6px);
  background: var(--card-bg, var(--color-bg));
  overflow: hidden;
}
.tabell--ramme .tabell__th {
  background: color-mix(in srgb, var(--text, #000) 8%, var(--card-bg, transparent));
  color: var(--text, var(--color-text));
  border-bottom: 1px solid var(--border, var(--color-divider));
}
.tabell--ramme .tabell__th:last-child, .tabell--ramme .tabell__td:last-child { padding-right: 8px; }
.tabell--ramme .tabell__rad:last-child .tabell__td { border-bottom: 0; }
.tabell--ramme .tabell__rad.er-valgt .tabell__td {
  background: color-mix(in srgb, var(--primary, #2563eb) 14%, var(--card-bg, transparent));
}
.tabell--ramme .tabell__rad.er-valgt .tabell__td:first-child { box-shadow: inset 3px 0 0 0 var(--primary, #2563eb); }
@media (max-width: 640px) {
  .tabell--ramme .tabell__ramme { overflow: hidden; }
}
@container (max-width: 640px) {
  .kort .tabell--ramme.tabell--kort .tabell__rad,
  .tabell--ramme.tabell--kort .tabell__rad {
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--border, var(--color-divider));
    border-radius: 0;
    background: none;
    padding: 10px 12px;
    box-shadow: none;
  }
  .tabell--ramme.tabell--kort .tabell__rad:last-child { border-bottom: 0; }
  .kort .tabell--ramme.tabell--kort .tabell__rad.er-valgt,
  .tabell--ramme.tabell--kort .tabell__rad.er-valgt {
    background: color-mix(in srgb, var(--primary, #2563eb) 14%, var(--card-bg, transparent));
    box-shadow: inset 3px 0 0 0 var(--primary, #2563eb);
  }
  .tabell--ramme .tabell__rad.er-valgt .tabell__td { background: none; }
  .tabell--ramme .tabell__rad.er-valgt .tabell__td:first-child { box-shadow: none; }
}

/* Knapp eller knapperad rett under en tabell: 12 px luft (LoadREG). */
.tabell + :is(.ds1_knapp, .ds1_knapperad, .ds-knapperad, :has(> .ds1_knapp)) { margin-top: 12px; }