/* ===========================================================
   PurchaseInvoiceAI (2doOrderFlow) — 2do product theme (Fase 1, 2026-10-14; was "Quiet Precision")
   --------------------------------------------------------- */

:root {
    /* ── 2do product theme (Fase 1 redesign, cb 2026-10-14) ──────────────────────────────
       The canonical tokens. The legacy names below (--paper, --ink, --hairline, --warning-soft …) are kept as
       ALIASES so every existing rule follows the new palette without being rewritten. */
    --bg:     #F5F7F9;
    --card:   #FFFFFF;
    --line:   #DCE3E8;
    --fg:     #13232D;
    --muted:  #55636D;            /* 5.9:1 on --bg */
    --petrol: #113A4E;
    --cta:    #007CBA;            /* 4.6:1 with white text */
    --cta-hover: #00669A;
    --soft:   #E8F1F6;
    --ok:     #2E7D4F;
    --warn:   #9A5B00;            /* 5.5:1 on white */
    --bad:    #B23A27;
    --ai:     #6B4FBB;

    /* Surface palette (legacy names → new tokens) */
    --paper:          var(--bg);
    --paper-2:        #EDF1F4;
    --ink:            var(--fg);
    --ink-2:          #2F404B;
    --ink-3:          var(--muted);
    /* --ink-4 is for NON-text only (chevrons, icons, scrollbars). Real text uses --ink-3 or darker. */
    --ink-4:          #8C99A3;
    --hairline:       var(--line);
    --hairline-2:     #C9D4DC;
    --hairline-strong:var(--fg);

    /* Accents — NO yellow fills anywhere (cb 2026-10-14): --warning-soft is white; warnings are coloured
       text + border on white. */
    --accent:         var(--petrol);
    --accent-soft:    #1B4E66;
    --positive:       var(--ok);
    --positive-soft:  #E3F3EA;
    --warning:        var(--warn);
    --warning-ink:    var(--warn);
    --warning-soft:   #FFFFFF;
    --danger:         var(--bad);
    --danger-ink:     var(--bad);
    --danger-soft:    #FBE7E3;
    --info:           #00669A;
    --info-soft:      var(--soft);

    /* Typography: DM Sans (UI), Syne (brand + page/section titles), JetBrains Mono (numbers/dates) */
    --font-display: 'Syne', 'DM Sans', system-ui, sans-serif;
    --font-sans:    'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

    /* Geometry */
    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 16px;
    --shadow-1:  0 1px 2px rgba(17,58,78,.05);
    --shadow-2:  0 10px 30px rgba(17,58,78,.12);

    --duration: 160ms;
    --ease:     cubic-bezier(.2,.7,.3,1);

    /* Bootstrap overrides — Bootstrap "primary" follows the CTA colour */
    --bs-body-font-family: var(--font-sans);
    --bs-body-color: var(--fg);
    --bs-body-bg: var(--bg);
    --bs-border-color: var(--line);
    --bs-border-radius: var(--radius);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-primary: #007CBA;
    --bs-primary-rgb: 0, 124, 186;
    --bs-link-color: #007CBA;
    --bs-link-color-rgb: 0, 124, 186;
    --bs-link-hover-color: #00669A;
    --bs-link-hover-color-rgb: 0, 102, 154;
    --bs-warning-rgb: 154, 91, 0;
}

/* ============================================================
   Foundation
   ============================================================ */

html { font-size: 14px; }
@media (min-width: 768px) { html { font-size: 15px; } }

body {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    margin-bottom: 0;
    background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink);
}
h1 { font-size: 1.75rem; line-height: 1.15; }
h5 { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
h6 { font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

code { font-family: var(--font-mono); font-size: .85em; }

/* Semantic colour-coding for vendor item numbers vs. EAN — bogholderen skal
   kunne skelne dem på et blik, både i "uden match"-tabellerne og i multi-mapping. */
/* Neutral som default — IKKE rød. Rød er forbeholdt ægte ikke-match (code-unmatched), så et
   gyldigt lev.varenr ikke fejlagtigt ser ud som en fejl (kundeklage 2026-06-09). */
code.code-vendor { color: var(--ink-2, #4a4538); font-weight: 600; white-space: nowrap; }
code.code-vendor-neutral { color: var(--ink-2, #4a4538); }
code.code-ean    { color: var(--ink-3);  font-weight: 500; white-space: nowrap; }   /* warm grey */
/* Salgs-/kundeordrenr. (ReferenceNumber) — neutral blålig, tydeligt adskilt fra lev.nr/EAN. */
code.code-ref    { color: #1d4a6a; font-weight: 600; white-space: nowrap; }
/* Når feltet matcher mellem OB-siden og UC-siden — mørk grøn så bogholderen ser
   "her stemmer det" på et blik. */
code.code-matched   { color: #0f5132 !important; font-weight: 700; }   /* dark green */
/* Eksplicit IKKE-match (vises rødt) — bruges fx på EAN når feltet mangler eller
   ikke har et modstykke på den anden side. */
code.code-unmatched { color: #b02a37 !important; font-weight: 600; }   /* dark red */
span.code-unmatched { color: #b02a37; font-weight: 600; }              /* same red for em-dash placeholder */
/* Varenavnet (mm-line-main + strong) toner mørkgrøn ved navn-match. */
.mm-line-main.name-matched { color: #0f5132; }
.mm-line-main.name-matched strong { color: #0f5132; }

.text-num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* ============================================================
   Utility modifiers — replace common inline-styles in Razor pages
   ============================================================ */
.surface-tinted    { border: 1px solid #e3dccc; }
.text-xxs          { font-size: .7rem; }
.mm-mapping-wrap   { border-color: rgba(45, 95, 76, .3); }
.mm-mapping-head   { background: var(--positive-soft); }
.mm-mapping-title  { color: var(--positive); }
.badge-auto-match  { background: #e8f4ee; color: #2d5f4c; }
.row-check-col     { width: 1%; }
.scroll-tall       { max-height: 340px; }
.lev-date-cell     { font-size: .78rem; white-space: nowrap; }
.header-edit-bg    { border: 1px solid var(--hairline, #dee2e6); }

/* ============================================================
   Top app shell
   ============================================================ */

.app-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    -webkit-backdrop-filter: saturate(140%) blur(16px);
}

.app-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--ink);
}
.app-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.app-nav { display: flex; gap: 2px; }
.app-nav-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
    transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.app-nav-link:hover { background: var(--paper-2); color: var(--ink); }
/* Adgangskontrol: lille tæller på "Admin" når brugere afventer godkendelse + "admin"-mærke ved navnet. */
.app-nav-badge { display: inline-block; margin-left: .35rem; min-width: 1.15rem; padding: 0 .35rem; border-radius: 999px;
                 background: var(--warning-ink); color: #fff; font-size: .7rem; font-weight: 600; line-height: 1.15rem; text-align: center; vertical-align: 1px; }
.app-user-role  { display: inline-block; margin-left: .4rem; padding: 0 .4rem; border-radius: 999px; border: 1px solid var(--hairline-2);
                 background: var(--paper-2); color: var(--ink-3); font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; }
.app-nav-link.active { background: var(--ink); color: var(--paper); }

/* Nav-dropdowns (Leverandører / Admin / Indstillinger) */
.app-nav .dropdown { display: inline-flex; }
.app-nav .dropdown-toggle::after { margin-left: .35em; vertical-align: middle; opacity: .6; }
.app-nav .app-nav-dropdown .dropdown-item {
    border-radius: 6px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--ink-2);
    padding: 6px 10px;
}
.app-nav .app-nav-dropdown .dropdown-item:hover,
.app-nav .app-nav-dropdown .dropdown-item:focus { background: var(--paper-2); color: var(--ink); }

.app-user-info { line-height: 1.1; }
.app-user-name { font-size: .82rem; font-weight: 500; color: var(--ink); }
.app-user-company { font-size: .72rem; color: var(--ink-3); font-family: var(--font-mono); }

/* ── Systemstatus i headeren ────────────────────────────────────────────────
   Vises KUN ved fejl (se _SystemStatus.cshtml). Skal fange øjet uden at ligne
   en fejlside — derfor en rolig terracotta-pille, ikke et fuldbredde-banner. */
.app-sysstatus-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .28rem .6rem; border-radius: 999px;
    font-size: .78rem; font-weight: 500;
    text-decoration: none; white-space: nowrap;
    border: 1px solid transparent;
}
.app-sysstatus-dot { width: .5rem; height: .5rem; border-radius: 50%; flex: 0 0 auto; }

/* OK: bevidst diskret — ingen ramme, dæmpet tekst. Bekræfter at overvågningen virker,
   uden at stjæle opmærksomhed fra den røde tilstand. */
.app-sysstatus-btn.is-ok { background: transparent; color: var(--ink-3); }
.app-sysstatus-btn.is-ok:hover { background: var(--paper-2); color: var(--ink); }
.app-sysstatus-btn.is-ok .app-sysstatus-dot { background: var(--positive); }

/* FEJL: fuld pille + pulserende prik. Skal fange øjet. */
.app-sysstatus-btn.is-failed {
    background: var(--danger-soft); border-color: rgba(200,75,49,.22); color: var(--danger-ink);
}
.app-sysstatus-btn.is-failed:hover { background: #F8D9CF; color: var(--danger-ink); }
.app-sysstatus-btn.is-failed .app-sysstatus-dot {
    background: var(--danger); animation: sysstatus-pulse 2s ease-in-out infinite;
}

/* UKENDT: neutral grå — vi påstår hverken OK eller fejl. */
.app-sysstatus-btn.is-unknown { background: transparent; color: var(--ink-3); }
.app-sysstatus-btn.is-unknown:hover { background: var(--paper-2); }
.app-sysstatus-btn.is-unknown .app-sysstatus-dot { background: var(--ink-3); opacity: .5; }

@keyframes sysstatus-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .app-sysstatus-dot { animation: none !important; } }

.app-sysstatus-menu { width: 22rem; padding: 0; border-radius: 10px; overflow: hidden; }
.app-sysstatus-head {
    font-weight: 600; font-size: .82rem; padding: .55rem .8rem;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.app-sysstatus-head.is-failed  { background: var(--danger-soft); color: var(--danger-ink); border-bottom-color: rgba(200,75,49,.18); }
.app-sysstatus-head.is-ok      { background: var(--positive-soft); color: var(--positive); }
.app-sysstatus-head.is-unknown { background: var(--paper-2); color: var(--ink-3); }
.app-sysstatus-body { padding: .7rem .8rem; font-size: .8rem; color: var(--ink); line-height: 1.45; }
.app-sysstatus-body p { margin-bottom: .55rem; }
.app-sysstatus-body code { font-size: .74rem; color: var(--ink-3); }
.app-sysstatus-acct { color: var(--ink-3); font-size: .74rem; }

.app-main-wrap { padding-bottom: 60px; }

.app-footer {
    padding: 16px 0;
    font-size: .75rem;
}
.app-footer-sep { margin: 0 8px; opacity: .5; }

/* ============================================================
   Cards — papery + crisp
   ============================================================ */

.card {
    overflow: hidden;
}
.card-body { padding: 1rem 1.25rem; }
.card-body h5:first-child { margin-top: 0; margin-bottom: .75rem; }

/* ============================================================
   Forms
   ============================================================ */

.form-control, .form-select {
    background: #FFFFFE;
    font-size: .875rem;
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.form-control-sm, .form-select-sm { font-size: .8125rem; padding: 4px 10px; }

.form-label { font-size: .78rem; font-weight: 600; letter-spacing: .02em; }

.form-check-input {
    border-radius: 4px;
}
.form-check-label { font-size: .82rem; }

/* ============================================================
   Buttons — slab feel
   ============================================================ */

.btn {
    font-size: .8125rem;
    padding: 6px 14px;
    transition: transform var(--duration) var(--ease),
                background var(--duration) var(--ease),
                color var(--duration) var(--ease),
                border-color var(--duration) var(--ease);
    letter-spacing: -0.005em;
}
.btn:active { transform: translateY(1px); }
.btn-sm { font-size: .78rem; padding: 4px 10px; }

.btn-primary:disabled { background: var(--ink-4); border-color: var(--ink-4); opacity: .6; }


.btn-outline-secondary { background: transparent; border-color: var(--hairline-2); color: var(--ink-2); }
.btn-outline-secondary:hover { background: var(--paper-2); color: var(--ink); }

.btn-link {
    text-decoration: none;
    padding: 6px 8px;
}
.btn-link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   Tables — financial precision
   ============================================================ */

.table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--hairline);
    font-size: .81rem;
    margin-bottom: 0;
}
.table thead th {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--hairline-2);
    padding: 8px 12px;
    white-space: nowrap;
}
.table tbody td {
    padding: 8px 12px;
    vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table-hover > tbody > tr:hover > * {
    --bs-table-color-state: var(--ink);
    --bs-table-bg-state: var(--paper-2);
}
.table tfoot th {
    border-top: 1px solid var(--hairline-2);
    font-size: .78rem;
    font-weight: 600;
    color: var(--ink);
    padding: 10px 12px;
}

.table td .num,
.table th .num,
.text-end .num,
.table .text-end {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* Bordered variant — gentler than bootstrap's */
.table-bordered { border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; }
.table-bordered > :not(caption) > * > * { border-color: var(--hairline); }

.table-responsive { border-radius: var(--radius); }

/* Row state colors — flatter, refined */
.table-primary  { --bs-table-bg: #E8EEF9; --bs-table-color: var(--ink); }
.table-success  { --bs-table-bg: var(--positive-soft); --bs-table-color: var(--ink); }
.table-warning  { --bs-table-bg: var(--warning-soft);  --bs-table-color: var(--ink); }
.table-danger   { --bs-table-bg: var(--danger-soft);   --bs-table-color: var(--ink); }
.table-light    { --bs-table-bg: var(--paper-2); --bs-table-color: var(--ink); }

.table-sm tbody td, .table-sm thead th { padding: 6px 10px; }

/* Sticky header sat lige tilbage på paper-2 */
.table thead.sticky-top th { z-index: 5; }

/* ============================================================
   Badges — pill, low contrast, type-led
   ============================================================ */

/* Bootstrap's .bg-*/.text-* classes carry their own !important — only way to override the
   background-color and color in our .badge pill is with !important too. Scoped to .badge
   so we don't carpet-bomb the rest of the page. */
.badge.bg-secondary { background: var(--paper-2)      !important; color: var(--ink-2)   !important; border-color: var(--hairline-2); }
.badge.bg-success   { background: var(--positive-soft) !important; color: var(--positive) !important; border-color: rgba(45,95,76,.2); }
.badge.bg-warning   { background: var(--warning-soft)  !important; color: var(--warning-ink) !important; border-color: rgba(184,126,37,.2); }
.badge.bg-danger    { background: var(--danger-soft)   !important; color: var(--danger-ink) !important; border-color: rgba(200,75,49,.2); }
.badge.bg-info      { background: var(--info-soft)     !important; color: var(--info)     !important; border-color: rgba(30,78,140,.2); }
.badge.bg-primary   { background: var(--ink)          !important; color: var(--paper)   !important; }
.badge.bg-light     { background: var(--paper-2)      !important; color: var(--ink-2)   !important; border-color: var(--hairline); }

/* ============================================================
   Alerts — borderless, type-led
   ============================================================ */

.alert {
    border: 1px solid;
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: .82rem;
}
.alert-info    { background: var(--info-soft);     border-color: rgba(30,78,140,.15);  color: var(--info); }
.alert-warning { background: var(--warning-soft);  border-color: rgba(184,126,37,.18); color: var(--warning-ink); }
.alert-danger  { background: var(--danger-soft);   border-color: rgba(200,75,49,.18);  color: var(--danger-ink); }
.alert-success { background: var(--positive-soft); border-color: rgba(45,95,76,.18);   color: var(--positive); }
.alert strong { font-weight: 600; }

/* ============================================================
   Page-specific: Invoice Details
   ============================================================ */

.invoice-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0 14px;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 16px;
}
.invoice-hero-title {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-family: var(--font-display);
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 400;
    letter-spacing: -.015em;
    margin: 0;
}
.invoice-hero-num {
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--ink-3);
    letter-spacing: 0;
    font-weight: 500;
}
.invoice-hero-name { color: var(--ink); }
.invoice-hero-name em { font-style: italic; font-weight: 300; color: var(--positive); }
.invoice-hero-titlewrap { display: flex; flex-direction: row; align-items: center; gap: 12px; min-width: 0; flex: 0 1 auto; flex-wrap: wrap; }
.invoice-hero-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.invoice-hero-meta .badge { font-weight: 500; font-size: .72rem; padding: 4px 8px; }
.invoice-hero-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex: 1 1 auto; justify-content: flex-end; }
.invoice-hero-actions-spacer { flex: 1; }

/* Primary call-to-action in the hero / action bar. Bigger + bolder than the sm sibling
   buttons so the user's eye finds them first. Solid fill, never outline. */
.btn-hero-primary {
    font-weight: 500;
    padding: .45rem 1.1rem;
    font-size: .95rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.btn-hero-primary.btn-success {
    background-color: var(--positive, #2d5f4c);
    border-color: var(--positive, #2d5f4c);
    color: #fff;
}
.btn-hero-primary.btn-success:hover:not(:disabled) {
    background-color: #234a3b;
    border-color: #234a3b;
    color: #fff;
}
.btn-hero-primary.btn-primary {
    background-color: #1e4a7a;
    border-color: #1e4a7a;
    color: #fff;
}
.btn-hero-primary.btn-primary:hover:not(:disabled) {
    background-color: #173961;
    border-color: #173961;
}
.btn-hero-primary:disabled { opacity: .55; }

/* Definition list — paper-like */
.def-list {
    display: grid;
    grid-template-columns: minmax(110px, max-content) 1fr;
    gap: 6px 16px;
    margin: 0;
    font-size: .82rem;
}
.def-list dt {
    font-weight: 500;
    color: var(--ink-3);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    align-self: center;
}
.def-list dd { margin: 0; color: var(--ink); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.def-list dd.dd-text { font-family: var(--font-sans); }

/* Linked supplier panel inside header */

/* Two-column shell: scrolling main content + sticky PDF aside.
   Højre kolonnes bredde styres af CSS-variablen --pdf-col-width som JS opdaterer når
   brugeren trækker i resize-handlen. Default-værdien er ~10% bredere end før.
   gap = 12px så resize-handlen (8px) får et lille luft-rum omkring sig. */
.invoice-shell {
    --pdf-col-width: clamp(420px, 42vw, 680px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8px var(--pdf-col-width);
    gap: 12px;
    align-items: start;
}

/* Bootstrap modals are positioned fixed, but when they sit INSIDE .invoice-shell-aside's
   sticky stacking context (or any other transformed/positioned ancestor), they end up painted
   behind the PDF iframe in the right column. Bump the z-index so modals + their backdrop
   ALWAYS render above the page chrome. */
.modal { z-index: 100000 !important; }
.modal-backdrop { z-index: 99999 !important; }
.invoice-shell-main  { min-width: 0; }
.invoice-shell-aside { position: sticky; top: calc(var(--app-header-h, 57px) + 19px); align-self: start; }

/* Resize-handle mellem main + aside. Sticky så den følger PDF'en når brugeren scroller. */
.invoice-shell-resize {
    position: sticky;
    top: calc(var(--app-header-h, 57px) + 19px);
    align-self: stretch;
    min-height: 200px;
    width: 8px;
    cursor: col-resize;
    background: transparent;
    transition: background-color .15s ease;
    user-select: none;
    touch-action: none;
}
.invoice-shell-resize:hover,
.invoice-shell-resize.is-dragging {
    background: var(--accent, #b75c1a);
    opacity: .35;
}
/* Visual hint: lille dot-stribe midt i handlen så brugeren ser hvor man kan tage fat. */
.invoice-shell-resize::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 2px; height: 40px;
    background: var(--ink-3, #6b6357);
    opacity: .25;
    border-radius: 2px;
}
.invoice-shell-resize:hover::before { opacity: .8; }

@media (max-width: 1199px) {
    .invoice-shell { grid-template-columns: 1fr; }
    .invoice-shell-aside { position: static; }
    .invoice-shell-resize { display: none; }
}
@media (max-width: 767px) {
    .invoice-hero { flex-wrap: wrap; gap: 8px; }
    .invoice-hero-actions { flex-wrap: wrap; gap: 6px; }
    .invoice-header-row { --header-card-height: auto; }
    .pdf-frame iframe { min-height: 60vh; }
}

/* Inbox section rows separating "received" from "missing document" */
.inbox-section-row td.inbox-section-header {
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 10px 14px;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

/* Skip-regel-ikon på Mailbox-rækker. Dæmpet som default, springer i øjnene på hover
   så bogholderen ikke klikker tilfældigt. */
.mail-skip-icon {
    opacity: .35;
    text-decoration: none !important;
    line-height: 1;
    font-size: .9rem;
}
.mail-skip-icon:hover { opacity: 1; transform: scale(1.15); }

/* Intern bemærkning (Uniconta's DoitInternalRemarks user-field on CreditorOrder)
   — vises som en lille linje under faktura-id/reference på Inbox så bogholderen
   ikke behøver åbne ordren i Uniconta for at se kollegaens note. */
.internal-remarks-cell {
    font-size: .72rem;
    color: var(--ink-3, #6b6357);
    margin-top: 2px;
    font-style: italic;
    word-break: break-word;
}
.internal-remarks-lbl {
    font-weight: 600;
    font-style: normal;
    text-transform: uppercase;
    font-size: .7rem;
    letter-spacing: .03em;
    margin-right: 3px;
    opacity: .8;
}

/* Quick-win fixes — see frontend review */
.delivery-notes-card .table td,
.map-table-wrap .table td { word-break: break-word; }

/* Beløbs- og antal-kolonner må ALDRIG brydes — "1.234,56" på 2 linjer ser ud
   som en bug. Gælder begge "uden match"-tabeller. */
.map-table-wrap .table td.text-end,
.map-table-wrap .table th.text-end { white-space: nowrap; }

/* Kombineret vare-celle: navn øverst (kan wrappe), koder under (Varenr · Lev.nr · EAN).
   Samme pattern som multi-mapping-cellerne så bogholderen ser ensartet layout overalt. */
.cell-item-stack { min-width: 220px; }
.cell-item-stack .item-name {
    font-weight: 500;
    line-height: 1.25;
    margin-bottom: 3px;
    word-break: break-word;
}
.cell-item-stack .item-codes {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    font-size: .72rem;
    line-height: 1.3;
}
.cell-item-stack .item-code-label {
    color: var(--ink-3, #6b6357);
    text-transform: uppercase;
    font-size: .7rem;
    letter-spacing: .03em;
    font-weight: 600;
    margin-right: 2px;
    align-self: center;
}
.cell-item-stack code { font-size: .75rem; }
/* Salgs-UDF'er (Salgsref/Sælger) under item-koderne i "Ordrelinjer uden match". */
.cell-item-stack .item-sales {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    font-size: .72rem;
    line-height: 1.3;
    margin-top: 2px;
}
.cell-item-stack .item-sales .sales-val { color: var(--ink-2, #333); font-weight: 500; }

@media (max-width: 1280px) {
    .comparison-value, .comparison-diff { font-size: 1.05rem; }
}

/* Floating toast — for AJAX-actions hvor brugeren er scrollet væk fra toppen.
   Vises altid i øverste højre hjørne uanset scroll-position. */
.floating-toast {
    position: fixed;
    top: 80px;
    right: 24px;
    z-index: 2000;
    min-width: 280px;
    max-width: 480px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    border-radius: 8px;
    animation: toast-fade 5s ease-in forwards;
}

/* Flash messages — shown for ~4s then hidden via JS in _Layout. No height/margin
   animation so the page doesn't jump when the toast disappears. */
.toast-flash.is-hidden {
    display: none;
}

/* Toolbar on list pages (Inbox, Mailbox) — stacked rows: primary (title + status-faner)
   then filters (søgning + dato-intervaller). Holder kontrollerne pænt adskilt i stedet for
   at presse alt ned på én linje. */
.inbox-toolbar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px 0 14px;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 16px;
}
.inbox-toolbar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
/* Status-fanerne flyttes til venstre (efter titlen) i stedet for helt ud til højre,
   så de læses som den primære navigation. */
.inbox-toolbar-row--primary .status-tabs { margin-left: 0 !important; }
.inbox-toolbar-row--filters { gap: 16px; }
.inbox-toolbar-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: -.015em;
    margin: 0;
    white-space: nowrap;
}
.inbox-toolbar-search { max-width: 340px; flex: 1 1 280px; }

/* Multi-select filter dropdown — explicit colours + z-index so it actually shows up over
   sticky table headers and on top of card-bodies (Bootstrap defaults get overridden by
   the page-level CSS variables in some browsers). */
.inbox-filter-menu {
    background: #ffffff !important;
    border: 1px solid #c9c2ad;
    border-radius: 8px;
    z-index: 1080;
}
.inbox-filter-menu .dropdown-item { border-radius: 4px; }
.inbox-filter-menu hr { border-color: #ece8da; }
@media (max-width: 767px) {
    .inbox-toolbar-search { max-width: none; flex: 1 1 100%; }
    .inbox-date-filters { width: 100%; }
}

/* Bottom action bar — mirrors the hero actions for long pages */
.invoice-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--paper-2);
    border: 1px solid var(--hairline-2);
    border-radius: 8px;
    position: sticky;
    bottom: 12px;
    z-index: 5;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    flex-wrap: wrap;
}
.invoice-action-bar-left, .invoice-action-bar-right {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}

/* PDF viewer toolbar above the iframe */
.pdf-toolbar {
    display: flex; gap: 6px; padding: 6px 4px;
    border-bottom: 1px solid var(--hairline-2);
    background: var(--paper-2);
}
.pdf-toolbar .btn { padding: 2px 10px; font-size: .8rem; }

/* Sortable table column headers */
th.sortable { user-select: none; }
th.sortable:hover { color: var(--positive); }
th.sortable .sort-ind { font-size: .7rem; color: var(--positive); }

/* Order header snapshot: multi-line free text (purchase text / remark) keeps its line breaks. */
.oh-multiline { white-space: pre-wrap; }

/* Header row — both columns share a min-height for visual alignment, but the LEFT card
   (fakturahoved) is allowed to grow with its content (CVR + edit forms + tving-ordre form
   easily exceed 340px). The right card has its own inner scroller for the notes table. */
.invoice-header-row { --header-card-height: 340px; }
.invoice-header-row > [class*="col-"] { display: flex; }
.invoice-header-row .card {
    width: 100%;
    min-height: var(--header-card-height);
    display: flex;
    flex-direction: column;
}
.invoice-header-row .card-body {
    flex: 1;
    min-height: 0;
}
/* The delivery-notes card pins to a fixed height because its inner table can be very long
   and we want it scrollable rather than blowing up the whole header row. */
.invoice-header-row .card-body.delivery-notes-card {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: var(--header-card-height);
}

/* PDF iframe wrapper. Browserens egen PDF.js viewer kører inde i iframen og har sin
   egen zoom/scroll/rotate i bundbaren — vi skal bare lade den fylde. Wrapperen klipper
   ikke (overflow:hidden), iframen håndterer selv intern scroll for landscape-PDF'er. */
.pdf-frame {
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #2A2A26;
    box-shadow: var(--shadow-2);
    position: relative;
    display: flex;
    flex-direction: column;
}
.pdf-frame iframe {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.pdf-frame--sticky {
    height: calc(100vh - var(--app-header-h, 57px) - 43px);
    min-height: 600px;
}
@media (max-width: 1199px) {
    .pdf-frame--sticky { height: 600px; }
}

/* Delivery-notes card: header pinned, table scrolls inside the remaining space. */
.delivery-notes-card { padding: 12px 14px !important; }
.delivery-notes-card .section-head,
.delivery-notes-card .map-search-wrap,
.delivery-notes-card .dn-filter-pill { flex-shrink: 0; }
.delivery-notes-card .map-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
    overflow-y: auto;
    overflow-x: auto;
}
.delivery-notes-card .table th,
.delivery-notes-card .table td { padding: 5px 8px; font-size: .76rem; }

/* Section heading — small caps stripe */
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.section-title {
    margin: 0;
    font-size: 1.1rem;
    letter-spacing: -0.015em;
    display: flex;
    align-items: center;
    gap: 10px;
}
.section-title::before {
    content: '';
    width: 3px;
    height: 16px;
    border-radius: 2px;
}

/* Inline help box for settings/rule forms — quiet, info-tinted, easy to skim. */
.rule-help {
    border: 1px solid var(--hairline-2, #D8D4C9);
    border-radius: var(--radius-sm, 4px);
    padding: .55rem .7rem;
    font-size: .85rem;
    line-height: 1.5;
}
.rule-help ul { padding-left: 1.1rem; }
.rule-help strong { color: var(--ink, #1A1A17); }

/* Comparison banner — gradient hairline-bordered */
.comparison {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 18px;
    border-radius: var(--radius);
    border: 1px solid var(--hairline);
    font-size: .85rem;
}
.comparison-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; }
.comparison-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.comparison-diff  { font-family: var(--font-display); font-weight: 500; }
.comparison-diff--ok   { color: var(--positive); }
.comparison-diff--warn { color: var(--danger-ink); }
.comparison-diff--bad  { color: var(--danger-ink); }

.comparison-sep {
    width: 1px;
    height: 22px;
    background: var(--hairline-2);
    flex-shrink: 0;
}

/* Stats strip in section header */
.stat-chips { display: flex; gap: 6px; }
.stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--hairline-2);
    font-size: .73rem;
    font-weight: 500;
}
.stat-chip-num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ink);
}
.stat-chip--ok .stat-chip-num,
.stat-chip--bad .stat-chip-num,
.stat-chip--warn .stat-chip-num { color: inherit; }

/* Toggle group (Bootstrap segmented control) */
.toggle-group {
    display: inline-flex;
    background: var(--paper-2);
    border: 1px solid var(--hairline-2);
    border-radius: var(--radius);
    padding: 2px;
}
.toggle-group > a {
    padding: 4px 12px;
    border-radius: 6px;
    font-size: .78rem;
    font-weight: 500;
    color: var(--ink-3);
    text-decoration: none;
    transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.toggle-group > a:hover { color: var(--ink); }
.toggle-group > a.toggle-active {
    background: #FFFFFE;
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(26,26,23,.05);
}

/* Mapping panel — two columns + sticky bottom action bar */
.map-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 992px) { .map-panel { grid-template-columns: 1fr; } }

.map-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.map-col-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0;
}
.map-col-title::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.map-col-title--invoice::before { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.map-col-title--note::before    { background: var(--warning); }

.map-col-count { font-family: var(--font-mono); font-size: .75rem; color: var(--ink-3); }

.map-search-wrap { position: relative; margin-bottom: 6px; }
.map-search-wrap::before {
    content: '⌕';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-4);
    font-size: 14px;
    pointer-events: none;
}
.map-search-wrap input[type=search] { padding-left: 28px; }
/* "Vis kun modtagne"-checkbox under note-søgefeltet. Lille, venstrestillet, egen linje. */
.map-filter-check {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    font-size: .78rem;
    color: var(--ink-3, #555);
    cursor: pointer;
    user-select: none;
}
.map-filter-check input { cursor: pointer; }

.map-table-wrap {
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    max-height: 380px;
    overflow: auto;
    background: #FEFEFB;
}
.map-table-wrap .table { font-size: .8rem; }

/* Multi-mapping table grows with content — no internal scrollbar. Page can scroll instead. */
.multi-mapping-wrap { max-height: none !important; overflow: visible !important; }

/* Compact Multi-mapping cells. Default Bootstrap table-cells use too much padding, which forced
   beløb-værdier til at wrappe på 2 linjer. Stram padding + nowrap på text-end cells (= beløb og
   datoer). Cellerne med item-info (mm-doc) bruger fixed 3-/4-linje grid så højderne aligner pr.
   række på tværs af kolonner — det giver en "tabel" på tværs af multi-mapping-grupper. */
.multi-mapping-wrap .table th,
.multi-mapping-wrap .table td { padding: .35rem .5rem; vertical-align: top; }
.multi-mapping-wrap .table .text-end { white-space: nowrap; }

/* Compact icon-only action buttons in multi-mapping last column. Tooltip carries
   the verbose label (beløb, item nr, etc.) — keeps row chrome low. */
.btn-icon {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
}
.btn-icon + .btn-icon,
.btn-icon + form .btn-icon,
form + form .btn-icon { margin-left: .25rem; }
.cell-mm { line-height: 1.25; }
.cell-mm-doc .mm-line-main { font-size: .82rem; }
.cell-mm-doc .mm-qty {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .35rem;
    font-size: .7rem;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    background: var(--ink-soft, rgba(0,0,0,.05));
    color: var(--ink-2, #555);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}
.cell-mm-doc .mm-line-sub  { font-size: .72rem; color: #6a6354; }
.cell-mm-doc .mm-label     { color: var(--ink-3); }

/* MODTAGET-sikring: grøn når der er modtaget noget, rød/dæmpet når 0 (intet modtaget endnu). */
.mm-recv-ok   { color: #1a7f37; font-weight: 600; }
.mm-recv-none { color: #b3261e; font-weight: 600; }
/* "modt. X" under Antal i 'Ordrelinjer uden match'. */
.ol-recv      { font-size: .72rem; line-height: 1.1; margin-top: 1px; }

/* Inline rabat-editor på matchede UC-linjer i multi-mapping.
   Bogholderen kan rette _Discount og _DiscountPct direkte, ser live-beregnet beløb,
   og klikker 💾 for at gemme tilbage til Uniconta. */
.mm-discount-edit {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 4px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, .02);
    border: 1px dashed rgba(0, 0, 0, .12);
    border-radius: 6px;
    font-size: .72rem;
    line-height: 1.2;
}
.mm-discount-edit-label {
    font-weight: 600;
    color: var(--ink-3, #6b6357);
    white-space: nowrap;
}
.mm-discount-edit-field {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin: 0;
    color: var(--ink-3, #6b6357);
}
.mm-discount-edit-field .mm-discount-input,
.mm-discount-edit-field .mm-discountpct-input {
    width: 70px;
    padding: 2px 6px;
    font-size: .72rem;
    height: auto;
    line-height: 1.2;
}
.mm-discount-edit-suffix {
    font-size: .7rem;
    color: var(--ink-3, #6b6357);
}
.mm-discount-edit-result {
    font-weight: 600;
    color: var(--success, #198754);
    white-space: nowrap;
}
.mm-discount-edit-result strong { color: inherit; }
.mm-discount-save {
    line-height: 1;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.mm-discount-save:disabled { opacity: .35; cursor: not-allowed; }

/* Tiny inline enrich-icons (Lev.varenr / EAN / Pris) — samme visuelle vægt som ✎-rediger-dato.
   Emoji-glyphs er typisk lidt større end font-size — sæt .9rem så de matcher tekst-højden.
   Tving en emoji-font med fallback så de altid renderer (browsere håndterer Segoe UI Emoji
   inkonsistent, særligt med filter-effekter — derfor ingen grayscale her). */
.mm-enrich-icon {
    font-size: .9rem;
    line-height: 1;
    vertical-align: baseline;
    text-decoration: none !important;
    opacity: .75;
    transition: opacity .15s ease;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
}
.mm-enrich-icon:hover { opacity: 1; }
.cell-mm-doc code              { background: transparent; padding: 0; }
.cell-mm-doc code:not([class]) { color: inherit; }

/* Clickable rows in mapping tables */
tr.invoice-line, tr.note-line {
    cursor: pointer;
    transition: background var(--duration) var(--ease);
}
tr.invoice-line:hover, tr.note-line:hover {
    background: var(--paper-2);
}
tr.invoice-line.selected, tr.note-line.selected {
    background: linear-gradient(90deg, rgba(26,26,23,.06), rgba(26,26,23,.02));
    box-shadow: inset 3px 0 0 var(--ink);
}

/* Sticky action bar at bottom of mapping panel */
.map-action {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid var(--hairline-2);
    border-radius: var(--radius);
    background: linear-gradient(180deg, #FCFBF6, var(--paper-2));
}
.map-action-status {
    flex: 1;
    font-size: .82rem;
    font-family: var(--font-mono);
    color: var(--ink-3);
}
.map-action-status .map-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #FFFFFE;
    border: 1px solid var(--hairline-2);
    color: var(--ink);
    margin: 0 4px;
}
.map-action-status .map-arrow { color: var(--ink-4); margin: 0 6px; font-family: var(--font-sans); }
.map-action-status .map-diff {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: 12px;
    padding: 4px 10px;
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: .74rem;
}
.map-action-status .map-pill strong {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* "Vælg alle linjer med samme varenr"-knap i map-action */
#mapSelectSameItem {
    font-size: .72rem;
    padding: 3px 10px;
    border-style: dashed;
}
#mapSelectSameItem:hover {
    border-style: solid;
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

/* Active filter pill above the delivery-note table */
.dn-filter-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 10px;
    border-radius: var(--radius);
    background: var(--info-soft);
    border: 1px solid rgba(30,78,140,.18);
    font-size: .78rem;
    color: var(--info);
}
.dn-filter-clear {
    text-decoration: none;
    color: var(--info);
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: border-color var(--duration) var(--ease);
}
.dn-filter-clear:hover { border-bottom-color: var(--info); }

/* Remark icon — subtle hint on rows with a bemærkning */
.remark-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--paper-2);
    border: 1px solid var(--hairline-2);
    color: var(--ink-3);
    font-size: 11px;
    cursor: help;
    transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.remark-icon:hover, .remark-icon:focus-visible {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

/* Bootstrap tooltip — match design system */
.tooltip .tooltip-inner {
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-sans);
    font-size: .78rem;
    line-height: 1.45;
    padding: 8px 12px;
    border-radius: var(--radius);
    max-width: 360px;
    text-align: left;
    white-space: pre-line;
    box-shadow: var(--shadow-2);
}
.tooltip .tooltip-arrow::before { border-top-color: var(--ink) !important; border-left-color: var(--ink) !important; border-right-color: var(--ink) !important; border-bottom-color: var(--ink) !important; }

/* Details disclosure styling */
details { margin: 0; }
details > summary {
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: .82rem;
    list-style: none;
    user-select: none;
    color: var(--ink-2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
    content: '›';
    font-family: var(--font-mono);
    color: var(--ink-3);
    transition: transform var(--duration) var(--ease);
    display: inline-block;
}
details[open] > summary::before { transform: rotate(90deg); }
details > summary:hover { background: var(--paper-2); color: var(--ink); }

/* Raw JSON preformatted */

/* Scrollbar treatment globally inside tables */
.table-responsive::-webkit-scrollbar,
.map-table-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
.table-responsive::-webkit-scrollbar-thumb,
.map-table-wrap::-webkit-scrollbar-thumb { background: var(--hairline-2); border-radius: 4px; }
.table-responsive::-webkit-scrollbar-thumb:hover,
.map-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

/* ============================================================
   Misc accessibility
   ============================================================ */


a { text-decoration: underline; text-underline-offset: 2px; transition: text-decoration-color var(--duration) var(--ease); }


hr { border-color: var(--hairline); opacity: 1; }

/* Subtle staggered entry */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fade-up .35s var(--ease) both; }
.fade-up:nth-child(1) { animation-delay: 0ms; }
.fade-up:nth-child(2) { animation-delay: 40ms; }
.fade-up:nth-child(3) { animation-delay: 80ms; }
.fade-up:nth-child(4) { animation-delay: 120ms; }
.fade-up:nth-child(5) { animation-delay: 160ms; }

/* Focus visible — universal */
:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════════════
   Settings page (/Admin/Settings) — sticky nav + cards med ensartet layout.
   Designet til at gøre opsætning rolig at orientere sig i, så bogholderen
   ikke skal scrolle endeløst eller blive forvirret af blandede mønstre.
   ════════════════════════════════════════════════════════════════════════ */

.settings-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    max-width: 1280px;
    margin: 0 auto;
}

/* ── Sticky nav-sidebar ─────────────────────────────────────────────── */
.settings-nav {
    position: sticky;
    top: calc(var(--app-header-h, 57px) + 19px);
    align-self: start;
    padding: 18px 14px;
    background: var(--surface-1, #fff);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    max-height: calc(100vh - var(--app-header-h, 57px) - 39px);
    overflow-y: auto;
}
.settings-nav-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--ink, #1a1a1a);
    letter-spacing: -.01em;
}
.settings-nav-foot {
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, .06);
    line-height: 1.4;
    font-size: .78rem;
}

@media (max-width: 991px) {
    .settings-layout { grid-template-columns: 1fr; }
    .settings-nav {
        position: static;
        max-height: none;
        margin-bottom: 16px;
    }
    .settings-nav-foot { display: none; }
}

/* ── Sektioner ─────────────────────────────────────────────────────── */
.settings-main { min-width: 0; padding-bottom: 100px; }

.settings-section {
    background: var(--surface-1, #fff);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    padding: 22px 24px;
    margin-bottom: 18px;
    scroll-margin-top: calc(var(--app-header-h, 57px) + 19px);
}
.settings-section-head {
    margin: -22px -24px 18px;
    padding: 16px 24px 14px;
    background: linear-gradient(to bottom, rgba(0,0,0,.02), transparent);
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    border-radius: 10px 10px 0 0;
}
.settings-section-head h3 {
    margin: 0 0 4px;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink, #1a1a1a);
    letter-spacing: -.01em;
}
.settings-section-head p {
    margin: 0;
    color: var(--ink-3, #6b6357);
    font-size: .85rem;
    line-height: 1.4;
}

.settings-subsection {
    padding: 16px 0;
    border-top: 1px dashed rgba(0, 0, 0, .08);
}
.settings-subsection:first-of-type { border-top: none; padding-top: 4px; }
.settings-subsection h4 {
    margin: 0 0 4px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--ink-2, #4a4a4a);
}
.subsection-intro {
    margin: 0 0 14px;
    color: var(--ink-3, #6b6357);
    font-size: .82rem;
    line-height: 1.45;
}

/* ── Felt-grid (konsekvent 2-kolonner ved md+, 3 ved opt-in) ───────── */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px 20px;
}
.settings-grid--three {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.field { display: flex; flex-direction: column; gap: 4px; }
.field--full { grid-column: 1 / -1; }

.field-label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--ink-2, #4a4a4a);
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.field-hint {
    font-size: .78rem;
    color: var(--ink-3, #6b6357);
    line-height: 1.4;
}
.settings-optional {
    font-size: .7rem;
    font-weight: 500;
    color: var(--ink-3, #6b6357);
    text-transform: lowercase;
    font-style: italic;
}

/* ── Badges på secrets-felter ──────────────────────────────────────── */
.settings-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* ── Toggle (checkbox med tekst) ────────────────────────────────── */
.settings-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 500;
    color: var(--ink, #1a1a1a);
}
.settings-toggle input[type="checkbox"] { margin: 0; }

/* ── Mailbox-par (faktura + OB side-om-side) ─────────────────────── */
.settings-mailbox-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}
.settings-mailbox-card {
    background: rgba(0, 0, 0, .015);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.settings-mailbox-card-head {
    font-weight: 600;
    color: var(--ink-2, #4a4a4a);
    font-size: .92rem;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Legacy-details (foldet ind) ────────────────────────────────── */
.settings-legacy {
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 6px;
}
.settings-legacy summary {
    cursor: pointer;
    font-size: .82rem;
    color: var(--ink-3, #6b6357);
    font-weight: 500;
}

/* ── Multi-select dropdown med checkboxes ──────────────────────── */
.settings-multiselect .dropdown-toggle {
    text-align: left;
    background: #fff;
    color: var(--ink, #1a1a1a);
    border-color: rgba(0, 0, 0, .15);
}
.settings-multiselect-menu {
    width: 100%;
    min-width: 280px;
    max-height: 380px;
    overflow-y: auto;
}
.settings-multiselect-toolbar {
    display: flex;
    gap: 14px;
    padding: 4px 6px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    margin-bottom: 4px;
}
.settings-multiselect-list .dropdown-item {
    cursor: pointer;
    border-radius: 4px;
}
.settings-multiselect-list .dropdown-item:hover {
    background: rgba(183, 92, 26, .07);
}

/* ── Sticky save-bar ───────────────────────────────────────────── */
.settings-save-bar {
    position: sticky;
    bottom: 0;
    background: linear-gradient(to top, var(--surface-0, #faf7f2) 60%, rgba(250, 247, 242, 0));
    padding: 16px 0;
    margin: 24px -24px -22px;
    padding-left: 24px;
    padding-right: 24px;
    display: flex;
    justify-content: flex-end;
    z-index: 10;
}

/* ── Status-grid (svc + usage side-om-side) ───────────────────── */
.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.status-card {
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 8px;
    padding: 14px 16px;
    border-left: 4px solid var(--ink-3, #6b6357);
}
.status-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.status-card-verdict {
    color: var(--ink-2, #4a4a4a);
    font-size: .9rem;
    margin-bottom: 10px;
}
.status-card-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: .82rem;
    color: var(--ink-3, #6b6357);
    line-height: 1.5;
}
.status-card-bullets li { margin: 2px 0; }

/* ── Usage-meters (progress-bars) ─────────────────────────────── */
.usage-meters { display: flex; flex-direction: column; gap: 10px; }
.usage-meter-label {
    display: flex;
    justify-content: space-between;
    font-size: .85rem;
    margin-bottom: 4px;
}
.usage-meter-bar {
    height: 6px;
    background: rgba(0, 0, 0, .08);
    border-radius: 3px;
    overflow: hidden;
}
.usage-meter-fill {
    height: 100%;
    transition: width .3s ease;
}
.usage-meter--neutral .usage-meter-fill { background: #6c757d; }

/* Per-supplier manual instruction note (shown under the purchase-order header).
   Reads as a "sticky note the bookkeeper should keep in mind" — warm mustard accent,
   soft info-tinted body, one clear heading, edit as a quiet pill in the corner. */
.supplier-instruction {
    border: 1px solid var(--hairline-2, #D8D4C9);
    border-left: 3px solid var(--warning, #B87E25);
    border-radius: var(--radius, 8px);
    padding: .6rem .75rem;
    box-shadow: var(--shadow-1, 0 1px 2px rgba(26,26,23,.04));
}
.supplier-instruction__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .35rem;
}
.supplier-instruction__title {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--warning-ink, #8A5A0E);
}
.supplier-instruction__pin { font-size: 1rem; line-height: 1; }
.supplier-instruction__edit {
    flex: 0 0 auto;
    font-size: .75rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--ink-2, #3D3D38);
    background: rgba(255,255,255,.6);
    border: 1px solid var(--hairline-2, #D8D4C9);
    border-radius: 999px;
    padding: .12rem .55rem;
    white-space: nowrap;
    transition: background var(--duration,160ms) var(--ease, ease),
                border-color var(--duration,160ms) var(--ease, ease);
}
.supplier-instruction__edit:hover {
    background: #fff;
    border-color: var(--warning, #B87E25);
    color: var(--ink, #1A1A17);
}
.supplier-instruction__body {
    white-space: pre-wrap;
    color: var(--ink, #1A1A17);
    font-size: .92rem;
    line-height: 1.45;
}

/* ── AI-analyse-modal (Spørg AI): læsbar gengivelse af AI'ens Markdown-svar ─────────────── */
.ai-answer { font-size: .95rem; line-height: 1.55; }
.ai-answer h2, .ai-answer h3, .ai-answer h4 { font-weight: 600; line-height: 1.25; margin: 1.1rem 0 .45rem; }
.ai-answer h2 { font-size: 1.15rem; }
.ai-answer h3 { font-size: 1.02rem; }
.ai-answer h4 { font-size: .95rem; }
.ai-answer > :first-child { margin-top: 0; }
.ai-answer p { margin: 0 0 .7rem; }
.ai-answer ul, .ai-answer ol { margin: 0 0 .8rem 1.2rem; padding: 0; }
.ai-answer li { margin: .2rem 0; }
.ai-answer code { font-size: .86em; padding: .05em .35em; border-radius: 3px; background: rgba(0,0,0,.06); }
.ai-answer blockquote { margin: .6rem 0; padding: .5rem .9rem; border-left: 3px solid var(--positive, #4A6B57); background: rgba(0,0,0,.035); border-radius: 0 4px 4px 0; }
.ai-answer hr { margin: .9rem 0; opacity: .25; }
.ai-answer strong { font-weight: 600; }
.ai-answer .ai-table { margin: .4rem 0 .9rem; font-size: .92rem; }
.ai-answer .ai-table th { font-weight: 600; white-space: nowrap; }
.ai-answer .ai-table td, .ai-answer .ai-table th { padding: .3rem .6rem; vertical-align: top; }
.ai-answer .ai-table td.text-end { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Driftsfaktura / kontering (UX-ombygning 2026-10-05) ── */
.cost-card .cost-table th { font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.cost-side { background: var(--paper-2); border: 1px solid var(--hairline); border-radius: var(--radius); padding: .75rem .9rem; height: 100%; }
.cost-side-title { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; margin-bottom: .35rem; }
.cost-side-dl { display: grid; grid-template-columns: auto 1fr; gap: .15rem .75rem; margin: 0; font-size: .85rem; }
.cost-side-dl dt { color: var(--ink-3); font-weight: 500; }
.cost-side-dl dd { margin: 0; text-align: right; font-family: var(--font-mono); }
.cost-side-list { list-style: none; padding: 0; margin: 0; font-size: .82rem; }
.cost-side-list li { display: flex; gap: .4rem; align-items: baseline; padding: .15rem 0; border-bottom: 1px dashed var(--hairline); }
.cost-side-list li:last-child { border-bottom: 0; }
.cost-side-list li span:first-of-type { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cost-side-form .form-select-sm { font-size: .8rem; }

/* ════════════════════════════════════════════════════════════════════════
   UX-/tilgængeligheds-pakke 2026-10-05 (review Q-H5, Q-M3..M6)
   ════════════════════════════════════════════════════════════════════════ */

/* ── Skip-link + programmatic focus target ─────────────────────────────── */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 2000;
    padding: 8px 14px; 
    border-radius: 0 0 var(--radius) 0; font-size: .85rem; font-weight: 500; text-decoration: none;
}
.skip-link:focus { left: 0; }
main[tabindex="-1"]:focus { outline: none; }

/* ── Flash messages (Shared/_Flash.cshtml) ─────────────────────────────── */
.app-flash-text { white-space: pre-line; overflow-wrap: anywhere; }

/* ── Confirmation dialog (PIA.confirm in site.js) ──────────────────────── */
.pia-confirm .modal-dialog { max-width: 460px; }
.pia-confirm .modal-content {
    background: #FEFEFB; border: 1px solid var(--hairline-2);
    border-radius: var(--radius-lg); box-shadow: 0 18px 48px -12px rgba(26,26,23,.28);
}
.pia-confirm .modal-header { border-bottom: 0; padding: 1.1rem 1.25rem .25rem; }
.pia-confirm .modal-title { font-size: 1.05rem; }
.pia-confirm .modal-body { padding: .5rem 1.25rem 1rem; }
.pia-confirm-text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font-size: .92rem; line-height: 1.5; color: var(--ink-2); }
.pia-confirm .modal-footer { border-top: 0; padding: .25rem 1.25rem 1.1rem; gap: .5rem; }
.pia-confirm .modal-footer .btn { min-width: 6.5rem; margin: 0; }

/* ── Button variants in the design system's own colours ─────────────────
   Bootstrap's stock yellow/cyan outline buttons are unreadable on paper (≈1.6:1). Same hierarchy as
   before — primary = ink, secondary = outline, danger = terracotta — only the hues are ours. */
.btn-danger {
    --bs-btn-bg: var(--danger-ink); --bs-btn-border-color: var(--danger-ink); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #8F2F1A; --bs-btn-hover-border-color: #8F2F1A; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #7E2916; --bs-btn-active-border-color: #7E2916; --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--danger-ink); --bs-btn-disabled-border-color: var(--danger-ink);
    --bs-btn-focus-shadow-rgb: 169, 58, 34;
}
.btn-outline-danger {
    --bs-btn-color: var(--danger-ink); --bs-btn-border-color: rgba(169,58,34,.45);
    --bs-btn-hover-bg: var(--danger-ink); --bs-btn-hover-border-color: var(--danger-ink); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--danger-ink); --bs-btn-active-border-color: var(--danger-ink); --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: var(--danger-ink); --bs-btn-disabled-border-color: rgba(169,58,34,.45);
    --bs-btn-focus-shadow-rgb: 169, 58, 34;
}
.btn-outline-warning {
    --bs-btn-color: var(--warning-ink); --bs-btn-border-color: rgba(184,126,37,.55);
    --bs-btn-hover-bg: var(--warning-soft); --bs-btn-hover-border-color: var(--warning); --bs-btn-hover-color: var(--warning-ink);
    --bs-btn-active-bg: var(--warning-soft); --bs-btn-active-border-color: var(--warning); --bs-btn-active-color: var(--warning-ink);
    --bs-btn-disabled-color: var(--warning-ink); --bs-btn-disabled-border-color: rgba(184,126,37,.55);
    --bs-btn-focus-shadow-rgb: 184, 126, 37;
}

/* ── Visible keyboard focus ─────────────────────────────────────────────
   Bootstrap switches the outline off on its own components and relies on a faint shadow; give every
   interactive element the same clear 2px ring instead. Mouse clicks are unaffected (:focus-visible). */
.btn:focus-visible, .btn-close:focus-visible, .form-check-input:focus-visible, .dropdown-item:focus-visible,
.app-nav-link:focus-visible, .app-brand:focus-visible, .status-tab:focus-visible, .gchip:focus-visible,
.toggle-group > a:focus-visible, .inbox-toggle-pill:focus-within, .doc-view-tab:focus-visible,
summary:focus-visible, th.sortable:focus-visible, a:focus-visible, [tabindex="0"]:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
    box-shadow: none;
}

/* ── Tables: scroll sideways inside their own box on narrow screens ─────
   (.card clips its content, so a wide table without a scroll box is simply cut off.) Limited to
   below 1200px so sticky table headers on desktop keep sticking to the page. */
@media (max-width: 1199.98px) {
    .table-scroll,
    .multi-mapping-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    .comparison { flex-wrap: wrap; row-gap: 10px; }
    .comparison-sep { display: none; }
    .comparison > .ms-auto { margin-left: 0 !important; flex-wrap: wrap; }
    .map-action { flex-wrap: wrap; }
    .map-action-status { flex: 1 1 100%; }
}

/* ── Top navigation: stays usable down to tablet width ──────────────────
   Below 1400px the menu no longer fits beside brand + user, so it gets its own row (and wraps further
   on phones) instead of pushing the page sideways. Dropdowns keep working — nothing is clipped. */
.app-header > .container-fluid { flex-wrap: wrap; row-gap: 6px; }
.app-nav-link { white-space: nowrap; }
@media (max-width: 1399.98px) {
    .app-nav { order: 3; flex: 1 1 100%; flex-wrap: wrap; margin-left: 0 !important; }
}
@media (max-width: 575.98px) {
    .app-user-info { display: none; }
    .app-sysstatus-label { display: none; }
    .app-sysstatus-menu { width: min(22rem, calc(100vw - 24px)); }
}

/* ── Touch screens: 16px form text so iOS does not zoom the page on focus ── */
@media (max-width: 1199.98px) and (pointer: coarse) {
    .form-control, .form-select, .form-control-sm, .form-select-sm,
    input[type="text"], input[type="search"], input[type="number"], input[type="date"],
    input[type="email"], input[type="password"], select, textarea { font-size: 16px !important; }
    .mm-discount-edit-field .mm-discount-input,
    .mm-discount-edit-field .mm-discountpct-input { width: 92px; }
    .btn-icon { width: 2.25rem; height: 2.25rem; }
}

/* ── Document page on tablet/phone: "Behandling" ⇄ "Bilag (PDF)" (review Q-M6) ──
   Above 1200px the PDF sits beside the work area. Below that it used to land under ~2,500px of UI;
   now a sticky two-tab switch shows ONE of the two columns at a time. Which one is kept on <html>
   (data-doc-view, set by details.js) so it survives the AJAX swap of #invoiceDetails. */
.doc-view-tabs { display: none; }
@media (max-width: 1199.98px) {
    .doc-view-tabs {
        display: flex; gap: 4px;
        position: sticky; top: var(--app-header-h, 57px); z-index: 1010;
        padding: 4px; margin-top: 8px;
        background: rgba(244, 242, 236, .96);
        border: 1px solid var(--hairline-2); border-radius: var(--radius);
        box-shadow: var(--shadow-1);
    }
    .doc-view-tab {
        flex: 1 1 0; min-height: 44px;
        display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
        border: 0; border-radius: 6px; background: transparent;
        font: inherit; font-size: .9rem; font-weight: 500; color: var(--ink-2); cursor: pointer;
    }
    .doc-view-tab[aria-pressed="true"] { background: #FFFFFE; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(26,26,23,.08); }
    html[data-doc-view="pdf"] .invoice-shell-main { display: none; }
    html:not([data-doc-view="pdf"]) .invoice-shell-aside { display: none; }
    .invoice-shell-aside .pdf-frame--sticky {
        height: calc(100vh - var(--app-header-h, 57px) - 96px);
        height: calc(100dvh - var(--app-header-h, 57px) - 96px);
        min-height: 320px;
    }
    .pdf-toolbar .btn { padding: 8px 14px; font-size: .85rem; }
}

/* Salgsordrer (2026-10-14): PDF / Mail tabs in the sticky right column — a hidden frame takes no space, and the
   "Tekst aflæst fra PDF'en" disclosure under the frame gets a solid background. */
.pdf-frame iframe[hidden] { display: none; }
.pdf-frame > details { background: #fff; }

/* ════════════════════════════════════════════════════════════════════════
   2do product theme — Fase 1 redesign (cb 2026-10-14)
   Reference: the approved static mockups (Main/Bilag/Drift/OB/Salgsordre). Tokens live on :root at the top of this
   file; this block restyles the shell (header, menu, buttons, forms, badges, alerts, tables) and removes every
   yellow/amber BACKGROUND — warnings are coloured text + border on white (cb: "ingen gul baggrund nogen steder"),
   and red/green row fills in tables became white rows with a coloured left marker.
   Appended last on purpose: it wins over the older "Quiet Precision" rules above at equal specificity.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Foundation ─────────────────────────────────────────────────────────── */
body {
    background: var(--bg);
    background-image: none;
    color: var(--fg);
    letter-spacing: 0;
    font-feature-settings: normal;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; color: var(--petrol); }
h4, h5 { font-family: var(--font-sans); font-weight: 700; letter-spacing: -.005em; color: var(--fg); }
h6 { font-family: var(--font-sans); color: var(--muted); }
a { color: var(--cta); text-decoration-color: rgba(0,124,186,.35); }
a:hover { color: var(--cta-hover); text-decoration-color: var(--cta-hover); }
code, .text-num, .mono { font-family: var(--font-mono); }
::selection { background: var(--petrol); color: #fff; }

/* ── Header: petrol bar, white text, pill navigation ───────────────────── */
.app-header {
    background: var(--petrol);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 0;
    padding: 8px 0;
    color: #fff;
}
.app-brand, .app-brand:hover { color: #fff; text-decoration: none; }
/* "2do"-mærket + "OrderFlow" står tæt, så logoet læses som ét ord: 2doOrderFlow. */
.app-brand { gap: 3px !important; }
.app-brand-mark {
    width: auto; height: auto;
    padding: 4px 8px;
    background: var(--petrol);
    color: #fff;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    border-radius: 10px;
}
.app-header .app-brand-mark { background: #fff; color: var(--petrol); }
.app-brand-name {
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -.01em;
    color: inherit;
}
.app-brand:focus-visible { outline-color: #fff; }

/* Specificity note: the scoped template rule in _Layout.cshtml.css (a[b-…], 0,1,1) colours every <a> in the
   layout — the header selectors below are 0,2,0+ so they win. */
.app-header .app-nav { gap: 2px; align-items: center; }
.app-header .app-nav-link {
    padding: 7px 12px;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 600;
    color: rgba(255,255,255,.86);
    background: transparent;
    text-decoration: none;
}
.app-header .app-nav-link:hover,
.app-header .app-nav-link:focus-visible,
.app-header .dropdown.show > .app-nav-link { background: rgba(255,255,255,.12); color: #fff; }
.app-header .app-nav-link.active { background: #fff; color: var(--petrol); }
.app-header .app-nav-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.app-header .app-nav-badge { background: #fff; color: var(--petrol); border: 1px solid rgba(255,255,255,.6); font-weight: 700; }
.app-header .app-nav-link.active .app-nav-badge { background: var(--petrol); color: #fff; }

/* Dropdown menus under the header: white card, grouped with small uppercase headers */
.app-nav .app-nav-dropdown {
    background: var(--card);
    border: 1px solid var(--line);
    padding: 8px;
    min-width: 210px;
}
.app-header .app-nav .app-nav-dropdown .dropdown-item {
    color: var(--fg);
    border-radius: 8px;
    padding: 6px 10px;
    font-weight: 500;
    font-size: .875rem;
    text-decoration: none;
}
.app-header .app-nav .app-nav-dropdown .dropdown-item:hover,
.app-header .app-nav .app-nav-dropdown .dropdown-item:focus { background: var(--soft); color: var(--fg); }
.app-nav .app-nav-dropdown .dropdown-header {
    font-family: var(--font-sans);
    margin: 0;
}
.app-nav .app-nav-dropdown .dropdown-divider { border-top-color: var(--line); margin: 6px 0; }

/* User block on the right */
.app-header .app-user-name { color: #fff; font-weight: 600; }
.app-header .app-user-company { color: rgba(255,255,255,.78); font-family: var(--font-sans); }
.app-header .app-user-role { background: rgba(255,255,255,.16); border-color: transparent; color: #fff; }
.app-header .app-ghost-btn {
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 999px;
    padding: 5px 14px;
    color: #fff;
    background: transparent;
    font-size: .8rem;
    line-height: 1.4;
    cursor: pointer;
}
.app-header .app-ghost-btn:hover { background: rgba(255,255,255,.12); color: #fff; }

/* System status pill on the petrol bar */
.app-header .app-sysstatus-btn.is-ok,
.app-header .app-sysstatus-btn.is-unknown { color: rgba(255,255,255,.8); }
.app-header .app-sysstatus-btn.is-ok:hover,
.app-header .app-sysstatus-btn.is-unknown:hover { background: rgba(255,255,255,.12); color: #fff; }
.app-header .app-sysstatus-btn.is-unknown .app-sysstatus-dot { background: #fff; }
.app-header .app-sysstatus-btn.is-ok .app-sysstatus-dot { background: #7FD3A2; }
.app-header .app-sysstatus-btn.is-failed { background: #fff; border-color: #fff; color: var(--bad); font-weight: 600; }
.app-header .app-sysstatus-btn.is-failed:hover { background: #FBE7E3; color: var(--bad); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.app-footer { background: var(--bg); border-top: 1px solid var(--line); color: var(--muted); }

/* ── Cards / panels ─────────────────────────────────────────────────────── */
.section-title { font-family: var(--font-display); font-weight: 700; color: var(--petrol); }
.section-title::before { background: var(--petrol); }
.inbox-toolbar-title, .settings-section-head h3, .dash-section-title { font-family: var(--font-display); font-weight: 700; color: var(--petrol); }
.surface-tinted { background: var(--bg); border-color: var(--line); }
.header-edit-bg { background: var(--bg); border-color: var(--line); }
.modal-content, .pia-confirm .modal-content { background: var(--card); border-color: var(--line); border-radius: var(--radius-lg); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--cta); --bs-dropdown-link-active-color: #fff; border-color: var(--line); border-radius: 12px; }

/* ── Buttons: primary = CTA pill, secondary = white pill with border ───── */
.btn { border-radius: 999px; font-weight: 600; }
.btn-primary {
    --bs-btn-bg: var(--cta); --bs-btn-border-color: var(--cta); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--cta-hover); --bs-btn-hover-border-color: var(--cta-hover); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #005784; --bs-btn-active-border-color: #005784; --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--cta); --bs-btn-disabled-border-color: var(--cta); --bs-btn-disabled-color: #fff;
    --bs-btn-focus-shadow-rgb: 0, 124, 186;
    background: var(--cta); border-color: var(--cta); color: #fff;
}
.btn-primary:hover:not(:disabled) { background: var(--cta-hover); border-color: var(--cta-hover); color: #fff; }
.btn-primary:disabled, .btn-primary.disabled { background: var(--cta); border-color: var(--cta); opacity: .5; }
.btn-outline-primary {
    --bs-btn-color: var(--cta); --bs-btn-border-color: var(--line); --bs-btn-bg: #fff;
    --bs-btn-hover-bg: var(--soft); --bs-btn-hover-border-color: var(--cta); --bs-btn-hover-color: var(--cta-hover);
    --bs-btn-active-bg: var(--soft); --bs-btn-active-border-color: var(--cta); --bs-btn-active-color: var(--cta-hover);
    background: #fff; border-color: var(--line); color: var(--cta);
}
.btn-outline-primary:hover { background: var(--soft); border-color: var(--cta); color: var(--cta-hover); }
.btn-secondary {
    --bs-btn-bg: var(--petrol); --bs-btn-border-color: var(--petrol); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--accent-soft); --bs-btn-hover-border-color: var(--accent-soft); --bs-btn-hover-color: #fff;
    
}
.btn-outline-secondary, .btn-light {
    --bs-btn-color: var(--fg); --bs-btn-border-color: var(--line); --bs-btn-bg: #fff;
    --bs-btn-hover-bg: var(--bg); --bs-btn-hover-border-color: #B9C6CF; --bs-btn-hover-color: var(--fg);
    --bs-btn-active-bg: var(--soft); --bs-btn-active-border-color: #B9C6CF; --bs-btn-active-color: var(--fg);
    background: #fff; color: var(--fg);
}
.btn-outline-secondary:hover, .btn-light:hover { background: var(--bg); color: var(--fg); }
.btn-link { color: var(--cta); }
.btn-link:hover { color: var(--cta-hover); }
.btn-success {
    --bs-btn-bg: var(--ok); --bs-btn-border-color: var(--ok); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #256641; --bs-btn-hover-border-color: #256641; --bs-btn-hover-color: #fff;
}
.btn-outline-success {
    --bs-btn-color: var(--ok); --bs-btn-border-color: rgba(46,125,79,.45); --bs-btn-bg: #fff;
    --bs-btn-hover-bg: var(--ok); --bs-btn-hover-border-color: var(--ok); --bs-btn-hover-color: #fff;
}
.btn-danger { --bs-btn-bg: var(--bad); --bs-btn-border-color: var(--bad); }
.btn-outline-danger { --bs-btn-color: var(--bad); --bs-btn-border-color: #E7B3A9; --bs-btn-bg: #fff; --bs-btn-hover-bg: var(--bad); --bs-btn-hover-border-color: var(--bad); }
/* Warning buttons: never a yellow fill — white pill, warn text + border; hover = warn fill with white text. */
.btn-warning, .btn-outline-warning {
    --bs-btn-bg: #fff; --bs-btn-color: var(--warn); --bs-btn-border-color: var(--warn);
    --bs-btn-hover-bg: var(--warn); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--warn);
    --bs-btn-active-bg: #7E4A00; --bs-btn-active-color: #fff; --bs-btn-active-border-color: #7E4A00;
    --bs-btn-disabled-bg: #fff; --bs-btn-disabled-color: var(--warn); --bs-btn-disabled-border-color: var(--warn);
    --bs-btn-focus-shadow-rgb: 154, 91, 0;
}

/* ── Forms ──────────────────────────────────────────────────────────────── */
.form-control, .form-select { border-color: var(--line); }
.form-control:focus, .form-select:focus { border-color: var(--cta); box-shadow: 0 0 0 3px rgba(0,124,186,.2); }
.form-check-input { border-color: #B9C6CF; background-color: #fff; }
.form-check-input:focus { border-color: var(--cta); box-shadow: 0 0 0 3px rgba(0,124,186,.2); }
.form-label { color: var(--fg); }
.form-check-label { color: var(--fg); }

/* ── Navigation pills / tabs (e.g. platform sub-navigation) ─────────────── */
.nav-pills { --bs-nav-pills-link-active-bg: var(--petrol); --bs-nav-pills-link-active-color: #fff; --bs-nav-pills-border-radius: 999px; gap: 4px; }
.nav-pills .nav-link { color: var(--fg); font-weight: 600; text-decoration: none; }
.nav-pills .nav-link:hover { background: var(--soft); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--petrol); color: #fff; }
.pagination { --bs-pagination-color: var(--cta); --bs-pagination-active-bg: var(--cta); --bs-pagination-active-border-color: var(--cta); }
.progress { --bs-progress-bar-bg: var(--cta); }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.table thead th { background: var(--bg) !important; color: var(--muted); border-bottom-color: var(--line); }
.table tfoot th { background: var(--bg); border-top-color: var(--line); }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #F0F5F8; }
.table-light { --bs-table-bg: var(--bg); --bs-table-color: var(--fg); }
.table-primary { --bs-table-bg: var(--soft); --bs-table-color: var(--fg); }

/* State rows: white row + coloured left marker (no red/green/yellow fills). The marker sits on the first cell as an
   extra inset shadow next to Bootstrap's own state shadow, so hover/active still work. */
.table-success, .table-warning, .table-danger {
    --bs-table-bg: #fff; --bs-table-color: var(--fg);
    --bs-table-border-color: var(--line);
    --bs-table-striped-bg: #F7F9FA; --bs-table-striped-color: var(--fg);
    --bs-table-active-bg: #EEF3F6; --bs-table-active-color: var(--fg);
    --bs-table-hover-bg: #F0F5F8; --bs-table-hover-color: var(--fg);
}
tr.table-success > :first-child { box-shadow: inset 3px 0 0 var(--ok),   inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))); }
tr.table-warning > :first-child { box-shadow: inset 3px 0 0 var(--warn), inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))); }
tr.table-danger  > :first-child { box-shadow: inset 3px 0 0 var(--bad),  inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))); }

/* ── Badges: neutral = soft fill; semantic = white pill with currentColor border ── */
.badge.bg-secondary { background: #EEF1F4 !important; color: var(--muted) !important; border-color: var(--line); }
.badge.bg-light, .badge.text-bg-light         { background: var(--bg) !important; color: var(--ink-2) !important; border-color: var(--line); }
.badge.bg-primary     { border-color: var(--cta); }
.badge.bg-success { background: #fff !important; color: var(--ok) !important;   border-color: currentColor; }
.badge.bg-danger  { border-color: currentColor; }
.badge.bg-info, .badge.bg-info-subtle    { background: #fff !important; color: var(--info) !important; border-color: currentColor; }
/* Yellow utilities — everywhere, not only on badges (cb: no yellow background anywhere). */
.bg-warning, .bg-warning-subtle {
    background: #fff !important;
    color: var(--warn) !important;
    border: 1px solid currentColor;
}
.badge.bg-warning, .badge.bg-warning-subtle { border-color: currentColor; }
/* "text-dark" next to bg-warning-subtle (pending-date chips) — keep the warn ink so the chip still reads as a state. */
.bg-warning-subtle.text-dark, .bg-warning.text-dark { color: var(--warn) !important; }
.border-warning { border-color: var(--warn) !important; }
.text-warning { color: var(--warn) !important; }
.text-success { color: var(--ok) !important; }
.text-danger  { color: var(--bad) !important; }
.text-info    { color: var(--info) !important; }
.text-muted   { color: var(--muted) !important; }

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.alert-warning {
    border: 1px solid var(--warn);
    border-left-width: 4px;
}
.alert-warning .alert-link { color: var(--warn); }
.alert-info .alert-link { color: #0B4F73; }

/* ── Remaining amber/beige fills from the old theme → white + coloured text/border ── */
.stat-chip { background: #fff; border-color: var(--line); color: var(--ink-2); }
.stat-chip--ok   { background: #fff; border-color: currentColor; color: var(--ok); }
.stat-chip--bad  { background: #fff; border-color: currentColor; color: var(--bad); }
.stat-chip--warn { background: #fff; border-color: currentColor; color: var(--warn); }
.comparison { background: var(--card); }
.comparison--ok   { background: #fff; border-color: rgba(46,125,79,.45); box-shadow: inset 4px 0 0 var(--ok); }
.comparison--warn { background: #fff; border-color: rgba(154,91,0,.5);   box-shadow: inset 4px 0 0 var(--warn); }
.comparison--bad  { background: #fff; border-color: rgba(178,58,39,.45); box-shadow: inset 4px 0 0 var(--bad); }
.supplier-instruction { background: #fff; border-color: var(--line); border-left-color: var(--warn); }
.settings-badge--ok   { background: #fff; color: var(--ok);   border: 1px solid currentColor; }
.settings-badge--warn { background: #fff; color: var(--warn); border: 1px solid currentColor; }
.settings-legacy { background: #fff; border: 1px dashed var(--line); }
.status-card { background: var(--card); border-color: var(--line); }
.status-card--ok   { border-left-color: var(--ok); }
.status-card--warn { border-left-color: var(--warn); }
.status-card--info { border-left-color: var(--cta); }
.status-card--err  { border-left-color: var(--bad); }
.usage-meter-fill { background: var(--ok); }
.usage-meter--warn .usage-meter-fill { background: var(--warn); }
.usage-meter--err  .usage-meter-fill { background: var(--bad); }
.map-col-title--note::before { box-shadow: 0 0 0 3px #F3E6D3; }
.rule-help { background: var(--soft); border-color: #BFD8E8; color: var(--fg); }
.inbox-filter-menu { border-color: var(--line); color: var(--fg); }
.inbox-filter-menu .dropdown-item { color: var(--fg); }
.inbox-filter-menu .dropdown-item:hover { background: var(--soft); }
.inbox-filter-menu .dropdown-item.active { background: var(--cta); color: #fff; }

/* Inbox "Mangler faktura/OB" section + rows: no amber fill — warn text with a left marker. */
.inbox-section-row td.inbox-section-header { background: var(--card); color: var(--petrol); font-weight: 700; }
.inbox-section-row td.inbox-section-header--warn { background: #fff; color: var(--warn); box-shadow: inset 4px 0 0 var(--warn); }
.inbox-row--missing td { background: #fff; }
.inbox-row--missing > td:first-child { box-shadow: inset 3px 0 0 rgba(154,91,0,.55); }
.inbox-row--missing:hover td { background: #F7F9FA !important; }

/* ── Focus ring in the brand colour ─────────────────────────────────────── */
.btn:focus-visible, .btn-close:focus-visible, .form-check-input:focus-visible, .dropdown-item:focus-visible,
.app-brand:focus-visible, .status-tab:focus-visible, .gchip:focus-visible,
.toggle-group > a:focus-visible, .inbox-toggle-pill:focus-within, .doc-view-tab:focus-visible,
summary:focus-visible, th.sortable:focus-visible, a:focus-visible, [tabindex="0"]:focus-visible {
    outline-color: var(--cta);
}
.app-header a:focus-visible, .app-header button:focus-visible { outline-color: #fff; }
.skip-link { background: var(--petrol); color: #fff; }
.skip-link:focus { color: #fff; }

/* ── Small screens: menu wraps onto its own row (unchanged behaviour), pills stay compact ── */
@media (max-width: 575.98px) {
    .app-header .app-nav-link { padding: 6px 10px; }
    .app-brand-name { font-size: 17px; }
}

/* ════════════════════════════════════════════════════════════════════════
   Fase 2 redesign (cb 2026-10-14) — Details: compact title block + shared document header
   (Pages/Invoices/_DocumentHeader.cshtml). Mockup: "Fælles dokumenthoved" (.doch/.dhh/.g4/.more).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Title block: small kind label, Syne supplier name, tags on line 1, creditor chip + actions on line 2 ── */
.invoice-hero.doc-title { align-items: flex-start; padding: 4px 0 10px; border-bottom: 0; margin-bottom: 10px; }
.doc-title .invoice-hero-titlewrap { flex-direction: column; align-items: flex-start; gap: 6px; flex: 1 1 auto; }
.doc-title-line { display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; min-width: 0; }
.doc-title-kind {
    font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); font-weight: 700; white-space: nowrap;
}
.doc-title-kind .invoice-hero-num { font-family: var(--font-mono); font-size: inherit; color: inherit; letter-spacing: 0; font-weight: 700; }
.doc-title .invoice-hero-title {
    font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.15;
    letter-spacing: -.02em; color: var(--petrol);
}
.doc-title .invoice-hero-name { color: var(--petrol); }
/* Tags: white pill, coloured border (no fills). Neutral tags (bg-light) get a grey border. */
.doc-title .badge, .doc-header .badge { background: #fff !important; border: 1px solid currentColor; border-radius: 999px; font-weight: 700; }
.doc-title .badge.bg-light, .doc-header .badge.bg-light { color: var(--muted) !important; border-color: var(--line) !important; }
.doc-title .badge.bg-info.doc-tag { font-weight: 600; }
.doc-title .badge code { color: inherit; background: transparent; }

/* ── Shared document header card ── */
.doc-header { container-type: inline-size; container-name: doch; margin-bottom: 12px; overflow: hidden; }
.doch { display: grid; grid-template-columns: minmax(0, 1fr); }
.doch-half { container-type: inline-size; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.doch-half + .doch-half { border-top: 1px solid var(--line); }
@container doch (min-width: 780px) {
    .doch--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .doch--split > .doch-half + .doch-half { border-top: 0; border-left: 1px solid var(--line); }
}
.dhh { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.dhh-title { font-family: var(--font-sans); font-size: .82rem; font-weight: 700; color: var(--petrol); margin: 0; letter-spacing: 0; }
.dhh-title .num { font-family: var(--font-mono); }
.dhh-sub { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-left: 4px; }
.g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 14px; }
.g4 > div { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.g4 > div > span:first-child { font-size: .69rem; color: var(--muted); }
.g4 strong { font-weight: 600; font-size: .82rem; color: var(--fg); overflow-wrap: anywhere; min-width: 0; }
.g4 .num, .doc-header .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.g4 .g4-total { font-weight: 700; color: var(--petrol); }
.g4 .g4-cur { font-family: var(--font-sans); font-size: .66rem; color: var(--muted); font-weight: 500; }
@container (max-width: 400px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.doc-header .more { font-size: .78rem; color: var(--muted); }
.doc-header .more > summary { cursor: pointer; width: fit-content; }
.doc-header .more > summary:hover { color: var(--cta); }
.doc-header .supplier-instruction { margin-top: 0; }
.doc-header-editor { padding: 0 16px; }
.doc-header-editor:has(#headerEditForm:not(.d-none)) { padding-top: 4px; border-top: 1px solid var(--line); }
.doc-header-editor #headerEditForm { margin-top: 12px; }

/* ── Tools card (approvers / Spørg AI / note) next to the delivery notes; full width on OB / booked ── */
.doc-tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; align-items: start; }
.doc-tools-grid > * { margin-top: 0 !important; }
/* Full-width tools card (OB / booked: no delivery-notes card beside it) needs no shared min-height. */
.invoice-header-row > .col-12 > .card { min-height: 0; }

/* ════════════════════════════════════════════════════════════════════════
   cb 2026-10-14 (efter prod): "fonten er forfærdelig at se på" + "vi klemmer alle knapper".
   ÉN læsbar skrift overalt — samme som 2doCRM: Source Sans 3 (Inter som reserve); tal beholder faste cifferbredder
   (tabular-nums) så kolonner står lige. Syne kun i logoet; ægte monospace kun i <code>.
   Knapper: rigtig klikflade (min. 30 px høj) — også dem i titellinjen der havde py-0.
   ════════════════════════════════════════════════════════════════════════ */
:root {
    --font-ui:      'Source Sans 3', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;   /* = 2doCRM (cb 14/10) */
    --font-sans:    var(--font-ui);
    --font-display: var(--font-ui);
    --font-mono:    var(--font-ui);   /* tal/datoer: samme skrift, faste cifferbredder (se nedenfor) */
    --font-code:    ui-monospace, 'Cascadia Code', Consolas, monospace;   /* = 2doCRM */
    --font-brand:   'Syne', var(--font-ui);
}
body, .num, td, th, input, select, textarea, .btn { font-variant-numeric: tabular-nums; }
code, kbd, pre, samp { font-family: var(--font-code); }
.app-brand-name { font-family: var(--font-brand); }
h1, h2, h3, h4, .doc-title .invoice-hero-title { letter-spacing: -.01em; }

.btn-sm, .btn-group-sm > .btn {
    min-height: 30px; padding: .3rem .75rem !important; font-size: .84rem; line-height: 1.25;
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.doc-title-chips { gap: 8px; align-items: center; }
.doc-title .badge, .doc-title-chips .badge { font-size: .78rem; padding: 6px 12px; line-height: 1.2; }
.doc-title-line .badge { font-size: .74rem; padding: 5px 10px; }

/* ════════════════════════════════════════════════════════════════════════
   Rolig bilagsside (cb 2026-10-14: "klasket ind med en fanden masse bokse … svært at skabe sig et roligt overblik").
   KUN CSS (+ Kreditnota-tag neutral): hvide flader, ét kort pr. sektion uden kort-i-kort, status-tags som små
   tonede mærker med farvet prik (rød kun ved reelle problemer), knapper som én stille gruppe, ingen VERSALER.
   Alle id'er/klasser/handlere er urørte.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Titellinje: status-tags ── */
#invoiceDetails .doc-title-line .badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--paper-2) !important; color: var(--ink-2) !important; border: 0 !important;
    border-radius: 999px; padding: 4px 10px 4px 9px; font-size: .78rem; font-weight: 600;
    text-transform: none; letter-spacing: 0; line-height: 1.2;
}
#invoiceDetails .doc-title-line .badge::before {
    content: ''; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4);
}
#invoiceDetails .doc-title-line .badge > span[aria-hidden="true"] { display: none; }  /* emoji i tags = støj */
#invoiceDetails .doc-title-line .badge.bg-success::before { background: var(--ok); }
#invoiceDetails .doc-title-line .badge.bg-warning::before { background: var(--warn); }
#invoiceDetails .doc-title-line .badge.bg-info::before    { background: var(--cta); }
#invoiceDetails .doc-title-line .badge.bg-danger { background: var(--danger-soft) !important; color: var(--bad) !important; }
#invoiceDetails .doc-title-line .badge.bg-danger::before  { background: var(--bad); }
#invoiceDetails .doc-title-kind { text-transform: none; letter-spacing: 0; font-size: .82rem; font-weight: 600; }
#invoiceDetails .doc-title .invoice-hero-title { font-size: 1.4rem; font-weight: 600; }

/* ── Titellinje 2: kreditor som stille tekst, derefter én ensartet knap-gruppe ── */
#invoiceDetails .doc-title-chips { gap: 8px; }
#invoiceDetails .doc-title-chips .badge.doc-tag {
    background: transparent !important; border: 0 !important; color: var(--muted) !important;
    padding: 0 8px 0 0 !important; font-size: .82rem; font-weight: 500; text-transform: none; letter-spacing: 0;
    margin-right: 4px; border-right: 1px solid var(--line) !important; border-radius: 0;
}
#invoiceDetails .doc-title-chips .badge.bg-warning {   /* "Reklamationsindkøb" når tilstanden er slået til */
    display: inline-flex; align-items: center; gap: 6px; background: var(--paper-2) !important; color: var(--ink-2) !important;
    border: 0 !important; border-radius: 999px; padding: 5px 10px 5px 9px; font-size: .78rem; font-weight: 600; text-transform: none;
}
#invoiceDetails .doc-title-chips .badge.bg-warning::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
#invoiceDetails .doc-title-chips .badge.bg-warning > span[aria-hidden="true"] { display: none; }
#invoiceDetails .doc-title-chips .btn-outline-secondary,
#invoiceDetails .doc-title-chips .btn-outline-warning {
    background: #fff; border-color: var(--line); color: var(--ink-2);
}
#invoiceDetails .doc-title-chips .btn-outline-secondary:hover,
#invoiceDetails .doc-title-chips .btn-outline-warning:hover { background: var(--paper-2); border-color: var(--ink-4); color: var(--ink); }

/* ── Sektionsoverskrifter: én stil, ingen versaler, ingen streg-ikon ── */
#invoiceDetails .section-title, #invoiceDetails h6.section-title {
    text-transform: none; letter-spacing: 0; font-size: 1rem; font-weight: 600; color: var(--petrol);
}
#invoiceDetails .section-title::before { display: none; }
#invoiceDetails .section-head { margin-bottom: 12px; }
#invoiceDetails .dhh-sub, #invoiceDetails .comparison-label, #invoiceDetails .cost-side-title,
#invoiceDetails .cost-card .cost-table th { text-transform: none; letter-spacing: 0; }

/* ── Ingen kort-i-kort: værktøjskortet (godkendere / Spørg AI / notat) ── */
#invoiceDetails .doc-tools-grid { gap: 16px 32px; }
#invoiceDetails .doc-tools-grid > .surface-tinted,
#invoiceDetails .doc-tools-grid > form.surface-tinted {
    background: transparent !important; border: 0 !important; border-radius: 0; padding: 0 !important;
}
#invoiceDetails .surface-tinted { background: #fff; border-color: var(--line); }

/* ── Følgeseddel-kortet: tabellen uden egen ramme, kun en tynd linje ── */
#invoiceDetails .delivery-notes-card .map-table-wrap { border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; }

/* ── Linjesammenligningen: feltnavne i almindelig skrift ── */
#invoiceDetails .stk th { text-transform: none; letter-spacing: 0; font-size: .78rem; }
#invoiceDetails .stk td.f .c { text-transform: none; letter-spacing: 0; font-size: .8rem; font-weight: 500; }

/* ── Ensartet lodret rytme mellem sektionerne (8 px-skala) ── */
#invoiceDetails > .card, #invoiceDetails > section.card, #invoiceDetails > details.card { margin-top: 16px !important; }
#invoiceDetails .card-body { padding: 16px 20px; }
@media (max-width: 576px) { #invoiceDetails .card-body { padding: 12px 14px; } }

/* ── Driftsfaktura: konteringslinjer i fuld bredde, sidepanelet under som et responsivt gitter (cb 2026-10-14) ── */
#invoiceDetails .cost-side--below {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px 32px;
    background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 16px 0 0; height: auto;
}
#invoiceDetails .cost-side--below .cost-side-part { min-width: 0; }
#invoiceDetails .cost-table { table-layout: auto; min-width: 760px; }
#invoiceDetails .cost-table .cost-col-text { min-width: 260px; }
#invoiceDetails .cost-table .cost-col-amt  { width: 130px; }
#invoiceDetails .cost-table .cost-col-vat  { width: 120px; }
#invoiceDetails .cost-table .cost-col-num  { width: 110px; }
#invoiceDetails .cost-table .cost-col-acc  { width: 150px; min-width: 120px; }
#invoiceDetails .cost-table .cost-col-dim  { width: 120px; min-width: 100px; }
/* Konteringstabellen scroller i sin egen boks på ALLE bredder (siden har PDF-panelet ved siden af) — aldrig sidescroll af siden. */
#invoiceDetails .cost-card .table-scroll { overflow-x: auto; }

/* ── Bundbaren (cb 2026-10-14): bogføring øverst med "Bogfør i Uniconta" yderst til HØJRE; værktøjerne (Oversigt,
   Sync UC, Re-match, Tjek nu, Genindlæs, Opdel, Upload ny PDF) er en gruppe for sig selv nedenunder — de har intet
   med bogføringen at gøre. Kun CSS: samme knapper, formularer og handlere som før. ── */
#invoiceDetails .invoice-action-bar { flex-direction: column; align-items: stretch; gap: 10px; }
#invoiceDetails .invoice-action-bar-right { order: 0; justify-content: flex-end; }
#invoiceDetails .invoice-action-bar-right > :has(.btn-hero-primary),
#invoiceDetails .invoice-action-bar-right > .btn-hero-primary { order: 10; }
#invoiceDetails .invoice-action-bar-left {
    order: 1; padding-top: 10px; border-top: 1px solid var(--line);
}
#invoiceDetails .invoice-action-bar-left::before {
    content: "Værktøjer"; font-size: .78rem; font-weight: 600; color: var(--muted); margin-right: 4px;
}
#invoiceDetails .invoice-action-bar-right:empty { display: none; }

/* ── Manuel mapping (cb 2026-10-14): højre kolonnes tabel skal flugte PRÆCIS med fakturalinjerne til venstre →
   "Vis kun modtagne" står til højre for søgefeltet på samme linje (ikke på en ekstra linje nedenunder). ── */
.map-search-wrap:has(.map-filter-check) { display: flex; align-items: center; gap: 12px; }
.map-search-wrap:has(.map-filter-check) input[type=search] { flex: 1 1 auto; min-width: 0; }
.map-search-wrap .map-filter-check { margin-top: 0; white-space: nowrap; flex: 0 0 auto; }

/* ── Sammenligningsbjælken ved afvigelse (cb 2026-10-14: "grønlorte brun"): ingen brun/oliven. Hvid flade, grå ramme,
   rød venstrekant (samme rød som difference-tallet), rød-tonet mærke og en almindelig blå knap. ── */
#invoiceDetails .comparison--warn {
    background: #fff; border-color: var(--line); box-shadow: inset 4px 0 0 var(--bad);
}
#invoiceDetails .comparison--warn .badge.bg-warning {
    background: var(--danger-soft) !important; color: var(--bad) !important; border: 1px solid rgba(178,58,39,.25) !important;
}
#invoiceDetails .comparison .btn-outline-warning {
    color: var(--cta); border-color: var(--cta); background: #fff;
}
#invoiceDetails .comparison .btn-outline-warning:hover,
#invoiceDetails .comparison .btn-outline-warning:focus-visible,
#invoiceDetails .comparison .btn-outline-warning.show {
    color: #fff; background: var(--cta); border-color: var(--cta);
}

/* ── Driftsfaktura: tre kort under konteringslinjerne (cb 2026-10-14) — Godkendelse | Tidligere kontering | Beløb og notat ── */
#invoiceDetails .cost-groups {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
    border-top: 0; padding-top: 4px; align-items: stretch;
}
@media (max-width: 1100px) { #invoiceDetails .cost-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { #invoiceDetails .cost-groups { grid-template-columns: minmax(0, 1fr); } }
#invoiceDetails .cost-group {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
    display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
#invoiceDetails .cost-group:empty { display: none; }
#invoiceDetails .cost-group .cost-side-title { font-weight: 600; color: var(--petrol); margin-bottom: 8px; }
#invoiceDetails .cost-group .cost-side-dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0; }
#invoiceDetails .cost-group .cost-side-dl dt { font-weight: 400; color: var(--muted); }
#invoiceDetails .cost-group .cost-side-dl dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
#invoiceDetails .cost-group--amounts .cost-side-part + .cost-side-part { border-top: 1px solid var(--line); padding-top: 12px; }
#invoiceDetails .cost-send-row { margin-top: 4px; }
/* Tom bogførings-række (fx driftsfaktura, hvor "Send til kassekladde" ligger i konterings-kortet) skjules; værktøjsrækken
   fylder hele bredden, så "Slet" (ms-auto) står yderst til højre. */
#invoiceDetails .invoice-action-bar-right:not(:has(*)) { display: none; }
#invoiceDetails .invoice-action-bar:has(> .invoice-action-bar-right:not(:has(*))) > .invoice-action-bar-left { border-top: 0; padding-top: 0; }
#invoiceDetails .invoice-action-bar-left > .d-flex { flex: 1 1 auto; }

/* ════════════════════════════════════════════════════════════════════════
   Global komponenter — cb 2026-10-14 ("gennemgå simpelthen lige alt UX og sikre det hele er strømlinet")
   ÉN rolig stil for de fælles byggeklodser, som alle sider arver: overskrifter, kort, beskeder (alerts), mærker
   (badges), tabeller, formularer, knapper, menu-dropdowns, sessionsbannere, login og Nyheder.
   Regler: hvide flader, 1px grå linje, ingen VERSALER, ingen streg før overskrifter, ingen gule/brune flader —
   farve vises som en tynd venstrestribe eller en lille prik. Rød kun ved fejl/fare.
   Står SIDST med vilje (vinder over de ældre lag ved samme specificitet); #invoiceDetails-reglerne ovenfor har
   id-specificitet og bevares. Kun CSS — ingen klasser/id'er er omdøbt.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Overskrifter: petrol, halvfed, ingen versaler, ingen lodret streg ── */
h2, h3, h4, h5, .h2, .h3, .h4, .h5 { font-weight: 600; color: var(--petrol); letter-spacing: -.005em; }
h6, .h6 {
    font-family: var(--font-sans); font-size: .9rem; font-weight: 600; color: var(--petrol);
    text-transform: none; letter-spacing: 0;
}
.section-title, h6.section-title {
    font-family: var(--font-sans); font-size: 1rem; font-weight: 600; color: var(--petrol);
    text-transform: none; letter-spacing: 0; gap: 8px;
}
.section-title::before { display: none; }
.section-head { margin-bottom: 12px; }
.card-title { font-weight: 600; color: var(--petrol); }
.modal-title { font-weight: 600; color: var(--petrol); }
/* Små etiketter, der før stod i VERSALER med spærret skrift → almindelig skrift, dæmpet farve. */
.def-list dt,
.comparison-label,
.cost-side-title,
.cost-card .cost-table th,
.map-col-title,
.inbox-section-row td.inbox-section-header,
.internal-remarks-lbl,
.cell-item-stack .item-code-label,
.settings-badge,
.supplier-instruction__title,
.dhh-sub,
.doc-title-kind,
.app-user-role {
    text-transform: none; letter-spacing: 0;
}
.def-list dt, .comparison-label, .cost-side-title, .dhh-sub { font-size: .78rem; font-weight: 600; color: var(--muted); }

/* ── Kort ── */
.card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none;
}
.list-group { --bs-list-group-border-color: var(--line); --bs-list-group-border-radius: var(--radius); }

/* ── Beskeder (alerts): hvid flade, tynd farvet venstrestribe, almindelig mørk tekst ── */
.alert {
    --bs-alert-bg: #fff; --bs-alert-color: var(--fg); --bs-alert-border-color: var(--line); --bs-alert-link-color: var(--fg);
    background: #fff; color: var(--fg);
    border: 1px solid var(--line); border-left: 4px solid var(--ink-4);
    border-radius: var(--radius); padding: 10px 14px; font-size: .9rem; line-height: 1.45;
    box-shadow: none;
}
.alert-info                     { background: #fff; color: var(--fg); border-color: var(--line); border-left-color: var(--cta); }
.alert-success                  { background: #fff; color: var(--fg); border-color: var(--line); border-left-color: var(--ok); }
.alert-warning                  { background: #fff; color: var(--fg); border-color: var(--line); border-left-color: var(--warn); }
.alert-danger                   { background: #FFF8F6; color: var(--fg); border-color: #EBCFC8; border-left-color: var(--bad); }
.alert-secondary,
.alert-light                     { background: #fff; color: var(--fg); border-color: var(--line); border-left-color: var(--ink-4); }
.alert strong, .alert b { font-weight: 600; color: var(--fg); }
.alert-danger > strong:first-child { color: var(--bad); }
.alert .alert-link, .alert-warning .alert-link, .alert-info .alert-link {
    color: var(--cta); font-weight: 600; text-decoration: underline; text-underline-offset: 2px;
    text-decoration-color: rgba(0,124,186,.35);
}
.alert .alert-link:hover { color: var(--cta-hover); text-decoration-color: var(--cta-hover); }
.alert-dismissible { padding-right: 2.75rem; }
.alert-dismissible .btn-close { padding: 12px 14px; opacity: .45; }
.alert-dismissible .btn-close:hover { opacity: .8; }
.list-group-item-warning { background: #fff; color: var(--fg); border-left: 3px solid var(--warn); }

/* ── Mærker (badges): lille grå/tonet mærke med farvet prik — samme sprog som status-mærkerne på bilagssiden ── */
.badge {
    display: inline-block; vertical-align: .08em;
    font-family: var(--font-sans); font-size: .75rem; font-weight: 600; line-height: 1.25;
    text-transform: none; letter-spacing: 0;
    padding: 3px 9px; border-radius: 999px; border: 0;
}
.badge.bg-secondary,
.badge.bg-light,
.badge.text-bg-light,
.badge.bg-success,
.badge.bg-warning,
.badge.bg-warning-subtle,
.badge.bg-info,
.badge.bg-info-subtle {
    background: var(--paper-2) !important; color: var(--ink-2) !important; border: 0;
}
.badge.bg-success::before,
.badge.bg-warning::before,
.badge.bg-warning-subtle::before,
.badge.bg-info::before,
.badge.bg-info-subtle::before,
.badge.bg-danger::before {
    content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    margin-right: 5px; vertical-align: .08em; background: currentColor;
}
.badge.bg-success::before { background: var(--ok); }
.badge.bg-warning::before, .badge.bg-warning-subtle::before { background: var(--warn); }
.badge.bg-info::before, .badge.bg-info-subtle::before    { background: var(--cta); }
.badge.bg-danger {
    background: var(--danger-soft) !important; color: var(--bad) !important; border: 0;
}
.badge.bg-danger::before { background: var(--bad); }
.badge.bg-primary { background: var(--soft) !important; color: #0B4F73 !important; border: 0; }
/* "text-dark" ved siden af et mærke (bg-warning/bg-info/bg-light text-dark) må ikke bryde den rolige farve. */
.badge.text-dark { color: var(--ink-2) !important; }
.badge.bg-danger.text-dark { color: var(--bad) !important; }

/* ── Tabeller: dæmpet lille halvfed overskrift uden versaler, tynde rækkelinjer, tal i faste cifferbredder ── */
.table { --bs-table-border-color: var(--line); color: var(--fg); }
.table thead th, .table > thead > tr > th {
    background: #fff !important; color: var(--muted);
    font-family: var(--font-sans); font-size: .78rem; font-weight: 600;
    text-transform: none; letter-spacing: 0;
    border-bottom: 1px solid var(--line);
}
.table tbody td { border-bottom: 1px solid var(--line); }
.table tfoot th, .table tfoot td { background: #fff; border-top: 1px solid var(--hairline-2); font-weight: 600; color: var(--fg); }
.table .text-end, .table td.num, .table .num { font-variant-numeric: tabular-nums; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #F3F7F9; }
.table-light, .table > thead.table-light th { --bs-table-bg: #fff; }

/* ── Formularer: ens etiketter, rolige felter, fokus i CTA-blå ── */
.form-label, .field-label {
    font-size: .85rem; font-weight: 600; color: var(--ink-2); letter-spacing: 0; text-transform: none;
}
.form-label { margin-bottom: 4px; }
.form-text, .field-hint { font-size: .8rem; color: var(--muted); }
.form-control, .form-select {
    background-color: #fff; color: var(--fg);
    border: 1px solid var(--hairline-2); border-radius: 8px;
}
.form-control::placeholder { color: var(--ink-4); opacity: 1; }
.form-control:focus, .form-select:focus,
.form-check-input:focus {
    border-color: var(--cta); box-shadow: 0 0 0 3px rgba(0,124,186,.2); outline: 0;
}
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--paper-2); color: var(--ink-2); }
.input-group-text { background: var(--paper-2); border-color: var(--hairline-2); color: var(--ink-2); font-size: .85rem; }
.form-check-input:checked { background-color: var(--cta); border-color: var(--cta); }

/* ── Knapper: primær = CTA-blå; sekundær = stille hvid/grå; fare = rød kontur ── */
.btn-secondary {
    --bs-btn-bg: #fff; --bs-btn-border-color: var(--hairline-2); --bs-btn-color: var(--fg);
    --bs-btn-hover-bg: var(--paper-2); --bs-btn-hover-border-color: #B9C6CF; --bs-btn-hover-color: var(--fg);
    --bs-btn-active-bg: var(--soft); --bs-btn-active-border-color: #B9C6CF; --bs-btn-active-color: var(--fg);
    --bs-btn-disabled-bg: #fff; --bs-btn-disabled-border-color: var(--line); --bs-btn-disabled-color: var(--muted);
    background: #fff; border-color: var(--hairline-2); color: var(--fg);
}
.btn-secondary:hover:not(:disabled) { background: var(--paper-2); border-color: #B9C6CF; color: var(--fg); }
.btn-outline-secondary, .btn-light { border-color: var(--hairline-2); }
.btn-outline-danger {
    --bs-btn-color: var(--bad); --bs-btn-border-color: #E2B2A8; --bs-btn-bg: #fff;
    --bs-btn-hover-bg: var(--danger-soft); --bs-btn-hover-border-color: var(--bad); --bs-btn-hover-color: var(--bad);
    --bs-btn-active-bg: var(--bad); --bs-btn-active-border-color: var(--bad); --bs-btn-active-color: #fff;
}
.btn:disabled, .btn.disabled { opacity: .5; }

/* ── Menu-dropdowns i topbjælken: små grupperubrikker uden versaler ── */
.app-nav .app-nav-dropdown .dropdown-header {
    font-size: .75rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted);
    padding: 8px 10px 2px;
}
.app-nav .app-nav-dropdown { border-radius: 12px; box-shadow: 0 8px 24px rgba(17,58,78,.14); }
.app-header .app-nav .app-nav-dropdown .dropdown-item.active,
.app-header .app-nav .app-nav-dropdown .dropdown-item:active { background: var(--soft); color: var(--petrol); }
.app-nav .app-nav-dropdown .dropdown-item .badge { margin-left: auto; }
.app-header .app-user-role { font-size: .72rem; font-weight: 600; }
.dropdown-menu { box-shadow: 0 8px 24px rgba(17,58,78,.12); }
.dropdown-item { font-size: .875rem; }

/* ── Sessionsbannere under topbjælken (Supportadgang / support slået fra / opsætning mangler):
      hvid bjælke med tynd farvet venstrestribe — ingen gul flade. ── */
.app-banner.alert {
    margin: 0; border-radius: 0; border: 0; border-bottom: 1px solid var(--line);
    background: #fff; color: var(--fg); padding: 8px 0; font-size: .875rem;
    box-shadow: inset 4px 0 0 var(--ink-4);
}
.app-banner.alert-warning { box-shadow: inset 4px 0 0 var(--warn); }
.app-banner.alert-info    { box-shadow: inset 4px 0 0 var(--cta); }
.app-banner.alert-secondary { box-shadow: inset 4px 0 0 var(--muted); }
.app-banner .app-banner-label { color: var(--warn); font-weight: 600; }
.app-banner.alert-info .app-banner-label { color: var(--petrol); }
.app-banner.alert-secondary .app-banner-label { color: var(--fg); }
@media (max-width: 575.98px) {
    .app-banner .ms-auto { margin-left: 0 !important; }
    .app-banner .text-nowrap { white-space: normal !important; }
}

/* ── Flash-beskeder øverst på siden ── */
#main > .app-flash { margin-top: 16px; }
.app-flash .alert { margin-bottom: 12px; }
.app-flash-wrap .app-flash { margin-top: 1.25rem; }

/* ── Login / anonyme sider ── */
body.app-anon { background: var(--bg); }
.login-shell { max-width: 440px; margin: 4.5rem auto 3rem; padding: 0 16px; }
.login-brand { display: inline-flex; align-items: center; gap: 3px; margin-bottom: 20px; }
.login-brand .app-brand-mark { background: var(--petrol); color: #fff; }
.login-brand .app-brand-name { color: var(--petrol); font-size: 21px; }
.login-title { font-size: 1.5rem; font-weight: 700; color: var(--petrol); margin: 0 0 4px; }
.login-sub { color: var(--muted); margin: 0 0 20px; font-size: .95rem; }
.login-card { padding: 20px 22px; }
.login-card .btn-primary[type="submit"] { width: 100%; min-height: 40px; font-size: .95rem; }
@media (max-width: 575.98px) { .login-shell { margin-top: 2rem; } .login-card { padding: 16px; } }

/* ── Sidehoved (bruges af Nyheder og Skift firma): rolig titel + kort intro ── */
.inbox-toolbar-title { font-weight: 700; }
.page-intro { color: var(--muted); max-width: 64ch; margin: 0; font-size: .95rem; }