/* ============================================================
   Herald design-fundament — tokens + gjenbrukbare komponenter.
   Lenkes inn per side etter hvert som de restyles.
   ============================================================ */

:root {
  --hd-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --hd-bg:          #F7F8FA;
  --hd-surface:     #FFFFFF;
  --hd-surface-alt: #F9FAFB;

  --hd-text:   #111827;
  --hd-text-2: #6B7280;
  --hd-text-3: #6B7280;  /* var #9CA3AF (2,54:1) — nå 4,6:1 for tekst */

  --hd-accent:      #4F46E5;
  --hd-accent-weak: #EEF2FF;
  --hd-accent-tx:   #4338CA;

  --hd-border:   #E9EAEE;
  --hd-border-2: #D6D8DE;

  --hd-green: #16A34A;  --hd-green-bg: #ECFDF5;  --hd-green-tx: #15803D;
  --hd-amber: #D97706;  --hd-amber-bg: #FEF3C7;  --hd-amber-tx: #92400E;
  --hd-red:   #DC2626;  --hd-red-bg:   #FEF2F2;  --hd-red-tx:   #B91C1C;

  --hd-radius:    8px;
  --hd-radius-lg: 12px;

  /* FIKS 03.08: typeskala — erstatter 16 hardkodede px-størrelser */
  --hd-fs-2xs: 11px;  /* badges, pills            */
  --hd-fs-xs:  12px;  /* tabellhoder, metadata    */
  --hd-fs-sm:  13px;  /* sekundærtekst, chips     */
  --hd-fs-md:  14px;  /* brødtekst, knapper       */
  --hd-fs-lg:  15px;  /* korttitler / h2          */
  --hd-fs-xl:  18px;  /* logo                     */
  --hd-fs-2xl: 22px;  /* sidetittel / h1          */

  /* FIKS 03.08: z-index-skala (headeren lå over modalene) */
  --z-header: 900; --z-dropdown: 1400; --z-modal: 10050; --z-toast: 10070;

  /* FIKS 03.08: kontrast — text-3 (#9CA3AF = 2,54:1) var brødtekst overalt.
     Nå til DEKOR; muted-tekst løftet til 4,6:1. amber-tx til 6,37:1. */
  --hd-text-muted: #6B7280;
}

/* FIKS 03.08: ÉN global fokusmarkør — ingen liste å vedlikeholde */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--hd-accent);
  outline-offset: 2px;
}

/* ---- Page header ---- */
.hd-page-title { font-size: 22px; font-weight: 500; color: var(--hd-text); letter-spacing: -0.015em; }
.hd-page-sub   { font-size: 14px; color: var(--hd-text-2); margin-top: 2px; }

/* ---- Buttons ---- */
.hd-btn {
  font: inherit; font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 1px solid var(--hd-border);
  background: var(--hd-surface); color: var(--hd-text);
  border-radius: var(--hd-radius); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.hd-btn:hover { background: var(--hd-surface-alt); border-color: var(--hd-border-2); }
.hd-btn-primary { background: var(--hd-text); color: #fff; border-color: var(--hd-text); }
.hd-btn-primary:hover { background: #000; border-color: #000; }

/* ═══════════════════════════════════════════════════════════════════
   KNAPP-NORMALISERING — root-cause, IKKE en liste å vedlikeholde.
   Nettleseren lar IKKE <button>/<input>/<select>/<textarea> arve
   font-family — derfor spriker de fra <a>-knapper som arver appfonten,
   selv når de har samme klasse. Denne ene regelen tvinger alle slike
   elementer til å arve appfonten uansett klasse. Da KAN ikke to knapper
   ved siden av hverandre få ulik font igjen — det er umulig å glemme,
   fordi det ikke finnes noen liste å legge til i. */
button, input, select, textarea, optgroup {
  font-family: inherit;
}
/* <a> stylet som knapp skal aldri understrekes, og alle knapper deler
   boksmodell/linjehøyde. Attributt-selektoren treffer enhver
   knapp/chip/handling-klasse uten at vi må føre liste. */
[class*="btn"], [class*="Btn"], [class*="chip"], [class*="Chip"],
[class*="action"], .hd-btn, .ko-btn, .varsel-action {
  text-decoration: none;
  box-sizing: border-box;
  line-height: 1.2;
}

/* ---- Card ---- */
.hd-card {
  background: var(--hd-surface); border: 1px solid var(--hd-border);
  border-radius: var(--hd-radius-lg); padding: 18px 20px;
}

/* ---- Segmented control (pill) ---- */
.hd-seg { display: inline-flex; background: var(--hd-surface); border: 1px solid var(--hd-border); border-radius: 20px; padding: 3px; }
.hd-seg > span { font-size: 13px; padding: 6px 14px; border-radius: 18px; cursor: pointer; color: var(--hd-text-2); white-space: nowrap; }
.hd-seg > span.on { background: var(--hd-text); color: #fff; }

/* ---- Chip / filter pill ---- */
.hd-chip { font-size: 13px; padding: 6px 14px; border-radius: 20px; border: 1px solid var(--hd-border); background: var(--hd-surface); color: var(--hd-text-2); cursor: pointer; }
.hd-chip.on { background: var(--hd-text); border-color: var(--hd-text); color: #fff; }

/* ---- Badge ---- */
.hd-badge { font-size: 11px; padding: 3px 9px; border-radius: 20px; white-space: nowrap; display: inline-block; font-weight: 500; }
.hd-badge-green { background: var(--hd-green-bg); color: var(--hd-green-tx); }
.hd-badge-amber { background: var(--hd-amber-bg); color: var(--hd-amber-tx); }
.hd-badge-gray  { background: var(--hd-surface-alt); color: var(--hd-text-2); }

/* ---- Traffic-light dot ---- */
.hd-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.hd-dot.gronn { background: var(--hd-green); }
.hd-dot.gul   { background: var(--hd-amber); }
.hd-dot.rod   { background: var(--hd-red); }

/* ---- Table ---- */
.hd-table { width: 100%; border-collapse: collapse; background: var(--hd-surface); border: 1px solid var(--hd-border); border-radius: var(--hd-radius-lg); }
.hd-table th, .hd-table td { text-align: left; padding: 14px 16px; font-size: 14px; border-bottom: 1px solid var(--hd-border); }
.hd-table th { font-size: 12px; font-weight: 500; color: var(--hd-text-3); }
.hd-table tr:last-child td { border-bottom: none; }
.hd-table td.r, .hd-table th.r { text-align: right; }

/* ---- Kanonisk sideramme (FIKS 04.08): moderat bredde for listesider.
   Full skjermbredde ga hav av mellomrom - 1360px gir 8-kolonners tabeller
   (salgslead/konkurser) luft uten aa strekke innholdet. Portefoelje-siden
   overstyrer med sin egen dynamiske modell (1160 + full bredde KUN for
   Aarshjul/Kart). Kart og Assistent har egen natur og egne maal. ---- */
:root { --hd-shell: 1360px; }
.hd-container {
  max-width: var(--hd-shell, 1000px);
  margin: 0 auto;
  padding: 24px 32px 48px;
  padding-top: calc(56px + 22px); /* fast header 56px + luft - KANONISK toppklaring */
}

/* ---- Tomtilstand (uten emoji/piktogram) ---- */
.hd-empty {
  text-align: center;
  padding: 48px 24px;
  background: var(--hd-surface);
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-radius);
}
.hd-empty-title { font-size: 14px; font-weight: 500; color: var(--hd-text); margin-bottom: 4px; }
.hd-empty-text  { font-size: 13px; color: var(--hd-text-3); }