/* KOPI 1:1 — kilde: ~/dev/forta origin/feature/cc-command-center @ cca04e6d4c94d6129839bbd30771ac601b18010e :static/css/forta-core-dist.css (git-blob 4613de14e3c5ddba9336dcce88dbd1f9eb61a3fa, uaendret siden CRM 7177f75a5). RET ALDRIG HER: alt under denne linje er byte-ens med blob'en (api/tests/test_kernedist_vaern.py). Synk = ny kopi + ny blob i testen. */
/* ============================================================================
   FORTA KERNE-DIST @1.2 — KANONISK STANDALONE-DISTRIBUTION af Forta-kernen.

   Dette er det ÆGTE distributions-artefakt: ren CSS, NUL Tailwind-afhængighed,
   NUL app-specifikke selektorer. Kopiér 1:1 ind i ethvert Forta-produkt.

   MODSAT forta-core.css (som er APP-kernen: @apply-kompilerede klasser +
   app-selektorer som .call-card-actions/.setting-card + Tailwind-palette-kanaler)
   er DENNE fil selvstændig og produkt-agnostisk. Værdierne er udledt 1:1 fra
   app-kernens RENDEREDE resultat (§-specs i designsystemet er facit) — dér hvor
   @apply skjulte dem i den kompilerede app.css.

   INDLÆSNINGSORDEN i et produkt:
     1. forta-core-dist.css        (denne — tokens + komponentbibliotek)
     2. forta-theme-<produkt>.css  (produktets 8 brand-variabler: --accent, --grad,
                                     --accent-link, --accent-soft, --accent-soft-tx,
                                     --accent-glow, --b-deep, --b-mid)
     3. forta-dark.css             (body.dark-tema; standalone, deles uændret)

   DENNE FIL DEFINERER IKKE BRAND-/TEMA-VARIABLER. Komponenter der bruger accent
   (primær-knap, chip.on, fokus-ring, .p-info) refererer var(--accent…, <fallback>)
   → de virker MED et tema, og degraderer pænt til fallback UDEN et.

   Dark: komponenterne bruger de SAMME token-navne (--ink-*, --bg-panel, semantik)
   som forta-dark.css omdefinerer i body.dark → dark virker gratis, uden ændring
   af dist- eller dark-filen.

   CHANGELOG
   ---------
   @1.2  Første kanoniske dist-udtrækning (efter Ejendom-feedback: app-kernen kunne
         ikke kopieres standalone pga. Tailwind-@apply). LAG-1: tokens + fuldt
         komponentbibliotek (.btn-familie, .p-pill, .chip, .f-felt, .card/.kpi,
         .tag-badge, tabel, empty-ic, toast/tooltip/skeleton, fokus-ring, motion).
   BINDENDE REGEL: hvert kerne-bump SKAL regenerere denne fil. Et bump uden
   opdateret dist er ufuldstændigt (se forta-core.css-headeren + coverage-doc).
   ============================================================================ */

:root {
  /* ── Ink-skala (neutral tekst + flader) ──────────────────────────────── */
  --ink-900:#0B1B2B; --ink-800:#1A2D40; --ink-700:#2C4458; --ink-600:#4A6378;
  --ink-500:#50657A; --ink-400:#6B829A; --ink-300:#C5D2DD; --ink-200:#E2E9EF;
  --ink-100:#F1F5F8; --ink-50:#F8FAFC;
  /* ── Semantik (green/amber/red — flade + kant + tekst) ───────────────── */
  --green-bg:#E7F7EE; --green-bd:#9ADBB5; --green-tx:#0D705D;
  --amber-bg:#FDF4E3; --amber-bd:#F0D9A6; --amber-tx:#815C00;
  --red-bg:#FDF0EF;   --red-bd:#F2B8B5;   --red-tx:#B3261E;
  /* ── Flader ──────────────────────────────────────────────────────────── */
  --bg-app:var(--ink-50); --bg-panel:#fff; --bd-panel:var(--ink-200);
  /* ── Radius ──────────────────────────────────────────────────────────── */
  --radius-panel:16px; --radius-control:9px; --radius-pill:999px;
  --radius-input-lg:12px;
  /* Solid danger-CTA (fast i begge temaer — en danger-knap skal være rød). */
  --danger-solid:#B3261E; --danger-solid-hover:#8F1D17;
}

/* ── Typografi-roller (§3). Skrifterne loades af produktet (self-hostet). ── */
.font-display { font-family:'Sora',-apple-system,'Segoe UI',system-ui,sans-serif; }
.mono-id { font-family:'JetBrains Mono','SF Mono',Consolas,ui-monospace,monospace;
  font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.tnum { font-variant-numeric:tabular-nums; }
.amount { font-variant-numeric:tabular-nums; text-align:right; }

/* ============================================================================
   KNAPPER (§8) — pille-form, ét layout, farve varierer. Størrelser 32/38/48.
   ========================================================================= */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.375rem;
  border-radius:var(--radius-pill); padding:.375rem .875rem;
  font-size:12px; line-height:1.5; font-weight:500; cursor:pointer;
  border:0; text-decoration:none; white-space:nowrap;
  transition:color .15s cubic-bezier(.4,0,.2,1),
             background-color .15s cubic-bezier(.4,0,.2,1),
             border-color .15s cubic-bezier(.4,0,.2,1),
             box-shadow .15s cubic-bezier(.4,0,.2,1);
}
.btn:disabled, .btn[aria-disabled="true"] { opacity:.5; pointer-events:none; }
/* Primær = brand-gradient + hvid tekst + blød glow (§8). SOLID FALLBACK FØRST:
   hvid tekst må aldrig ende på transparent baggrund uden tema. */
.btn-primary {
  color:#fff;
  background-color:var(--accent-link,#1B567E);
  background-image:var(--grad,none);
  box-shadow:0 2px 8px var(--accent-glow,rgba(30,150,176,.28));
}
.btn-primary:hover { filter:brightness(1.04); }
/* Sekundær = hvid flade, synlig kant, accent-tekst (ses altid uden tema). */
.btn-sec {
  background:var(--bg-panel); color:var(--accent-link,#1B567E);
  border:1.5px solid var(--ink-300);
}
.btn-sec:hover { border-color:var(--accent,#1E96B0); background:var(--ink-50); }
/* Ghost = transparent, neutral. */
.btn-ghost { background:transparent; color:var(--ink-500); }
.btn-ghost:hover { background:var(--ink-100); }
/* Danger = SOLID rød CTA (§H8), fast i begge temaer. */
.btn-danger { background:var(--danger-solid); color:#fff; }
.btn-danger:hover { background:var(--danger-solid-hover); }
/* Lav-profil sekundær-danger (outline). */
.btn-danger-outline {
  background:var(--bg-panel); border:1px solid var(--red-tx); color:var(--red-tx);
}
.btn-danger-outline:hover { background:var(--red-bg); }
/* Størrelser (§M14 — 32/38/48, ingen mellemhøjder). */
.btn-32 { min-height:32px; }
.btn-38 { min-height:38px; }
.btn-48 { min-height:48px; font-size:15px; padding-left:1.25rem; padding-right:1.25rem; }

/* ============================================================================
   STATUSPILLER (§5) — semantik-piller m. kant (p-wait/p-ok/p-due) + kantløse
   accent-chips (p-info/p-draft). Ét system.
   ========================================================================= */
.p-pill {
  display:inline-flex; align-items:center; gap:.25rem;
  padding:.125rem .625rem; border-radius:var(--radius-pill);
  font-size:11px; font-weight:600; line-height:1.4; white-space:nowrap;
}
.p-draft { background:var(--ink-100);  color:var(--ink-600); border:1px solid transparent; }
.p-wait  { background:var(--amber-bg); color:var(--amber-tx); border:1px solid var(--amber-bd); }
.p-info  { background:var(--accent-soft,#EAF4FB); color:var(--accent-soft-tx,#1B567E); border:1px solid transparent; }
.p-ok    { background:var(--green-bg); color:var(--green-tx); border:1px solid var(--green-bd); }
.p-due   { background:var(--red-bg);   color:var(--red-tx);   border:1px solid var(--red-bd); }

/* ── Filter-chips (§K4) — altid synlig kant; aktiv = 1,5px accent. ──────── */
.chip {
  display:inline-flex; align-items:center; gap:5px; padding:4px 11px;
  border-radius:var(--radius-pill); border:1px solid var(--ink-200);
  background:var(--bg-panel); color:var(--ink-600); font-size:12.5px;
  font-weight:600; line-height:1.4; cursor:pointer; text-decoration:none;
  white-space:nowrap;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.chip:hover { border-color:var(--ink-300); color:var(--ink-800); }
.chip.on { border:1.5px solid var(--accent,#1E96B0);
  background:var(--accent-soft,#EAF4FB); color:var(--accent-soft-tx,#1B567E); }

/* ── Tag-badge (§M12) — neutralt type-mærkat (6px, kantløs, ingen dot). ─── */
.tag-badge { display:inline-flex; align-items:center; border-radius:6px;
  background:var(--ink-100); color:var(--ink-600); font-size:10.5px;
  font-weight:600; letter-spacing:.02em; padding:2px 7px; white-space:nowrap; }

/* ============================================================================
   FORMULARER (§22) — .f-field wrapper + label/input/help/error + rækker.
   ========================================================================= */
.f-field { margin-bottom:1rem; }
.f-row { display:flex; flex-wrap:wrap; gap:.75rem; }
.f-row > .f-field { flex:1 1 12rem; margin-bottom:0; }
.f-label { display:block; margin-bottom:.375rem; font-size:12px; font-weight:500;
  text-transform:uppercase; letter-spacing:.06em; color:var(--ink-500); }
.f-input, .f-select, .f-textarea {
  width:100%; border-radius:8px; border:1px solid var(--ink-300);
  background:var(--bg-panel); padding:.375rem .75rem; font-size:13px;
  line-height:1.5; color:var(--ink-800); font-family:inherit;
}
.f-input::placeholder, .f-textarea::placeholder { color:var(--ink-500); }
.f-textarea { min-height:80px; resize:vertical; }
.f-input--lg { font-size:15px; line-height:1.45; padding:12px 16px; min-height:48px;
  border-radius:var(--radius-input-lg); }
.f-input--sm { font-size:12px; padding:.25rem .5rem; }
/* Select: 38px + egen chevron-pil (skjuler OS-pilen). */
.f-select { min-height:38px; -webkit-appearance:none; -moz-appearance:none;
  appearance:none; padding-right:2.25rem; background-repeat:no-repeat;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235C748C' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position:right 11px center; background-size:16px; }
.f-help { margin-top:.25rem; font-size:12px; color:var(--ink-500); }
.f-error { margin-top:.25rem; font-size:12px; color:var(--red-tx); }
/* Disabled-tilstand for ALLE kontroller (§H7): 45% + not-allowed. */
.f-input:disabled, .f-select:disabled, .f-textarea:disabled,
button:disabled, .is-disabled, [aria-disabled="true"] {
  opacity:.45; cursor:not-allowed;
}

/* ============================================================================
   FLADER: kort + KPI (§7/§17.3). Hvid flade, 1px kant, 16px radius, ingen skygge.
   ========================================================================= */
.card { background:var(--bg-panel); border:1px solid var(--bd-panel);
  border-radius:var(--radius-panel); padding:1rem; }
.card-title { margin-bottom:.5rem; font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:.06em; color:var(--ink-500); }
.kpi { background:var(--bg-panel); border:1px solid var(--bd-panel);
  border-radius:var(--radius-panel); padding:1rem; }
.kpi-label { text-transform:uppercase; letter-spacing:.06em; font-size:10.5px;
  font-weight:700; color:var(--ink-500); }
.kpi-value { margin-top:.375rem; letter-spacing:-.025em; color:var(--ink-900);
  font-family:'Sora',-apple-system,'Segoe UI',system-ui,sans-serif;
  font-weight:600; font-size:clamp(26px,2vw,31px);
  font-variant-numeric:tabular-nums; line-height:1.05; white-space:nowrap; }
.kpi-value-grad { background:var(--grad,none); -webkit-background-clip:text;
  background-clip:text; color:transparent; }
.kpi-delta-positive, .kpi-delta-negative, .kpi-delta-neutral {
  margin-top:.25rem; display:inline-flex; align-items:center; gap:.25rem;
  font-size:11px; line-height:1.4; font-weight:500; min-height:1.15rem;
}
.kpi-delta-positive { color:var(--green-tx); }
.kpi-delta-negative { color:var(--red-tx); }
.kpi-delta-neutral  { color:var(--ink-500); }

/* ============================================================================
   TABEL-BASIS (§17.2). thead sticky m. panel-baggrund; rækker m. hover.
   ========================================================================= */
.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.data-table thead th { text-align:left; font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:.05em; color:var(--ink-500);
  padding:.5rem; border-bottom:1px solid var(--bd-panel);
  background:var(--bg-panel); position:sticky; top:0; z-index:2; }
.data-table tbody td { padding:.375rem .5rem; vertical-align:top;
  color:var(--ink-800); border-bottom:1px solid var(--ink-100); }
.data-table tbody tr:last-child td { border-bottom:0; }
.data-table tbody tr:hover { background:var(--ink-50); }
.data-table .td-amount, .data-table .th-amount { text-align:right; white-space:nowrap; }

/* ============================================================================
   TOMME TILSTANDE (§17.7).
   ========================================================================= */
.empty-state { padding:2.5rem 0; text-align:center; font-size:12px;
  line-height:1.5; color:var(--ink-500); }
.empty-ic { display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:9px; background:var(--ink-100);
  color:var(--ink-500); margin-bottom:8px; }
.empty-ic-lg { width:44px; height:44px; border-radius:11px; margin-bottom:10px; }

/* ============================================================================
   TOAST / TOOLTIP / SKELETON (§H7). Toast = KUN ved fejl (§7b-panelsprog).
   ========================================================================= */
.toast-stack { position:fixed; right:16px; bottom:16px; z-index:1200;
  display:flex; flex-direction:column; gap:8px; max-width:360px; }
.toast { display:flex; align-items:flex-start; gap:10px; padding:12px 14px;
  background:var(--bg-panel); border:1px solid var(--bd-panel);
  border-left:3px solid var(--red-tx); border-radius:var(--radius-panel);
  box-shadow:0 16px 44px rgba(11,27,43,.22); color:var(--ink-800);
  font-size:13px; animation:fcToastIn .18s ease-out; }
.toast-ic { flex:0 0 auto; color:var(--red-tx); display:flex; }
.toast-body { flex:1 1 auto; min-width:0; }
.toast-title { font-weight:600; color:var(--ink-900); }
.toast-close { flex:0 0 auto; background:none; border:0; cursor:pointer;
  color:var(--ink-500); padding:2px; display:flex; }
.toast-close:hover { color:var(--ink-800); }
@keyframes fcToastIn { from { transform:translateX(16px); opacity:0; }
  to { transform:none; opacity:1; } }

.tt { position:relative; }
.tt::after { content:attr(data-tt); position:absolute; left:50%;
  bottom:calc(100% + 6px); transform:translateX(-50%) translateY(2px);
  white-space:nowrap; background:var(--ink-800); color:#fff; font-size:11px;
  font-weight:500; padding:4px 8px; border-radius:6px; opacity:0;
  pointer-events:none; transition:opacity .12s ease, transform .12s ease; z-index:60; }
.tt:hover::after, .tt:focus-visible::after { opacity:1;
  transform:translateX(-50%) translateY(0); }

.skeleton { display:block; border-radius:6px;
  background:linear-gradient(90deg, var(--ink-100) 25%, var(--ink-200) 37%,
  var(--ink-100) 63%); background-size:400% 100%;
  animation:fcSkeleton 1.4s ease-in-out infinite; }
.skeleton-text { height:.72em; margin:.28em 0; }
.skeleton-line { height:12px; }
@keyframes fcSkeleton { 0% { background-position:100% 50%; }
  100% { background-position:0 50%; } }

/* ============================================================================
   FOKUS-RING (§H6) — samlet tastatur-fokus. Transparent outline = high-contrast-
   fallback (den ignorerer box-shadow).
   ========================================================================= */
:focus-visible {
  outline:2px solid transparent; outline-offset:2px;
  box-shadow:0 0 0 3px var(--accent-glow,rgba(30,150,176,.30)),
             0 0 0 1.5px var(--accent,#1E96B0);
}

/* ============================================================================
   MOTION-STANDARD (Del 5) — 200ms scale-in til menu/modal; reduced-motion nuller.
   ========================================================================= */
.motion-pop { animation:fcPop .2s ease-out; }
@keyframes fcPop { from { transform:scale(.98); opacity:0; }
  to { transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion: reduce) {
  .toast, .skeleton, .motion-pop { animation:none; }
  .tt::after { transition:none; }
  .btn { transition:none; }
}