/* =====================================================================
   KlareTal — designsystem (moderne, stilrent fintech-dashboard)
   Kun præsentation. Bygger oven på Bootstrap, men overstyrer udseendet.
   ===================================================================== */

:root {
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    --bg: #f4f6fb;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --text: #0f172a;
    --text-muted: #475569;
    --border: #e7ebf3;
    --border-strong: #d6dce8;

    /* HANDLING — "her sker der noget når du klikker". Brand-blå, uændret.
       Gem, Vælg, Opdatér, links, fokus, KPI-streger, søjler i graferne. */
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-soft: #eff5ff;
    --accent-border: #bfd4fe;

    /* TILSTAND — "dette er valgt lige nu". Grafit (besluttet 2026-07-28).
       Før bar --accent BEGGE betydninger, og de stod få centimeter fra hinanden
       i det samme panel: i en PillPicker var både den valgte måned og Vælg-knappen
       #2563eb, mens både den fravalgte måned og Annullér var #eff5ff. Grafit er
       valgt frem for en tredje kulør, fordi appen allerede bruger grøn og rød til
       tal (--positive/--negative) — en ny kulør ville begynde at betyde noget. */
    --state: #334155;
    --state-hover: #1e293b;
    --state-soft: #f1f5f9;
    --state-border: #94a3b8;

    /* TILSTAND I HVILE — ikke valgt. Egen token, fordi --surface IKKE duer:
       KlareTals flader er hvide (.card, .panel, .table-responsive, .colfilter-pop
       er alle #ffffff), så en pille med hvid bund forsvinder ned i fladen og har
       kun en 1px kant tilbage at være knap på. Hvide knapper på hvid flade er
       forbudt (bruger-standard 2026-07-21). */
    --state-rest: #e8ecf3;
    --state-rest-border: #cdd6e4;

    --positive: #15a34a;
    --negative: #dc2626;

    --sidebar-bg: #0e1525;
    --sidebar-text: #94a3b8;
    --sidebar-muted: #5b6b86;

    --radius: 16px;
    --radius-sm: 10px;
    --radius-xs: 7px;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow: 0 1px 3px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-lg: 0 16px 40px -12px rgba(15, 23, 42, .25);
}

/* ===== Base ===== */
html, body {
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body { font-size: 0.85rem; line-height: 1.5; }

h1 { font-size: 1.35rem; font-weight: 650; letter-spacing: -0.02em; margin: 0 0 .1rem; }
h2 { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; }

/* ===== Kort / paneler (opsætningssider, wizard m.m.) ===== */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-header { background: var(--surface-2); border-bottom: 1px solid var(--border); font-weight: 600; }
.card-body { padding: 1rem 1.1rem; }
/* Sektion på opsætningssider: hvidt panel med luft */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.1rem; margin-bottom: 1rem; }
.panel > h2:first-child, .panel > .panel-title:first-child { margin-top: 0; }
.panel-title { font-size: .95rem; font-weight: 650; margin-bottom: .75rem; }

/* ===== Performance-grafer (inline, samme farveskema) ===== */
.perf-charts { margin-bottom: 1rem; }
.perf-row { display: flex; gap: .85rem; flex-wrap: wrap; align-items: stretch; }
.perf-row > .panel { flex: 1 1 240px; margin-bottom: 0; }
.perf-row > .perf-top10 { flex: 1.7 1 360px; }
/* trend-kortet er en kolonne, så søjle-området kan fylde resthøjden */
.perf-trend { display: flex; flex-direction: column; }
.perf-trend .bars { flex: 1 1 auto; }
/* lodrette søjler (trend) — fylder højden via %-højde på søjlerne */
.bars { display: flex; align-items: stretch; gap: .4rem; min-height: 96px; }
.bar-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; }
.bar-val { font-size: .68rem; color: var(--text-muted); margin-bottom: .15rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar { width: 72%; max-width: 56px; min-height: 2px; background: var(--accent); border-radius: var(--radius-xs) var(--radius-xs) 0 0; display: flex; flex-direction: column; }
.bar-budget { width: 100%; background: var(--accent-border); border-radius: var(--radius-xs) var(--radius-xs) 0 0; }
.bar-lbl { font-size: .68rem; color: var(--text-muted); margin-top: .3rem; white-space: nowrap; }
/* vandrette søjler (top-N) */
.hbar-row { display: flex; align-items: center; gap: .5rem; margin: .28rem 0; font-size: .78rem; }
.hbar-name { flex: 0 0 40%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar-track { flex: 1; height: 13px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.hbar-fill { display: flex; justify-content: flex-end; height: 100%; background: var(--accent); border-radius: 6px; overflow: hidden; }
.hbar-budget { height: 100%; background: var(--accent-border); }
.hbar-val { flex: 0 0 auto; min-width: 50px; text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* stablet andel (koncentration) */
.stack { display: flex; height: 18px; border-radius: 6px; overflow: hidden; background: var(--surface-2); }
.stack > span { display: block; height: 100%; }
.conc-item { display: flex; align-items: center; gap: .45rem; font-size: .78rem; margin: .25rem 0; }
.conc-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 3px; }
.conc-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conc-pct { flex: 0 0 auto; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* vækst-highlights */
.growth-item { display: flex; align-items: center; gap: .5rem; margin: .4rem 0; font-size: .82rem; }
.growth-arrow { font-size: .8rem; }
.growth-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.growth-pct { font-weight: 600; font-variant-numeric: tabular-nums; }
h3 { font-size: 1rem; font-weight: 600; }

a, .btn-link { color: var(--accent); text-decoration: none; }
a:hover, .btn-link:hover { color: var(--accent-hover); }

.text-muted { color: var(--text-muted) !important; }
.text-success { color: var(--positive) !important; }
.text-danger { color: var(--negative) !important; }
.text-primary { color: var(--accent) !important; }

/* Tabular lining-tal overalt i tabeller, så tusindtals-separatorer flugter lodret (F1, testfeedback).
   font-feature-settings er fallback for ældre rendering af Inter. */
.table td, .table th { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1; }
/* Fælles utility til taltunge celler/elementer udenfor .table (KPI'er har egen regel): højrestil + tabular. */
.num { text-align: right; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1; }

/* ===== Sideindhold ===== */
/* Top-luft der holder sideindholdet FRI af de faste "opdatér"-knapper i øverste højre hjørne
   (bruger-fund 2026-07-23): da sideoverskrifterne (h1) blev fjernet, forsvandt luften de gav, og
   toolbaren gik ind UNDER knapperne. 3.25rem rydder knap-kassen (top .8rem + 2rem højde). */
.content { padding-top: 3.25rem; padding-bottom: 2rem; max-width: none; }
/* Nulstil top-margin på FØRSTE indholds-element, så top-luften altid gælder — Bootstrap-rækker
   (.row.g-*) har en NEGATIV margin-top, der ellers trak toolbaren op i knap-zonen (fx Kontrakter). */
.content > :first-child { margin-top: 0; }
/* Fast luft under SIDSTE element på alle sider (bruger 2026-07-14: grafer/tabeller må ikke røre
   browserbunden). Container-padding-bottom medregnes IKKE i scrollhøjden når .content er
   flex+overflow (Chrome) — margin på sidste barn tæller altid med. */
.content > :last-child { margin-bottom: 2rem; }
/* Intro-tekst lige under titlen */
.content > h1 + p { color: var(--text-muted); font-size: .85rem; margin-bottom: .9rem; max-width: 75ch; }

h1:focus { outline: none; }

/* Kompakt filter-/værktøjsområde øverst — så tabellen er helten, ikke kontrollerne */
.content > .row.g-3 { --bs-gutter-x: 1rem; --bs-gutter-y: .55rem; margin-bottom: .55rem !important; align-items: end; }
.content > .mb-2 { margin-bottom: .55rem !important; }
.content > .mb-3 { margin-bottom: .7rem !important; }
/* Den grå "X firma(er) · år … " caption gøres diskret */
.content > p.text-muted { font-size: .78rem; margin-bottom: .7rem; }

/* App-shell (desktop): indholdet fylder præcis viewporten. Overskrift/værktøjslinje/KPI bevarer
   deres højde, og kun tabel-kortet krymper og scroller internt — så kortets bund (inkl. "I alt"
   og vandret scrollbar) altid lander ved skærmkanten i stedet for at skubbe siden ned under folden.
   Sider uden tabel (formularer) scroller bare hele indholdet. */
@media (min-width: 641px) {
    main { height: 100vh; overflow: hidden; }
    .content { height: 100%; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; }
    .content > * { flex-shrink: 0; }
    .content > .table-responsive { flex-shrink: 1; min-height: 9rem; }
}

/* ===== Knapper ===== */
.btn { border-radius: var(--radius-xs); font-weight: 500; transition: background-color .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease; }
/* WCAG 2.4.7 (design-kritik 2026-07-23): synlig tastatur-fokus-ring på ALLE knapper app-bredt.
   Bootstrap's --bs-btn-focus-box-shadow var overskrevet til transparent → :focus-visible fik ingen ring. */
.btn:focus-visible { outline: none; box-shadow: 0 0 0 .25rem rgba(37, 99, 235, .35); }
.btn-sm { font-size: .8rem; }

.btn-primary { background: var(--accent); border-color: var(--accent); }
.btn-primary:hover, .btn-primary:focus { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Knap-hierarki (bruger-standard 2026-07-21): solid blå = primær, BLÅ-SOFT = sekundær handling,
   RØD-SOFT = destruktiv — hvide knapper på hvid flade er forbudt. Undtagelse: VÆLGER-grupper
   (btn-group: år/måneder/firma m.fl.) er tilstand, ikke handlinger — de beholder neutral hvile. */
.btn-outline-primary, .btn-outline-secondary { color: var(--accent-hover); border-color: var(--accent-border); background: var(--accent-soft); font-weight: 600; }
.btn-outline-primary:hover, .btn-outline-secondary:hover { background: #dbe7ff; border-color: var(--accent); color: var(--accent-hover); }
/* VÆLGER-CELLER I HVILE — btn-group-segmenter (Vis, Periode, Type) og PillPickerens
   piller. Neutralt fyld, IKKE hvidt: fladen bagved er hvid de fleste steder, og en hvid
   pille med kun en 1px kant er ikke en knap. Tekst --text-muted (7,3:1 på #e8ecf3).
   Uden denne regel arvede pillerne blå-soft fra reglen ovenfor og lignede dermed
   Annullér-knappen, som står tre centimeter derfra i det samme panel.
   En VALGCELLE er altid et <label> (parret med en skjult .btn-check), mens en HANDLING altid
   er et <button>. Den skelnen er gratis og kræver ingen ekstra klasser — den fanger PillPicker,
   CompanyPicker og enhver fremtidig vælger bygget over samme mønster. .pill-grid og .btn-group
   er med som eksplicitte kroge for de tilfælde hvor markup'en ikke bruger label+btn-check. */
.btn-group > .btn-outline-primary, .btn-group > .btn-outline-secondary,
.pill-grid > .btn-outline-primary, .pill-grid > .btn-outline-secondary,
label.btn-outline-primary, label.btn-outline-secondary {
    color: var(--text-muted); border-color: var(--state-rest-border);
    background: var(--state-rest); font-weight: 500;
}
.btn-group > .btn-outline-primary:hover, .btn-group > .btn-outline-secondary:hover,
.pill-grid > .btn-outline-primary:hover, .pill-grid > .btn-outline-secondary:hover,
label.btn-outline-primary:hover, label.btn-outline-secondary:hover {
    background: #dde3ee; border-color: var(--state-border); color: var(--text);
}
/* VALGT — grafit, ikke blå (farvesplit 2026-07-28). Dette er hele forskellen: det eneste
   stærkt blå i et panel er nu den ene knap der afslutter handlingen (Vælg/Gem).
   Samme "valgt-farve" på tværs af alle vælgere: Visning, Periode, Måneder, År, Firma. */
.btn-outline-primary.active, .btn-check:checked + .btn-outline-primary,
.btn-outline-secondary.active, .btn-check:checked + .btn-outline-secondary { background: var(--state); border-color: var(--state); color: #fff; }
.btn-outline-primary.active:hover, .btn-check:checked + .btn-outline-primary:hover,
.btn-outline-secondary.active:hover, .btn-check:checked + .btn-outline-secondary:hover { background: var(--state-hover); border-color: var(--state-hover); color: #fff; }

/* POPOVER-TRIGGER (PillPicker, CompanyPicker, Firmaers konto-filter, Budgets firmavælger).
   Knappens TEKST er den nuværende tilstand — "2026", "Alle måneder", firmanavnet — så den skal
   læses som tilstand, ikke som handling. Før var den blå-soft ligesom Annullér, og resultatet var
   en værktøjslinje hvor "Visning: Regnskab" (blå kasse) og "Medregn budget: Nej" (grafit pille)
   så ud som to vidt forskellige slags kontrol, selvom de viser præcis det samme (fund 2026-07-28
   ved gennemgang i browser). Klikbarheden bæres af chevronen, ikke af farven. */
.kt-vaelger.btn-outline-primary,
.kt-vaelger.btn-outline-secondary {
    background: var(--state-rest);
    border-color: var(--state-rest-border);
    color: var(--text);
    font-weight: 500;
}
.kt-vaelger.btn-outline-primary:hover,
.kt-vaelger.btn-outline-secondary:hover {
    background: #dde3ee; border-color: var(--state-border); color: var(--text);
}
/* Åbent panel: markér HVILKEN trigger der hører til panelet — ellers svæver popoveren løsrevet. */
.kt-vaelger-aaben.btn-outline-primary,
.kt-vaelger-aaben.btn-outline-secondary {
    border-color: var(--state); background: var(--state-soft);
}
/* Chevron som inline SVG. Bootstrap Icons er IKKE indlæst i appen (verificeret 2026-07-28:
   ingen bootstrap-icons.css blandt stylesheets, ingen fil i wwwroot), så <i class="bi bi-*">
   tegnede 0x0 pixels — alle fire vælgere stod uden nogen antydning af at de kan åbnes.
   Sidebaren gik fri, fordi NavMenu.razor.css tegner sine egne ikoner som baggrunds-SVG. */
.picker-chevron { width: .68em; height: .68em; flex: none; opacity: .5; }

/* ===== VÆLGER-PANELET =====================================================
   Placeringen (bruger-regel 2026-07-29): CENTRÉR under egen knap, og lad aldrig
   panelet gå ud over indholdskolonnens kanter. Kan det ikke centreres indenfor,
   skubbes det ind — højst til det flugter med kanten.

   CSS kan kun det første led: centreringen. Kolonnens kant kendes først når
   panelet er målt, så selve klampningen sker i kt-ui.js (ktKlampVaelgerpanel),
   som overskriver `left` og nulstiller transform. Uden centreringen herunder
   ville panelet blinke i venstre position i det ene billede før JS'en rammer.

   INGEN FARVER HER — rolle-tagene (kt-valgt, kt-ikke-valgt, kt-hjaelpevalg,
   kt-valg-annuller, kt-valg-accepter) er sat i markup, men får først farve når
   hele appen er gennemgået (bruger 2026-07-29).
   ========================================================================== */
/* position: FIXED, ikke absolute (bruger 2026-07-29: "filter boksen må gerne gå ned over bunden
   af tabellen"). Et absolut placeret panel klippes af tabellens scroll-container, og forsøget på
   at slå klipningen fra virkede aldrig: CSS tillader ikke overflow-y:visible sammen med
   overflow-x:auto — browseren laver stille visible om til auto. Et fast placeret panel har
   viewporten som ramme og klippes derfor slet ikke.

   BEMÆRK: fixed løser IKKE lag-problemet. En fast placeret efterkommer males stadig inde i den
   stakke-kontekst en forfader danner — og kolonneoverskriften danner én med z-index:3, mens den
   faste sum-linje ligger på 4. Derfor løftes overskriften separat nedenfor.

   top/left sættes af kt-ui.js, som også skal sætte min-width: på et fast placeret element ville
   min-width:100% betyde SKÆRMENS bredde, ikke knappens. */
.kt-vaelgerpanel {
    position: fixed;
    z-index: 1050;
    width: max-content;
    background: var(--surface);
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 21, 37, .12);
    padding: 8px;
}
/* De tre placerings-varianter. Selve tallene regnes i kt-ui.js — klasserne er kun mærkater,
   så reglen står ét sted og JS kan kende den:
     (ingen)                centreret under egen knap
     .kt-panel-kolonnekant  flugter med indholdskolonnens venstre kant   (Firma)
     .kt-panel-knapkant     flugter med knappens egen venstre kant       (kolonnefilter)
   Alle tre klampes mod rammens højre kant. */

/* Kolonnefilterets panel skal over den faste sum-linje (z-index 4/5). Panelet står selv på 1050,
   men det tal gælder kun INDE i overskriftens stakke-kontekst (z-index 3), så sum-linjen malede
   henover. Løftet gælder kun mens et filter er åbent — ellers skal sum-linjen blive liggende
   over de almindelige rækker som hidtil.

   TO selektorer, fordi den første kolonnes overskrift allerede sættes af
   .sticky-first thead tr:first-child th:first-child (specificitet 0,3,3). En enkelt
   .table thead th:has(...) (0,2,2) TABER den kamp og gjorde ingenting — målt: z-index blev
   ved med at være 3. Anden linje matcher derfor den eksisterende selektor plus :has. */
.table thead th:has(.colfilter-pop),
.sticky-first thead tr:first-child th:first-child:has(.colfilter-pop) { z-index: 20; }

/* SLÅET FRA (bruger-fund 2026-07-29). Bootstrap tegner en deaktiveret .btn-primary med sin EGEN
   --bs-btn-disabled-bg (#0d6efd) i fuld styrke — altså en anden blå end appens, og den så mere
   fremtrædende ud end en aktiv knap. En deaktiveret .btn-outline-* blev omvendt helt gennemsigtig
   og forsvandt på den hvide flade. Begge dele rettes ét sted: slået fra er ALTID dæmpet grå med
   samme fyld som en ikke-valgt celle, så den læses som "kan ikke bruges lige nu". */
.btn:disabled, .btn.disabled, fieldset:disabled .btn {
    background: var(--state-rest) !important;
    border-color: var(--state-rest-border) !important;
    color: var(--text-muted) !important;
    opacity: .65;
    box-shadow: none;
}

/* FILUPLOAD er en HANDLING, ikke en valgcelle (bruger-fund 2026-07-29). Man kan ikke style et
   <input type="file">, så knappen bygges som et <label> der dækker over et skjult felt — præcis
   det mønster som regel-linjen "en valgcelle er altid et <label>" ovenfor ellers fanger. Uden
   denne undtagelse så "Importér" grå og inaktiv ud ved siden af "Eksportér". */
label.btn-outline-primary:has(input[type="file"]),
label.btn-outline-secondary:has(input[type="file"]) {
    color: var(--accent-hover);
    border-color: var(--accent-border);
    background: var(--accent-soft);
    font-weight: 600;
}

.btn-outline-danger { color: #b91c1c; border-color: #fecaca; background: #fef2f2; font-weight: 600; }
.btn-outline-danger:hover { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }

/* Én pill-stil for ALLE badges (global — afløser rå Bootstrap bg-*-badges) */
.kt-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: .14rem .6rem; font-size: .72rem; font-weight: 600; white-space: nowrap; line-height: 1.25; }
.kt-ok { background: #dcfce7; color: #166534; }
.kt-warn { background: #fef3c7; color: #92400e; }
.kt-bad { background: #fee2e2; color: #b91c1c; }
.kt-info { background: #dbeafe; color: #1d4ed8; }
.kt-mute { background: #e2e8f0; color: #475569; }
.kt-light { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); }

/* Regnskabsudbyder-tags (2026-07-23): fast, distinkt farve PR. UDBYDER — bevidst uden for de
   semantiske licens-farver (grøn=licens, gul=prøve, rød=fejl), så udbyder aldrig forveksles med
   status. En lille farvet prik + navn. */
/* Forenklet (bruger-ønske 2026-07-23): NEUTRAL pille (tom baggrund + fast grå ramme, mørk tekst),
   hvor KUN farveprikken varierer pr. udbyder — mindre farvelade, prikken er den eneste type-markør. */
.kt-prov { gap: .35rem; background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.kt-prov::before { content: ""; width: .5rem; height: .5rem; border-radius: 999px; background: var(--prov-dot, #94a3b8); }
/* Tydeligt adskilte prik-farver (bruger-ønske 2026-07-23): grøn / blå / rød — de tre mest
   forskellige kulører, umiskendelige selv ved lille prik-størrelse. */
/* Prikken skal ADSKILLE regnskabssystemer, ikke sige noget om deres tilstand (bruger-fund
   2026-07-29). Før var Dinero grøn og Billy rød, og det blev læst som "Dinero kører, Billy er
   nede" — en betydning der slet ikke findes i data. e-conomic var desuden præcis appens
   handlingsblå. Nu tre mættede kulører langt fra hinanden, ingen af dem i god/dårlig-båndet
   (grøn/rød/gul) og ingen af dem #2563eb. Systemets navn står ved siden af prikken, så farven
   er en støtte og ikke den eneste oplysning. */
.prov-dinero { --prov-dot: #7c3aed; }    /* violet */
.prov-economic { --prov-dot: #0891b2; }  /* cyan */
.prov-billy { --prov-dot: #db2777; }     /* magenta */
.prov-other { --prov-dot: #64748b; }     /* skifergrå */

/* ⓘ-hint: forklaringer bor i tooltips, aldrig som permanent brødtekst */
/* Info-ikonet er ALTID et lille i (bruger-regel): text-transform:none på SELVE ikonet, så en
   uppercase-forælder (tb-label, bud-label, …) aldrig kan gøre ⓘ til Ⓘ igen (fund 2026-07-25 ×2). */
.kt-hint { margin-left: .15rem; color: var(--text-muted); cursor: help; font-weight: 500; font-size: .85rem; text-transform: none; letter-spacing: normal; }

/* Segmenterede grupper får luft + bløde ender */
.btn-group > .btn { font-weight: 500; }

/* Fokus-ring i accentfarve */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .2rem var(--accent-soft);
    border-color: var(--accent);
}

/* ===== Formularer ===== */
.form-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; margin-bottom: .25rem; }
.form-select, .form-control { border-radius: var(--radius-xs); border-color: var(--border-strong); color: var(--text); font-size: .84rem; box-shadow: var(--shadow-sm); }
.form-select:hover, .form-control:hover { border-color: var(--border-strong); }
.form-check-input { border-color: var(--border-strong); }
/* Afkrydsning og kontakter er TILSTAND, ikke handling — grafit (farvesplit 2026-07-28). */
.form-check-input:checked { background-color: var(--state); border-color: var(--state); }
.form-switch .form-check-input:checked { background-color: var(--state); border-color: var(--state); }

/* ===== Filter-værktøjslinje (samlet kort med kontroller) ===== */
.toolbar {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: .7rem .85rem;
    margin-bottom: .85rem;
}

.toolbar .tb-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; }
.toolbar .tb-field { display: flex; align-items: center; gap: .45rem; }
.toolbar .tb-label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); line-height: 1; white-space: nowrap; }
.toolbar .tb-right { margin-left: auto; display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
/* Ens font på ALLE kontroller i værktøjslinjen (dropdowns, knapper, selects) */
.toolbar .btn, .toolbar .form-select, .toolbar .form-control { font-size: .82rem; }

/* ===== Nøgletal-kort ===== */
/* S1.5-12 (bruger-fund 2026-07-25): ALLE brikker på en side skal have SAMME bredde — flex lod sidste
   rækkes brikker (fx Resultatgrad) vokse op mod 1/3-cappen når rækken ombrød. Grid med auto-fill giver
   identiske spor uanset antal (fleksibelt, ikke hardcodet), og en enlig brik fylder ét spor — dermed
   dækkes også bruger-punkt 1 (2026-07-20: enlig brik må ikke fylde hele bredden). */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .85rem; margin-bottom: .85rem; }
.kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: .8rem 1rem .85rem 1.15rem;
    display: flex; flex-direction: column; gap: .3rem;
    position: relative; overflow: hidden;
}
.kpi-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--kpi, var(--accent)); }
.kpi-label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.kpi-value { font-size: 1.5rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-delta { font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; margin-left: .4rem; }

/* MoneyFit (bruger-regel 2026-07-16): beløb i KPI-brikker må ALDRIG ombryde "kr." til næste linje.
   Begge varianter renderes (fuld + t.kr.); money-fit.js måler den usynlige probe mod pladsen og
   toggler .is-compact. Proben er absolute (påvirker ikke layout) men altid målbar — den synlige
   fulde variant er display:none i kompakt tilstand og kan derfor ikke selv måles. */
.money-fit { position: relative; display: block; white-space: nowrap; overflow: hidden; }
.money-fit .mf-probe { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; white-space: nowrap; }
.money-fit .mf-compact { display: none; }
.money-fit.is-compact .mf-full { display: none; }
.money-fit.is-compact .mf-compact { display: inline; }

/* ===== Dropdown ===== */
.dropdown-menu { border-radius: var(--radius-sm); border: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: .4rem; font-size: .86rem; }
.dropdown-item { border-radius: 6px; padding: .4rem .6rem; }
.dropdown-item:hover { background: var(--surface-2); }
/* Det valgte punkt i en menu er TILSTAND. */
.dropdown-item.active, .dropdown-item:active { background: var(--state); color: #fff; }

/* ===== Badges ===== */
.badge { font-weight: 600; border-radius: 6px; }
.badge.bg-secondary { background: var(--text-muted) !important; }
.badge.bg-light { background: var(--surface-2) !important; color: var(--text-muted) !important; border: 1px solid var(--border); }

/* ===== Kort + tabeller ===== */
.table-responsive {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: auto;
    /* Tabellen scroller i sit eget kort (app-shell-flex nedenfor styrer højden, så kortets bund
       altid lander ved skærmkanten — ingen side-scroll oveni tabel-scroll). */
}

/* Når et kolonne-filter er åbent: lad kortet flyde ud, så popoveren må gå ned under nederste
   række (ellers klipper kortets scroll den væk på korte tabeller). Bruger-fund 2026-07-21:
   overflow:visible alene lod TABELLENS EGNE rækker male sig ud over rammen uden at rammen selv
   voksede (.content > .table-responsive har flex-shrink:1 og krymper under indholdets naturlige
   højde) — pagineringslinjen derunder blev så positioneret ved den krympede (for lave) kant og
   overlappede de sidste rækker. flex-shrink:0 tvinger rammen til at vokse til rækkernes fulde
   højde i stedet, så intet efterfølgende element ligger oven i noget.
   Bruger-fund 2026-07-21 (nr. 2 — "horisontalt"): den brede overflow:visible-shorthand fjernede
   OGSÅ overflow-x, så brede tabeller (fx Budgetposter m. 10 kolonner) malede sig ud til højre for
   kortet i stedet for at forblive vandret scrollbare i det. overflow-x:auto genindsat eksplicit —
   kun lodret (popoveren nedad) skal undslippe, ikke vandret (tabellens egen bredde). */
/* AFLIVET 2026-07-29. Reglen kunne aldrig gøre det den lovede: CSS tillader ikke overflow-y:visible
   sammen med overflow-x:auto — browseren laver stille visible om til auto, og målingen bekræftede
   det (computed overflowY = auto). Klipningen forsvandt altså aldrig; til gengæld fjernede
   max-height:none tabellens højde-loft, så hele tabellen HOPPEDE hver gang et filter blev åbnet.
   Panelet er nu position:fixed og klippes slet ikke, så der er intet at slå fra.
   .table-responsive:has(.colfilter-pop) { overflow-y: visible; overflow-x: auto; max-height: none; flex-shrink: 0; } */

/* Tabeller med få, smalle kolonner (fx Budgetposter) skal tilpasse sig deres indhold i stedet for
   at strække ud over hele bredden med store mellemrum mellem kolonnerne. */
.table-responsive.table-fit { width: max-content; max-width: 100%; }

/* Budgetposter: fyld bredden, men hold rækkerne på én linje (ens højde) og lad Notat-kolonnen
   opsuge den ekstra plads, så de øvrige kolonner står tæt i stedet for at sprede sig jævnt. */
.budget-table { width: 100%; }
/* Én linje pr. række. Cifre er TABULAR (F1, testfeedback): beløbskolonner skal flugte lodret —
   det tidligere "proportionale cifre for datoernes skyld" gav hoppende tusindtals-separatorer. */
.budget-table td, .budget-table th { white-space: nowrap; }
/* Notat-kolonnen opsuger den ekstra bredde (men forbliver én linje, så rækkehøjden er ens) */
.budget-table td:nth-last-child(2), .budget-table th:nth-last-child(2) { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; }

.table { margin: 0; color: var(--text); font-size: .76rem; }
.table > :not(caption) > * > * { padding: .32rem .65rem; background: transparent; line-height: 1.4; }

.table thead th {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    border-top: none;
    color: var(--text-muted);
    font-weight: 600;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .045em;
    white-space: nowrap;
    vertical-align: bottom;
    /* Kolonne-overskrifter altid centreret (også på tal-kolonner m. .text-end) */
    text-align: center !important;
    /* Fastlåste kolonne-overskrifter ved scroll i tabellen */
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Anden header-række (måned×metrik / måned×år) lægges under den første */
.table thead tr:nth-child(2) th { top: 1.62rem; z-index: 1; }

.table tbody td, .table tbody th { border-top: 1px solid var(--border); vertical-align: middle; }

/* Tydelig lodret skille-streg mellem grupper (fx år-kolonnerne under samme måned hører sammen) */
.table .border-start { border-left: 2px solid #9aa6bd !important; }
.table thead .border-start { border-left-color: #8793ac !important; }
/* Tabeller med synligt afgrænsede kolonner (bruger 2026-07-25, fx Debitorer): lodret streg mellem
   ALLE kolonner — samme visuelle sprog som overbliks-tabellernes gruppe-afgrænsning, blot 1px. */
.table.cols-divided th + th, .table.cols-divided td + td { border-left: 1px solid var(--border); }
.table > :not(:first-child) { border-top: none; }
.table-hover > tbody > tr:hover > * { background: var(--surface-2); }

/* Rækker med drill-down (børn) markeres med KURSIV navn frem for FED */
.table tbody tr:has(button) > * { font-weight: 400; }
.table tbody tr:has(button) > td:first-child { font-style: italic; }

/* Total/aggregat-rækker */
.table-secondary, .table-secondary > * { background: var(--accent-soft) !important; color: var(--text) !important; }
/* Sektions-overskrifts-rækker (Indtægter/Udgifter i Regnskab) */
.table-light, .table-light > * { background: var(--surface-2) !important; color: var(--text) !important; }

/* Budget-/prognose-tal (fx i Sammenligning) — accentfarve, så de tydeligt adskiller sig fra faktiske tal */
.budget-fig { color: var(--accent); }
/* Bruger-krav 2026-07-30: kun PARENTESERNE er blå (og FEDE, så de er tydelige) — tallet imellem dem
   er sort, eller rødt når det er negativt, og beholder cellens vægt. Spans'ene sættes af
   BudgetTal-komponenten; reglerne her vinder over .budget-fig-arven. */
.budget-fig .budget-paren { font-weight: 700; }
.budget-fig .budget-tal { color: var(--text); }
.budget-fig .budget-tal-neg { color: var(--negative); }

/* ===== Kolonne-filter (popover pr. kolonne) ===== */
/* Usynlig baggrund bag åbne filter-popovers/dropdowns: klik udenfor lukker (bevarer input) */
.cf-backdrop { position: fixed; inset: 0; z-index: 999; background: transparent; }
/* Dropdown-menuer følger appens tekstskala — Bootstraps default (1rem) stak ud fra resten af UI'et. */
.dropdown-menu { font-size: .84rem; }
.dropdown-menu .form-check-label { font-size: .84rem; }
/* Modal-backdrop: DÆMPET (modsat .cf-backdrop, som bevidst er usynlig klikfanger til dropdowns) —
   hvid modal på hvid side fungerer ikke (bruger-fund 2026-07-12). Modal-panelet får ekstra kant+skygge. */
.modal-backdrop-dim { position: fixed; inset: 0; z-index: 1040; background: rgba(15, 23, 42, .45); }
.modal-pop { border: 1px solid var(--border-strong); box-shadow: 0 18px 50px -12px rgba(15, 23, 42, .5), 0 4px 16px rgba(15, 23, 42, .2); }
.colfilter { position: relative; display: inline-block; }
/* Tragten sidder i et tabelhoved, altså på hvid — derfor eget hvile-fyld, ikke --surface. */
.colfilter-trigger {
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--state-rest-border); background: var(--state-rest); color: var(--text-muted);
    border-radius: var(--radius-xs); padding: .2rem .38rem; line-height: 1; cursor: pointer;
}
.colfilter-trigger:hover { color: var(--text); border-color: var(--state-border); background: #dde3ee; }
/* Et aktivt filter er en TILSTAND ("her er skruet på noget"), ikke en handling. */
.colfilter-trigger.active { color: #fff; background: var(--state); border-color: var(--state); }
.colfilter-trigger.active:hover { background: var(--state-hover); border-color: var(--state-hover); }
/* Mens popoveren er åben skal knappen ligge OVER .cf-backdrop (999) — ellers sluger backdroppen
   klikket, og filteret kan ikke lukkes igen ved at klikke på ikonet (bruger-fund 2026-07-28). */
.colfilter-trigger-open { position: relative; z-index: 1000; }
.colfilter-pop {
    position: absolute; z-index: 1050; top: calc(100% + .3rem); left: 0;
    /* +40 % (bruger 2026-07-29): 240→336 og 420→588. Værdierne i filteret er navne — kunder,
       leverandører, betalingsbetingelser — og de blev klemt i den gamle bredde, nu hvor de vises
       som pille-knapper i stedet for afkrydsnings-rækker. */
    width: max-content; min-width: 336px; max-width: 588px; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
    padding: .75rem;
    /* nulstil thead-arv (uppercase/fed/lille) inde i popoveren */
    text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .8rem; color: var(--text); white-space: normal; text-align: left;
}
.colfilter-pop-end { left: auto; right: 0; }
/* Performance-tabellen er en scroll-container; giv plads så et åbent kolonne-filter ikke klippes når tabellen er kort */
.perf-tablewrap { min-height: 20rem; }
/* Interne scroll-containere ved mange rækker (design-kritik 2026-07-21, 50-rækkers-testen). KUN én
   class-selector (specificitet 0,1,0) — :has(.colfilter-pop) ovenfor (0,2,0) vinder AUTOMATISK og
   fjerner klipningen, når et kolonnefilter er åbent, så popoveren aldrig klippes. */
.perf-tablewrap, .salg-scroll, .deb-scroll { max-height: 560px; overflow-y: auto; }
.perf-tablewrap thead th, .salg-scroll thead th, .deb-scroll thead th { position: sticky; top: 0; background: var(--surface); z-index: 2; }
/* Excel-frys (bruger 2026-07-26): på oversigtstabeller med vandret scroll (fx pr. måned) fastholdes
   FØRSTE kolonne, resten scroller — som frosne kolonner i Excel. Kun 1. HEADER-RÆKKES første celle
   (grid-visningernes 2. header-række starter med en data-celle, jf. .overview-grp-fundet). Hjørnecellen
   får z-index 3 (over både sticky thead(2) og række-celler(1)). Solid baggrund er nødvendig — ellers
   ses de scrollende kolonner bag den frosne; total-/sektionsrækker matcher deres egen række-baggrund. */
.sticky-first thead tr:first-child th:first-child { position: sticky; left: 0; z-index: 3; background: var(--surface); }
.sticky-first tbody > tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.sticky-first tr.table-secondary > :first-child, .sticky-first tr.table-light > :first-child { background-color: var(--bs-table-bg); }
/* Fast sum-linje (bruger 2026-07-27): totalen skal blive stående i bunden mens rækkerne scroller —
   samme idé som den frosne thead, bare i den anden ende. Sættes eksplicit med .sticky-total (IKKE
   "sidste fede række": Posteringer har flere sektionsrækker med samme stil, som ikke er totalen).
   Virker både i tabeller med egen scroll (.salg-scroll m.fl.) og på sider hvor .content scroller —
   sticky binder sig til nærmeste scrollende forfader og stopper ved tabellens egen bund.
   z-index 4 = over frossen kolonne (1), thead (2) og thead-hjørnet (3). Solid baggrund er
   nødvendig, ellers ses de scrollende rækker igennem. UNDTAGELSE: mens et kolonnefilter er åbent,
   fjerner :has(.colfilter-pop)-reglen klipningen, og så holder sticky op med at virke — bevidst
   fravalg frem for at komplicere popover-håndteringen. */
.sticky-total > td, .sticky-total > th { position: sticky; bottom: 0; z-index: 4; background-color: var(--bs-table-bg, var(--surface)); }
.sticky-first tr.sticky-total > :first-child { left: 0; z-index: 5; }
.colfilter-label { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 600; margin: 0 0 .15rem; }
.colfilter-list { max-height: 210px; overflow: auto; margin-top: .15rem; padding-right: .15rem; }
.colfilter-check { display: flex; align-items: center; gap: .45rem; padding: .12rem 0; cursor: pointer; }
.colfilter-check input { margin: 0; flex: 0 0 auto; }
.colfilter-actions { display: flex; align-items: center; gap: .4rem; margin-top: .7rem; }

/* Søgbar enkelt-valg dropdown (SearchSelect) — genbruger filter-popoverens liste-stil.
   FUND 2026-07-21 (bruger: "danser i bredde"): outer-div'en har OGSÅ .colfilter (display:inline-block,
   beregnet til et lille filter-ikon) → hele kontrollen krympede til teksten i stedet for at fylde
   feltet, og "dansede" i bredde når valgt værdi skiftede længde. .ss-wrap overstyrer til fuld bredde. */
.ss-wrap { display: block; width: 100%; }
.ss-trigger { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Fund 2026-07-21 (bruger: "popover danser i størrelse"): .colfilter-pop's egen bredde er
   content-drevet (width:max-content, 240-420px) — designet til det lille filter-ikon, hvor
   popoveren SKAL være bredere end triggeren. For SearchSelect skal listen derimod følge FELTETS
   faste bredde, ikke skifte efter den længste valgmuligheds tekst. */
/* Bruger 2026-07-26: popover-boksen 25 % bredere end triggeren (lange kundenavne) — stadig FAST
   bredde relativt til feltet, så den ikke "danser" (jf. fundet 2026-07-21). */
.ss-pop { width: 125%; min-width: 0; max-width: none; }
.ss-list { max-height: 240px; }
.ss-item { display: block; width: 100%; text-align: left; border: 0; background: none; padding: .22rem .4rem; border-radius: var(--radius-xs); font-size: .84rem; color: var(--text); cursor: pointer; }
.ss-item:hover { background: var(--surface-2); }
/* Valgt række i en søgeliste = svag TILSTAND. Tekstfarven er --text, IKKE tilstands-farven:
   tilstands-farve oven på sin egen lyse variant ryger under 4,5:1 (målt 2026-07-28). */
.ss-item.active { background: var(--state-soft); color: var(--text); font-weight: 600; }

/* Klikbare celler/links i tabeller (uden text-reset) vises diskret */
/* :not(.btn) tilføjet 2026-07-21: uden den vandt denne regel (2 klasser) over Bootstraps .btn
   (1 klasse) og gjorde "Forbind igen" (btn-primary i en tabelcelle) usynlig — blå tekst på blå bund. */
.table a:not(.text-reset):not(.btn) { color: var(--accent); text-decoration: none; }
.table a:not(.text-reset):not(.btn):hover { text-decoration: underline; }

/* Små +/− udvid-knapper — fast kompakt størrelse, så rækker med knap ikke bliver højere end rene tekst-rækker */
.btn-outline-secondary.btn-sm.py-0 {
    color: var(--text-muted);
    border-color: var(--border);
    background: var(--surface);
    height: 1.2rem;
    min-width: 1.4rem;
    padding: 0 .3rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-outline-secondary.btn-sm.py-0:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); }

/* ===== Alerts ===== */
.alert { border-radius: var(--radius); border: 1px solid var(--border); font-size: .9rem; box-shadow: var(--shadow-sm); }
.alert-info { background: var(--accent-soft); border-color: var(--accent-border); color: #3730a3; }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.alert-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* ===== Forbindelse: status-prik, re-auth-modal, API-test ===== */
.conn-dot { width: .7rem; height: .7rem; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.conn-dot.conn-ok { background: var(--positive); box-shadow: 0 0 0 3px rgba(21, 163, 74, .18); }

/* Modal der "griber" brugeren når Dinero-tokenet er udløbet */
.reauth-overlay { position: fixed; inset: 0; z-index: 1080; background: rgba(15, 23, 42, .45); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.reauth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 1.25rem 1.4rem; max-width: 440px; width: 100%; max-height: 88vh; overflow-y: auto; }
.reauth-title { font-weight: 600; font-size: 1.05rem; margin-bottom: .5rem; }

.probe-result { max-height: 320px; overflow: auto; background: var(--surface-2); padding: .6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .75rem; margin: 0; }

/* Grupperinger: kompakt gruppering-boks — navn, +konto og firmafarvede konto-chips på linje */
.grp-item { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .5rem .7rem; margin-bottom: .45rem; background: var(--surface); }
.grp-item.grp-system { background: var(--surface-2); }
.grp-head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.grp-chip { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 600; padding: .05rem .5rem; border: 1px solid; border-radius: 999px; white-space: nowrap; line-height: 1.6; }
.grp-chip-x { background: none; border: 0; padding: 0; font-size: .95rem; line-height: 1; cursor: pointer; opacity: .5; }
.grp-chip-x:hover { opacity: 1; }
/* Fund 2026-07-21: egen padding gjorde knappen lavere end nabo-knappen "Slet" (uens højde). Kun
   font-weight tilbage — standard btn-sm-padding deles med Slet, så begge har samme størrelse. */
.grp-add-btn { font-weight: 600; }
.grp-add { margin-top: .55rem; padding-top: .55rem; border-top: 1px dashed var(--border); }
.grp-acct-list { display: flex; flex-wrap: wrap; gap: .1rem 1.1rem; max-height: 190px; overflow: auto; padding: .1rem .1rem .1rem 0; }
.grp-acct-check { display: flex; align-items: center; gap: .45rem; font-size: .8rem; cursor: pointer; padding: .12rem 0; min-width: 230px; }
.grp-acct-check input { margin: 0; flex: 0 0 auto; }

/* ===== Diverse ===== */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--positive); }
.invalid { outline: 1px solid var(--negative); }
.validation-message { color: var(--negative); }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: var(--radius-sm);
}

    .blazor-error-boundary::after { content: "Der opstod en fejl."; }

.darker-border-checkbox.form-check-input { border-color: #929292; }

/* FUND 2026-07-21 (bruger: "danser i toppen af mange sider"): den faste synk-knap (top højre,
   position:fixed) overlappede geometrisk Budget/Grupperingers højrestillede header-handlinger, da
   de sad i samme række som h1. Løst ved at fjerne h1-rækkens højrestillede indhold helt (Eksportér/
   Importér flyttet ned i værktøjslinjen/panelet i stedet) — ingen global klasse behøves længere.
   Grupperinger har sin egen lokale .grp-toolbar-top til samme formål (sidste ramme uden h1 foran). */

/* ===== Synk-knap (altid synlig, øverste højre hjørne) ===== */
.sync-fab {
    position: fixed;
    top: .8rem;
    /* 1.5rem = 24px = samme som .content px-4 (bruger-fund 2026-07-28). Med 1.1rem stak Opdatér-
       knappen 6,4px længere ud end værktøjslinjen, KPI-rækken og tabellen, som alle flugter på
       indholds-kolonnens højre kant. Den er position:fixed, så den skal måles mod VIEWPORTEN og
       have samme tal som indholdets vandrette padding — ikke et løsrevet skøn. */
    right: 1.5rem;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.sync-fab .sync-ico { display: inline-block; font-size: 1rem; line-height: 1; vertical-align: -1px; }
.sync-fab .btn-primary { box-shadow: var(--shadow); }
/* Fremdrifts-boks under synk — hvid baggrund så teksten kan læses oven på sideindholdet */
.sync-fab-box {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: .35rem .65rem;
    box-shadow: var(--shadow-lg);
    font-size: .82rem;
    max-width: 24rem;
}
.sync-fab-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.sync-fab-sub { font-size: .7rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sync-fab-cancel { color: var(--text-muted); text-decoration: none; font-weight: 600; }
.sync-fab-cancel:hover { color: var(--negative); }
.sync-fab-badge { font-weight: 700; font-size: 1rem; }
.sync-fab-ok { color: var(--positive); }
.sync-fab-err { color: var(--negative); }

/* "Sidst opdateret"-stempel til venstre for Refresh — boks i ~90% af knappens højde, lodret
   centreret (via .sync-fab align-items:center). Ramme + tekst farves efter datafriskhed. */
/* Sammensmeltet "stempel + Opdatér" (bruger-ønske 2026-07-23): ét segmenteret element, samme
   højde, delt ramme. Stempel-segmentet farves efter datafriskhed; knap-segmentet er den blå CTA. */
.refresh-group {
    display: inline-flex;
    align-items: stretch;
    height: 2rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    background: var(--surface);
}
.refresh-seg {
    display: inline-flex;
    align-items: center;
    padding: 0 .6rem;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}
.refresh-btn {
    display: inline-flex;
    align-items: center;
    padding: 0 .95rem;
    border: 0;
    border-left: 1px solid var(--border-strong);
    background: var(--accent);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}
.refresh-btn:hover { filter: brightness(.94); }
.refresh-group.stamp-green  .refresh-seg { color: var(--positive); }
.refresh-group.stamp-yellow .refresh-seg { color: #a16207; }
.refresh-group.stamp-red    .refresh-seg { color: var(--negative); }

/* ===== Graf-hover (inline SVG): oejeblikkelige, stylede vaerdier - ren CSS, ingen JS (ChartTooltip.cs) ===== */
.kt-pt .kt-band { opacity: 0; }
.kt-pt:hover .kt-band { opacity: .08; }
.kt-pt .kt-tip { opacity: 0; pointer-events: none; transition: opacity .06s ease; }
.kt-pt:hover .kt-tip { opacity: 1; }

/* Side-specifikt hjælpe-ikon i topbaren, til venstre for "sidst opdateret" (bruger 2026-07-27).
   Samme diskrete stil som ⓘ-ikonerne inde på siderne, bare med luft ud til stemplet. */
.topbar-hint { margin-right: .55rem; font-size: 1rem; line-height: 1; cursor: help; }