/* ═══════════════ BASE ═══════════════ */
:root{
  --acc:#B9FF31; --acc-dk:#8fc914;
  --ink:#111; --ink2:#555; --mute:#6b6b6b; /* #6b6b6b = 5.1:1 på hvid (WCAG AA) */
  --bg:#f5f5f0; --card:#fff; --brd:#e0e0d8; --brd2:#cfcfc5;
  --ok:#38a169; --warn:#d69e2e; --bad:#e53e3e; --cool:#3182ce; --purp:#805ad5;
  --topbar-h:56px;
  --sidebar-w:240px;
  --cloud:#F2F2F2;

  /* ─── BSB DESIGN SYSTEM v1 — brug disse i alle nye komponenter ───────────
     Når en værdi skal ændres globalt, gør det HER. Rett én tokens — alle
     komponenter der refererer til den opdateres automatisk.

     Overflader:   bsb-surface-0..2 går fra fremhævet til baggrund.
     Ink:          bsb-ink-0..2 går fra primær-tekst til hint-tekst.
     Accent:       #B9FF31 — brug altid som understreg/detalje, aldrig som
                   fyld-tekst på hvid (ulæselig kontrast).
     Radius:       6-12px. Standard = 8px.
     Pad-row:      standard row-padding for alle lister/tabeller.
  ───────────────────────────────────────────────────────────────────────── */
  --bsb-surface-0:#ffffff;   /* card, dialog */
  --bsb-surface-1:#fafbfc;   /* table-header, hover-highlights */
  --bsb-surface-2:#f1f5f9;   /* subtle rows, dividers */
  --bsb-ink-0:#0f1217;       /* primær tekst */
  --bsb-ink-1:#475569;       /* sekundær tekst (tabel-celler, meta) */
  --bsb-ink-2:#94a3b8;       /* hint, placeholder */
  --bsb-border:#e2e8f0;      /* standard border */
  --bsb-border-strong:#cbd5e1; /* vægtet border */
  --bsb-accent:#B9FF31;      /* brand-accent */
  --bsb-accent-dk:#8fc914;   /* hover/pressed */
  --bsb-radius-sm:6px;
  --bsb-radius:8px;
  --bsb-radius-lg:12px;
  --bsb-shadow-card:0 1px 2px rgba(15,18,23,.04);
  --bsb-pad-row:8px 12px;    /* standard list/table row padding */
  --bsb-font-row:.9rem;      /* standard list/table row font-size */
  --bsb-font-head:.72rem;    /* table-header font-size (uppercase) */
}

/* ═══════════════ BSB KOMPONENT-KLASSER ═══════════════
   Genbrug overalt — rett én plads, opdater alle steder. */

/* Kort-container — standardiseret padding/radius/shadow. */
.bsb-card{
  background:var(--bsb-surface-0);
  border:1px solid var(--bsb-border);
  border-radius:var(--bsb-radius);
  box-shadow:var(--bsb-shadow-card);
  padding:16px;
}
.bsb-card--tight{ padding:0; } /* til lister der styrer padding internt */

/* Cirkel-markering (erstatter firkantet checkbox). Brug .bsb-check-dot
   på et <span> med data-offer-id eller data-id. State via class 'checked'
   eller attribute data-state="all|some|none" (master). */
.bsb-check-dot{
  display:inline-block;
  width:14px; height:14px;
  border-radius:50%;
  border:1.5px solid var(--bsb-border-strong);
  background:transparent;
  cursor:pointer;
  vertical-align:middle;
  transition:all .12s;
}
.bsb-check-dot:hover{ border-color:var(--bsb-ink-0); }
.bsb-check-dot.checked,
.bsb-check-dot[data-state="all"]{
  background:var(--bsb-ink-0);
  border-color:var(--bsb-ink-0);
}
.bsb-check-dot[data-state="some"]{
  background:repeating-linear-gradient(45deg,var(--bsb-ink-0) 0 2px,transparent 2px 4px);
  border-color:var(--bsb-ink-0);
}

/* Status-dot + label — erstatter store statusbolsjer. Bg-farve via inline
   style fra statusMeta(). */
.bsb-status-dot{
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  font-size:.82rem;
  color:var(--bsb-ink-0);
}
.bsb-status-dot__dot{
  display:inline-block;
  width:8px; height:8px;
  border-radius:50%;
  flex-shrink:0;
}
.bsb-status-dot__label{ font-weight:500; }

/* Mørk tekst-link med accent-understregning — erstatter neongrøn link. */
.bsb-code-link,
a.bsb-link{
  color:var(--bsb-ink-0);
  font-weight:700;
  text-decoration:underline;
  text-decoration-color:var(--bsb-accent);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  cursor:pointer;
}
a.bsb-link:hover{ text-decoration-color:var(--bsb-accent-dk); }

/* Icon-knap til row-actions (↗ ⎘ ⬇) — compact, neutral. */
.bsb-btn-icon{
  padding:3px 7px;
  font-size:.85rem;
  min-width:0;
  border-radius:var(--bsb-radius-sm);
  background:transparent;
  border:1px solid transparent;
  cursor:pointer;
  color:var(--bsb-ink-0);
}
.bsb-btn-icon:hover{
  background:var(--bsb-surface-2);
  border-color:var(--bsb-border);
}

/* List-row quick-actions fade-in pattern. */
.bsb-list-row .bsb-actions{ opacity:.35; transition:opacity .15s; }
.bsb-list-row:hover .bsb-actions{ opacity:1; }

/* ─── Global checkbox-styling ────────────────────────────────────────
   Alle <input type=checkbox> i tabeller rendres som cirkel-dots for
   ensartethed på tværs af moduler (CRM companies/contacts/leads,
   byggefakta, tilbud, drift). Legacy-checkboxes injiceres af crm-bulk
   via insertBefore — de får automatisk cirkel-look via denne regel.
   Escape hatch: tilføj class="bsb-check-native" hvis et sted har brug
   for klassisk firkantet checkbox (fx forms med mange tick-bokse). */
/* Default-styling for ALLE checkboxes (Windows/Mac/Linux native checkboxes
   varierer 13-24px+). Cap til 14x14 med custom appearance for ensartethed.
   Escape via class="bsb-check-native". */
input[type="checkbox"]:not(.bsb-check-native) {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  max-width: 14px;
  max-height: 14px;
  border: 1.5px solid var(--bsb-border-strong, #94a3b8);
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  vertical-align: middle;
  margin: 0 4px 0 0;
  padding: 0;
  flex-shrink: 0;
  position: relative;
  transition: all .12s;
}
input[type="checkbox"]:not(.bsb-check-native):hover {
  border-color: var(--bsb-ink-0, #111);
}
input[type="checkbox"]:not(.bsb-check-native):checked {
  background: var(--bsb-ink-0, #111);
  border-color: var(--bsb-ink-0, #111);
}
input[type="checkbox"]:not(.bsb-check-native):checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
input[type="checkbox"]:not(.bsb-check-native):disabled {
  opacity: .4;
  cursor: not-allowed;
}

input[type="checkbox"].bulk-row-check,
input[type="checkbox"].bulk-check-all,
input[type="checkbox"].row-check,
input[type="checkbox"].crm-row-check {
  appearance: none;
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--bsb-border-strong);
  background: transparent;
  cursor: pointer;
  vertical-align: middle;
  margin: 0;
  transition: all .12s;
  flex-shrink: 0;
}
input[type="checkbox"].bulk-row-check:hover,
input[type="checkbox"].bulk-check-all:hover,
input[type="checkbox"].row-check:hover,
input[type="checkbox"].crm-row-check:hover{
  border-color: var(--bsb-ink-0);
}
input[type="checkbox"].bulk-row-check:checked,
input[type="checkbox"].bulk-check-all:checked,
input[type="checkbox"].row-check:checked,
input[type="checkbox"].crm-row-check:checked{
  background: var(--bsb-ink-0);
  border-color: var(--bsb-ink-0);
}
input[type="checkbox"].bulk-check-all:indeterminate{
  background: repeating-linear-gradient(45deg, var(--bsb-ink-0) 0 2px, transparent 2px 4px);
  border-color: var(--bsb-ink-0);
}

/* ═══════════════ DARK MODE ═══════════════ */
html[data-dark="1"] {
  --bg: #1a1a1a;
  --card: #242424;
  --ink: #f0f0f0;
  --ink2: #a0a0a0;
  --brd: #3a3a3a;
  --mute: #909090;
  --cloud: #2a2a2a;
}

html[data-dark="1"] body { background: var(--bg); }
html[data-dark="1"] .topbar { background: #141414; border-bottom-color: #2a2a2a; }
html[data-dark="1"] .sidebar { background: #1f1f1f; border-right-color: #2a2a2a; }
html[data-dark="1"] .sb-item { color: #d0d0d0; }
html[data-dark="1"] .sb-item:hover { background: rgba(255,255,255,.05); }
html[data-dark="1"] .sb-item.active { background: rgba(185,255,49,.15); color: #fff; }
html[data-dark="1"] .card { background: #242424; border-color: #3a3a3a; }
html[data-dark="1"] .mtbl th { background: #2a2a2a; color: #d0d0d0; border-bottom-color: #3a3a3a; }
html[data-dark="1"] .mtbl td { border-bottom-color: #333; }
html[data-dark="1"] .mtbl tr:hover { background: rgba(255,255,255,.03); }
html[data-dark="1"] input, html[data-dark="1"] select, html[data-dark="1"] textarea {
  background: #2a2a2a;
  color: #f0f0f0;
  border-color: #3a3a3a;
}
html[data-dark="1"] .btn { background: #2a2a2a; color: #f0f0f0; border-color: #3a3a3a; }
html[data-dark="1"] .btn.primary { background: var(--acc); color: #000; }
html[data-dark="1"] .btn:hover { background: #333; }
html[data-dark="1"] .modal-body { background: #242424; color: #f0f0f0; }
html[data-dark="1"] .filter-chip { background: #2a2a2a; border-color: #3a3a3a; color: #d0d0d0; }
html[data-dark="1"] .filter-chip.active { background: rgba(185,255,49,.2); color: #fff; border-color: var(--acc); }
html[data-dark="1"] .skel-line, html[data-dark="1"] .skel-block {
  background: linear-gradient(90deg, #2a2a2a 25%, #333 50%, #2a2a2a 75%);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;font-family:'Segoe UI',-apple-system,system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.5}
a{color:inherit;text-decoration:none;cursor:pointer}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
select{font-family:inherit;font-size:.85rem;padding:5px 8px;border:1px solid var(--brd);border-radius:5px;background:#fff;cursor:pointer}

/* ═══════════════ TOP BAR ═══════════════ */
.topbar{
  height:var(--topbar-h);
  background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;
  position:sticky;top:0;z-index:50;
  box-shadow:0 1px 0 rgba(255,255,255,.08);
}
.tb-left{display:flex;align-items:center;gap:24px;height:100%}
.tb-right{display:flex;align-items:center;gap:16px}
.logo{font-size:1.25rem;font-weight:700;letter-spacing:-.3px}
.logo .dot{color:var(--acc)}
.tb-nav{display:flex;gap:2px;height:100%;align-items:center}
.tb-item{
  display:flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:6px;
  color:#bbb;font-size:.85rem;font-weight:500;
  transition:.12s;cursor:pointer;white-space:nowrap;
  letter-spacing:-.1px;
  min-height:44px;
}
.tb-item .tb-ic{font-size:1rem}
.tb-item .tb-ic:empty{display:none}
.tb-item:hover{background:rgba(255,255,255,.08);color:#fff}
.tb-item.active{background:var(--acc);color:var(--ink);font-weight:600}
.user-switch{display:flex;align-items:center;background:rgba(255,255,255,.06);padding:4px 10px;border-radius:6px}
.user-switch select{background:transparent;color:#fff;border-color:rgba(255,255,255,.15);font-weight:600}
.user-switch select option{background:#222;color:#fff}

/* ═══════════════ NOTIFICATIONS ═══════════════ */
.notif-wrap{position:relative;display:flex;align-items:center}
.notif-bell{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:8px;
  background:rgba(255,255,255,.06);color:#fff;font-size:1.05rem;
  transition:.12s;
}
.notif-bell:hover{background:rgba(255,255,255,.14)}
.notif-bell.has-unread{background:rgba(185,255,49,.14)}
.notif-bell .notif-ic{line-height:1;color:#bbb;transition:color .12s}
.notif-bell:hover .notif-ic{color:#fff}
.notif-bell.has-unread .notif-ic{color:var(--acc)}
.notif-badge{
  position:absolute;top:-3px;right:-3px;
  background:#c53030;color:#fff;
  font-size:.62rem;font-weight:800;
  min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--ink);
  line-height:1;
}
.notif-dropdown{
  position:absolute;top:calc(100% + 10px);right:0;
  width:380px;max-height:480px;
  background:var(--ink);color:#fff;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  box-shadow:0 12px 32px rgba(0,0,0,.45);
  z-index:100;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.notif-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.1);
  background:#1a1a1a;
}
.notif-head h2,.notif-head h3{font-size:.9rem;font-weight:800;color:#fff;letter-spacing:-.2px;margin:0}
.notif-mark-all{
  font-size:.72rem;color:var(--acc);font-weight:700;
  padding:3px 8px;border-radius:5px;transition:.12s;
}
.notif-mark-all:hover{background:rgba(185,255,49,.12)}
.notif-list{overflow-y:auto;flex:1;max-height:380px}
.notif-item{
  display:flex;gap:10px;padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  cursor:pointer;transition:.12s;position:relative;
}
.notif-item:last-child{border-bottom:0}
.notif-item:hover{background:rgba(255,255,255,.04)}
.notif-item.unread{background:rgba(185,255,49,.04)}
.notif-item.unread::before{
  content:'';position:absolute;left:4px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--acc);
}
.notif-icon{
  width:30px;height:30px;flex-shrink:0;
  border-radius:7px;display:flex;align-items:center;justify-content:center;
  font-size:.9rem;font-weight:800;
}
.notif-icon.error{background:rgba(229,62,62,.18);color:#fc8181}
.notif-icon.warn{background:rgba(214,158,46,.18);color:#ecc94b}
.notif-icon.info{background:rgba(49,130,206,.18);color:#63b3ed}
.notif-body{flex:1;min-width:0}
.notif-title{font-size:.85rem;font-weight:700;color:#fff;margin-bottom:2px;line-height:1.3}
.notif-msg{font-size:.78rem;color:#bbb;line-height:1.4;word-wrap:break-word}
.notif-time{font-size:.68rem;color:#aaaaaa;margin-top:4px;font-family:ui-monospace,Menlo,monospace} /* lys grå på mørk bg — 7.5:1 */
.notif-foot{
  padding:10px 14px;border-top:1px solid rgba(255,255,255,.1);
  font-size:.72rem;color:#aaa;background:#1a1a1a; /* #aaa — lys tekst på mørk bg */
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.notif-foot-count{flex:1;text-align:left}
.notif-show-all{color:var(--acc);cursor:pointer;font-weight:700;text-decoration:none}
.notif-show-all:hover{text-decoration:underline}
.notif-empty{padding:32px 14px;text-align:center;color:#aaa;font-size:.85rem} /* #aaa — lys på mørk */
.notif-empty .emoji{font-size:1.8rem;margin-bottom:6px;display:block}
/* Prioritets-gruppering i dropdown */
.notif-group-head{
  padding:6px 14px;font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.6px;background:#141414;color:#aaa;border-bottom:1px solid rgba(255,255,255,.06);
}
.notif-group-head.prio-critical{color:#fc8181}
.notif-group-head.prio-warn{color:#ecc94b}
.notif-group-head.prio-info{color:#9ab}
.notif-item.prio-critical{border-left:3px solid #fc8181}
.notif-item.prio-warn{border-left:3px solid #ecc94b}
.notif-item.prio-info{border-left:3px solid rgba(154,170,187,.5)}
.notif-row-unread{background:rgba(185,255,49,.05)}

/* ═══════════════ LAYOUT ═══════════════ */
.layout{display:flex;min-height:calc(100vh - var(--topbar-h))}

/* ═══════════════ SIDEBAR (sub-nav) ═══════════════ */
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  background:var(--card);border-right:1px solid var(--brd);
  padding:20px 14px;
  position:sticky;top:var(--topbar-h);
  height:calc(100vh - var(--topbar-h));
  overflow-y:auto;
  display:flex;flex-direction:column; /* Sidebar Flex-Fix (Visual-Critic #3) */
}
.sb-title{font-size:.7rem;text-transform:uppercase;letter-spacing:.7px;color:var(--mute);font-weight:700;padding:0 10px 10px;border-bottom:1px solid var(--brd);margin-bottom:10px}
.sb-nav{display:flex;flex-direction:column;gap:2px;flex:1}
.sb-item{
  display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;
  color:var(--ink2);font-size:.85rem;font-weight:500;cursor:pointer;transition:.12s;
  position:relative;letter-spacing:-.1px;
  min-height:44px;
}
.sb-item .sb-ic{font-size:1rem;flex-shrink:0;width:16px;text-align:center;color:var(--mute)}
.sb-item .sb-ic:empty{display:none}
.sb-item.active .sb-ic{color:var(--acc)}
.sb-lock{background:transparent !important;color:var(--mute) !important;border:1px solid var(--brd);font-weight:600 !important;font-size:.62rem !important;padding:1px 6px !important}
.sb-item:hover{background:var(--bg);color:var(--ink)}
.sb-item.active{background:var(--ink);color:var(--acc)}
.sb-item .sb-badge{margin-left:auto;background:#c53030;color:#fff;font-size:.65rem;font-weight:800;padding:1px 6px;border-radius:10px;min-width:18px;text-align:center}
.sb-item.active .sb-badge{background:var(--acc);color:var(--ink)}
/* .sb-divider fjernet — ikke brugt i app.js (brug .sb-group for sektion-separation) */
.sb-group{font-size:.65rem;text-transform:uppercase;letter-spacing:.6px;color:var(--mute);font-weight:800;padding:12px 12px 4px}
.sb-locked{opacity:.35;pointer-events:none}
.sb-locked .sb-badge{background:var(--mute);color:#fff}
/* ── Grupperede sektioner (Tilbud-sidebar refactor) ── */
.sb-section{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;
  color:var(--ink2);padding:16px 14px 6px;
  border-top:1px solid var(--brd);margin-top:4px;
}
.sb-nav > .sb-section:first-child{border-top:0;margin-top:0;padding-top:4px}
.sb-item.sb-cta{
  background:var(--acc);color:var(--ink);font-weight:700;
  margin:4px 8px;border-radius:6px;padding:9px 12px;
}
.sb-item.sb-cta:hover{background:var(--acc-dk);color:var(--ink)}
.sb-item.sb-cta.active{background:var(--acc-dk);color:var(--ink)}
.sb-item.sb-cta .sb-ic{color:var(--ink)}
.sb-item .sb-count{color:var(--mute);font-size:.72rem;margin-left:4px;font-weight:400}
.sb-item.active .sb-count{color:var(--ink2)}
.sb-item.sb-cta .sb-count{color:var(--ink);opacity:.7}

/* ═══════════════ MAIN ═══════════════ */
.main{flex:1;padding:26px 32px 48px;overflow-x:hidden;min-width:0}
.page-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:22px;flex-wrap:wrap;gap:12px}
.page-head h1{font-size:1.5rem;font-weight:700;letter-spacing:-.5px}
.page-head .sub{color:var(--ink2);font-size:.9rem;margin-top:3px}
.page-head .breadcrumb{font-size:.78rem;color:var(--mute);margin-bottom:2px;text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:var(--ink);color:var(--acc);border:1px solid var(--ink);border-radius:6px;font-size:.82rem;font-weight:600;transition:.12s;letter-spacing:-.1px}
.btn:hover{background:#2a2a2a;border-color:#2a2a2a}
.btn.primary{background:var(--acc);color:var(--ink);border-color:var(--acc);font-weight:700}
.btn.primary:hover{background:var(--acc-dk);border-color:var(--acc-dk)}
.btn.ghost{background:var(--card);color:var(--ink);border-color:var(--brd)}
.btn.ghost:hover{background:#faf8f0;border-color:var(--brd2)}
.btn.sm{padding:5px 10px;font-size:.75rem}

/* ═══════════════ CARDS ═══════════════ */
/* Card — bruger design-tokens. Rett --bsb-border, --bsb-radius eller
   --bsb-shadow-card én gang for at opdatere alle cards i appen. */
.card{background:var(--bsb-surface-0);border:1px solid var(--bsb-border);border-radius:var(--bsb-radius);padding:20px;margin-bottom:16px;box-shadow:var(--bsb-shadow-card)}
.card-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;flex-wrap:wrap;gap:8px}
.card-head h2{font-size:1rem;font-weight:700;letter-spacing:-.2px}
.card-head .meta{font-size:.74rem;color:var(--ink2);font-family:ui-monospace,Menlo,monospace}

/* ═══════════════ KPI ═══════════════ */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:20px}
.kpi{background:var(--card);border:1px solid var(--brd);border-radius:8px;padding:16px;position:relative;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--acc-dk)}
.kpi.ok::before{background:var(--ok)}
.kpi.bad::before{background:var(--bad)}
.kpi.warn::before{background:var(--warn)}
.kpi.cool::before{background:var(--cool)}
.kpi .l{font-size:.68rem;text-transform:uppercase;letter-spacing:.5px;color:var(--ink2);font-weight:700}
.kpi .v{font-size:1.5rem;font-weight:700;margin-top:4px;line-height:1.1;letter-spacing:-.5px}
.kpi .d{font-size:.76rem;color:var(--ink2);margin-top:2px}

/* ═══════════════ TABLE ═══════════════ */
/* TABEL — global "slik"-stil. Alle .tbl/.ct-table/.bf-table-tabeller i
   appen får automatisk compact rows + neutral header + mørk hover.
   Rett disse regler for at opdatere alle lister på én gang. */
.tbl, .ct-table, .bf-table {
  width:100%; border-collapse:collapse;
  font-size:var(--bsb-font-row);
  background:var(--bsb-surface-0);
}
.tbl th, .ct-table th, .bf-table th {
  text-align:left; padding:10px 12px;
  background:var(--bsb-surface-1);
  font-size:var(--bsb-font-head);
  text-transform:uppercase; letter-spacing:.5px;
  color:var(--bsb-ink-1); font-weight:600;
  border-bottom:1px solid var(--bsb-border);
}
.tbl td, .ct-table td, .bf-table td {
  padding:var(--bsb-pad-row);
  border-bottom:1px solid #f1f5f9;
  vertical-align:middle;
}
.tbl tr:last-child td,
.ct-table tr:last-child td,
.bf-table tr:last-child td { border-bottom:0; }
.tbl tr.clickable,
.ct-table tr.clickable,
.bf-table tr.clickable { cursor:pointer; transition:background .12s; }
.tbl tr.clickable:hover,
.ct-table tr.clickable:hover,
.bf-table tr.clickable:hover,
.tbl tbody tr:hover,
.ct-table tbody tr:hover,
.bf-table tbody tr:hover { background: rgba(15,18,23,.03); }
.tbl td.num, .ct-table td.num, .bf-table td.num {
  text-align:right; font-variant-numeric:tabular-nums;
}
.tbl-wrap, .ct-table-wrap, .bf-table-wrap {
  overflow-x:auto; margin:0 -20px -20px; padding:0 20px 0;
}
.tbl tr.clickable:hover td:first-child,
.ct-table tr.clickable:hover td:first-child,
.bf-table tr.clickable:hover td:first-child{
  box-shadow: inset 3px 0 0 var(--bsb-accent);
}

/* Pills */
.pill{display:inline-block;padding:2px 10px;border-radius:20px;font-size:.72rem;font-weight:700;white-space:nowrap}
.pill-new{background:#e6f0ff;color:#2b5cbf}
.pill-qual{background:#fff0d1;color:#8a5a00}
.pill-won,.pill-active{background:#d2f5dc;color:#155a2e}
.pill-lost{background:#ffd7d7;color:#8a1e1e}
.pill-draft{background:#e4e4dc;color:#4a4a4a}
.pill-sent{background:#e0efff;color:#234a8a}
/* pill-done, pill-besigtigelse, pill-service, pill-projekt ikke brugt — fjernet */

/* Sagstype — labels kommer fra lib/labels.js (BSB_LABELS.CATEGORIES).
   Farver holdes her for WCAG-kontrol + fallback. */
.kat{display:inline-block;padding:2px 8px;border-radius:4px;font-size:.7rem;font-weight:700;color:#fff;margin-right:4px}
.kat-brandlukning{background:#c0392b}           /* 5.7:1 på hvid (WCAG AA) */
.kat-brandmaling{background:#805ad5}
.kat-brandisolering{background:#c05621}         /* 4.5:1+ */
.kat-brandsikring_installationer{background:#c0392b} /* 5.7:1 */
.kat-1_aars_kontrol{background:#276749}         /* 4.5:1+ */
.kat-tilsyn{background:#2c5282}                 /* 4.5:1+ */
.kat-registrering{background:#d69e2e;color:#3a2500}

/* Pipeline */
.pipe{display:flex;gap:4px;flex-wrap:wrap;margin:8px 0}
.pipe-stage{flex:1;min-width:80px;padding:8px 6px;background:var(--brd);border-radius:5px;text-align:center;font-size:.72rem;font-weight:600;color:var(--ink2)}
.pipe-stage.done{background:var(--ink);color:var(--acc)}
.pipe-stage.now{background:var(--acc);color:var(--ink);box-shadow:0 0 0 3px rgba(143,201,20,.3)}

/* ═══════════════ GANTT ═══════════════ */
.gantt-wrap{overflow-x:auto;border:1px solid var(--brd);border-radius:10px;background:var(--card)}
.gantt-inner{min-width:1100px}
.gantt-header,.gantt-row{display:grid;grid-template-columns:280px repeat(var(--weeks,13),50px);align-items:center}
.gantt-header{background:#faf8f0;border-bottom:2px solid var(--brd);height:40px;position:sticky;top:0;z-index:2}
.gantt-row{border-bottom:1px solid #f0ede3;height:44px;position:relative;background:var(--card);transition:.1s;cursor:pointer}
.gantt-row:hover{background:#fafaf6}
.gantt-row.project{background:#faf8f0;font-weight:700}
.gantt-row.project:hover{background:#f0ecda}
.gantt-row.demand-row{background:var(--ink);color:var(--acc);font-size:.78rem}
.gantt-label{padding:0 14px;font-size:.84rem;border-right:2px solid var(--brd);height:100%;display:flex;flex-direction:column;justify-content:center;position:sticky;left:0;background:inherit;z-index:1}
.gantt-row.project .gantt-label{background:#faf8f0}
.gantt-row.demand-row .gantt-label{background:var(--ink);color:var(--acc)}
.gantt-row:hover .gantt-label{background:#fafaf6}
.gantt-label .role{font-size:.66rem;color:var(--ink2);font-weight:500;margin-top:1px}
.gantt-row.demand-row .gantt-label .role{color:var(--acc);opacity:.6}
.wk-head{text-align:center;font-size:.7rem;font-weight:700;color:var(--ink2);border-right:1px solid #eeebe0}
.wk-head.now{background:rgba(185,255,49,.3);color:var(--ink)}
.wk-cell{border-right:1px solid #f0ede3;height:100%;position:relative}
.wk-cell.now{background:rgba(185,255,49,.08)}
.bar{position:absolute;top:6px;bottom:6px;left:2px;right:2px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:#fff;padding:0 4px;white-space:nowrap;overflow:hidden}
.bar.ok{background:linear-gradient(135deg,#38a169,#68d391)}
.bar.warn{background:linear-gradient(135deg,#d69e2e,#ecc94b);color:#3a2500}
.bar.full{background:linear-gradient(135deg,#e53e3e,#fc8181)}
.bar.empty{background:linear-gradient(135deg,#718096,#a0aec0)}
.bar.project{background:linear-gradient(90deg,#111,#444)}
.demand-bar{position:absolute;top:6px;bottom:6px;left:2px;right:2px;border:2px dashed var(--acc);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:800;color:var(--acc);background:rgba(185,255,49,.1)}
.gantt-legend{display:flex;gap:14px;flex-wrap:wrap;padding:12px 16px;background:#faf8f0;border-top:1px solid var(--brd);font-size:.78rem;border-radius:0 0 10px 10px}
.gantt-legend .sw{width:16px;height:10px;border-radius:3px;display:inline-block;vertical-align:middle;margin-right:5px}

/* KV */
.kv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.kv .k{color:var(--ink2);text-transform:uppercase;letter-spacing:.5px;font-size:.66rem;font-weight:700;margin-bottom:3px}
.kv .v{font-weight:600;font-size:.95rem}

/* ═══════════════ MODAL ═══════════════ */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
.modal{background:var(--card);border-radius:10px;max-width:1000px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,.18);position:relative;max-height:calc(100vh - 80px);overflow-y:auto;display:flex;flex-direction:column}
/* Sticky modal-footer: knapper altid synlige uanset scroll-position */
.modal .modal-footer{
  position: sticky;
  bottom: 0;
  background: var(--card, #fff);
  border-top: 1px solid var(--brd);
  z-index: 10;
  padding: 12px 26px;
  margin-top: 16px;
  margin-left: -26px;
  margin-right: -26px;
  margin-bottom: -16px;
}
/* Sag-tabs (modal-navigation) — sleek horizontal tabs m/ underline-indicator */
.sag-tabs{display:flex;gap:0;border-bottom:1px solid var(--brd);margin-bottom:20px;flex-wrap:wrap}
.sag-tabs .tab{padding:10px 16px;border:none;background:transparent;margin-bottom:-1px;border-bottom:2px solid transparent;cursor:pointer;font:inherit;font-size:.85rem;color:var(--ink2);font-weight:500;transition:.12s;letter-spacing:-.1px}
.sag-tabs .tab:hover{color:var(--ink)}
.sag-tabs .tab.active{border-bottom-color:var(--ink);color:var(--ink);font-weight:600}
.sag-tab-panel{display:none}
.sag-tab-panel.active{display:block}
.modal-close{position:absolute;top:14px;right:14px;width:34px;height:34px;background:#faf8f0;border-radius:50%;font-size:1.4rem;z-index:1;display:flex;align-items:center;justify-content:center;transition:.15s}
.modal-close:hover{background:var(--ink);color:var(--acc)}
.sag-head{padding:22px 26px;background:var(--ink);color:#fff;border-radius:10px 10px 0 0}
.sag-head h2{font-size:1.3rem;font-weight:800;color:#fff}
.sag-head .sag-meta{display:flex;gap:18px;margin-top:8px;flex-wrap:wrap;font-size:.82rem;color:#ccc}
.sag-head .sag-meta strong{color:var(--acc)}
.sag-body{padding:22px 26px}
.sag-section{padding:16px 0;border-bottom:1px solid var(--brd)}
.sag-section:last-child{border-bottom:0}
.sag-section h3{font-size:.74rem;text-transform:uppercase;letter-spacing:.5px;color:var(--ink2);font-weight:800;margin-bottom:10px}
.sag-section h3 .num{display:inline-block;width:22px;height:22px;background:var(--ink);color:var(--acc);border-radius:50%;text-align:center;line-height:22px;font-size:.72rem;margin-right:6px}

/* .mtbl — samme som .tbl nu. Tidligere havde den mindre font (.85rem)
   men visual-critic rapporterede uensartet størrelse mellem lister —
   så al font-sizing går gennem --bsb-font-row. */
.mtbl{width:100%;border-collapse:collapse;font-size:var(--bsb-font-row);background:var(--bsb-surface-0)}
.mtbl th{
  text-align:left; padding:10px 12px;
  background:var(--bsb-surface-1);
  font-size:var(--bsb-font-head);
  text-transform:uppercase; letter-spacing:.5px;
  color:var(--bsb-ink-1); font-weight:600;
  border-bottom:1px solid var(--bsb-border);
}
.mtbl td{padding:8px 12px;border-bottom:1px solid #f1f5f9;text-align:left;vertical-align:middle}
.mtbl tr:last-child td{ border-bottom:0; }
.mtbl td.num,.mtbl th.num{text-align:right;font-variant-numeric:tabular-nums}
.mtbl tr.total td{font-weight:800;background:var(--ink);color:var(--acc);padding:8px 12px}

.econ-progress{background:#faf8f0;padding:14px;border-radius:8px}
.p-bar{background:var(--brd);height:26px;border-radius:5px;overflow:hidden;position:relative;margin:10px 0}
.p-fill{height:100%;display:flex;align-items:center;padding:0 10px;color:#fff;font-weight:700;font-size:.76rem}
.p-fill.ok{background:linear-gradient(90deg,var(--ok),#68d391)}
.p-fill.warn{background:linear-gradient(90deg,var(--warn),#ecc94b);color:#3a2500}
.p-fill.bad{background:linear-gradient(90deg,var(--bad),#fc8181)}

.int-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.int-card{background:#faf8f0;border-radius:8px;padding:12px;border-left:3px solid var(--acc-dk)}
.int-card.clickup{border-left-color:var(--purp)}
.int-card.intega{border-left-color:var(--cool)}
.int-card .ic-t{font-size:.68rem;text-transform:uppercase;letter-spacing:.4px;color:var(--ink2);font-weight:700}
.int-card .ic-v{font-weight:700;margin-top:2px;font-size:.88rem}
.int-card .ic-d{font-size:.76rem;color:var(--ink2);margin-top:3px}

/* Dashboard */
.dash-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px}
@media (max-width:900px){ .dash-grid{grid-template-columns:1fr} }
.activity-feed{max-height:420px;overflow-y:auto}
.activity{padding:10px 0;border-bottom:1px solid #f0ede3;font-size:.86rem}
.activity:last-child{border-bottom:0}
.activity .when{color:var(--mute);font-size:.74rem}
.activity .src{font-size:.68rem;font-weight:700;padding:1px 6px;border-radius:3px;margin-right:6px}
.src-crm{background:#e0efff;color:#234a8a}
.src-tilbud{background:#fff0d1;color:#8a5a00}
.src-drift{background:#d2f5dc;color:#1e6e3a}
.src-clickup{background:#efe0ff;color:#5a2b8a}
.src-intega{background:#d7f4ff;color:#1e5a7a}

/* ═══════════════ SETTINGS / ACCESS POLICIES ═══════════════ */
.settings-grid{display:grid;grid-template-columns:1fr;gap:16px}
.perm-matrix{width:100%;border-collapse:collapse;font-size:.86rem}
.perm-matrix th{padding:10px;text-align:center;background:#faf8f0;font-size:.7rem;text-transform:uppercase;color:var(--ink2);font-weight:700;border-bottom:2px solid var(--brd);border-right:1px solid var(--brd)}
.perm-matrix th:first-child{text-align:left;min-width:220px}
.perm-matrix td{padding:8px;border-bottom:1px solid #f0ede3;text-align:center;border-right:1px solid #f0ede3}
.perm-matrix td:first-child{text-align:left;font-weight:600}
.perm-matrix tr:hover td{background:#fafaf6}
.perm-matrix .role-group{background:var(--ink);color:var(--acc);font-weight:800;font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;padding:6px 10px}
.perm-matrix .role-group td{text-align:left;padding:8px 10px;border-right:0;color:var(--acc)}

/* Toggle */
.toggle{display:inline-block;width:32px;height:18px;background:var(--brd);border-radius:10px;position:relative;cursor:pointer;transition:.15s}
.toggle::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;background:#fff;border-radius:50%;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.toggle.on{background:var(--acc-dk)}
.toggle.on::after{left:16px}
.toggle.read-only{background:var(--cool)}
.toggle.read-only::after{left:16px}

/* Role chips — CRIT-10 / 3a-PRIME: 10-rolle-paletten matcher håndbogen og
   ROLES-objektet i app.js. Sælger var tidligere lilla (#f2e0ff/#5a2b8a) —
   rettet til grøn så CSS matcher spec og renderRoleBadge(). De 5 nye roller
   (super_admin, projektchef, tilbudsberegner, formand, servicemontør) har
   nu CSS — de renderede tidligere som plain ustylet tekst. driftleder
   beholdt som legacy-alias med samme styling som formand. */
.role-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:.75rem;font-weight:700;margin:2px}
.role-super_admin    {background:#fee2e2;color:#dc2626}
.role-admin          {background:var(--ink);color:var(--acc)}
.role-cfo            {background:#ccfbf1;color:#0d8475}
.role-projektchef    {background:#e2e8f0;color:#1e293b}
.role-pm             {background:#dbeafe;color:#2563eb}
.role-tilbudsberegner{background:#ede9fe;color:#7c3aed}
.role-sælger         {background:#dcfce7;color:#15803d}
.role-formand        {background:#ffedd5;color:#c2410c}
.role-servicemontør  {background:#f1f5f9;color:#475569}
.role-montør         {background:#e2e8f0;color:#334155}
.role-driftleder     {background:#ffedd5;color:#c2410c}  /* legacy alias → formand */

.info-box{background:#eff8ff;border-left:4px solid var(--cool);padding:14px 18px;border-radius:6px;font-size:.88rem;margin-bottom:14px}
.info-box strong{color:#234a8a}
.warn-box{background:#fffaf0;border-left:4px solid var(--warn);padding:14px 18px;border-radius:6px;font-size:.88rem;margin-bottom:14px}

/* Filters */
.filters{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.filter-input{padding:7px 12px;border:1px solid var(--brd);border-radius:6px;background:var(--card);font-size:.86rem;min-width:200px}
.filter-chip{padding:6px 12px;background:var(--card);border:1px solid var(--brd);border-radius:6px;font-size:.78rem;font-weight:500;color:var(--ink2);cursor:pointer;transition:.12s;letter-spacing:-.1px}
.filter-chip:hover{background:#faf8f0;color:var(--ink);border-color:var(--brd2)}
.filter-chip.active{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:600}

/* Access denied screen */
.access-denied{background:var(--card);border:1px solid var(--brd);border-radius:14px;padding:48px 32px;text-align:center;max-width:500px;margin:60px auto}
.access-denied h2{font-size:1.3rem;margin-bottom:8px}
.access-denied .icon{font-size:3rem;margin-bottom:14px}
.access-denied p{color:var(--ink2);margin-bottom:18px}

/* Simple table-less lists */
.simple-list{list-style:none}
.simple-list li{padding:10px 12px;border-bottom:1px solid #f0ede3;font-size:.88rem;display:flex;justify-content:space-between;align-items:center}
.simple-list li:last-child{border-bottom:0}

/* Empty state */
.empty{padding:40px 20px;text-align:center;color:var(--mute);font-size:.9rem}
.empty .emoji{font-size:2rem;margin-bottom:8px}

/* ═══════════════ STANDARD EMPTY-STATE (bsb-empty) ═══════════════ */
/* Unified empty-state pattern. Bruges via helper window.bsbEmptyState()
   eller direkte markup:
     <div class="bsb-empty">
       <div class="bsb-empty__icon">∅</div>
       <div class="bsb-empty__title">...</div>
       <div class="bsb-empty__sub">...</div>
       <div class="bsb-empty__cta"><button>...</button></div>
     </div>
   Ingen farverige emoji-icons — kun unicode-glyffer eller helt uden. */
.bsb-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:48px 20px; color:var(--ink2);
}
.bsb-empty__icon{
  font-size:36px; line-height:1; opacity:.35; margin-bottom:10px;
  color:var(--ink2); font-weight:300;
}
.bsb-empty__title{
  font-size:15px; font-weight:600; color:var(--ink); margin-bottom:4px;
}
.bsb-empty__sub{
  font-size:12.5px; max-width:320px; margin:0 auto; line-height:1.5; color:var(--ink2);
}
.bsb-empty__cta{ margin-top:16px; }
/* Bruges inde i <td colspan=...> — fjerner default td-padding */
td > .bsb-empty{ padding:40px 20px; }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width:900px){
  .tb-item span:last-child{display:none}
  .user-switch{display:none}
}
@media (max-width:720px){
  :root{--sidebar-w:200px}
  .tb-left{gap:12px}
  .logo{font-size:1.1rem}
  .main{padding:16px 14px}
  .sidebar{padding:14px 8px}
  .notif-dropdown{width:calc(100vw - 24px);right:-8px}
}

/* ═══ TASKLIST ═══ */
.tasklist-tbl{min-width:1100px}
.tasklist-tbl th.tl-sort{cursor:pointer;user-select:none;transition:.1s}
.tasklist-tbl th.tl-sort:hover{background:#f5f0e0;color:var(--ink)}
.tasklist-tbl th.tl-sort-active{color:var(--ink);background:#f5f0e0}
.tasklist-tbl .tl-row:hover{background:#fafaf6}
.tasklist-tbl .tl-row td{vertical-align:middle}
/* In-place editable cells (fra drift-gant.html — .ed + .ssel) */
.tasklist-tbl .ed.tl-ed{cursor:text;padding:3px 6px;border-radius:4px;min-width:28px;display:inline-block;transition:.1s}
.tasklist-tbl .ed.tl-ed:hover{background:#f0eadb}
.tasklist-tbl .ed.tl-ed:focus{outline:2px solid var(--acc);background:#fff}
.tasklist-tbl .ssel.tl-ssel{padding:4px 8px;border-radius:6px;border:1px solid var(--brd);font-size:.78rem;font-weight:600;cursor:pointer;background:var(--card);max-width:160px}
.tasklist-tbl .ssel.tl-ssel:hover{border-color:var(--acc-dk)}
.tasklist-tbl .ssel.tl-ssel:focus{outline:2px solid var(--acc);outline-offset:1px}
.tasklist-tbl .ssel.tl-status.pill-won{background:#e6f6e7;color:#1b5e20;border-color:#a5d6a7}
.tasklist-tbl .ssel.tl-status.pill-qual{background:#eef5ff;color:#1e40af;border-color:#93c5fd}
.tasklist-tbl .ssel.tl-status.pill-sent{background:#fff4e5;color:#8a4b00;border-color:#f3c48a}
.tasklist-tbl .ssel.tl-status.pill-draft{background:#f4f4f2;color:#6b6b6b;border-color:#ddd}

/* ═══ NATIVE DRIFT-GANTT ═══
   Styles ekstraheret fra drift-gant.html (Sprint 1 Task 1.2).
   Bruges af lib/drift-gantt.js (window.BSB_DRIFT_GANTT).
   Bevares som i originalen for visuel parity. */

/* Gantt container */
.bsb-gantt-outer{background:var(--card);border:1px solid var(--brd);border-radius:10px;overflow:hidden}
.bsb-gantt-left{background:#fff}
.bsb-gantt-label:hover{background:#fafbfd}
.bsb-gantt-right{background:#fff}

/* Grid header + week cells */
.gw{overflow-x:auto;position:relative}
.gh{display:flex;border-bottom:2px solid var(--brd);background:#f1f5f9;position:sticky;top:0;z-index:2}
.gwk{min-width:50px;flex:0 0 50px;text-align:center;font-size:10px;font-weight:600;padding:6px 0;color:var(--ink2);border-right:1px solid #e8ecf1}
.gwk.now{background:#f5ffd6;color:#1a1a1a;font-weight:700}
.gwk.has-holiday{background:#fef2f2;border-bottom:2px solid #dc2626}
.gwk.has-holiday.now{background:linear-gradient(180deg,#f5ffd6 0%,#fef2f2 100%)}
.gr{display:flex;position:relative;height:42px;border-bottom:1px solid #f1f5f9}
.gr:hover{background:#fafbfd}
.gc{min-width:50px;flex:0 0 50px;border-right:1px solid #f4f6f8}
.gc.now{background:#faffe6}
.gc.has-holiday{background:rgba(254,242,242,.45)}
.gc.has-holiday.now{background:#fdf6df}

/* Bjælker */
.gb{position:absolute;height:26px;top:8px;border-radius:5px;cursor:grab;display:flex;align-items:center;font-size:10px;color:#fff;padding:0 6px;overflow:hidden;white-space:nowrap;user-select:none;z-index:1;transition:box-shadow .15s;text-shadow:0 1px 2px rgba(0,0,0,.65)}
.gb:hover{box-shadow:0 2px 8px rgba(0,0,0,.2);z-index:5}
.gb.dragging{opacity:.7;cursor:grabbing;z-index:10;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.gb .rl,.gb .rr{position:absolute;top:0;width:8px;height:100%;cursor:ew-resize;z-index:2}
.gb .rl{left:0;border-radius:5px 0 0 5px}
.gb .rr{right:0;border-radius:0 5px 5px 0}
.gb .rl:hover,.gb .rr:hover{background:rgba(255,255,255,.3)}

/* Sagstype-tags i venstre kolonne */
.kt{display:inline-block;padding:1px 7px;border-radius:10px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;margin-right:6px;vertical-align:middle;white-space:nowrap}
.kt-1_aars_kontrol{background:#c6f6d5;color:#22543d}
.kt-brandmaling{background:#d6bcfa;color:#44337a}
.kt-brandisolering{background:#feebc8;color:#7b341e}
.kt-brandsikring_installationer{background:#fed7d7;color:#742a2a}
.kt-tilsyn{background:#bee3f8;color:#2a4365}
.kt-registrering{background:#fefcbf;color:#744210}

/* Bar-status (bemanding) */
.bar-status-ok{background:linear-gradient(90deg,#38a169,#68d391)}
.bar-status-warn{background:linear-gradient(90deg,#d69e2e,#ecc94b);color:#4a5568}
.bar-status-full{background:linear-gradient(90deg,#e53e3e,#fc8181),repeating-linear-gradient(45deg,transparent,transparent 6px,rgba(255,255,255,.25) 6px,rgba(255,255,255,.25) 8px);background-blend-mode:overlay}
.bar-status-empty{background:linear-gradient(90deg,#718096,#a0aec0),repeating-linear-gradient(45deg,transparent,transparent 6px,rgba(0,0,0,.12) 6px,rgba(0,0,0,.12) 8px);background-blend-mode:overlay}

/* Status-overrides */
.gb.st-tilbud{opacity:.55;border:2px dashed rgba(255,255,255,.6)}
.gb.st-afsluttet{opacity:.45;filter:grayscale(.4)}
.gb.gb-ghost{opacity:.4;background:repeating-linear-gradient(135deg,#e2e8f0,#e2e8f0 6px,#cbd5e0 6px,#cbd5e0 12px)!important;border:2px dashed #718096;color:#1a1a1a!important;text-shadow:none!important}

/* Per-uge crew-segmenter */
.wc-seg:hover{background:rgba(255,255,255,.25)!important}

/* TEAM-GANTT */
.tmg-wrap{padding:14px 20px}
.tmg-sum{display:flex;gap:18px;padding:12px 16px;background:#f8faf5;border-radius:8px;border-left:4px solid var(--acc);margin-bottom:14px;flex-wrap:wrap}
.tmg-sum .sc-box{min-width:100px}
.tmg-sum .sc-l{font-size:10px;color:var(--ink2);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.tmg-sum .sc-v{font-size:22px;font-weight:700;margin-top:1px}
.tmg-tbl{display:flex;border:1px solid var(--brd);border-radius:8px;overflow:hidden;background:#fff}
.tmg-left{flex:0 0 190px;border-right:2px solid var(--brd);background:#fafbfd}
.tmg-right{flex:1;overflow-x:auto}
.tmg-hdr{display:flex;height:32px;background:#f1f5f9;border-bottom:2px solid var(--brd);font-size:10px;font-weight:700;color:var(--ink2)}
.tmg-hdr .tmg-hdr-name{padding:9px 12px;font-size:10px;text-transform:uppercase;letter-spacing:.4px}
.tmg-hdr .tmg-wk{min-width:50px;flex:0 0 50px;text-align:center;padding:9px 0;border-right:1px solid #e8ecf1}
.tmg-hdr .tmg-wk.now{background:#f5ffd6;color:#1a1a1a;font-weight:700}
.tmg-hdr .tmg-wk.has-holiday{background:#fef2f2;border-bottom:2px solid #dc2626}
.tmg-hdr .tmg-wk.has-holiday.now{background:linear-gradient(180deg,#f5ffd6 0%,#fef2f2 100%)}
.tmg-grp{height:26px;padding:6px 12px;background:#e2e8f0;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:#4a5568;border-bottom:1px solid var(--brd);display:flex;align-items:center}
.tmg-row{height:34px;display:flex;align-items:center;padding:2px 12px;border-bottom:1px solid #f1f5f9;font-size:12px;overflow:hidden;white-space:nowrap}
.tmg-row:hover{background:#f7fafc}
.tmg-row .tmg-nm{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.tmg-row .tmg-rl{font-size:10px;color:var(--ink2);margin-left:6px}
.tmg-track{height:34px;position:relative;display:flex;border-bottom:1px solid #f1f5f9}
.tmg-track:hover{background:#fafbfd}
.tmg-track .tmg-cell{min-width:50px;flex:0 0 50px;border-right:1px solid #f4f6f8;height:100%}
.tmg-track .tmg-cell.now{background:#faffe6}
.tmg-track .bsb-pers-cell{cursor:crosshair;transition:background .08s;user-select:none}
.tmg-track .bsb-pers-cell:hover{background:#eef9d6}
.tmg-track .bsb-pers-cell.bsb-pers-cell-paint{background:#B9FF31!important;box-shadow:inset 0 0 0 1px #7BBF1F}
.bsb-pers-row-del:hover{background:#fee!important}
.bsb-pers-add-role:hover{filter:brightness(.92);transform:translateY(-1px);transition:all .12s}
.tmg-seg{position:absolute;top:5px;height:24px;border-radius:4px;font-size:10px;color:#fff;padding:0 6px;display:flex;align-items:center;overflow:hidden;white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.12);z-index:1;text-shadow:0 1px 2px rgba(0,0,0,.65)}
.tmg-seg:hover{filter:brightness(1.08);z-index:3;box-shadow:0 3px 8px rgba(0,0,0,.22)}
.tmg-seg.conflict{outline:2px solid var(--bad);outline-offset:-2px;z-index:2}
.tmg-seg.absence-ferie{background:repeating-linear-gradient(45deg,#fef3cd,#fef3cd 4px,#fde68a 4px,#fde68a 8px)!important;color:#744210!important;font-size:9px}
.tmg-seg.absence-sygdom{background:repeating-linear-gradient(45deg,#fed7d7,#fed7d7 4px,#fca5a5 4px,#fca5a5 8px)!important;color:#742a2a!important;font-size:9px}
.tmg-seg.absence-kursus{background:repeating-linear-gradient(45deg,#bee3f8,#bee3f8 4px,#90cdf4 4px,#90cdf4 8px)!important;color:#2a4365!important;font-size:9px}
.tmg-seg.absence-andet{background:repeating-linear-gradient(45deg,#e2e8f0,#e2e8f0 4px,#cbd5e0 4px,#cbd5e0 8px)!important;color:#2d3748!important;font-size:9px}
.tmg-idle{font-size:10px;color:var(--ok);font-style:italic;padding-left:8px}
.tmg-left .tmg-row.tmg-idle-row,.tmg-right .tmg-track.tmg-idle-row{background:#f0fff4}
.tmg-left .tmg-row.tmg-idle-row::after{content:"LEDIG";margin-left:auto;font-size:9px;font-weight:700;color:#22543d;background:#c6f6d5;padding:1px 6px;border-radius:8px;letter-spacing:.3px}

/* ═══════════════ ALERT-CARDS (fix: Visual-Critic #1) ═══════════════ */
.alert-card{
  padding:14px 16px;border-radius:8px;background:#fff;
  border:1px solid var(--brd);border-left:4px solid var(--ink2);
  margin-bottom:10px;transition:.12s;
}
.alert-card:hover{box-shadow:0 2px 6px rgba(0,0,0,.06)}
.alert-card.danger{border-left-color:var(--bad);background:#fff5f5}
.alert-card.warn{border-left-color:var(--warn);background:#fffbeb}
.alert-card.info{border-left-color:var(--cool);background:#eff8ff}
.alert-card.ok{border-left-color:var(--ok);background:#f0fff4}
.alert-card .at{font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;font-weight:700;color:var(--ink2);margin-bottom:4px}
.alert-card .av{font-size:.95rem;font-weight:700;margin-bottom:3px;line-height:1.3}
.alert-card .ad{font-size:.82rem;color:var(--ink2);line-height:1.4}
.alert-card .btn{margin-top:8px}

/* ═══════════════ MINI-KPI (Drift-overview: uge-vs-uge) ═══════════════ */
.mini-kpi{background:#faf8f0;padding:10px 14px;border-radius:8px;display:flex;flex-direction:column;gap:2px;border-left:3px solid var(--acc)}
.mini-kpi .mk-label{font-size:.7rem;text-transform:uppercase;color:var(--ink2);font-weight:700;letter-spacing:.4px}
.mini-kpi .mk-val{font-size:1.2rem;font-weight:800;line-height:1.1}
.mini-kpi .mk-delta{font-size:.75rem;font-weight:700}
.mini-kpi .mk-delta.up{color:var(--ok)}
.mini-kpi .mk-delta.down{color:var(--bad)}
.mini-kpi .mk-delta.flat{color:var(--ink2)}

/* ═══════════════ ACTION-CENTER liste (prioriteret handling) ═══════════════ */
.action-list{list-style:none;margin:0;padding:0}
.action-list li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #f0ede3;cursor:pointer;transition:background .1s}
.action-list li:last-child{border-bottom:0}
.action-list li:hover{background:#fafaf6}
.action-list li .ai-icon{font-size:1.2rem;flex:0 0 auto;width:28px;text-align:center}
.action-list li .ai-body{flex:1;min-width:0}
.action-list li .ai-title{font-size:.9rem;font-weight:700;line-height:1.3;margin-bottom:2px}
.action-list li .ai-sub{font-size:.78rem;color:var(--ink2);line-height:1.3}
.action-list li .ai-urgency{flex:0 0 auto;font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:2px 8px;border-radius:10px}
.action-list li .ai-urgency.high{background:#ffd7d7;color:#8a1e1e}
.action-list li .ai-urgency.medium{background:#fff0d1;color:#8a5a00}
.action-list li .ai-urgency.low{background:#e4e4dc;color:#4a4a4a}
.action-list .empty{padding:14px;text-align:center;color:var(--ink2);font-size:.88rem}

/* ═══════════════ VEJR-widget (Drift-overview) ═══════════════ */
.weather-strip{display:flex;gap:10px;padding:10px 0;overflow-x:auto}
.weather-day{flex:0 0 auto;min-width:60px;padding:8px 10px;border-radius:8px;background:#faf8f0;border:1px solid var(--brd);text-align:center;display:flex;flex-direction:column;gap:3px}
.weather-day.today{background:var(--acc);border-color:var(--acc-dk);font-weight:800}
.weather-day.rain{background:#eff8ff;border-color:#a8c9e9}
.weather-day.rain.heavy{background:#ffd7d7;border-color:#e8a8a8}
.weather-day .wd-day{font-size:.7rem;font-weight:700;color:var(--ink2);text-transform:uppercase}
.weather-day.today .wd-day{color:var(--ink)}
.weather-day .wd-icon{font-size:1.4rem;line-height:1}
.weather-day .wd-temp{font-size:.85rem;font-weight:700}
.weather-day .wd-rain{font-size:.68rem;color:var(--ink2)}

/* ═══════════════ SAG-GRID fix (Visual-Critic #4) ═══════════════ */
.sag-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;padding:4px 0}
.sag-grid > *{background:#faf8f0;border-radius:8px;padding:12px 14px;border:1px solid var(--brd)}

/* ═══════════════ Focus-states konsolideret ═══════════════ */

/* ═══════════════ Focus-states (WCAG 2.1 AA — kontrast) ═══════════════ */
/* Default: sort outline på lys baggrund (kontrast ≥ 3:1 mod hvid).
   Override til --acc (grøn) på mørke baggrunde (topbar, sidebar) hvor
   grøn har høj kontrast mod sort/mørk ink. */
.tb-item:focus-visible,.sb-item:focus-visible,.filter-chip:focus-visible,.btn:focus-visible,
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible{
  outline:2px solid #0d0d0d;outline-offset:2px;border-radius:4px;
}
.topbar :focus-visible,.sidebar :focus-visible{
  outline-color:var(--acc);
}

/* ═══ (cap-tabs / drift-plan-tabs selectors fjernet — disse tabs styles via .sag-tabs pattern) ═══ */

/* ═══════════════ KEYBOARD SHORTCUTS (Sprint 2 · Task 2.11) ═══════════════ */
/* Help-modal, kbd-stil taster, og fokus-highlight på tabelrækker (j/k). */

/* <kbd>-elementer: grå boks med let skygge, monospace-agtig */
kbd{
  display:inline-block;
  padding:3px 8px;
  min-width:22px;
  font-family:'SF Mono','Consolas','Monaco',monospace;
  font-size:.78rem;
  font-weight:600;
  line-height:1;
  color:var(--ink);
  background:#f4f3ea;
  border:1px solid var(--brd2);
  border-bottom-width:2px;
  border-radius:5px;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
  text-align:center;
  vertical-align:middle;
}

/* Help-modal container */
.kbd-help-overlay{z-index:300}
.kbd-help-modal{max-width:760px}
.kbd-help-body{padding:28px 32px}
.kbd-help-title{
  font-size:1.35rem;font-weight:800;margin-bottom:8px;
  display:flex;align-items:center;gap:10px;
}
.kbd-help-lead{
  color:var(--ink2);font-size:.88rem;margin-bottom:18px;
}

/* Kbd-tabel */
.kbd-table{width:100%;border-collapse:collapse;margin-bottom:14px}
.kbd-table th{
  text-align:left;padding:8px 10px;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;
  color:var(--mute);border-bottom:1px solid var(--brd);
  background:transparent;
}
.kbd-table td{
  padding:8px 10px;border-bottom:1px solid var(--brd);
  font-size:.88rem;vertical-align:middle;
}
.kbd-table tr:last-child td{border-bottom:none}
.kbd-table .kbd-cell{white-space:nowrap}
.kbd-table .kbd-context{color:var(--ink2);font-size:.8rem}
.kbd-sep{color:var(--mute);font-size:.75rem;padding:0 2px}

/* Gruppe-række (subheading) */
.kbd-group-row td{
  padding-top:16px;padding-bottom:6px;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.6px;
  color:var(--ink);font-weight:800;
  background:transparent;border-bottom:2px solid var(--ink);
}
.kbd-group-row:first-child td{padding-top:4px}

/* Footer-linje i help-modal */
.kbd-help-foot{
  color:var(--mute);font-size:.78rem;text-align:center;
  padding-top:10px;border-top:1px dashed var(--brd);
}

/* Tabelrække med keyboard-focus (j/k navigation) */
tr.bsb-row-focus{
  outline:2px solid var(--acc);outline-offset:-2px;
  background:#f8fff0 !important;
}
tr.bsb-row-focus td:first-child{
  border-left:3px solid var(--acc);
}

/* ═══════════════ CERT THRESHOLDS (Sprint 2 · Task 2.5) ═══════════════ */
/* Settings-view til konfiguration af advarsels-tærskler pr. cert-type. */
.cert-th-tbl th{white-space:nowrap}
.cert-th-tbl td{vertical-align:middle}
.cert-th-tbl .cert-th-sub{font-size:.72rem;color:var(--ink2);margin-top:2px;font-family:ui-monospace,Menlo,monospace}
.cert-th-input{
  width:90px;padding:6px 8px;border:1px solid var(--brd);border-radius:5px;
  font-size:.9rem;text-align:right;font-variant-numeric:tabular-nums;background:#fff;
}
.cert-th-input:focus{outline:2px solid var(--acc);outline-offset:1px;border-color:var(--acc-dk)}
.cert-th-input:disabled{background:#faf8f0;color:var(--ink2);cursor:not-allowed}
.cert-th-badge{
  display:inline-block;font-size:.65rem;font-weight:700;letter-spacing:.5px;
  padding:2px 6px;border-radius:4px;margin-left:6px;vertical-align:middle;
}
.cert-th-badge-crit{background:#fed7d7;color:#9b2c2c;border:1px solid #fc8181}
.cert-th-note{
  background:#fffaf0;border-left:4px solid var(--warn);padding:10px 14px;
  border-radius:6px;margin-bottom:14px;font-size:.88rem;
}
.cert-th-foot{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--brd);
}
.cert-th-legend{font-size:.82rem;color:var(--ink2);line-height:1.5}
.cert-th-howto{margin:0;padding-left:20px;font-size:.88rem;line-height:1.7}
.cert-th-howto li{margin-bottom:4px}
.cert-th-howto code{background:#faf8f0;padding:1px 5px;border-radius:3px;font-size:.8rem}

/* ═══════════════ A11Y SKIP LINK (WCAG 2.4.1) ═══════════════ */
.skip-link{
  position:absolute;top:-40px;left:10px;
  background:var(--acc);color:var(--ink);
  padding:8px 16px;z-index:1000;
  text-decoration:none;font-weight:700;
  border-radius:0 0 6px 6px;
  transition:top .15s;
}
.skip-link:focus{top:0;outline:2px solid var(--ink);outline-offset:2px}

/* ═══════════════ A11Y VISUALLY-HIDDEN ═══════════════ */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* ═══════════════ A11Y FOCUS-VISIBLE FORBEDRING ═══════════════ */
/* Global fallback: sort outline (kontrast ≥ 3:1 mod hvid/lys bg).
   Mørke regioner (.topbar / .sidebar) overrider til grøn længere oppe. */
*:focus-visible{
  outline:2px solid #0d0d0d;
  outline-offset:2px;
  border-radius:3px;
}
.topbar *:focus-visible,.sidebar *:focus-visible{
  outline-color:var(--acc);
}

/* sidebar-foot: sættes af flex-layout fra .sidebar og .sb-nav */
.sb-foot{margin-top:auto;padding:16px 10px 0;border-top:1px solid var(--brd)}

/* ═══════════════ TOOLTIPS ═══════════════ */
/* Native tooltip via title-attribute — browser default (mikro-niveau) */

/* Rich tooltip — popup med fuld forklaring på hover (ingen klik nødvendig) */
.bsb-tooltip{
  position:absolute;
  background:var(--ink);color:#fff;
  padding:14px 16px;border-radius:10px;
  font-size:.85rem;line-height:1.5;
  width:380px;max-width:calc(100vw - 16px);
  box-shadow:0 12px 32px rgba(0,0,0,.35);
  z-index:10000;pointer-events:none;
  opacity:0;transform:translateY(-4px);
  transition:opacity .18s,transform .18s;
  border:1px solid rgba(255,255,255,.08);
}
.bsb-tooltip.show{opacity:1;transform:translateY(0)}
.bsb-tooltip[data-placement="above"]{transform:translateY(4px)}
.bsb-tooltip[data-placement="above"].show{transform:translateY(0)}

/* Lille pil (peger mod elementet) */
.bsb-tooltip::before{
  content:'';position:absolute;
  left:50%;width:10px;height:10px;
  background:var(--ink);
  border-top:1px solid rgba(255,255,255,.08);
  border-left:1px solid rgba(255,255,255,.08);
}
.bsb-tooltip[data-placement="below"]::before{top:-6px;transform:translateX(-50%) rotate(45deg)}
.bsb-tooltip[data-placement="above"]::before{bottom:-6px;transform:translateX(-50%) rotate(-135deg)}

.bsb-tooltip .tt-title{color:var(--acc);font-weight:800;font-size:.95rem;letter-spacing:-.2px;margin-bottom:4px}
.bsb-tooltip .tt-short{color:#ccc;font-size:.78rem;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.08)}
.bsb-tooltip .tt-section{margin-top:10px;font-size:.8rem;color:#eee}
.bsb-tooltip .tt-section:first-of-type{margin-top:0}
.bsb-tooltip .tt-lbl{font-size:.68rem;text-transform:uppercase;letter-spacing:.5px;color:var(--acc);font-weight:700;margin-bottom:3px;opacity:.85}
.bsb-tooltip .tt-user{display:inline-block;background:rgba(185,255,49,.12);color:var(--acc);padding:2px 8px;border-radius:20px;font-size:.7rem;font-weight:600;margin:2px 3px 2px 0}
.bsb-tooltip .tt-scenario{font-size:.78rem;color:#ddd;line-height:1.55;font-style:italic}
.bsb-tooltip .tt-tip{background:rgba(185,255,49,.08);border-left:3px solid var(--acc);padding:7px 10px;margin-top:10px;border-radius:0 6px 6px 0;font-size:.75rem;color:#f0f0f0}
/* Bagudkompat: gamle klasser der stadig findes i ældre kode */
.bsb-tooltip strong{color:var(--acc);display:block;margin-bottom:3px;font-size:.85rem}
/* .bsb-tooltip .tt-users fjernet — ikke brugt (tooltips.js bruger .help-users istedet) */

/* Help-ikon ⓘ der åbner full-dialog */
/* Help-icon — CSS-rendered "i" i cirkel (ikke ⓘ unicode, som er pixeleret på mange systemer) */
.help-icon{
  display:inline-flex;
  width:18px;height:18px;
  border-radius:50%;
  background:var(--ink2);
  color:transparent;                /* skjuler ⓘ-tegnet i HTML */
  font-size:0;line-height:0;
  align-items:center;justify-content:center;
  cursor:pointer;margin-left:8px;
  vertical-align:middle;
  position:relative;
  transition:background .15s,transform .15s,box-shadow .15s;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  flex-shrink:0;
}
.help-icon::before{
  content:'i';
  font-family:'Georgia','Times New Roman',serif;
  font-style:italic;
  font-weight:600;
  font-size:12px;
  line-height:1;
  color:#fff;
  position:relative;
  top:-.5px;
}
.help-icon:hover{background:var(--ink);transform:scale(1.12);box-shadow:0 2px 6px rgba(0,0,0,.15)}
.help-icon:hover::before{color:var(--acc)}
.help-icon:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* Help-dialog (full forklaring — åbnes via BSB_TOOLTIPS.openHelp) */
.help-dialog{max-width:640px}
.help-dialog-head{border-bottom:2px solid var(--brd);padding-bottom:14px;margin-bottom:18px}
.help-dialog-head h2{margin:0 0 6px;font-size:1.4rem;color:var(--ink)}
.help-dialog-sub{font-size:.92rem;color:var(--ink2)}
.help-dialog-body{display:flex;flex-direction:column;gap:16px}
.help-section h3{font-size:.78rem;color:var(--ink2);text-transform:uppercase;letter-spacing:.5px;margin:0 0 6px;font-weight:700}
.help-section p{font-size:.92rem;line-height:1.55;color:var(--ink);margin:0}
.help-section-tip{background:#fffbea;border-left:3px solid var(--acc-dk);padding:10px 12px;border-radius:0 6px 6px 0}
.help-section-tip p{color:#5a4a00}
.help-users{display:flex;flex-wrap:wrap;gap:6px}
.help-user-chip{
  display:inline-block;
  background:var(--bg);border:1px solid var(--brd);
  padding:3px 10px;border-radius:12px;
  font-size:.78rem;color:var(--ink);
}

/* ═══ TOASTS (polished v2 — stack-container, ikon, close, retry, spinner) ═══ */
/* Container: fixed nederst højre, stacks opad (column-reverse = nyeste nederst) */
.bsb-toast-container {
  position: fixed; bottom: 24px; right: 24px;
  display: flex; flex-direction: column-reverse;
  gap: 10px;
  z-index: 10001;
  pointer-events: none; /* container blokerer ikke klik */
  max-width: 420px;
}
.bsb-toast {
  display: flex; align-items: center; gap: 10px;
  min-width: 260px; max-width: 420px;
  padding: 12px 14px;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
  color: #fff;
  background: #111; /* default = info */
  font-size: .92rem; font-weight: 500; line-height: 1.4;
  transform: translateX(120%); opacity: 0;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s ease;
  pointer-events: auto;
}
.bsb-toast.show { transform: translateX(0); opacity: 1; }
.bsb-toast.hide { transform: translateX(120%); opacity: 0; }

/* Typer: solide baggrunde, hvid tekst (undtagen warn → mørk for kontrast) */
.bsb-toast-info    { background: #111; color: #fff; }
.bsb-toast-success { background: #10b981; color: #fff; }
.bsb-toast-warn    { background: #eab308; color: #1a1a1a; }
.bsb-toast-error   { background: #c53030; color: #fff; }
.bsb-toast-loading { background: #1f2937; color: #fff; }

/* Ikon-cirkel til venstre */
.bsb-toast-ic {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  font-size: .85rem; font-weight: 700; line-height: 1;
}
.bsb-toast-warn .bsb-toast-ic { background: rgba(0,0,0,.15); color: #1a1a1a; }

/* Loading spinner (overskriver ic-baggrund) */
.bsb-toast-spinner {
  background: transparent !important;
  border: 2px solid rgba(255,255,255,.28);
  border-top-color: #fff;
  border-radius: 50%;
  animation: bsb-toast-spin .9s linear infinite;
  box-sizing: border-box;
}
@keyframes bsb-toast-spin { to { transform: rotate(360deg); } }

/* Besked (flex-grow) */
.bsb-toast-msg { flex: 1 1 auto; word-break: break-word; }

/* Retry-knap (kun på error m/retry-option) */
.bsb-toast-retry {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.12);
  color: inherit;
  font-size: .82rem; font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.bsb-toast-retry:hover { background: rgba(255,255,255,.24); }
.bsb-toast-warn .bsb-toast-retry {
  border-color: rgba(0,0,0,.4); background: rgba(0,0,0,.08);
}
.bsb-toast-warn .bsb-toast-retry:hover { background: rgba(0,0,0,.16); }

/* Close (×) — kun synlig ved hover */
.bsb-toast-close {
  flex: 0 0 auto;
  width: 22px; height: 22px; padding: 0;
  border: 0; background: transparent; color: inherit;
  font-size: 1.15rem; line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s;
}
.bsb-toast:hover .bsb-toast-close,
.bsb-toast:focus-within .bsb-toast-close { opacity: .85; }
.bsb-toast-close:hover { opacity: 1; }

/* Reduced motion: drop slide */
@media (prefers-reduced-motion: reduce) {
  .bsb-toast { transition: opacity .2s ease; transform: none !important; }
}

/* ═══ TIDSKONTROL ═══ */
.tk-row-match { background:#f0fff4 }          /* grøn — ingen afvigelse */
.tk-row-over  { background:#fffbeb }           /* gul — for mange timer */
.tk-row-wrong-sag { background:#fff5f5 }       /* rød — forkert sag */
.tk-row-missing { background:#fffaf0; border-left:4px solid var(--bad) }
.tk-flag-icon { font-size:1.1rem; margin-right:4px }
.tk-badge-pending  { background:#ffefd0; color:#7a5200 }
.tk-badge-approved { background:#d2f5dc; color:#1e6e3a }
.tk-badge-flagged  { background:#ffd7d7; color:#8a1e1e }
.tk-badge-rejected { background:#444; color:#fff }
.tk-date-picker { display:flex; gap:8px; align-items:center; margin-bottom:14px; flex-wrap:wrap }
.tk-variance { font-weight:700 }
.tk-variance.over { color:var(--warn) }
.tk-variance.wrong { color:var(--bad) }
.tk-variance.ok { color:var(--ok) }

/* ═══ TIDSKONTROL BULK ═══ */
.tk-bulk-bar {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff;
  padding: 12px 20px; border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  z-index: 10000; display: flex; align-items: center; gap: 10px;
  font-size: .9rem;
}
.tk-bulk-bar strong { color: var(--acc) }
.tk-bulk-bar .btn.sm {
  padding: 6px 12px; font-size: .82rem;
  background: rgba(255,255,255,.08); color: #fff;
  border: 1px solid rgba(255,255,255,.18); border-radius: 6px;
}
.tk-bulk-bar .btn.sm:hover { background: rgba(255,255,255,.16) }
.tk-bulk-bar .btn.sm.primary {
  background: var(--acc); color: var(--ink);
  border-color: var(--acc); font-weight: 700;
}
.tk-bulk-bar .btn.sm.primary:hover { background: var(--acc-dk) }
.tk-row-cb { cursor: pointer }

/* ═══ GANTT BULK-EDIT (Sprint 2 · Task 2.10) ═══ */
.bar.selected, .gb.selected {
  outline: 3px solid var(--acc);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(185,255,49,.25);
  z-index: 5;
}
.gantt-bulk-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .9rem;
  min-width: 400px;
  max-width: 90vw;
}
.gantt-bulk-bar strong { color: var(--acc); }
.gantt-bulk-bar .btn.sm {
  padding: 6px 12px;
  font-size: .82rem;
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
}
.gantt-bulk-bar .btn.sm:hover { background: rgba(255,255,255,.16) }
.gantt-bulk-bar .btn.sm.primary {
  background: var(--acc);
  color: var(--ink);
  border-color: var(--acc);
  font-weight: 700;
}
.gantt-bulk-bar .btn.sm.primary:hover { background: var(--acc-dk) }

/* ═══ TEAM-GANTT · GROUP BY SAG ═══ */
.tmg-by-sag-wrap { background:#fafaf6 }

.tmg-tbl.tmg-by-sag {
  background:#fff;
}

/* Sag-header i venstre kolonne (klikbar) */
.tmg-by-sag .tmg-sag-header {
  display:flex; align-items:flex-start; gap:8px;
  padding:10px 12px;
  background:#faf8f0;
  cursor:pointer; user-select:none;
  border-bottom:1px solid var(--brd);
  border-top:1px solid var(--brd);
  font-size:.82rem;
  min-height:60px;
}
.tmg-by-sag .tmg-sag-header:hover { background:#f0ecda }
.tmg-by-sag .tmg-sag-toggle {
  font-size:.72rem; color:var(--ink2); flex:0 0 auto; padding-top:2px;
}
.tmg-by-sag .tmg-sag-title { flex:1; min-width:0; line-height:1.3 }
.tmg-by-sag .tmg-sag-line1 {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:2px;
}
.tmg-by-sag .tmg-sag-line1 strong { font-size:.85rem; color:var(--acc-dk, #8fc914) }
.tmg-by-sag .tmg-sag-line2 {
  font-size:.75rem; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:220px;
}
.tmg-by-sag .tmg-sag-line3 {
  font-size:.68rem; color:var(--ink2); margin-top:2px;
}

/* Sag-header-række i højre track (span-indikator) */
.tmg-by-sag .tmg-sag-header-row {
  position:relative;
  display:flex;
  height:60px;
  min-height:60px;
  background:#faf8f0;
  border-bottom:1px solid var(--brd);
  border-top:1px solid var(--brd);
}
.tmg-by-sag .tmg-sag-header-cell {
  min-width:50px; flex:0 0 50px;
  border-right:1px solid #e8ecf1;
  height:100%;
}
.tmg-by-sag .tmg-sag-header-cell.now { background:#f5ffd6 }
.tmg-by-sag .tmg-sag-span {
  position:absolute; top:18px; height:24px;
  border-radius:4px;
  color:#fff;
  font-size:10px; font-weight:700;
  padding:0 8px;
  display:flex; align-items:center;
  white-space:nowrap; overflow:hidden;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  box-shadow:0 1px 3px rgba(0,0,0,.15);
  z-index:1;
}

/* Person-rækker under en sag (både venstre og højre) */
.tmg-by-sag .tmg-sag-crew-rows { /* container — ingen ekstra padding */ }
.tmg-by-sag .tmg-sag-person-row {
  padding-left:24px; /* indryk under sag-header */
  background:#fff;
}
.tmg-by-sag .tmg-sag-person-row:hover { background:#f7fafc }
.tmg-by-sag .tmg-sag-person-track {
  background:#fff;
}
.tmg-by-sag .tmg-sag-person-track:hover { background:#fafbfd }

/* Primær segment (person er på DENNE sag denne uge) */
.tmg-by-sag .tmg-seg-primary {
  top:5px; height:24px;
}
/* Anden-sag segment (konflikt-indikator — semi-transparent) */
.tmg-by-sag .tmg-seg-other {
  top:5px; height:24px;
  font-size:9px;
  outline:1px dashed rgba(0,0,0,.3); outline-offset:-1px;
}
.tmg-by-sag .tmg-seg-other:hover { opacity:.7 !important }

/* ─── Print-styles (bruges af BSB_EXPORT.printElement + native browser print) ─── */
@media print {
  /* Skjul UI-chrome */
  .topbar, .sidebar, .modal-overlay, #onboarding-banner,
  .topbar-hamburger, .sidebar-backdrop, .help-icon,
  .bell, .notif-bell, .persona-switcher, .user-switch, .global-search,
  .filter-chip, .btn, .quick-actions, .bulk-bar, .gantt-bulk-bar,
  #bsb-sticky-save-footer, #offer-activity-panel,
  .cmd-palette, #bsb-cmd-palette, .tooltip, .dropdown,
  .bsb-toast, .bsb-toast-container, .no-print {
    display: none !important;
  }

  /* Fuldbredde indhold */
  .layout { display: block !important; }
  .main, main {
    margin: 0 !important;
    padding: 20px !important;
    max-width: 100% !important;
  }

  /* A4 page-setup */
  @page { size: A4 portrait; margin: 15mm 15mm 20mm 15mm; }

  /* Typografi til print */
  body { font-size: 10pt; line-height: 1.4; color: #000; background: #fff; }
  h1 { font-size: 18pt; margin-top: 0; }
  h2 { font-size: 14pt; }
  h3 { font-size: 12pt; }

  /* Tabel-polish */
  .mtbl { font-size: 9pt; }
  .mtbl th { background: #f0f0f0 !important; color: #000 !important; border-bottom: 2px solid #000; }
  .mtbl td { border-bottom: 1px solid #ccc; padding: 4px 8px; }

  /* Page-breaks */
  .card, .kpi, table { page-break-inside: avoid; }
  h1, h2 { page-break-after: avoid; }

  /* Hide links-URL suffix */
  a::after { content: none !important; }

  /* Sort tekst */
  * { color: #000 !important; background: transparent !important; }
  .card { border: 1px solid #ccc !important; }
  .pill.won, .pill-won { background: #d1fae5 !important; color: #065f46 !important; border: 1px solid #059669; }
  .pill.lost, .pill-lost { background: #fee2e2 !important; color: #991b1b !important; border: 1px solid #dc2626; }
}

/* ═══ AUDIT TIMELINE ═══ */
.audit-timeline { max-height: 400px; overflow-y: auto }
.audit-entry { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0ede3 }
.audit-entry:last-child { border-bottom: 0 }
/* .audit-dot / audit-create/update/delete/error/shift_project/clone_sag ikke brugt (inline styles i app.js) */
.audit-body { flex: 1; font-size: .85rem }
.audit-header { display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline }
/* .audit-action, .audit-target ikke brugt (inline styles i app.js) */
.audit-time { font-size: .72rem; color: var(--mute); margin-top: 3px }

/* ═══ COMMAND PALETTE ═══ */
#bsb-cmd-palette { position: fixed; inset: 0; z-index: 10000 }
#bsb-cmd-palette .cmd-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5) }
#bsb-cmd-palette .cmd-modal {
  position: relative; max-width: 640px; width: 90%;
  margin: 10vh auto 0; background: var(--card);
  border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.4);
  overflow: hidden; display: flex; flex-direction: column;
  max-height: 70vh;
}
.cmd-input {
  width: 100%; padding: 16px 20px; font-size: 1rem;
  border: 0; outline: 0; border-bottom: 1px solid var(--brd);
  background: var(--card);
}
.cmd-results { overflow-y: auto; flex: 1; padding: 6px 0 }
.cmd-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; cursor: pointer;
  border-left: 3px solid transparent;
}
.cmd-item.selected { background: #faf8f0; border-left-color: var(--acc) }
.cmd-icon { font-size: 1.2rem; width: 24px; text-align: center }
.cmd-body { flex: 1; min-width: 0 }
.cmd-label { font-size: .92rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.cmd-sub { font-size: .78rem; color: var(--ink2); margin-top: 2px }
.cmd-type { font-size: .7rem; color: var(--mute); text-transform: uppercase; font-weight: 700; background: #eeebe0; padding: 2px 8px; border-radius: 4px }
.cmd-section-header {
  font-size: .68rem; font-weight: 700; letter-spacing: .8px;
  color: var(--ink2); text-transform: uppercase;
  padding: 10px 18px 4px; border-top: 1px solid var(--brd);
  background: #faf9f4;
}
.cmd-section-header:first-child { border-top: 0 }
.cmd-section-count { color: var(--mute); font-weight: 500; margin-left: 4px }
.cmd-empty { padding: 40px 20px; text-align: center; color: var(--mute) }
.cmd-foot { padding: 10px 18px; border-top: 1px solid var(--brd); font-size: .75rem; color: var(--ink2); display: flex; gap: 16px; background: #faf8f0 }
.cmd-foot kbd { background: #fff; border: 1px solid var(--brd); padding: 1px 5px; border-radius: 3px; font-size: .7rem; font-family: ui-monospace,Menlo,monospace }

/* ═══════════════ BOOKMARK TOGGLE (sag-modal title) ═══════════════ */
.bookmark-toggle {
  background: transparent; border: 0; font-size: 1.4rem; cursor: pointer;
  padding: 4px 8px; color: #fff; opacity: .8; transition: .2s;
  margin-left: 8px; vertical-align: middle; line-height: 1;
}
.bookmark-toggle:hover { opacity: 1; transform: scale(1.15) }
.bookmark-toggle:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 4px }

/* ═══ GANTT CONTEXT MENU ═══ */
.gantt-context-menu {
  background: var(--card);
  border: 1px solid var(--brd);
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,.2);
  padding: 6px 0;
  min-width: 220px;
  animation: gcm-in .15s ease-out;
}
@keyframes gcm-in {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.gantt-context-menu button {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; width: 100%;
  background: transparent; border: 0;
  text-align: left; font-size: .88rem;
  cursor: pointer; color: var(--ink);
  transition: background .1s;
}
.gantt-context-menu button:hover { background: #faf8f0 }
.gantt-context-menu button[disabled]:hover { background: transparent }
.gantt-context-menu .ctx-icon { font-size: 1rem; width: 20px; text-align: center }
.gantt-context-menu .ctx-divider { height: 1px; background: var(--brd); margin: 4px 0 }

/* ═══════════════ UX REFINEMENTS (modal footers, empty states, dirty state, kbd hints) ═══════════════ */

/* Standardiseret modal-footer: Cancel venstre, Primary højre, Danger separat */
.modal-footer{
  display:flex; gap:8px; align-items:center;
  margin-top:18px; padding-top:14px; border-top:1px solid var(--brd);
  flex-wrap:wrap;
}
.modal-footer .spacer{ flex:1 }
.modal-footer .meta{ font-size:.78rem; color:var(--ink2); margin-left:auto }
.modal-footer .btn.danger{
  background:var(--bad); color:#fff;
  margin-left:24px; /* tydelig adskillelse fra primary */
}
.modal-footer .btn.danger:hover{ background:#c0302f }

/* .modal-input og .modal-body-text fjernet — ikke brugt i app.js (bruger inline styles) */

/* .bar-close, .notif-close, .ctx-close fjernet — ikke brugt i app.js */

/* Empty state cards (pænere end blot "Ingen data") */
.empty-state{
  text-align:center; padding:60px 20px; color:var(--ink2);
}
.empty-state .empty-icon{ font-size:3rem; margin-bottom:12px; opacity:.5 }
.empty-state .empty-title{
  font-size:1.1rem; font-weight:700; color:var(--ink); margin-bottom:6px;
}
.empty-state .empty-sub{
  font-size:.9rem; margin-bottom:18px; max-width:400px;
  margin-left:auto; margin-right:auto;
}

/* Breadcrumb-link styling */
.breadcrumb a{
  color:inherit; cursor:pointer; text-decoration:none; transition:.12s;
}
.breadcrumb a:hover{ color:var(--ink); text-decoration:underline }
.breadcrumb a:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; border-radius:3px }

/* Dirty/Save-state */
.btn.dirty{ animation: pulse-dirty 2s infinite }
.dirty-dot{ color:var(--warn); margin-left:4px; font-weight:900 }
@keyframes pulse-dirty{
  0%,100%{ box-shadow: 0 0 0 0 rgba(214,158,46,0) }
  50%    { box-shadow: 0 0 0 4px rgba(214,158,46,.25) }
}
.btn[disabled]{ opacity:.6; cursor:wait; pointer-events:none }
.btn.is-loading{ opacity:.7; cursor:wait }

/* Keyboard shortcut-hint på knapper */
.btn kbd{
  background:rgba(0,0,0,.15); padding:1px 6px; border-radius:3px;
  font-size:.7rem; margin-left:6px; font-family:ui-monospace,Menlo,monospace;
  font-weight:600;
}
.btn.primary kbd{ background:rgba(0,0,0,.18); color:var(--ink) }

/* Kompakt/komfort tabel-densitet */
.mtbl.compact td, .mtbl.compact th{ padding:4px 8px; font-size:.78rem }
.mtbl.cozy    td, .mtbl.cozy    th{ padding:12px 14px; font-size:.92rem }

/* ═══════════════ UTILITY KLASSER (migreret fra hyppige inline styles) ═══════════════ */
/* Brug disse klasser i stedet for gentagne inline style="..." */

/* Tekst-størrelse + farve kombinationer (28x+ i app.js) */
.txt-meta{font-size:.75rem;color:var(--ink2)}           /* 28x: font-size:.75rem;color:var(--ink2) */
.txt-small-meta{font-size:.78rem;color:var(--ink2)}     /* 11x: font-size:.78rem;color:var(--ink2) */
.txt-label{font-size:.82rem;color:var(--ink2)}          /* 3x:  font-size:.82rem;color:var(--ink2) */
.txt-ok{color:var(--ok)}                                /* 13x: color:var(--ok) */
.txt-bad{color:var(--bad)}                              /* 12x: color:var(--bad) */
.txt-mute{color:var(--mute)}                            /* 5x:  color:var(--mute) */
.txt-ok-bold{color:var(--ok);font-weight:800}           /* 4x:  color:var(--ok);font-weight:800 */
.txt-code{font-family:ui-monospace,Menlo,monospace;font-size:.82rem} /* 5x */

/* Layout helpers */
.flex-gap-6{display:flex;gap:6px}                       /* 11x */
.flex-center-8{display:flex;align-items:center;gap:8px} /* 3x */

/* Spacing */
.mb-8{margin-bottom:8px}   /* 4x */
.mb-10{margin-bottom:10px} /* 4x */
.mb-12{margin-bottom:12px} /* 5x */
.mt-8{margin-top:8px}      /* 3x */
.mt-10{margin-top:10px}    /* 4x */
.mt-12{margin-top:12px}    /* 3x */
.m-bottom-10{margin:0 0 10px}  /* 4x */

/* Inline form fields (4x: width:100%;padding:4px 6px;border:1px solid var(--brd);border-radius:4px) */
.field-inline{width:100%;padding:4px 6px;border:1px solid var(--brd);border-radius:4px}

/* Fakturabox / content-box (3x: background:#fff;padding:10px;border-radius:6px) */
.content-box{background:#fff;padding:10px;border-radius:6px}

/* Danger-alert-boks (3x: border-left:4px solid var(--bad);background:#fff5f5) */
.alert-danger-box{border-left:4px solid var(--bad);background:#fff5f5}

/* Footer-action-row (3x: margin-top:12px;display:flex;gap:8px;justify-content:flex-end) */
.footer-actions{margin-top:12px;display:flex;gap:8px;justify-content:flex-end}

/* Gantt — probable bars (sent/proposal sager, prognose) */
.gb.gb-probable {
  opacity: .55;
  background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(255,255,255,.35) 4px 8px);
  cursor: default;
}
.gb.gb-probable .rl, .gb.gb-probable .rr { display:none; }
.gb-prob {
  display: inline-block;
  padding: 1px 4px;
  background: rgba(0,0,0,.4);
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  color: white;
  margin-left: 4px;
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  pointer-events: none;
}

/* ───── Kapacitet: uge-heatmap (drift:capacity → Uge-oversigt) ───── */
.cap-heatmap { margin-top: 4px; }
.cap-sparkline { width: 100%; height: 36px; display: block; margin-bottom: 8px; }
.cap-weeks { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.cap-wk {
  flex: 0 0 58px; height: 78px;
  border-radius: 6px; padding: 6px 4px;
  position: relative; cursor: pointer;
  text-align: center; transition: transform .12s ease, box-shadow .12s ease;
  border: 1px solid rgba(0,0,0,0.04);
  color: var(--ink);
  user-select: none;
}
.cap-wk:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.08); }
.cap-wk.active { box-shadow: 0 0 0 2px var(--ink); transform: translateY(-2px); }
.cap-wk-now { outline: 1px dashed var(--ink); outline-offset: -3px; }
.cap-wk-num { font-size: 10px; font-weight: 600; color: var(--ink2); letter-spacing: .2px; }
.cap-wk-sure { font-size: 22px; font-weight: 700; line-height: 1; margin-top: 6px; color: var(--ink); }
.cap-wk-prob { font-size: 11px; color: var(--mute); margin-top: 4px; font-weight: 500; }
.cap-wk-prob-empty { visibility: hidden; }
.cap-wk.overbook { background: #fef2f2 !important; border-color: #fecaca; }
.cap-wk.overbook .cap-wk-sure { color: #ef4444; }
.cap-wk-unknown { background: #f4f4f4; }
.cap-wk-unknown .cap-wk-sure { color: var(--mute); }
.cap-wk-dot { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; }
.cap-wk-dot-ok { background: #16a34a; }
.cap-wk-dot-warn { background: #eab308; }
.cap-wk-dot-bad { background: #ef4444; }

.cap-legend { font-size: 10.5px; color: var(--ink2); margin-top: 8px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cap-legend-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; margin-right: 4px; border: 1px solid rgba(0,0,0,0.06); }

.cap-detail { margin-top: 12px; padding: 12px 14px; background: #fafafa; border: 1px solid var(--brd); border-radius: 6px; font-size: 12.5px; }
.cap-detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--brd); }
.cap-detail-head strong { font-size: 13px; }
.cap-detail-muted { color: var(--mute); font-size: 11.5px; }
.cap-detail-close { margin-left: auto; background: transparent; border: 1px solid var(--brd); border-radius: 4px; width: 24px; height: 24px; cursor: pointer; font-size: 14px; line-height: 1; color: var(--ink2); padding: 0; }
.cap-detail-close:hover { background: var(--card); color: var(--ink); }
.cap-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 1280px) { .cap-detail-grid { grid-template-columns: 1fr; } }
.cap-detail-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; color: var(--mute); margin-bottom: 6px; }
.cap-detail-list { list-style: none; padding: 0; margin: 0; font-size: 12px; }
.cap-detail-list li { padding: 3px 0; border-bottom: 1px dashed var(--brd); }
.cap-detail-list li:last-child { border-bottom: 0; }
.cap-detail-list code { font-size: 11.5px; background: #fff; padding: 1px 5px; border: 1px solid var(--brd); border-radius: 3px; }
.cap-detail-empty { color: var(--mute); font-style: italic; }
.cap-detail-prob { color: var(--mute); font-size: 11px; }

/* ═══════════════ MOBILE RESPONSIV (hamburger + tabel-wrap) ═══════════════ */
/* Hamburger skjult som default — vises kun < 768px via media query */
.topbar-hamburger { display: none; align-items: center; justify-content: center; }

/* Backdrop skjult som default */
.sidebar-backdrop { display: none; }

/* Pipeline scroll-hint (kun synlig på tablet < 900px hvor kolonner overflow'er) */
.pipeline-board { position: relative; scrollbar-color: #B9FF31 #f0f0f0; scrollbar-width: thin; }
.pipeline-board::-webkit-scrollbar { height: 8px; }
.pipeline-board::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 4px; }
.pipeline-board::-webkit-scrollbar-thumb { background: #B9FF31; border-radius: 4px; }

/* Tablet: 601-900px — pipeline beholder grid men scroller horisontalt med hint */
@media (max-width: 900px) and (min-width: 601px) {
  .pipeline-board::after {
    content: '→ swipe for at se flere';
    position: sticky;
    right: 0;
    bottom: 0;
    display: block;
    background: rgba(185, 255, 49, 0.95);
    color: #0a0a0a;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    pointer-events: none;
    width: fit-content;
    margin-left: auto;
    z-index: 2;
  }
}

/* Mobil < 600px: kompakt tabel (bug 1) */
@media (max-width: 600px) {
  .mtbl { font-size: 12px; min-width: auto; }
  .tbl-wrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 768px) {
  /* Layout: full-width main, sidebar ud af flow */
  .app-layout,
  .layout { grid-template-columns: 1fr; display: block; }

  /* Sidebar bliver slide-in panel */
  .sidebar {
    position: fixed;
    left: -280px;
    top: var(--topbar-h, 56px);
    bottom: 0;
    width: 280px;
    height: auto;
    transition: left 0.25s ease;
    z-index: 100;
    box-shadow: 2px 0 20px rgba(0,0,0,.15);
  }
  .sidebar.open { left: 0; }

  /* Main fylder hele bredden — ingen margin fra sidebar (bug 3) */
  .main, main { margin-left: 0 !important; width: 100%; max-width: 100%; }

  .sidebar-backdrop {
    position: fixed;
    inset: var(--topbar-h, 56px) 0 0 0;
    background: rgba(0,0,0,0.4);
    z-index: 99;
    display: none;
  }
  .sidebar.open ~ .sidebar-backdrop,
  .sidebar-backdrop.open { display: block; }

  /* Hamburger-knap i topbar */
  .topbar-hamburger { display: flex !important; color:#fff; }

  /* Main fylder nu hele bredden */
  .main { padding: 16px 12px; }

  /* Tabel-wraps */
  .mtbl { font-size: 12px; }
  .mtbl th:nth-child(n+5),
  .mtbl td:nth-child(n+5) { display: none; }

  /* Pipeline-board stacker kolonner */
  .pipeline-board {
    grid-template-columns: 100% !important;
    overflow-x: visible !important;
  }
  .pip-col { min-width: auto !important; }

  /* KPI / filter-row stacker */
  .tilbud-kpi { grid-template-columns: 1fr !important; }
  .filter-row { flex-direction: column; align-items: stretch; }
  .filters { flex-direction: column; align-items: stretch; }
  .filter-chip { font-size: 11px; padding: 4px 8px; }
  .filter-input { min-width: 0; width: 100%; }
}

@media (max-width: 375px) {
  .topbar .logo { display: none; }
  .tb-nav { font-size: 11px; }
  .tb-item { padding: 6px 8px; }
}

/* ═══════════════ WCAG 2.5.5 — Touch targets min 44px ═══════════════ */
/* Globalt minimum for touch-interaktive elementer. Undtagelser:
   inline-knapper i kompakte tabeller (.btn.sm i td, .stage-select inde i
   pipeline-card) kan ikke overholde 44px uden at ødelægge layout —
   disse har :focus-visible fallback.
   Checkbox/radio får både min-width og min-height. */
button, .btn, .filter-chip, .sb-item, .tb-item,
input[type=checkbox], input[type=radio] { min-height: 44px; }
input[type=checkbox], input[type=radio] { min-width: 44px; }

/* Undtagelse: kompakte inline-knapper/chips i tabel-celler og
   tæt pakkede UI-elementer beholder deres eksplicitte størrelse. */
.tasklist-tbl button, .tasklist-tbl .btn,
.mtbl button, .mtbl .btn,
.tbl td button, .tbl td .btn,
.stage-select + button, .pip-open-offer, .pip-to-offer,
.btn.sm, .filter-chip.sm,
.modal-close,
.notif-bell { min-height: auto; }
.notif-bell { min-height: 44px; min-width: 44px; }

/* ═══════════════════════════════════════════════════════════════════
   CRM Sheet Modals — ensartet right-side panel til allinbsb
   Brand: Supernova grøn #B9FF31 focus, sort primary, #c53030 danger
   ═══════════════════════════════════════════════════════════════════ */

/* Screen-reader only (A11y) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Animationer */
@keyframes bsb-sheet-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes bsb-sheet-slide-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes bsb-sheet-slide-out {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}

/* Overlay — mørk semi-transparent baggrund */
.bsb-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9000;
  animation: bsb-sheet-fade-in 150ms ease-out;
  display: flex;
  justify-content: flex-end;
}
.bsb-sheet-overlay.closing {
  animation: bsb-sheet-fade-in 150ms ease-out reverse;
}

/* Sheet — hvid panel fra højre */
.bsb-sheet {
  background: #ffffff;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
  animation: bsb-sheet-slide-in 200ms ease-out;
  overflow: hidden;
}
.bsb-sheet.closing {
  animation: bsb-sheet-slide-out 200ms ease-out forwards;
}

@media (min-width: 768px) {
  .bsb-sheet { width: 480px; max-width: 480px; }
}

/* Header */
.bsb-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid #e5e5e5;
  flex-shrink: 0;
}
.bsb-sheet-header h2,
.bsb-sheet-header .bsb-sheet-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #111;
  line-height: 1.3;
}
.bsb-sheet-header .bsb-sheet-close {
  background: transparent;
  border: 0;
  width: 36px;
  height: 36px;
  min-height: 36px;
  border-radius: 8px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #555;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bsb-sheet-header .bsb-sheet-close:hover { background: #f2f2f2; color: #111; }
.bsb-sheet-header .bsb-sheet-close:focus-visible {
  outline: 2px solid #B9FF31;
  outline-offset: 2px;
}

/* Body — scrollable content */
.bsb-sheet-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Footer — sticky bottom, højre-justerede knapper */
.bsb-sheet-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid #e5e5e5;
  background: #fafafa;
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
}
.bsb-sheet-footer .bsb-btn-primary {
  background: #000;
  color: #B9FF31;
  border: 1px solid #000;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  min-height: 40px;
}
.bsb-sheet-footer .bsb-btn-primary:hover { background: #1a1a1a; }
.bsb-sheet-footer .bsb-btn-primary:focus-visible {
  outline: 2px solid #B9FF31;
  outline-offset: 2px;
}
.bsb-sheet-footer .bsb-btn-secondary {
  background: #ffffff;
  color: #111;
  border: 1px solid #d0d0d0;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
}
.bsb-sheet-footer .bsb-btn-secondary:hover { background: #f2f2f2; }
.bsb-sheet-footer .bsb-btn-danger {
  background: #c53030;
  color: #ffffff;
  border: 1px solid #c53030;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  min-height: 40px;
}
.bsb-sheet-footer .bsb-btn-danger:hover { background: #a52626; border-color: #a52626; }
.bsb-sheet-footer .bsb-btn-danger:focus-visible {
  outline: 2px solid #B9FF31;
  outline-offset: 2px;
}

/* Sections inden i body */
.bsb-sheet-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 4px;
}
.bsb-sheet-section > h3,
.bsb-sheet-section > .bsb-section-heading {
  margin: 0 0 4px 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #666;
}

/* Fields — label + input wrapper */
.bsb-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bsb-field label {
  font-size: 13px;
  font-weight: 600;
  color: #222;
  line-height: 1.3;
}
.bsb-field input[type=text],
.bsb-field input[type=email],
.bsb-field input[type=tel],
.bsb-field input[type=number],
.bsb-field input[type=date],
.bsb-field input[type=url],
.bsb-field input[type=search],
.bsb-field input[type=password],
.bsb-field textarea,
.bsb-field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  background: #ffffff;
  font-size: 14px;
  font-family: inherit;
  color: #111;
  line-height: 1.4;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  box-sizing: border-box;
}
.bsb-field textarea {
  min-height: 96px;
  resize: vertical;
}
.bsb-field input:focus,
.bsb-field textarea:focus,
.bsb-field select:focus {
  outline: none;
  border-color: #111;
  box-shadow: 0 0 0 2px #B9FF31;
}
.bsb-field input:focus-visible,
.bsb-field textarea:focus-visible,
.bsb-field select:focus-visible {
  outline: 2px solid #B9FF31;
  outline-offset: 0;
}

/* Required-indikator */
.bsb-field.required label::after {
  content: " *";
  color: #c53030;
  font-weight: 700;
}

/* Error-state */
.bsb-field.error input,
.bsb-field.error textarea,
.bsb-field.error select {
  border-color: #c53030;
  box-shadow: 0 0 0 1px #c53030;
}
.bsb-field.error .bsb-field-error,
.bsb-field .bsb-field-error {
  color: #c53030;
  font-size: 12px;
  font-weight: 500;
  margin-top: 2px;
}
.bsb-field .bsb-field-hint {
  color: #666;
  font-size: 12px;
  margin-top: 2px;
}

/* 2-kolonne layout */
.bsb-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 520px) {
  .bsb-field-row { grid-template-columns: 1fr; }
}

/* Chip-select — radio-gruppe som chips */
.bsb-chip-select {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bsb-chip-select input[type=radio],
.bsb-chip-select input[type=checkbox] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px; height: 1px;
  min-width: 0; min-height: 0;
}
.bsb-chip-select label {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid #d0d0d0;
  border-radius: 999px;
  background: #ffffff;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  user-select: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  min-height: 36px;
}
.bsb-chip-select label:hover { background: #f6f6f6; }
.bsb-chip-select input[type=radio]:checked + label,
.bsb-chip-select input[type=checkbox]:checked + label {
  background: #000000;
  border-color: #000000;
  color: #B9FF31;
}
.bsb-chip-select input[type=radio]:focus-visible + label,
.bsb-chip-select input[type=checkbox]:focus-visible + label {
  outline: 2px solid #B9FF31;
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   Global Form + Modal Design — allinbsb unified design system
   Semantic classes for ALL modals, forms, inputs, buttons.
   Does NOT touch topbar/sidebar. Brand: #B9FF31 lime, #000 ink, #c53030 danger.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Modal tokens ── */
:root {
  --bsb-modal-radius: 12px;
  --bsb-modal-shadow: 0 20px 60px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.08);
  --bsb-input-radius: 8px;
  --bsb-input-border: #d1d5db;
  --bsb-input-border-focus: #111;
  --bsb-focus-ring: #B9FF31;
  --bsb-danger: #c53030;
  --bsb-text: #111;
  --bsb-text-muted: #666;
  --bsb-btn-radius: 8px;
}

/* ── Modal container (works for .modal legacy + new .bsb-modal) ── */
.bsb-modal {
  background: #fff;
  border-radius: var(--bsb-modal-radius);
  max-width: 720px;
  width: 100%;
  box-shadow: var(--bsb-modal-shadow);
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.bsb-modal--sm { max-width: 480px; }
.bsb-modal--md { max-width: 720px; }
.bsb-modal--lg { max-width: 960px; }
.bsb-modal--xl { max-width: 1200px; }

/* Legacy .modal → adopt modal tokens without breaking existing modals */
.modal {
  border-radius: var(--bsb-modal-radius);
  box-shadow: var(--bsb-modal-shadow);
}

/* ── Modal header ── */
.bsb-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
  background: #fff;
}
.bsb-modal-header h2,
.bsb-modal-header .bsb-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--bsb-text);
  line-height: 1.3;
}
.bsb-modal-close,
.bsb-modal-header .bsb-modal-close {
  background: transparent;
  border: 0;
  width: 36px;
  height: 36px;
  min-height: 36px;
  border-radius: 8px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #555;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, color 120ms ease;
}
.bsb-modal-close:hover { background: #f2f2f2; color: var(--bsb-text); }
.bsb-modal-close:focus-visible {
  outline: 2px solid var(--bsb-focus-ring);
  outline-offset: 2px;
}

/* ── Modal body (scrollable) ── */
.bsb-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Modal footer (sticky, right-aligned buttons) ── */
.bsb-modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid #e5e7eb;
  background: #fafafa;
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 10;
}
.bsb-modal-footer .spacer { flex: 1; }
.bsb-modal-footer .meta { font-size: .78rem; color: var(--bsb-text-muted); margin-right: auto; }

/* ── Form groups ── */
.bsb-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bsb-form-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #374151;
  line-height: 1.3;
}
.bsb-form-required::after {
  content: " *";
  color: var(--bsb-danger);
  font-weight: 700;
}

/* ── Inputs / Selects / Textareas ── */
.bsb-form-input,
.bsb-form-select,
.bsb-form-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--bsb-input-border);
  border-radius: var(--bsb-input-radius);
  background: #fff;
  font-size: 14px;
  font-family: inherit;
  color: var(--bsb-text);
  line-height: 1.4;
  min-height: 40px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  box-sizing: border-box;
}
.bsb-form-textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.5;
}
.bsb-form-input:focus,
.bsb-form-select:focus,
.bsb-form-textarea:focus {
  outline: none;
  border-color: var(--bsb-input-border-focus);
  box-shadow: 0 0 0 2px var(--bsb-focus-ring);
}
.bsb-form-input:disabled,
.bsb-form-select:disabled,
.bsb-form-textarea:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

/* Size variants */
.bsb-input--sm,
.bsb-form-input.bsb-input--sm { padding: 6px 10px; min-height: 32px; font-size: 13px; }
.bsb-input--md,
.bsb-form-input.bsb-input--md { padding: 10px 12px; min-height: 40px; font-size: 14px; }
.bsb-input--lg,
.bsb-form-input.bsb-input--lg { padding: 12px 14px; min-height: 48px; font-size: 15px; }

/* Hint & error text */
.bsb-form-hint {
  color: var(--bsb-text-muted);
  font-size: 12px;
  margin-top: 2px;
}
.bsb-form-error {
  color: var(--bsb-danger);
  font-size: 12px;
  font-weight: 500;
  margin-top: 2px;
}
.bsb-form-group.has-error .bsb-form-input,
.bsb-form-group.has-error .bsb-form-select,
.bsb-form-group.has-error .bsb-form-textarea {
  border-color: var(--bsb-danger);
  box-shadow: 0 0 0 1px var(--bsb-danger);
}

/* ── 2-column row ── */
.bsb-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.bsb-form-row--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 560px) {
  .bsb-form-row,
  .bsb-form-row--3 { grid-template-columns: 1fr; }
}

/* ── Buttons ── */
.bsb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: var(--bsb-btn-radius);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease;
  white-space: nowrap;
}
.bsb-btn:focus-visible {
  outline: 2px solid var(--bsb-focus-ring);
  outline-offset: 2px;
}
.bsb-btn:disabled,
.bsb-btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
}

.bsb-btn--primary {
  background: #000;
  color: var(--bsb-focus-ring);
  border-color: #000;
  font-weight: 700;
}
.bsb-btn--primary:hover:not(:disabled) { background: #1a1a1a; }

.bsb-btn--secondary {
  background: #fff;
  color: var(--bsb-text);
  border-color: #d1d5db;
}
.bsb-btn--secondary:hover:not(:disabled) { background: #f3f4f6; }

.bsb-btn--danger {
  background: var(--bsb-danger);
  color: #fff;
  border-color: var(--bsb-danger);
  font-weight: 700;
}
.bsb-btn--danger:hover:not(:disabled) { background: #a52626; border-color: #a52626; }

.bsb-btn--ghost {
  background: transparent;
  color: var(--bsb-text);
  border-color: transparent;
}
.bsb-btn--ghost:hover:not(:disabled) { background: #f3f4f6; }

/* Button sizes */
.bsb-btn--sm { min-height: 32px; padding: 6px 12px; font-size: 13px; }
.bsb-btn--lg { min-height: 48px; padding: 13px 22px; font-size: 15px; }
.bsb-btn--block { width: 100%; }

/* ── Ensure existing .bsb-sheet footer btn aliases also respond ── */
.bsb-sheet-footer .bsb-btn--primary,
.bsb-sheet-footer .bsb-btn--secondary,
.bsb-sheet-footer .bsb-btn--danger,
.bsb-sheet-footer .bsb-btn--ghost { min-height: 40px; }

/* ═══════════════════════════════════════════════════════════════════
   LOADING / SKELETON / PROGRESS — globale styles
   Skeleton-primitiverne (.skel-line/.skel-block) defineres i crm.css
   med shimmer-animation. Her lægger vi progress-bar, save-state,
   search-spinner og fade-in til alle views.
   ═══════════════════════════════════════════════════════════════════ */

/* Nprogress-style top bar (#bsb-progress tilføjes én gang i index.html) */
#bsb-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--acc);
  box-shadow: 0 0 6px rgba(185,255,49,.6);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: width 200ms ease-out, opacity 200ms ease-out;
}
#bsb-progress.active { opacity: 1; }
#bsb-progress.indeterminate {
  width: 40% !important;
  animation: bsb-prog-slide 1.1s ease-in-out infinite;
}
@keyframes bsb-prog-slide {
  0%   { margin-left: -40%; }
  100% { margin-left: 100%; }
}

/* Save-knap: spinner + "Gemmer..." under save */
.btn.is-saving,
button.is-saving {
  position: relative;
  pointer-events: none;
  opacity: 0.75;
  padding-left: 32px !important;
}
.btn.is-saving::before,
button.is-saving::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: bsb-spin 700ms linear infinite;
}
@keyframes bsb-spin { to { transform: rotate(360deg); } }

/* Inline spinner helper */
.bsb-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: bsb-spin 700ms linear infinite;
  vertical-align: -2px;
  margin-right: 6px;
}

/* Søgeikon-spinner (vises mens debounce-søgning kører) */
.bsb-search-wrap,
.bsb-search {
  position: relative;
}
.bsb-search-wrap { display: inline-block; }
.bsb-search-wrap .bsb-search-ic {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  pointer-events: none;
  opacity: 0.55;
}
.bsb-search-wrap.is-searching .bsb-search-ic {
  border: 2px solid var(--ink2);
  border-right-color: transparent;
  border-radius: 50%;
  animation: bsb-spin 700ms linear infinite;
  opacity: 1;
  background: transparent;
}
/* For .bsb-search (shared CRM search): ekstra spinner som ::after */
.bsb-search.is-searching::after {
  content: '';
  position: absolute;
  right: 30px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border: 2px solid var(--ink2);
  border-right-color: transparent;
  border-radius: 50%;
  animation: bsb-spin 700ms linear infinite;
  pointer-events: none;
  z-index: 2;
}

/* Fade-in når filter-chip/filter-resultat opdateres */
.bsb-fade-in { animation: bsb-fadein 180ms ease-out; }
@keyframes bsb-fadein {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: none; }
}

/* Pipeline skeleton-kolonner */
.pip-col.is-skeleton { background: #f9fafb; border-radius: 8px; padding: 12px; min-width: 200px; }
html[data-dark="1"] .pip-col.is-skeleton { background: #1f1f1f; }

/* Timeline skeleton */
.bsb-timeline-skel-item {
  display: flex; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--brd);
}
.bsb-timeline-skel-dot {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
}
.bsb-timeline-skel-body { flex: 1; display: flex; flex-direction: column; gap: 6px; }

/* Dark mode spinner-farver */
html[data-dark="1"] .bsb-spinner,
html[data-dark="1"] .btn.is-saving::before {
  border-color: #f0f0f0; border-right-color: transparent;
}


/* ─────────────── Metode-bibliotek: kompakt toolbar + dropdown filtre ─────────────── */
.meth-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--brd);
  border-radius: 10px;
  margin-bottom: 14px;
  position: relative;
  z-index: 5;
}
html[data-dark="1"] .meth-toolbar { background: #181818; border-color: #2a2a2a; }
.meth-search-wrap { position: relative; flex: 1 1 240px; min-width: 200px; max-width: 360px; }
.meth-search {
  width: 100%; padding: 7px 12px 7px 34px;
  border: 1px solid var(--brd); border-radius: 7px;
  font-size: .85rem; background: #fff; font-family: inherit;
}
html[data-dark="1"] .meth-search { background: #1f1f1f; color: #eee; border-color: #2f2f2f; }
.meth-search:focus { outline: 2px solid var(--acc); outline-offset: -1px; border-color: transparent; }

.meth-dd { position: relative; }
.meth-ddbtn {
  display: inline-flex; align-items: center;
  padding: 7px 12px; border: 1px solid var(--brd); border-radius: 7px;
  background: #fff; color: #222; font-size: .82rem; font-weight: 500;
  cursor: pointer; transition: all .1s ease; font-family: inherit; white-space: nowrap;
}
.meth-ddbtn:hover { border-color: #888; background: #fafbfc; }
.meth-ddbtn.has-active { border-color: #1a1a1a; background: #f5f5f5; font-weight: 600; }
.meth-ddbtn.is-open { border-color: var(--acc-dk); box-shadow: 0 0 0 2px var(--acc) inset; background: #fff; }
html[data-dark="1"] .meth-ddbtn { background: #1f1f1f; color: #ddd; border-color: #2f2f2f; }
html[data-dark="1"] .meth-ddbtn:hover { background: #2a2a2a; border-color: #555; }
html[data-dark="1"] .meth-ddbtn.has-active { background: #2a2a2a; border-color: #B9FF31; }
html[data-dark="1"] .meth-ddbtn.is-open { background: #1a1a1a; border-color: #B9FF31; box-shadow: 0 0 0 2px #B9FF31 inset; }

.meth-dia {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border: 1px solid var(--brd); border-radius: 7px; background: #fff;
}
html[data-dark="1"] .meth-dia { background: #1f1f1f; border-color: #2f2f2f; }
.meth-dia-input {
  width: 60px; padding: 3px 4px;
  border: none; border-bottom: 1px dashed #ccc;
  font-size: .82rem; font-family: inherit; text-align: center;
  background: transparent; color: inherit;
}
.meth-dia-input:focus { outline: none; border-bottom-color: var(--acc-dk); }

.meth-counter { display: inline-flex; align-items: baseline; gap: 2px; padding: 4px 10px; font-size: .82rem; }
.meth-counter strong { color: #000; font-size: 1rem; font-weight: 700; }
html[data-dark="1"] .meth-counter strong { color: #fff; }

.meth-reset {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border: 1px solid #f5c6cb; border-radius: 7px;
  background: #fdebed; color: #dc3545;
  font-size: 1rem; cursor: pointer; transition: all .1s; font-family: inherit;
}
.meth-reset:hover { background: #f5c6cb; border-color: #dc3545; }

/* Popup panel */
.meth-popup-wrap {
  background: #fff; border: 1px solid var(--brd); border-radius: 10px;
  margin-top: -8px; margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  position: relative; z-index: 4;
  animation: methPopIn .12s ease-out;
}
html[data-dark="1"] .meth-popup-wrap { background: #1f1f1f; border-color: #2f2f2f; }
@keyframes methPopIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.meth-ddpopup { padding: 4px; }

/* Kategori-tabs i Installation popup (2-trins flow) */
.meth-cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 8px 0;
  background: linear-gradient(to bottom, #fafbfc, #fff);
  border-radius: 9px 9px 0 0;
}
html[data-dark="1"] .meth-cat-tabs { background: linear-gradient(to bottom, #1a1a1a, #1f1f1f); }
.meth-cat-tab {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border: 1px solid var(--brd);
  border-bottom: none;
  border-radius: 7px 7px 0 0;
  background: #f0f1f3;
  color: #555;
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .12s;
  font-family: inherit;
  white-space: nowrap;
  margin-bottom: -1px;
}
.meth-cat-tab:hover { background: #fff; color: #000; }
.meth-cat-tab.is-active {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
  font-weight: 700;
}
html[data-dark="1"] .meth-cat-tab { background: #2a2a2a; color: #aaa; border-color: #3a3a3a; }
html[data-dark="1"] .meth-cat-tab:hover { background: #1a1a1a; color: #fff; }
html[data-dark="1"] .meth-cat-tab.is-active { background: #B9FF31; color: #000; border-color: #B9FF31; }

/* Subgrupper i Specifik-popup (Stål / Plast / Alupex inden for Rør) */
.meth-subgroup {
  padding: 10px 12px;
  border-bottom: 1px solid var(--brd);
}
.meth-subgroup:last-child { border-bottom: none; }
.meth-subgroup-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #777;
  margin-bottom: 6px;
}
html[data-dark="1"] .meth-subgroup { border-bottom-color: #2a2a2a; }
html[data-dark="1"] .meth-subgroup-label { color: #aaa; }

/* Chips */
.meth-chip {
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--brd); border-radius: 14px;
  background: #fff; color: #333;
  font-size: .8rem; font-weight: 500;
  cursor: pointer; transition: all .1s ease;
  white-space: nowrap; font-family: inherit;
}
.meth-chip:hover { border-color: #999; background: #fafbfc; }
.meth-chip.active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; font-weight: 600; }
.meth-chip.active:hover { background: #333; border-color: #333; }
html[data-dark="1"] .meth-chip { background: #2a2a2a; color: #ddd; border-color: #3a3a3a; }
html[data-dark="1"] .meth-chip:hover { background: #333; border-color: #555; }
html[data-dark="1"] .meth-chip.active { background: #B9FF31; color: #000; border-color: #B9FF31; }