/* ===========================================================
   PurchaseInvoiceAI — design system "Quiet Precision"
   --------------------------------------------------------- */

:root {
    /* Surface palette — warm paper feeling */
    --paper:          #FAFAF7;
    --paper-2:        #F4F2EC;
    --ink:            #1A1A17;
    --ink-2:          #3D3D38;
    --ink-3:          #6B6B63;
    --ink-4:          #9C9C92;
    --hairline:       #E8E5DE;
    --hairline-2:     #D8D4C9;
    --hairline-strong:#1A1A17;

    /* Accents */
    --accent:         #1A1A17;            /* near-black */
    --accent-soft:    #2D2D29;
    --positive:       #2D5F4C;            /* oxidised green */
    --positive-soft:  #E7EFEA;
    --warning:        #B87E25;            /* mustard */
    --warning-soft:   #FBF1DC;
    --danger:         #C84B31;            /* terracotta */
    --danger-soft:    #FBE5DE;
    --info:           #1E4E8C;
    --info-soft:      #DEE9F5;

    /* Typography */
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-sans:    'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:    'Geist Mono', 'JetBrains Mono', 'SF Mono', Consolas, monospace;

    /* Geometry */
    --radius-sm: 4px;
    --radius:    8px;
    --radius-lg: 12px;
    --shadow-1:  0 1px 2px rgba(26,26,23,.04), 0 1px 0 rgba(26,26,23,.03);
    --shadow-2:  0 4px 24px -8px rgba(26,26,23,.10), 0 1px 0 rgba(26,26,23,.04);

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

    /* Bootstrap overrides */
    --bs-body-font-family: var(--font-sans);
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--paper);
    --bs-border-color: var(--hairline);
    --bs-border-radius: var(--radius);
    --bs-border-radius-sm: var(--radius-sm);
}

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

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

body {
    font-family: var(--font-sans);
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'ss01', 'cv11';
    letter-spacing: -0.005em;
    min-height: 100vh;
    margin-bottom: 0;
    background-image:
        radial-gradient(ellipse 1200px 600px at 20% -100px, rgba(45,95,76,.025), transparent),
        radial-gradient(ellipse 800px 400px at 110% 100%, rgba(184,126,37,.025), transparent);
    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; color: var(--ink-3); }

code, .font-mono { 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    { background: #f6f4ef; border: 1px solid #e3dccc; }
.surface-tinted-soft { background: #f6f4ef; padding: .4rem .55rem; border-radius: 6px; }
.label-uppercase   { font-size: .7rem; font-weight: 500; letter-spacing: .04em; }
.text-xxs          { font-size: .7rem; }
.text-xs           { font-size: .78rem; }
.text-xs-muted     { font-size: .78rem; color: var(--ink-3); }
.alert--compact    { font-size: .85rem; }
.alert--compact-xs { font-size: .78rem; }
.code-dim          { opacity: .7; }
.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; }
.aspect-200        { min-height: 200px; }
.lev-date-cell     { font-size: .78rem; white-space: nowrap; }
.header-edit-bg    { background: #f8f9fa; border: 1px solid var(--hairline, #dee2e6); }

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

.app-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: rgba(250, 250, 247, .85);
    backdrop-filter: saturate(140%) blur(16px);
    -webkit-backdrop-filter: saturate(140%) blur(16px);
    border-bottom: 1px solid var(--hairline);
    padding: 12px 0;
}

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--ink);
}
.app-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .05em;
    border-radius: 6px;
}
.app-brand-name {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: -0.02em;
}
.app-brand-accent { font-style: italic; color: var(--positive); }

.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); }
.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 {
    border: 1px solid var(--line, #e2ddcf);
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 6px 20px rgba(0,0,0,.10);
    min-width: 180px;
}
.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); }

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

.app-footer {
    border-top: 1px solid var(--hairline);
    padding: 16px 0;
    font-size: .75rem;
    color: var(--ink-4);
    background: var(--paper);
}
.app-footer-sep { margin: 0 8px; opacity: .5; }

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

.card {
    background: #FEFEFB;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}
.card-body { padding: 1rem 1.25rem; }
.card-body h5:first-child { margin-top: 0; margin-bottom: .75rem; }

/* Surface variant — accented borders */
.surface-quiet  { background: #FCFBF6; }
.surface-inset  { background: var(--paper-2); border-color: var(--hairline-2); }

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

.form-control, .form-select {
    border: 1px solid var(--hairline-2);
    border-radius: var(--radius);
    background: #FFFFFE;
    font-size: .875rem;
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.form-control:focus, .form-select:focus {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(26,26,23,.08);
}
.form-control-sm, .form-select-sm { font-size: .8125rem; padding: 4px 10px; }

.form-label { font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--ink-2); margin-bottom: 4px; }

.form-check-input {
    border-color: var(--hairline-2);
    border-radius: 4px;
    background-color: #FFFFFE;
}
.form-check-input:checked { background-color: var(--ink); border-color: var(--ink); }
.form-check-label { font-size: .82rem; color: var(--ink-2); }

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

.btn {
    font-size: .8125rem;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: var(--radius);
    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 {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}
.btn-primary:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent-soft); }
.btn-primary:disabled { background: var(--ink-4); border-color: var(--ink-4); opacity: .6; }

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

.btn-secondary { background: var(--ink-2); border-color: var(--ink-2); color: var(--paper); }
.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 {
    color: var(--ink-2);
    text-decoration: none;
    padding: 6px 8px;
}
.btn-link:hover { color: var(--ink); 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;
    color: var(--ink);
}
.table thead th {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-3);
    background: var(--paper-2) !important;
    border-bottom: 1px solid var(--hairline-2);
    padding: 8px 12px;
    white-space: nowrap;
}
.table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--hairline);
    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 {
    background: var(--paper-2);
    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
   ============================================================ */

.badge {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    font-family: var(--font-sans);
    border: 1px solid transparent;
}
/* 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)  !important; border-color: rgba(184,126,37,.2); }
.badge.bg-danger    { background: var(--danger-soft)   !important; color: var(--danger)   !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); }
.alert-danger  { background: var(--danger-soft);   border-color: rgba(200,75,49,.18);  color: var(--danger); }
.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); }
.def-list dd.dd-emphasize { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; letter-spacing: -0.01em; }
.def-list .dd-currency-suffix { color: var(--ink-4); font-size: .72rem; margin-left: 4px; font-family: var(--font-sans); }

/* Linked supplier panel inside header */
.supplier-link {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--hairline-2);
}
.supplier-current {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--positive-soft);
    color: var(--positive);
    font-size: .78rem;
    margin-bottom: 8px;
    border: 1px solid rgba(45,95,76,.18);
}
.supplier-current::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--positive);
    box-shadow: 0 0 0 3px rgba(45,95,76,.18);
}

/* 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: 76px; 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: 76px;
    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; }
    .map-table-wrap { max-height: none; }
    .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 {
    background: var(--paper-2);
    font-weight: 500;
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding: 10px 14px;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}
.inbox-section-row td.inbox-section-header--warn {
    background: #fff8e9;
    color: #8a6300;
}
.inbox-row--missing td { background: #fffbf3; }
.inbox-row--missing:hover td { background: #fff5e0 !important; }

/* 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: .65rem;
    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: .62rem;
    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 { gap: 12px; font-size: .85rem; padding: 12px 14px; }
    .comparison-sep { height: 18px; }
    .comparison-value, .comparison-diff { font-size: 1.05rem; }
}

/* Empty state for live filters that hide rows on small datasets */
.live-filter-empty { padding: 16px; text-align: center; color: var(--ink-3); font-size: .85rem; }

/* 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;
    font-weight: 400;
    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;
    color: #2b261d;
    border: 1px solid #c9c2ad;
    border-radius: 8px;
    z-index: 1080;
}
.inbox-filter-menu .dropdown-item { color: #2b261d; border-radius: 4px; }
.inbox-filter-menu .dropdown-item:hover { background: #f3f0e6; }
.inbox-filter-menu .dropdown-item.active { background: #2d5f4c; color: #fff; }
.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(--ink-1);
    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(--ink-1);
    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-column grid that wraps naturally on narrow screens.
   Two "totals" cells span all the way to the right edge on the bottom row. */
.order-head-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .9rem 1.1rem;
}
.order-head-grid .oh-wide { grid-column: 1 / -1; }
.order-head-grid .oh-totals { background: #f6f4ef; padding: .35rem .55rem; border-radius: 6px; }
.oh-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: #7a7363; margin-bottom: .15rem; }
.oh-value { font-size: .88rem; color: #2b261d; word-break: break-word; }
.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 - 100px);
    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;
    margin-bottom: 14px;
    gap: 12px;
}
.section-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: -0.015em;
    display: flex;
    align-items: center;
    gap: 10px;
}
.section-title::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 16px;
    background: var(--ink);
    border-radius: 2px;
}

/* Inline help box for settings/rule forms — quiet, info-tinted, easy to skim. */
.rule-help {
    background: var(--info-soft, #DEE9F5);
    border: 1px solid var(--hairline-2, #D8D4C9);
    border-radius: var(--radius-sm, 4px);
    padding: .55rem .7rem;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--ink-2, #3D3D38);
}
.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);
    background: linear-gradient(180deg, #FCFBF6, #FAFAF7);
    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); }
.comparison-diff--bad  { color: var(--danger); }
.comparison--ok   { border-color: rgba(45,95,76,.25); background: linear-gradient(180deg, var(--positive-soft), #FAFAF7); }
.comparison--warn { border-color: rgba(184,126,37,.3); background: linear-gradient(180deg, var(--warning-soft), #FAFAF7); }
.comparison--bad  { border-color: rgba(200,75,49,.25); background: linear-gradient(180deg, var(--danger-soft), #FAFAF7); }

.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;
    background: var(--paper-2);
    border: 1px solid var(--hairline-2);
    font-size: .73rem;
    font-weight: 500;
    color: var(--ink-2);
}
.stat-chip-num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ink);
}
.stat-chip--ok   { background: var(--positive-soft); border-color: rgba(45,95,76,.2); color: var(--positive); }
.stat-chip--bad  { background: var(--danger-soft);   border-color: rgba(200,75,49,.2);  color: var(--danger); }
.stat-chip--warn { background: var(--warning-soft);  border-color: rgba(184,126,37,.2); color: var(--warning); }
.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); box-shadow: 0 0 0 3px var(--warning-soft); }

.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: #8a8474; }

/* 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: .68rem;
    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;
}

/* Re-match button — secondary feel with arrow icon */
.btn-rematch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* "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 */
pre.code-block {
    background: #1A1A17;
    color: #D5D2C5;
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius);
    padding: 14px 16px;
    font-family: var(--font-mono);
    font-size: .72rem;
    line-height: 1.55;
    max-height: 400px;
    overflow: auto;
}
pre.code-block::-webkit-scrollbar { width: 8px; height: 8px; }
pre.code-block::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }

/* 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
   ============================================================ */

::selection { background: var(--ink); color: var(--paper); }

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

.text-muted { color: var(--ink-3) !important; }
.text-success { color: var(--positive) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger  { color: var(--danger) !important; }

hr { border-color: var(--hairline); opacity: 1; }
hr.dashed { border-top: 1px dashed var(--hairline-2); border-bottom: 0; }

/* 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: 76px;
    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 - 96px);
    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-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}
.settings-nav-list li { margin: 0; }
.settings-nav-list a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--ink-2, #4a4a4a);
    text-decoration: none;
    font-size: .9rem;
    line-height: 1.3;
    transition: background .12s ease, color .12s ease;
}
.settings-nav-list a:hover {
    background: rgba(183, 92, 26, .07);
    color: var(--ink, #1a1a1a);
    text-decoration: none;
}
.settings-nav-list a.is-active {
    background: rgba(183, 92, 26, .12);
    color: var(--accent, #b75c1a);
    font-weight: 600;
}
.settings-nav-icon {
    font-size: 1rem;
    line-height: 1;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.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-list {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-bottom: 0;
    }
    .settings-nav-list a { padding: 6px 10px; font-size: .85rem; }
    .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: 76px;
}
.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;
}
.settings-badge--ok   { background: rgba(25, 135, 84, .12); color: #0f5132; }
.settings-badge--warn { background: rgba(255, 193, 7, .18); color: #846100; }

/* ── 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;
    background: rgba(255, 193, 7, .05);
    border: 1px dashed rgba(255, 193, 7, .4);
    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 {
    background: var(--surface-1, #fff);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 8px;
    padding: 14px 16px;
    border-left: 4px solid var(--ink-3, #6b6357);
}
.status-card--ok   { border-left-color: #198754; }
.status-card--warn { border-left-color: #ffc107; }
.status-card--info { border-left-color: #0dcaf0; }
.status-card--err  { border-left-color: #dc3545; }
.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%;
    background: #198754;
    transition: width .3s ease;
}
.usage-meter--warn .usage-meter-fill { background: #ffc107; }
.usage-meter--err  .usage-meter-fill { background: #dc3545; }
.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);
    background: var(--warning-soft, #FBF1DC);
    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, #B87E25);
}
.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;
}