/* ============================================================
   Salgsbilag v2 — neutral modern SaaS view (2026-05-08)
   Scope: .salgsbilag-v2 only (does not affect købsbilag)
   ============================================================ */
/* Hanken Grotesk / JetBrains Mono / Fraunces are enqueued as 'tresser-account-fonts'
   in functions.php. An @import here would sit after ~3000 lines of rules, which is
   invalid CSS and silently dropped — that is why Fraunces never loaded. */

.salgsbilag-v2 {
    --sbv2-bg: #F6F5F0;
    --sbv2-paper: #FFFFFF;
    --sbv2-ink: #0E0E0C;
    --sbv2-ink-2: #2A2A26;
    --sbv2-muted: #696860;
    --sbv2-muted-2: #696860;  /* was #9A9890 (2.9:1 on white). Now equal to --sbv2-muted; see GH #1033 E2. */
    --sbv2-line: #E6E2D7;
    --sbv2-line-strong: #D5D0C2;
    --sbv2-tint: #EFECDF;
    --sbv2-moss: #2F5D3E;
    --sbv2-moss-soft: #E2EAE0;
    --sbv2-amber: #7A4A00;
    --sbv2-amber-soft: #F4E9D2;
    --sbv2-rust: #8B2E1A;
    --sbv2-rust-soft: #F3DDD5;
    --sbv2-ledger: #2B4A5C;
    --sbv2-ledger-soft: #E4EAED;

    background: var(--sbv2-bg);
    color: var(--sbv2-ink);
    font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.005em;
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    min-height: 100vh;
}
.salgsbilag-v2 *,
.salgsbilag-v2 *::before,
.salgsbilag-v2 *::after { box-sizing: border-box; }
.salgsbilag-v2 .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-feature-settings: "tnum"; }

/* Topbar */
.salgsbilag-v2 .sbv2-topbar {
    position: sticky; top: 0; z-index: 20;
    background: rgba(246,245,240,0.88);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--sbv2-line);
    padding: 14px 24px;
    display: flex; align-items: center; gap: 14px;
}
.salgsbilag-v2 .sbv2-crumbs { display: flex; align-items: center; gap: 10px; color: var(--sbv2-muted); font-size: 13px; }
.salgsbilag-v2 .sbv2-crumbs a { color: var(--sbv2-muted); text-decoration: none; }
.salgsbilag-v2 .sbv2-crumbs a:hover { color: var(--sbv2-ink); }
.salgsbilag-v2 .sbv2-crumbs .sep { opacity: 0.5; }
.salgsbilag-v2 .sbv2-crumbs .here { color: var(--sbv2-ink); font-weight: 500; }
.salgsbilag-v2 .sbv2-spacer { flex: 1; }
.salgsbilag-v2 .sbv2-icon-btn {
    width: 34px; height: 34px; border-radius: 8px;
    border: 1px solid var(--sbv2-line-strong); background: var(--sbv2-paper);
    display: inline-grid; place-items: center; color: var(--sbv2-ink-2);
    cursor: pointer; transition: 0.15s; text-decoration: none;
}
.salgsbilag-v2 .sbv2-icon-btn:hover { background: var(--sbv2-tint); }

/* Shell */
.salgsbilag-v2 .sbv2-shell { max-width: 1240px; margin: 0 auto; padding: 28px 24px 96px; }

/* Hero head */
.salgsbilag-v2 .sbv2-head { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.salgsbilag-v2 .sbv2-head-left { flex: 1; min-width: 280px; }
.salgsbilag-v2 .sbv2-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--sbv2-muted); font-weight: 600; margin-bottom: 10px;
}
.salgsbilag-v2 .sbv2-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sbv2-moss); }
.salgsbilag-v2 .sbv2-title {
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: 600; font-size: 32px; line-height: 1.1;
    letter-spacing: -0.025em; margin: 0 0 6px; color: var(--sbv2-ink);
    display: flex; align-items: baseline; gap: 12px; min-width: 0;
}
.salgsbilag-v2 .sbv2-title .num { color: var(--sbv2-muted-2); font-weight: 500; flex: none; }
.salgsbilag-v2 .sbv2-title .sbv2-title-text {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.salgsbilag-v2 .sbv2-subhead { color: var(--sbv2-muted); font-size: 14px; }
.salgsbilag-v2 .sbv2-head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Buttons */
.salgsbilag-v2 .sbv2-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 14px; border-radius: 9px;
    font: inherit; font-size: 13px; font-weight: 500;
    cursor: pointer; transition: 0.15s;
    border: 1px solid var(--sbv2-line-strong);
    background: var(--sbv2-paper); color: var(--sbv2-ink-2);
    text-decoration: none; line-height: 1;
}
.salgsbilag-v2 .sbv2-btn:hover { background: var(--sbv2-tint); }
.salgsbilag-v2 .sbv2-btn-primary { background: var(--sbv2-ink); color: #FBFAF5; border-color: var(--sbv2-ink); }
.salgsbilag-v2 .sbv2-btn-primary:hover { background: #1F1F1B; color: #FBFAF5; }
.salgsbilag-v2 .sbv2-btn[disabled],
.salgsbilag-v2 .sbv2-btn[disabled]:hover {
    opacity: 0.45;
    cursor: not-allowed;
    background: var(--sbv2-paper);
    color: var(--sbv2-muted);
    border-color: var(--sbv2-line-strong);
    box-shadow: none;
}
.salgsbilag-v2 .sbv2-btn-primary[disabled],
.salgsbilag-v2 .sbv2-btn-primary[disabled]:hover {
    background: var(--sbv2-line-strong);
    color: var(--sbv2-muted);
    border-color: var(--sbv2-line-strong);
}
.salgsbilag-v2 .sbv2-btn-danger { color: var(--sbv2-rust); border-color: color-mix(in srgb, var(--sbv2-rust) 35%, var(--sbv2-line-strong)); }
.salgsbilag-v2 .sbv2-btn-danger:hover { background: var(--sbv2-rust-soft); }
.salgsbilag-v2 .sbv2-btn-moss { background: var(--sbv2-moss); color: #FBFAF5; border-color: var(--sbv2-moss); }
.salgsbilag-v2 .sbv2-btn-moss:hover { background: #24462F; color: #FBFAF5; }
.salgsbilag-v2 .sbv2-btn svg { width: 14px; height: 14px; }
/* In-flight spinner on the disabled "Sender til Dinero…" button (see
   tresser_bilag_dinero_sending_script() in bilag-setup.php) */
.salgsbilag-v2 .sbv2-btn .sbv2-btn-spin {
    width: 13px; height: 13px; flex: none; box-sizing: border-box;
    border: 2px solid currentColor; border-top-color: transparent;
    border-radius: 50%;
    animation: sbv2-btn-spin 0.7s linear infinite;
}
@keyframes sbv2-btn-spin { to { transform: rotate(360deg); } }
.salgsbilag-v2 .sbv2-link {
    background: none; border: none; padding: 0;
    color: var(--sbv2-ink-2); font: inherit; font-size: 13px;
    cursor: pointer; text-decoration: none;
    border-bottom: 1px solid var(--sbv2-line-strong);
}
.salgsbilag-v2 .sbv2-link:hover { border-color: var(--sbv2-ink); color: var(--sbv2-ink); }

/* Pills */
.salgsbilag-v2 .sbv2-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 11px; border-radius: 999px;
    font-size: 12px; font-weight: 500; line-height: 1;
}
.salgsbilag-v2 .sbv2-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.salgsbilag-v2 .sbv2-pill.pill-ok    { background: var(--sbv2-moss-soft);  color: var(--sbv2-moss);  border: 1px solid color-mix(in srgb, var(--sbv2-moss) 18%, transparent); }
.salgsbilag-v2 .sbv2-pill.pill-amber { background: var(--sbv2-amber-soft); color: var(--sbv2-amber); border: 1px solid color-mix(in srgb, var(--sbv2-amber) 22%, transparent); }
.salgsbilag-v2 .sbv2-pill.pill-rust  { background: var(--sbv2-rust-soft);  color: var(--sbv2-rust);  border: 1px solid color-mix(in srgb, var(--sbv2-rust) 22%, transparent); }
.salgsbilag-v2 .sbv2-pill.pill-muted { background: var(--sbv2-tint);       color: var(--sbv2-muted); border: 1px solid var(--sbv2-line-strong); }

/* Always-visible reconciliation status strip (#782) — above the toolbar,
   independent of the cog-toggled stats card. */
.salgsbilag-v2 .sbv2-recon-status-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

/* Reconciliation list empty/no-results state (#782) — replaces a bare text
   line; also now shown in grouped view, which previously rendered nothing
   at all when a search/filter matched zero rows. */
.salgsbilag-v2 .sbv2-recon-noresults { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 22px; text-align: center; }
.salgsbilag-v2 .sbv2-recon-noresults-icon { font-size: 24px; opacity: 0.6; }
.salgsbilag-v2 .sbv2-recon-noresults-txt { color: var(--sbv2-muted); margin: 0; }

/* Flash messages (between hero and stats) */
.salgsbilag-v2 .sbv2-flash-stack { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.salgsbilag-v2 .sbv2-flash {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px; border-radius: 10px;
    font-size: 13px; font-weight: 500;
    border: 1px solid;
    animation: sbv2-flash-in 0.25s ease-out;
}
.salgsbilag-v2 .sbv2-flash svg { width: 16px; height: 16px; flex-shrink: 0; }
.salgsbilag-v2 .sbv2-flash span { flex: 1; }

/* Nudge banner (#1821): persistent, not a one-time flash — no border-in
   animation, stays until the underlying payment/transport state resolves. */
.salgsbilag-v2 .sbv2-nudge-banner {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    padding: 12px 16px; border-radius: 10px; margin-bottom: 18px;
    background: var(--sbv2-amber-soft);
    border: 1px solid color-mix(in srgb, var(--sbv2-amber) 30%, transparent);
    font-size: 13px; font-weight: 500; color: var(--sbv2-amber);
}
.salgsbilag-v2 .sbv2-nudge-banner svg { width: 16px; height: 16px; flex-shrink: 0; }
.salgsbilag-v2 .sbv2-nudge-banner span { flex: 1 1 220px; }
.salgsbilag-v2 .sbv2-sku-lookup-bar { display: flex; gap: 8px; align-items: center; }
.salgsbilag-v2 .sbv2-sku-lookup-input {
    flex: 1; padding: 8px 12px; border-radius: 8px;
    border: 1px solid var(--sbv2-line-strong); background: var(--sbv2-paper);
    color: var(--sbv2-ink); font-size: 14px; font-family: inherit;
}
.salgsbilag-v2 .sbv2-sku-lookup-input:focus { outline: 2px solid var(--sbv2-ink); outline-offset: 1px; }
.salgsbilag-v2 .sbv2-flash-close {
    background: none; border: 0; padding: 2px 6px;
    color: currentColor; opacity: 0.5; cursor: pointer;
    font-size: 18px; line-height: 1; font-family: inherit;
}
.salgsbilag-v2 .sbv2-flash-close:hover { opacity: 1; }
.salgsbilag-v2 .sbv2-flash-ok      { background: var(--sbv2-moss-soft); color: var(--sbv2-moss); border-color: color-mix(in srgb, var(--sbv2-moss) 22%, transparent); }
.salgsbilag-v2 .sbv2-flash-error   { background: var(--sbv2-rust-soft); color: var(--sbv2-rust); border-color: color-mix(in srgb, var(--sbv2-rust) 22%, transparent); }
/* #1227: warning/info severities — previously only ok/error existed; call
   sites needing amber/neutral styling fell back to inline style= overrides
   (sbv2-flash-amber was referenced but never defined here). */
.salgsbilag-v2 .sbv2-flash-warning { background: var(--sbv2-amber-soft);  color: var(--sbv2-amber);  border-color: color-mix(in srgb, var(--sbv2-amber) 22%, transparent); }
.salgsbilag-v2 .sbv2-flash-info    { background: var(--sbv2-ledger-soft); color: var(--sbv2-ledger); border-color: color-mix(in srgb, var(--sbv2-ledger) 22%, transparent); }
@keyframes sbv2-flash-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* Cards */
.salgsbilag-v2 .sbv2-card {
    background: var(--sbv2-paper); border: 1px solid var(--sbv2-line);
    border-radius: 14px;
    box-shadow: 0 1px 0 rgba(20,20,20,0.04), 0 12px 28px -16px rgba(20,20,20,0.10);
}
.salgsbilag-v2 .sbv2-card + .sbv2-card { margin-top: 18px; }
.salgsbilag-v2 .sbv2-card-stats { margin-bottom: 18px; }
.salgsbilag-v2 .sbv2-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 22px; border-bottom: 1px solid var(--sbv2-line);
    flex-wrap: wrap; row-gap: 8px;
}
.salgsbilag-v2 .sbv2-card-head h3 {
    font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--sbv2-muted); margin: 0;
}
.salgsbilag-v2 .sbv2-card-body { padding: 20px 22px; }
.salgsbilag-v2 .sbv2-card-body.tight { padding: 0; }

/* Betalinger payment drawer (#redesign) */
.salgsbilag-v2 .sbv2-pay-empty {
    margin: 0;
    font-size: 13px;
    color: var(--sbv2-muted);
}
.salgsbilag-v2 .sbv2-pay-drawer {
    display: none;
    border-top: 1px solid var(--sbv2-line);
}
.salgsbilag-v2 .sbv2-pay-drawer.sbv2-pay-drawer--open { display: block; }
.salgsbilag-v2 .sbv2-pay-drawer-inner { padding: 14px 22px; }
.salgsbilag-v2 .sbv2-pay-input {
    box-sizing: border-box;
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--sbv2-line);
    border-radius: 6px;
    font-size: 13px;
}

/* Stats */
.salgsbilag-v2 .sbv2-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.salgsbilag-v2 .sbv2-stat { padding: 18px 22px; border-right: 1px solid var(--sbv2-line); }
.salgsbilag-v2 .sbv2-stat:last-child { border-right: 0; }
.salgsbilag-v2 .sbv2-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--sbv2-muted); font-weight: 600; }
.salgsbilag-v2 .sbv2-stat-value { font-size: 18px; margin-top: 4px; font-weight: 500; color: var(--sbv2-ink); }
.salgsbilag-v2 .sbv2-stat-value.tabular { font-family: 'JetBrains Mono', monospace; font-size: 16px; letter-spacing: -0.01em; }
.salgsbilag-v2 .sbv2-stat-value .woocommerce-Price-amount { color: inherit; }
.salgsbilag-v2 .sbv2-stat-value .woocommerce-Price-currencySymbol { font-size: 0.85em; opacity: 0.7; margin-left: 2px; }

/* Chain strip — lifecycle status chain replacing the old flat 4-stat grid */
.salgsbilag-v2 .sbv2-chain-shell {
    background: var(--sbv2-paper); border: 1px solid var(--sbv2-line); border-radius: 14px;
    box-shadow: 0 1px 0 rgba(20,20,20,0.04), 0 12px 28px -16px rgba(20,20,20,0.10);
    margin-bottom: 18px; overflow: hidden;
}
.salgsbilag-v2 .sbv2-chain-shell.is-error { border-color: color-mix(in srgb, var(--sbv2-rust) 30%, var(--sbv2-line)); }
.salgsbilag-v2 .sbv2-chain { display: flex; align-items: stretch; }
.salgsbilag-v2 .sbv2-chain-hero {
    flex: 0 0 auto; padding: 18px 24px; display: flex; flex-direction: column; justify-content: center; gap: 3px;
    border-right: 1px solid var(--sbv2-line); min-width: 150px;
}
.salgsbilag-v2 .sbv2-chain-hero .amt { font-family: 'JetBrains Mono', monospace; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.salgsbilag-v2 .sbv2-chain-hero .doc { font-size: 12px; color: var(--sbv2-muted); font-family: 'JetBrains Mono', monospace; margin-top: 2px; }
.salgsbilag-v2 .sbv2-chain-hero .doc b { color: var(--sbv2-ink-2); font-weight: 600; }
.salgsbilag-v2 .sbv2-chain-rail { flex: 1 1 auto; display: flex; align-items: center; padding: 12px 22px; min-height: 72px; flex-wrap: wrap; }
.salgsbilag-v2 .sbv2-chain-node { display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; flex: 0 0 auto; width: 96px; }
.salgsbilag-v2 .sbv2-chain-node .dot {
    width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--sbv2-line-strong); background: var(--sbv2-paper); color: var(--sbv2-muted-2);
    position: relative; z-index: 2; flex: 0 0 auto;
}
.salgsbilag-v2 .sbv2-chain-node .dot svg { width: 13px; height: 13px; }
.salgsbilag-v2 .sbv2-chain-node .txt { text-align: center; line-height: 1.3; }
.salgsbilag-v2 .sbv2-chain-node .lbl { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sbv2-muted); white-space: nowrap; }
.salgsbilag-v2 .sbv2-chain-node .sub { font-size: 11px; color: var(--sbv2-ink-2); margin-top: 1px; font-weight: 500; white-space: nowrap; }
.salgsbilag-v2 .sbv2-chain-node.done .dot { background: var(--sbv2-moss-soft); border-color: var(--sbv2-moss); color: var(--sbv2-moss); }
.salgsbilag-v2 .sbv2-chain-node.done .lbl { color: var(--sbv2-moss); }
.salgsbilag-v2 .sbv2-chain-node.current .dot {
    background: var(--sbv2-amber-soft); border-color: var(--sbv2-amber); color: var(--sbv2-amber);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--sbv2-amber) 14%, transparent);
    animation: sbv2-chain-pulse 2.4s ease-in-out infinite;
}
.salgsbilag-v2 .sbv2-chain-node.current .lbl { color: var(--sbv2-amber); }
@keyframes sbv2-chain-pulse {
    0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sbv2-amber) 14%, transparent); }
    50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--sbv2-amber) 7%, transparent); }
}
.salgsbilag-v2 .sbv2-chain-node.error .dot { background: var(--sbv2-rust-soft); border-color: var(--sbv2-rust); color: var(--sbv2-rust); }
.salgsbilag-v2 .sbv2-chain-node.error .lbl { color: var(--sbv2-rust); }
.salgsbilag-v2 .sbv2-chain-node.pending .dot { color: var(--sbv2-muted-2); }
.salgsbilag-v2 .sbv2-chain-node.skip .dot { border-style: dashed; opacity: 0.5; }
.salgsbilag-v2 .sbv2-chain-node.skip .txt { opacity: 0.5; }
.salgsbilag-v2 .sbv2-chain-track { flex: 1 1 22px; height: 1.5px; background: var(--sbv2-line-strong); position: relative; top: -17px; min-width: 12px; max-width: 40px; }
.salgsbilag-v2 .sbv2-chain-track.filled { background: var(--sbv2-moss); }
.salgsbilag-v2 .sbv2-chain-track.dashed { background: repeating-linear-gradient(90deg, var(--sbv2-line-strong) 0 5px, transparent 5px 10px); }
.salgsbilag-v2 .sbv2-chain-track.independent { background: none; border-top: 1.5px dotted var(--sbv2-line-strong); display: flex; align-items: center; justify-content: center; }
.salgsbilag-v2 .sbv2-chain-track.independent::after {
    content: "\21C4"; position: relative; top: -8px; font-size: 10px; color: var(--sbv2-muted-2);
    background: var(--sbv2-paper); padding: 0 3px; line-height: 1;
}
.salgsbilag-v2 .sbv2-chain-src-chip {
    display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600;
    padding: 2px 7px; border-radius: 999px; margin-top: 2px; white-space: nowrap;
}
.salgsbilag-v2 .sbv2-chain-src-chip.auction { background: var(--sbv2-amber-soft); color: var(--sbv2-amber); }
.salgsbilag-v2 .sbv2-chain-src-chip.dba { background: #DCE6EE; color: #2A5578; }
.salgsbilag-v2 .sbv2-chain-src-chip.privat { background: var(--sbv2-tint); color: var(--sbv2-ink-2); }
/* Single view: the wide rail on desktop, the list cards' horizontal strip on phones
   (owner 2026-09-13: "horizontal timeline like the bilag page"). */
.salgsbilag-v2 .sbv2-chain > .bilag-chain-strip { display: none; }
@media (max-width: 820px) {
    .salgsbilag-v2 .sbv2-chain > .sbv2-chain-rail { display: none; }
    .salgsbilag-v2 .sbv2-chain > .bilag-chain-strip { display: flex; margin: 0; padding: 12px 6px 10px; }
}
@media (max-width: 820px) {
    .salgsbilag-v2 .sbv2-chain { flex-direction: column; }
    .salgsbilag-v2 .sbv2-chain-hero { border-right: 0; border-bottom: 1px solid var(--sbv2-line); flex-direction: row; justify-content: space-between; align-items: center; }
    .salgsbilag-v2 .sbv2-chain-rail { flex-direction: column; align-items: flex-start; padding: 18px 20px; }
    .salgsbilag-v2 .sbv2-chain-node { flex-direction: row; width: auto; align-items: center; gap: 12px; padding: 6px 0; }
    .salgsbilag-v2 .sbv2-chain-node .txt { text-align: left; }
    .salgsbilag-v2 .sbv2-chain-track { width: 1.5px; height: 20px; top: 0; left: 14px; flex: none; min-width: 0; max-width: none; margin: -2px 0; }
    .salgsbilag-v2 .sbv2-chain-track.independent { border-top: 0; border-left: 1.5px dotted var(--sbv2-line-strong); }
    .salgsbilag-v2 .sbv2-chain-track.independent::after { top: 0; left: -1px; }
}

/* Grid */
.salgsbilag-v2 .sbv2-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; }
@media (max-width: 1024px) { .salgsbilag-v2 .sbv2-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px)  {
    .salgsbilag-v2 .sbv2-stats { grid-template-columns: repeat(2, 1fr); }
    .salgsbilag-v2 .sbv2-stat:nth-child(2) { border-right: 0; }
    .salgsbilag-v2 .sbv2-stat:nth-child(-n+2) { border-bottom: 1px solid var(--sbv2-line); }
}

/* Customer KV */
.salgsbilag-v2 .sbv2-kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 14px; margin: 0; }
.salgsbilag-v2 .sbv2-kv dt { color: var(--sbv2-muted); margin: 0; }
.salgsbilag-v2 .sbv2-kv dd { margin: 0; color: var(--sbv2-ink-2); word-break: break-word; }
.salgsbilag-v2 .sbv2-kv a { color: var(--sbv2-ink-2); text-decoration: none; border-bottom: 1px solid var(--sbv2-line-strong); }
.salgsbilag-v2 .sbv2-kv a:hover { border-color: var(--sbv2-ink); color: var(--sbv2-ink); }
.salgsbilag-v2 .sbv2-contact-raw {
    margin: 0 0 14px; padding: 12px 14px;
    background: var(--sbv2-tint); border: 1px solid var(--sbv2-line);
    border-radius: 8px; font-family: 'JetBrains Mono', monospace; font-size: 12px;
    color: var(--sbv2-ink-2); white-space: pre-wrap; word-break: break-word;
}

/* Notes */
.salgsbilag-v2 .sbv2-note {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 11px 13px; border-radius: 10px;
    background: var(--sbv2-tint); color: var(--sbv2-ink-2);
    font-size: 13px; border: 1px solid var(--sbv2-line-strong);
    margin-top: 16px;
}
.salgsbilag-v2 .sbv2-note svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }
.salgsbilag-v2 .sbv2-note.sbv2-note-ok    { background: var(--sbv2-moss-soft); color: var(--sbv2-moss); border-color: color-mix(in srgb, var(--sbv2-moss) 18%, transparent); }
.salgsbilag-v2 .sbv2-note.sbv2-note-amber { background: var(--sbv2-amber-soft); color: var(--sbv2-amber); border-color: color-mix(in srgb, var(--sbv2-amber) 18%, transparent); }
.salgsbilag-v2 .sbv2-note.sbv2-note-rust  { background: var(--sbv2-rust-soft); color: var(--sbv2-rust); border-color: color-mix(in srgb, var(--sbv2-rust) 18%, transparent); }
.salgsbilag-v2 .sbv2-note code { font-family: 'JetBrains Mono', monospace; background: rgba(0,0,0,0.05); padding: 1px 5px; border-radius: 4px; }

/* VIES verified note, collapsed behind a chevron */
.salgsbilag-v2 details.sbv2-note.vies-collapse { display: block; padding: 0; }
.salgsbilag-v2 details.sbv2-note.vies-collapse > summary {
    display: flex; gap: 10px; align-items: center; cursor: pointer; list-style: none;
    padding: 11px 13px;
}
.salgsbilag-v2 details.sbv2-note.vies-collapse > summary::-webkit-details-marker { display: none; }
.salgsbilag-v2 details.sbv2-note.vies-collapse > summary svg { margin-top: 0; }
.salgsbilag-v2 details.sbv2-note.vies-collapse > summary .vies-chev {
    margin-left: auto; width: 8px; height: 8px; flex-shrink: 0;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); transition: transform 0.15s ease; opacity: 0.7;
}
.salgsbilag-v2 details.sbv2-note.vies-collapse[open] > summary .vies-chev { transform: rotate(-135deg); margin-top: -3px; }
.salgsbilag-v2 .vies-collapse-body { padding: 0 13px 12px 38px; font-size: 13px; }
.salgsbilag-v2 .vies-meta-row { color: var(--sbv2-muted-2); font-size: 11px; margin-bottom: 8px; }
.salgsbilag-v2 .vies-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Generic "done" note, collapsed behind a chevron (#1582 item 2, Transport card
   reuses the same shell as VIES's item-1 vies-collapse above, under a non-VIES-
   specific name since it's shared by multiple cards now). */
.salgsbilag-v2 details.sbv2-note.sbv2-collapse-note { display: block; padding: 0; }
.salgsbilag-v2 details.sbv2-note.sbv2-collapse-note > summary {
    display: flex; gap: 10px; align-items: center; cursor: pointer; list-style: none;
    padding: 11px 13px;
}
.salgsbilag-v2 details.sbv2-note.sbv2-collapse-note > summary::-webkit-details-marker { display: none; }
.salgsbilag-v2 details.sbv2-note.sbv2-collapse-note > summary .sbv2-collapse-chev {
    margin-left: auto; width: 8px; height: 8px; flex-shrink: 0;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); transition: transform 0.15s ease; opacity: 0.7;
}
.salgsbilag-v2 details.sbv2-note.sbv2-collapse-note[open] > summary .sbv2-collapse-chev { transform: rotate(-135deg); margin-top: -3px; }
.salgsbilag-v2 .sbv2-collapse-note .sbv2-collapse-meta { color: var(--sbv2-muted-2); font-size: 12px; }
.salgsbilag-v2 .sbv2-collapse-body { padding: 0 13px 12px 13px; font-size: 13px; }
.salgsbilag-v2 .sbv2-collapse-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Chip */
.salgsbilag-v2 .sbv2-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px; border-radius: 6px; background: var(--sbv2-tint);
    font-size: 12px; color: var(--sbv2-ink-2); font-weight: 500;
}

/* Line items */
.salgsbilag-v2 .sbv2-lines-wrap { overflow-x: auto; }
.salgsbilag-v2 .sbv2-lines { width: 100%; border-collapse: collapse; table-layout: fixed; }
.salgsbilag-v2 .sbv2-lines th,
.salgsbilag-v2 .sbv2-lines td { box-sizing: border-box; }
/* Produkt column must never be squeezed out by added columns (Indkøb/Avance/
   Brugtmoms, Førpris/Rabat when discounted) — table-layout:fixed distributes
   remaining width to it, which went to 0 once enough fixed-width columns were
   added (#889 follow-up: title/thumb went invisible on view page). */
.salgsbilag-v2 .sbv2-lines th:first-child,
.salgsbilag-v2 .sbv2-lines td:first-child { width: 220px; min-width: 220px; }
.salgsbilag-v2 .sbv2-lines th:not(:first-child),
.salgsbilag-v2 .sbv2-lines td:not(:first-child) { width: 104px; }
.salgsbilag-v2 .sbv2-lines th:last-child,
.salgsbilag-v2 .sbv2-lines td:last-child { width: 160px; }
.salgsbilag-v2 .sbv2-lines td { overflow: hidden; }
/* Købsbilag view: linked-and-sold lines show a stacked Køb/Salg price —
   two labelled amounts don't fit the 160px column on one nowrap line each
   (was clipped by the overflow:hidden above). Let this block wrap instead
   of silently cutting off the price value (#468). */
.salgsbilag-v2 .sbv2-lines td.right .sbv2-price-dual,
.salgsbilag-v2 .sbv2-lines td.right .sbv2-price-dual span { white-space: normal; }
/* Pris/Indkøb/Avance/Brugtmoms stacked vertically in one column instead of
   one column each — quick per-line margin overview without a wide table. */
.salgsbilag-v2 .sbv2-price-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.salgsbilag-v2 .sbv2-price-main { color: var(--sbv2-ink); font-weight: 500; }
.salgsbilag-v2 .sbv2-price-strike { color: var(--sbv2-muted); text-decoration: line-through; margin-right: 5px; }
.salgsbilag-v2 .sbv2-price-badge {
    font-size: 11px; font-weight: 600; color: var(--sbv2-amber); background: var(--sbv2-amber-soft);
    padding: 1px 5px; border-radius: 4px; margin-right: 5px; vertical-align: 1px;
}
.salgsbilag-v2 .sbv2-price-sub { font-size: 11px; color: var(--sbv2-muted); }
.salgsbilag-v2 .sbv2-price-sub-accent { color: var(--sbv2-moss); }
.salgsbilag-v2 .sbv2-lines thead th {
    text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--sbv2-muted); padding: 13px 14px; background: #FBFAF5; border-bottom: 1px solid var(--sbv2-line);
    white-space: nowrap;
}
.salgsbilag-v2 .sbv2-lines thead th.right { text-align: right; }
.salgsbilag-v2 .sbv2-lines th:first-child,
.salgsbilag-v2 .sbv2-lines td:first-child { padding-left: 22px; }
.salgsbilag-v2 .sbv2-lines th:last-child,
.salgsbilag-v2 .sbv2-lines td:last-child { padding-right: 22px; }
.salgsbilag-v2 .sbv2-lines tbody td { padding: 12px 14px; border-bottom: 1px solid var(--sbv2-line); vertical-align: middle; }
.salgsbilag-v2 .sbv2-lines tbody tr:last-child td { border-bottom: 0; }
.salgsbilag-v2 .sbv2-lines tbody tr:hover { background: #FBFAF5; }
.salgsbilag-v2 .sbv2-lines td.right { text-align: right; font-family: 'JetBrains Mono', monospace; font-size: 13px; white-space: nowrap; }
.salgsbilag-v2 .sbv2-lines td.right .woocommerce-Price-amount { color: var(--sbv2-ink); }
.salgsbilag-v2 .sbv2-li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.salgsbilag-v2 .sbv2-li-thumb {
    width: 72px; height: 72px; border-radius: 7px; flex-shrink: 0;
    object-fit: cover; border: 1px solid var(--sbv2-line); background: var(--sbv2-tint);
}
.salgsbilag-v2 .sbv2-li-thumb-empty { display: inline-grid; place-items: center; color: var(--sbv2-muted-2); }
.salgsbilag-v2 .sbv2-li-meta { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.salgsbilag-v2 .sbv2-li-name { font-weight: 500; color: var(--sbv2-ink); text-decoration: none;
    overflow: hidden; min-width: 0; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.salgsbilag-v2 .sbv2-li-name:hover { color: var(--sbv2-ink); text-decoration: underline; }
.salgsbilag-v2 .sbv2-li-id { font-size: 11px; color: var(--sbv2-muted-2); }

/* Total row */
.salgsbilag-v2 .sbv2-total-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 16px 22px; background: #FBFAF5; border-top: 1px solid var(--sbv2-line);
}
.salgsbilag-v2 .sbv2-total-label { font-size: 12px; color: var(--sbv2-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.salgsbilag-v2 .sbv2-total-amount { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--sbv2-ink); }
.salgsbilag-v2 .sbv2-total-amount .woocommerce-Price-amount { color: inherit; }
/* Avance/Brugtmoms/transport-moms subtotals fold into one quiet caption line
   instead of each getting their own full-weight .sbv2-total-row — they were
   visually competing with the actual Total for attention. */
.salgsbilag-v2 .sbv2-totals-meta {
    display: flex; flex-wrap: wrap; gap: 16px; padding: 10px 22px;
    font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--sbv2-muted);
    border-top: 1px solid var(--sbv2-line); background: #FBFAF5;
}
.salgsbilag-v2 .sbv2-totals-meta b { color: var(--sbv2-ink-2); font-weight: 600; }
.salgsbilag-v2 .sbv2-total-row.sbv2-total-row-grand { border-top: 2px solid var(--sbv2-ink); padding-top: 16px; padding-bottom: 18px; }
.salgsbilag-v2 .sbv2-total-row.sbv2-total-row-grand .sbv2-total-amount { font-size: 26px; font-weight: 600; }

/* Dinero rows */
.salgsbilag-v2 .sbv2-dr-list { display: flex; flex-direction: column; }
.salgsbilag-v2 .sbv2-dr {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 0; border-bottom: 1px dashed var(--sbv2-line);
    font-size: 13px;
}
.salgsbilag-v2 .sbv2-dr:first-child { padding-top: 0; }
.salgsbilag-v2 .sbv2-dr:last-child { border-bottom: 0; padding-bottom: 0; }
.salgsbilag-v2 .sbv2-dr .lbl { color: var(--sbv2-muted); }
.salgsbilag-v2 .sbv2-dr .val { color: var(--sbv2-ink-2); font-size: 13px; }
/* #1205: compact horizontal field row (e.g. Transport card's Status/Dato) —
   opt-in modifier, base .sbv2-dr-list stays stacked for cards that need it */
.salgsbilag-v2 .sbv2-dr-list.sbv2-dr-list-inline { flex-direction: row; flex-wrap: wrap; column-gap: 20px; row-gap: 6px; }
.salgsbilag-v2 .sbv2-dr-list.sbv2-dr-list-inline .sbv2-dr { flex: 0 0 auto; padding: 0; border-bottom: 0; justify-content: flex-start; gap: 6px; }
.salgsbilag-v2 .sbv2-dr-list.sbv2-dr-list-inline .sbv2-dr:first-child,
.salgsbilag-v2 .sbv2-dr-list.sbv2-dr-list-inline .sbv2-dr:last-child { padding: 0; border-bottom: 0; }
/* #1202: 2x2 compact grid — label-above-value cells, for cards with 4 short
   fields (e.g. købsbilag Dinero card) where the 340px aside is too narrow
   for the inline row modifier to line up cleanly */
.salgsbilag-v2 .sbv2-dr-list.sbv2-dr-list-grid2 {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 10px;
}
.salgsbilag-v2 .sbv2-dr-list.sbv2-dr-list-grid2 .sbv2-dr {
    flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px;
    padding: 0; border-bottom: 0;
}
.salgsbilag-v2 .sbv2-dr-list.sbv2-dr-list-grid2 .sbv2-dr .val { text-align: left; }
/* #1199: payment history rows — grid columns instead of a concatenated string */
.salgsbilag-v2 .sbv2-dr.sbv2-pay-row {
    display: grid;
    grid-template-columns: 88px 96px 1fr auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
}
.salgsbilag-v2 .sbv2-pay-date { color: var(--sbv2-muted); }
.salgsbilag-v2 .sbv2-pay-amount { color: var(--sbv2-ink-2); }
/* #3895: was var(--sbv2-muted) at 12px — read as missing next to the amount.
   Bumped to ink-2 (same weight as the amount) so the account is legible. */
.salgsbilag-v2 .sbv2-pay-account { color: var(--sbv2-ink-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.salgsbilag-v2 .sbv2-pay-actions { justify-self: end; }
/* Reconciliation table — reuses .sbv2-lines, own column widths */
.salgsbilag-v2 .sbv2-recon-lines th,
.salgsbilag-v2 .sbv2-recon-lines td { width: auto; }
.salgsbilag-v2 .sbv2-recon-lines th:nth-child(1),
.salgsbilag-v2 .sbv2-recon-lines td:nth-child(1) { width: 78px; }
.salgsbilag-v2 .sbv2-recon-lines th:nth-child(2),
.salgsbilag-v2 .sbv2-recon-lines td:nth-child(2) { width: 90px; }
.salgsbilag-v2 .sbv2-recon-lines td form { display: flex; gap: 6px; }
.salgsbilag-v2 .sbv2-recon-resolved { opacity: 0.45; }
.salgsbilag-v2 .sbv2-recon-id { color: var(--sbv2-muted); font-size: 11px; }
.salgsbilag-v2 .sbv2-recon-amount { font-weight: 600; }
.salgsbilag-v2 .sbv2-recon-amount.is-inbound { color: var(--sbv2-moss); }
.salgsbilag-v2 .sbv2-recon-amount.is-outbound { color: var(--sbv2-rust); }
/* #696: direction glyph — color alone isn't colorblind-safe */
.salgsbilag-v2 .sbv2-recon-dir { margin-right: 2px; }
.salgsbilag-v2 .sbv2-recon-empty { color: var(--sbv2-muted); }
/* #663: unconfirmed Dinero-account warning (send-to-Dinero modal + drawer) */
.salgsbilag-v2 .sbv2-recon-unconfirmed { color: var(--sbv2-rust); font-size: 11px; font-weight: 600; }
.salgsbilag-v2 p.sbv2-recon-unconfirmed { margin: 4px 0 0; }
.salgsbilag-v2 .sbv2-recon-pending { padding: 2px 8px; font-size: 10.5px; margin-left: 6px; }
.salgsbilag-v2 .sbv2-recon-status-dot {
    display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    margin-left: 7px; flex-shrink: 0; vertical-align: middle;
    box-sizing: border-box;
}
/* Pending isn't really a "status" yet — a hollow ring reads as
   not-decided instead of competing as a third color against the
   clear green/red of a resolved outcome. */
.salgsbilag-v2 .sbv2-recon-status-dot.sbv2-recon-status-pending  { background: transparent; border: 1.5px solid var(--sbv2-muted-2); }
.salgsbilag-v2 .sbv2-recon-status-dot.sbv2-recon-status-approved { background: #16A34A; border: 1px solid rgba(0,0,0,.08); }
.salgsbilag-v2 .sbv2-recon-status-dot.sbv2-recon-status-rejected { background: #DC2626; border: 1px solid rgba(0,0,0,.08); }
.salgsbilag-v2 .sbv2-recon-toggle {
    display: none; /* shown only on mobile — see the card media query below */
    align-items: center; justify-content: center;
    width: 20px; height: 20px; padding: 0; margin-left: 6px;
    background: none; border: 0;
    color: var(--sbv2-muted); cursor: pointer; flex-shrink: 0;
}
.salgsbilag-v2 .sbv2-recon-toggle svg { transition: transform .15s; }
/* #696 slice 2c: inline quick-approve icon next to the status dot, for
   high-confidence rows only ($bulk_eligible — same tiers/threshold as the
   bulk-approve checkbox). Overrides the generic ".sbv2-recon-lines td form
   { display:flex }" rule (meant for the drawer's multi-button action forms)
   so this single-button form stays inline instead of breaking onto its own
   line inside the Dato cell. */
.salgsbilag-v2 .sbv2-recon-lines td form.sbv2-recon-quickapprove-form {
    display: inline-flex; margin-left: 6px; vertical-align: middle;
}
.salgsbilag-v2 .sbv2-recon-quickapprove {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; padding: 0; margin: 0;
    border-radius: 50%; border: 1px solid #16A34A; background: transparent;
    color: #16A34A; font-size: 11px; line-height: 1; cursor: pointer; flex-shrink: 0;
}
.salgsbilag-v2 .sbv2-recon-quickapprove:hover,
.salgsbilag-v2 .sbv2-recon-quickapprove:focus-visible {
    background: #16A34A; color: #fff; outline: 2px solid #16A34A; outline-offset: 1px;
}
.salgsbilag-v2 .sbv2-btn-sm { padding: 4px 10px; font-size: 12px; }
/* #3895: compact square icon button for card-head utility actions (sync,
   add, bulk-create) and row-level "⋯"/"✕" triggers — same visual language
   as .sbv2-btn, just square instead of label-width. */
.salgsbilag-v2 .sbv2-btn-icon {
    padding: 0; width: 28px; height: 28px; min-width: 28px;
    justify-content: center; font-size: 15px;
}
.salgsbilag-v2 .sbv2-btn-icon.sbv2-btn-sm { width: 24px; height: 24px; min-width: 24px; font-size: 13px; }
.salgsbilag-v2 .sbv2-card-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* Row-level reveal — hidden by default; :not([hidden]) sets the display so
   the UA's own "[hidden] { display: none }" always wins the toggle (same
   specificity trap documented elsewhere in this file for [hidden] guards). */
.salgsbilag-v2 .sbv2-row-more-actions:not([hidden]) { display: inline-flex; align-items: center; gap: 6px; }
.salgsbilag-v2 .sbv2-ext { color: var(--sbv2-ink); text-decoration: none; border-bottom: 1px solid var(--sbv2-line-strong); }
.salgsbilag-v2 .sbv2-ext:hover { border-color: var(--sbv2-ink); }

/* --- Reconciliation visual polish: status rail, confidence meter, type pills, toolbar --- */
/* Status rail — left accent on the row's first cell so outcome reads at a
   glance (replaces the old per-amount status dot). */
.salgsbilag-v2 .sbv2-recon-date-row td {
    padding: 8px 14px 6px; border-bottom: none; background: var(--sbv2-tint, #EFECDF);
    font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
    color: var(--sbv2-muted, #696860);
}
.salgsbilag-v2 .sbv2-recon-lines tbody td:first-child { border-left: 3px solid transparent; }
.salgsbilag-v2 .sbv2-recon-row-approved td:first-child { border-left-color: var(--sbv2-moss); }
.salgsbilag-v2 .sbv2-recon-row-rejected td:first-child { border-left-color: var(--sbv2-rust); }
.salgsbilag-v2 .sbv2-recon-row-pending  td:first-child { border-left-color: var(--sbv2-line-strong); }

/* Confidence meter — number over a banded bar, scannable at a distance */
.salgsbilag-v2 .sbv2-conf { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; width: 100%; }
.salgsbilag-v2 .sbv2-conf-num { font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1; color: var(--sbv2-ink-2); }
.salgsbilag-v2 .sbv2-conf-bar { width: 100%; max-width: 46px; height: 4px; border-radius: 2px; background: var(--sbv2-line); overflow: hidden; }
.salgsbilag-v2 .sbv2-conf-bar > span { display: block; height: 100%; border-radius: 2px; background: var(--sbv2-muted-2); }
.salgsbilag-v2 .sbv2-conf-high .sbv2-conf-bar > span { background: var(--sbv2-moss); }
.salgsbilag-v2 .sbv2-conf-mid  .sbv2-conf-bar > span { background: var(--sbv2-amber); }
.salgsbilag-v2 .sbv2-conf-low  .sbv2-conf-bar > span { background: var(--sbv2-rust); }
.salgsbilag-v2 .sbv2-conf-high .sbv2-conf-num { color: var(--sbv2-moss); }
.salgsbilag-v2 .sbv2-conf-low  .sbv2-conf-num { color: var(--sbv2-rust); }
/* Drawer field-list variant: left-align (dd is a flex:1 value cell, not a right-aligned column) and don't force full width. */
.salgsbilag-v2 .sbv2-conf-inline { align-items: flex-start; width: auto; }
.salgsbilag-v2 .sbv2-conf-inline .sbv2-conf-bar { max-width: 120px; }

/* Type identity pills — stable tint per match kind (trust now lives in the
   confidence meter + status rail, so colour is free to encode "what kind"). */
.salgsbilag-v2 .sbv2-tpill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.55; white-space: nowrap; }
.salgsbilag-v2 .sbv2-tpill-moss   { background: var(--sbv2-moss-soft);  color: var(--sbv2-moss); }
.salgsbilag-v2 .sbv2-tpill-amber  { background: var(--sbv2-amber-soft); color: var(--sbv2-amber); }
.salgsbilag-v2 .sbv2-tpill-rust   { background: var(--sbv2-rust-soft);  color: var(--sbv2-rust); }
.salgsbilag-v2 .sbv2-tpill-muted  { background: var(--sbv2-line); color: var(--sbv2-muted); }
.salgsbilag-v2 .sbv2-tpill-hollow { background: transparent; color: var(--sbv2-muted); box-shadow: inset 0 0 0 1px var(--sbv2-line-strong); }

/* Toolbar (search + filters) — promoted from inline styles */
.salgsbilag-v2 .sbv2-recon-toolbar { margin-bottom: 12px; }
.salgsbilag-v2 .sbv2-recon-searchbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.salgsbilag-v2 .sbv2-recon-search { position: relative; flex: 1; min-width: 160px; }
.salgsbilag-v2 .sbv2-recon-search input { width: 100%; box-sizing: border-box; padding: 9px 32px 9px 11px; border: 1px solid var(--sbv2-line-strong); border-radius: 8px; font: inherit; font-size: 14px; }
.salgsbilag-v2 .sbv2-recon-search-clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--sbv2-muted); cursor: pointer; font-size: 18px; line-height: 1; padding: 6px 8px; }
.salgsbilag-v2 .sbv2-recon-filters { border-top: 1px solid var(--sbv2-line); padding: 12px 16px; gap: 8px; flex-wrap: wrap; align-items: center; }
.salgsbilag-v2 .sbv2-recon-filters select { padding: 8px 10px; border: 1px solid var(--sbv2-line-strong); border-radius: 8px; font: inherit; font-size: 13px; }

/* Desktop row-click detail drawer — reveals context not in the columns.
   (On mobile the card expands its own cells; the drawer is hidden there.) */
.salgsbilag-v2 .sbv2-recon-lines tbody tr:not(.sbv2-recon-detail) { cursor: pointer; }
.salgsbilag-v2 .sbv2-recon-lines tbody tr:not(.sbv2-recon-detail):hover { background: var(--sbv2-tint); }
.salgsbilag-v2 .sbv2-recon-detail { display: none; }
.salgsbilag-v2 .sbv2-recon-lines tr.sbv2-recon-open + tr.sbv2-recon-detail { display: table-row; }
.salgsbilag-v2 .sbv2-recon-detail > td { padding: 6px 16px 16px; background: var(--sbv2-tint); }
/* Line-by-line: one field per row, label column + value, thin dividers */
.salgsbilag-v2 .sbv2-recon-dl { margin: 0; }
.salgsbilag-v2 .sbv2-dl-row { display: flex; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--sbv2-line); }
.salgsbilag-v2 .sbv2-dl-row:last-child { border-bottom: 0; }
.salgsbilag-v2 .sbv2-dl-row dt { flex: 0 0 168px; margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sbv2-muted); padding-top: 1px; }
.salgsbilag-v2 .sbv2-dl-row dd { flex: 1; min-width: 0; margin: 0; font-size: 13px; color: var(--sbv2-ink-2); word-break: break-word; }
.salgsbilag-v2 .sbv2-dl-row dd.mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
/* Section subheadings inside the drawer field list — group the fields without
   hiding any behind tabs. */
.salgsbilag-v2 .sbv2-recon-group-head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sbv2-ink); font-weight: 700; padding: 14px 0 6px; }
.salgsbilag-v2 .sbv2-recon-group-head:first-child { padding-top: 0; }

/* Attachment frame — the invoice/receipt slot at the foot of the drawer */
.salgsbilag-v2 .sbv2-att-head { margin: 16px 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sbv2-muted); }
.salgsbilag-v2 .sbv2-att { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--sbv2-line); border-radius: 10px; background: var(--sbv2-paper); }
.salgsbilag-v2 .sbv2-att-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 8px; background: var(--sbv2-moss-soft); color: var(--sbv2-moss); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.salgsbilag-v2 .sbv2-att-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.salgsbilag-v2 .sbv2-att-name { font-weight: 600; font-size: 13px; color: var(--sbv2-ink); }
.salgsbilag-v2 .sbv2-att-sub { font-size: 12px; color: var(--sbv2-muted); }
.salgsbilag-v2 .sbv2-att-link { color: var(--sbv2-moss); text-decoration: none; font-weight: 600; font-size: 13px; white-space: nowrap; }
.salgsbilag-v2 .sbv2-att-link:hover { text-decoration: underline; }
.salgsbilag-v2 .sbv2-att-empty { border-style: dashed; border-color: var(--sbv2-line-strong); background: transparent; justify-content: space-between; }
.salgsbilag-v2 .sbv2-att-empty-txt { color: var(--sbv2-muted); font-size: 13px; }

/* Drawer body — the line-by-line text and the attachment frame sit side by
   side (text left, attachment right). Wraps to stacked on narrow drawers. */
.salgsbilag-v2 .sbv2-recon-detail-body { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.salgsbilag-v2 .sbv2-recon-detail-body .sbv2-recon-dl { flex: 1 1 320px; min-width: 0; }
.salgsbilag-v2 .sbv2-recon-att-col { flex: 1 1 260px; min-width: 0; }
.salgsbilag-v2 .sbv2-recon-att-col .sbv2-att-head { margin-top: 0; }
/* Action bar — moved out of the list's Handling column into the drawer so the
   list itself stays clean. Full-width row under the text/attachment columns. */
.salgsbilag-v2 .sbv2-recon-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--sbv2-line); }
.salgsbilag-v2 .sbv2-recon-actions form { display: inline-flex; gap: 8px; margin: 0; }
/* Godkend/Afvis (in the form) stay side by side; the separate manual-match
   button forces its own row below them (issue #782 backlog / button redesign
   TODO) instead of just wrapping inline whenever the row runs out of width. */
.salgsbilag-v2 .sbv2-recon-actions .sbv2-recon-match-btn { flex-basis: 100%; margin-top: 2px; }

/* Stack & form */
.salgsbilag-v2 .sbv2-stack { display: flex; flex-direction: column; gap: 9px; }
.salgsbilag-v2 .sbv2-stack .sbv2-btn,
.salgsbilag-v2 .sbv2-stack form,
.salgsbilag-v2 .sbv2-stack form button { width: 100%; justify-content: center; }
/* #1203: kobsbilag Dinero-card action row — side-by-side instead of full-width
   stacked. Scoped to .sbv2-kobs-view (kobsbilag view only) via a modifier class
   added alongside .sbv2-stack, not a change to the shared .sbv2-stack rule above
   — salgsbilag's own .sbv2-stack usages (Betalinger card etc.) stay untouched.
   min-width:110px + flex-wrap keeps two buttons on one row down to ~230px of
   available width; below that they wrap to full-width stacked (old behavior)
   rather than overflow. Long labels wrap to a 2nd text line inside the button
   instead of breaking layout. */
.sbv2-kobs-view .sbv2-stack.sbv2-stack-row { flex-direction: row; flex-wrap: wrap; }
.sbv2-kobs-view .sbv2-stack-row .sbv2-btn,
.sbv2-kobs-view .sbv2-stack-row form,
.sbv2-kobs-view .sbv2-stack-row form button {
    width: auto; flex: 1 1 0; min-width: 110px; white-space: normal; text-align: center; line-height: 1.3;
}
.salgsbilag-v2 .sbv2-form { display: flex; flex-direction: column; gap: 11px; }
.salgsbilag-v2 .sbv2-form label { display: flex; flex-direction: column; gap: 5px; }
.salgsbilag-v2 .sbv2-form label > span { font-size: 12px; color: var(--sbv2-muted); font-weight: 500; }
.salgsbilag-v2 .sbv2-form select,
.salgsbilag-v2 .sbv2-form input[type="date"] {
    padding: 9px 11px; border: 1px solid var(--sbv2-line-strong); border-radius: 8px;
    background: var(--sbv2-paper); font: inherit; font-size: 13px; color: var(--sbv2-ink-2);
    width: 100%;
}
.salgsbilag-v2 .sbv2-form select:focus,
.salgsbilag-v2 .sbv2-form input:focus { outline: 2px solid var(--sbv2-ink); outline-offset: 1px; border-color: var(--sbv2-ink); }
.salgsbilag-v2 .sbv2-form .sbv2-btn { justify-content: center; }

.salgsbilag-v2 .sbv2-caption { color: var(--sbv2-muted-2); font-size: 12px; line-height: 1.45; }

/* Account-page wrapper resets so v2 paints edge-to-edge */
.salgsbilag-v2.account-page { padding: 0 !important; }

/* Mobile — stack table rows */
@media (max-width: 640px) {
    .salgsbilag-v2 .sbv2-dr { flex-wrap: wrap; row-gap: 6px; }
    .salgsbilag-v2 .sbv2-dr .val { flex-wrap: wrap; width: 100%; justify-content: space-between; }
    .salgsbilag-v2 .sbv2-dr-list.sbv2-dr-list-inline { flex-direction: column; }
    .salgsbilag-v2 .sbv2-dr-list.sbv2-dr-list-inline .sbv2-dr { width: 100%; justify-content: space-between; }
    .salgsbilag-v2 .sbv2-dr-list.sbv2-dr-list-grid2 { grid-template-columns: 1fr; }
    .salgsbilag-v2 .sbv2-dr.sbv2-pay-row { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; }
    .salgsbilag-v2 .sbv2-pay-account { flex: 1 1 100%; order: 3; }
    .salgsbilag-v2 .sbv2-pay-actions { margin-left: auto; }
    .salgsbilag-v2 .sbv2-lines-wrap { overflow: visible; }
    .salgsbilag-v2 .sbv2-lines thead { display: none; }
    .salgsbilag-v2 .sbv2-lines,
    .salgsbilag-v2 .sbv2-lines tbody,
    .salgsbilag-v2 .sbv2-lines tr,
    .salgsbilag-v2 .sbv2-lines td { display: block; width: 100%; box-sizing: border-box; }
    .salgsbilag-v2 .sbv2-lines tr {
        padding: 12px 16px;
        border-bottom: 1px solid var(--sbv2-line);
    }
    .salgsbilag-v2 .sbv2-lines tr:last-child { border-bottom: 0; }
    .salgsbilag-v2 .sbv2-lines td { padding: 0 !important; border: 0 !important; }
    .salgsbilag-v2 .sbv2-lines td:first-child { margin-bottom: 6px; }
    /* Inline meta row: any non-first cell sits inline */
    .salgsbilag-v2 .sbv2-lines td:not(:first-child) {
        display: inline-block !important;
        width: auto !important;
        margin-right: 14px;
        text-align: left !important;
        font-size: 12.5px;
        vertical-align: middle;
    }
    .salgsbilag-v2 .sbv2-lines td.right { font-family: 'JetBrains Mono', monospace; color: var(--sbv2-ink); font-weight: 500; }
    .salgsbilag-v2 .sbv2-lines td:last-child { margin-right: 0; }
    .salgsbilag-v2 .sbv2-li-name { white-space: normal; max-width: none; }
    .salgsbilag-v2 .sbv2-total-row { padding: 14px 16px; }

    /* Reconciliation table — CSS grid card. Dato/Tekst/Beløb all share one
       tight header line (Dato and Beløb auto-width, Tekst flexes and
       truncates). Type/Match/Konf./Handling collapse behind a tap anywhere
       on that header (see JS) to keep the collapsed card short. Placed
       after the generic .sbv2-lines mobile rules above so it wins the
       cascade tie (equal specificity, both sides use !important). */
    .salgsbilag-v2 .sbv2-recon-lines tr {
        display: grid !important;
        grid-template-columns: minmax(56px, auto) minmax(140px, 1fr) minmax(70px, auto);
        column-gap: 4px;
        align-items: baseline;
        cursor: pointer;
        overflow-x: auto;
    }
    .salgsbilag-v2 .sbv2-recon-lines td {
        margin: 0 !important;
    }
    .salgsbilag-v2 .sbv2-recon-lines td[data-label="Dato"] {
        grid-column: 1 / 2;
        grid-row: 1;
        display: block !important;
        text-align: left !important; font-family: inherit !important;
        font-size: 11.5px; color: var(--sbv2-muted);
        white-space: nowrap;
    }
    /* internal transaction id — not useful on a mobile card, desktop only */
    .salgsbilag-v2 .sbv2-recon-lines .sbv2-recon-id { display: none; }
    /* #782: the Dato column is squeezed to minmax(56px,auto) on this grid —
       no room for the inline quick-approve button alongside date/checkbox/
       status-dot. Drawer tap (Godkend) still covers the same action. */
    .salgsbilag-v2 .sbv2-recon-lines .sbv2-recon-quickapprove-form { display: none; }
    .salgsbilag-v2 .sbv2-recon-lines td[data-label="Tekst"] {
        grid-column: 2 / 3;
        grid-row: 1;
        display: block !important;
        min-width: 0;
        font-weight: 600; font-size: 15px; color: var(--sbv2-ink);
        text-align: left !important; font-family: inherit !important;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .salgsbilag-v2 .sbv2-recon-lines td[data-label="Beløb"] {
        grid-column: 3 / 4;
        grid-row: 1;
        display: block !important;
        font-weight: 600; font-size: 15px; font-family: inherit !important;
        text-align: right !important;
        white-space: nowrap;
    }
    .salgsbilag-v2 .sbv2-recon-toggle { display: none; }
    /* Type/Match/Konf. no longer render as their own <td> at all (#696 slice
       2b — desktop dropped them too, drawer-only now); no hide rule needed. */

    /* Status rail moves from the first cell to the whole card on mobile */
    .salgsbilag-v2 .sbv2-recon-lines tbody td:first-child { border-left: 0; }
    .salgsbilag-v2 .sbv2-recon-lines tbody tr { border-left: 3px solid transparent; padding-left: 13px; }
    .salgsbilag-v2 .sbv2-recon-row-approved { border-left-color: var(--sbv2-moss); }
    .salgsbilag-v2 .sbv2-recon-row-rejected { border-left-color: var(--sbv2-rust); }
    .salgsbilag-v2 .sbv2-recon-row-pending  { border-left-color: var(--sbv2-line-strong); }
    /* The drawer IS the mobile expand now — tap a row to reveal it below the
       card. Forced to block so the grid rule above doesn't turn it into a grid,
       and padding restored (the generic mobile td rule zeroes it). */
    .salgsbilag-v2 .sbv2-recon-lines tr.sbv2-recon-detail { display: none !important; }
    .salgsbilag-v2 .sbv2-recon-lines tr.sbv2-recon-open + tr.sbv2-recon-detail { display: block !important; }
    /* The lone detail cell is nth-child(1), so it inherits the desktop
       td:nth-child(1) { width: 78px } column width — which on the block mobile
       layout squeezes the drawer to 78px and wraps every value vertically.
       Force it full-width. */
    .salgsbilag-v2 .sbv2-recon-detail > td { display: block; width: auto !important; padding: 4px 16px 16px !important; }
    /* Date-group divider is a single full-width colspan=3 cell, not a
       Dato/Tekst/Beløb transaction row — the grid rule above swept it up
       too, collapsing it into just the first (~140px) column instead of
       spanning the row. Take it back out of the grid entirely. */
    .salgsbilag-v2 .sbv2-recon-lines tr.sbv2-recon-date-row { display: block !important; }
    .salgsbilag-v2 .sbv2-recon-date-row td { width: 100% !important; }
    /* Column layout: the desktop flex-basis (320px/260px) is a WIDTH in a row
       but becomes a forced HEIGHT in a column — reset children to content-size
       and stretch them full-width, or the boxes balloon ("exploded" drawer). */
    .salgsbilag-v2 .sbv2-recon-detail-body { flex-direction: column; gap: 12px; align-items: stretch; }
    .salgsbilag-v2 .sbv2-recon-detail-body .sbv2-recon-dl,
    .salgsbilag-v2 .sbv2-recon-detail-body .sbv2-recon-att-col { flex: 0 0 auto; }
    .salgsbilag-v2 .sbv2-recon-actions form,
    .salgsbilag-v2 .sbv2-recon-actions form button { width: 100%; }
    /* Narrower label column on mobile so long values get more room to wrap */
    .salgsbilag-v2 .sbv2-recon-dl .sbv2-dl-row dt { flex-basis: 110px; }
    .salgsbilag-v2 .sbv2-recon-dl .sbv2-dl-row { gap: 12px; }
}

/* Reconciliation table — 641-768px dead zone. The desktop table-layout:fixed
   Dato (78) + Beløb (90) columns still leave Tekst tight below ~700-750px
   (Type/Match/Konf. columns were dropped in #696 slice 2b, drawer-only now,
   but the crowded-tablet-width problem this block fixes predates and
   outlives that) — the desktop path was still active there since the
   mobile card grid only kicks in at 640px and below. Same rules as the
   640px block above, just re-scoped to also cover this gap (tablet widths,
   or a narrow in-app webview reporting a >640px viewport). */
@media (min-width: 641px) and (max-width: 768px) {
    .salgsbilag-v2 .sbv2-recon-lines tr {
        display: grid !important;
        grid-template-columns: minmax(56px, auto) minmax(140px, 1fr) minmax(70px, auto);
        column-gap: 4px;
        align-items: baseline;
        cursor: pointer;
        overflow-x: auto;
    }
    .salgsbilag-v2 .sbv2-recon-lines td {
        margin: 0 !important;
    }
    .salgsbilag-v2 .sbv2-recon-lines td[data-label="Dato"] {
        grid-column: 1 / 2;
        grid-row: 1;
        display: block !important;
        text-align: left !important; font-family: inherit !important;
        font-size: 11.5px; color: var(--sbv2-muted);
        white-space: nowrap;
    }
    .salgsbilag-v2 .sbv2-recon-lines .sbv2-recon-id { display: none; }
    /* #782: same crowded Dato column as the 640px card grid — no room for
       the inline quick-approve button here either. */
    .salgsbilag-v2 .sbv2-recon-lines .sbv2-recon-quickapprove-form { display: none; }
    .salgsbilag-v2 .sbv2-recon-lines td[data-label="Tekst"] {
        grid-column: 2 / 3;
        grid-row: 1;
        display: block !important;
        min-width: 0;
        font-weight: 600; font-size: 15px; color: var(--sbv2-ink);
        text-align: left !important; font-family: inherit !important;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .salgsbilag-v2 .sbv2-recon-lines td[data-label="Beløb"] {
        grid-column: 3 / 4;
        grid-row: 1;
        display: block !important;
        font-weight: 600; font-size: 15px; font-family: inherit !important;
        text-align: right !important;
        white-space: nowrap;
    }
    .salgsbilag-v2 .sbv2-recon-toggle { display: none; }
    .salgsbilag-v2 .sbv2-recon-lines tbody td:first-child { border-left: 0; }
    .salgsbilag-v2 .sbv2-recon-lines tbody tr { border-left: 3px solid transparent; padding-left: 13px; }
    .salgsbilag-v2 .sbv2-recon-row-approved { border-left-color: var(--sbv2-moss); }
    .salgsbilag-v2 .sbv2-recon-row-rejected { border-left-color: var(--sbv2-rust); }
    .salgsbilag-v2 .sbv2-recon-row-pending  { border-left-color: var(--sbv2-line-strong); }
    .salgsbilag-v2 .sbv2-recon-lines tr.sbv2-recon-detail { display: none !important; }
    .salgsbilag-v2 .sbv2-recon-lines tr.sbv2-recon-open + tr.sbv2-recon-detail { display: block !important; }
    .salgsbilag-v2 .sbv2-recon-detail > td { display: block; width: auto !important; padding: 4px 16px 16px !important; }
    /* Date-group divider is a single full-width colspan=3 cell, not a
       Dato/Tekst/Beløb transaction row — the grid rule above swept it up
       too, collapsing it into just the first (~140px) column instead of
       spanning the row. Take it back out of the grid entirely. */
    .salgsbilag-v2 .sbv2-recon-lines tr.sbv2-recon-date-row { display: block !important; }
    .salgsbilag-v2 .sbv2-recon-date-row td { width: 100% !important; }
    .salgsbilag-v2 .sbv2-recon-detail-body { flex-direction: column; gap: 12px; align-items: stretch; }
    .salgsbilag-v2 .sbv2-recon-detail-body .sbv2-recon-dl,
    .salgsbilag-v2 .sbv2-recon-detail-body .sbv2-recon-att-col { flex: 0 0 auto; }
    .salgsbilag-v2 .sbv2-recon-actions form,
    .salgsbilag-v2 .sbv2-recon-actions form button { width: 100%; }
    .salgsbilag-v2 .sbv2-recon-dl .sbv2-dl-row dt { flex-basis: 110px; }
    .salgsbilag-v2 .sbv2-recon-dl .sbv2-dl-row { gap: 12px; }
}

/* Print */
@media print {
    .ops-brand,
    .ops-topbar,
    .ops-sidebar,
    .ops-sidebar-overlay,
    #merchantBottomNav,
    .salgsbilag-v2 .sbv2-topbar,
    .salgsbilag-v2 .sbv2-head-actions,
    .salgsbilag-v2 .sbv2-flash-stack,
    .salgsbilag-v2 .sbv2-card-stats,
    .salgsbilag-v2 .sbv2-chain-shell,
    .salgsbilag-v2 aside { display: none !important; }
    body.account-v2 { overflow: visible !important; }
    body.account-v2 .main-content { height: auto !important; overflow: visible !important; }
    .ops-shell { display: block !important; height: auto !important; overflow: visible !important; }
    .ops-content { grid-column: 1 / -1 !important; padding: 0 !important; height: auto !important; overflow: visible !important; }
    .salgsbilag-v2 { background: #fff; min-height: 0 !important; }
    .salgsbilag-v2 .sbv2-grid { grid-template-columns: 1fr !important; }
    .salgsbilag-v2 .sbv2-card { box-shadow: none; }
    .salgsbilag-v2 .sbv2-lines tr { break-inside: avoid; }
    .salgsbilag-v2 .sbv2-lines-wrap { overflow: visible !important; }
}