/* ============================================================================
   RUDE-SKIN · iOS 26 "Liquid Glass" — KOMPONENT-APPLIKATION (skin-laget)
   ----------------------------------------------------------------------------
   Loaded SIDST → vinder via !important på de rigtige komponent-klasser.
   DESIGN-DEFINITIONERNE (tokens, temaer, aura, glas, accent, fonts) er flyttet til
   public/css/design/*.css (loadet lige FØR denne fil via design/index.css).
   ÆNDR DESIGNET i  public/css/design/  (tokens.css / themes.css / accent.css / aura.css).
   Denne fil = KUN chrome/komponent-frost (§2-§25). Skift HELT skin = link en anden skins/-fil.
   Glas-princip (iOS 26): chrome (sidebar/topbar/modal/popup) = translucent glas;
   indhold (kort/kpi) = SOLID flade. Aura-mesh bag giver vibrancy bag glas.
   ============================================================================ */


/* ════════ §2 TYPOGRAFI — SF Pro (Apple) / Inter — KUN disse to fonte 2026-06-20 ════════ */
h1,h2,h3,h4,h5,
.v4-headline,.v4-title,.glass-card-title,.section-title,.topbar-title,
.emp-hero-name,.campaign-name,.app-modal-title,.brand-name,.page,
.hrm-card h2,.hrm-card h3,.pln-card h2,.pln-card h3,
.w-title,.cv-tpl-card h3,.hero__greet{
  font-family:var(--bh-display) !important; font-weight:800 !important; letter-spacing:-.02em !important;
}
.kpi-value,.kpi-card .kpi-value,.kpi-num,.kpi-val,
.lb-score,.lb-rank,.leaderboard-rank,.leaderboard-value,.perf-leaderboard-row .lb-score,
.hero-num,.stat-value,.stat-num,.modal-stat-val,
.phb-q-val,.perf-mini-stat .stat-value,.hrm-ov-big,.pln-balance,
.w-body-stat,.ds-kpi__value,.ds-data-row__value,.live-delta-chip,.bv-coins,.bp-tier,
.lb2-rank,.kpi-c,.num,.bignum,.hs-val,.lb-val,.hero__primary-num,
.pln-grid__day__dom,.pln-grid__day__count,.pln-shift__time,.pln-briefing__metric-value,
.pln-balance__stat-value,.pln-open-shift-card__time,.pln-claim-card__time,.pln-tider-row__total,
.pln-fatigue-row__score,.pln-weeknav__label,
.hl__val,.hw__val,.hero__slot-stat{
  font-family:var(--bh-mono) !important; font-variant-numeric:tabular-nums !important;
  font-feature-settings:"tnum" 1 !important; letter-spacing:-.02em !important;
}
.kpi-value,.kpi-card .kpi-value,.kpi-num,.hero-num,.lb-score,.hrm-ov-big,.bignum{ font-weight:600 !important; }
.kpi-label,.kpi-card .kpi-label,.section-sub,.nav-section-label,
.data-table th,.lb2-camp-tabs,.modal-stat-label{
  font-family:var(--bh-mono) !important; text-transform:uppercase !important; letter-spacing:.06em !important; font-weight:600 !important;
}

/* ════════ §3 SIDEBAR — UNIFIED flydende glas-dock, IDENTISK på alle 4 produkter ════════
   Brugerkrav: sidebar+topbar skal være ENS (samme bredde/layout/CSS) på tværs.
   Mockup .os/.side: 248px bredde, padding 16/13, floating glas, radius. Live-verificeret. */
:root{ --uc-sw:248px; --uc-gap:14px; --uc-r:24px; }
/* parent-layout: ens grid/flex-track så sidebaren får ens 248px-bredde.
   Collapsed-tilstande (canvas-editor smal rail / hrm-collapsed / pln collapsed) bevares. */
.shell:not(.sidebar-collapsed),
.hrm-view:not(.hrm-collapsed){
  grid-template-columns: calc(var(--uc-sw) + 2*var(--uc-gap)) minmax(0,1fr) !important;
}
.pln-shell{ display:flex !important; }
.shell.sidebar-collapsed .rail,
.hrm-view.hrm-collapsed .hrm-sidebar,
.pln-sidebar.collapsed{
  width:auto !important; min-width:0 !important; max-width:none !important; flex:0 0 auto !important;
}
.sidebar,.rail,.pln-sidebar,.hrm-sidebar{
  width:var(--uc-sw) !important; min-width:var(--uc-sw) !important; max-width:var(--uc-sw) !important;
  flex:0 0 var(--uc-sw) !important; box-sizing:border-box !important;
  padding:16px 13px !important; margin:var(--uc-gap) !important;
  height:calc(100dvh - 2*var(--uc-gap)) !important;
  border-radius:var(--uc-r) !important; border:1px solid var(--bh-edge) !important;
  background:var(--bh-glass-2) !important; color:var(--bh-ink) !important;
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(220%) !important;
  backdrop-filter:blur(var(--glass-blur)) saturate(220%) !important;
  box-shadow:var(--bh-rim), var(--bh-spec), var(--bh-shadow-ink) !important;
  display:flex !important; flex-direction:column !important; overflow:hidden !important;
}
/* mobil: flydende dock → fuld-højde drawer (fjern margin/runding/fast bredde) */
@media (max-width:640px){
  .sidebar,.rail,.pln-sidebar,.hrm-sidebar{
    margin:0 !important; height:100dvh !important; border-radius:0 !important;
    width:auto !important; min-width:0 !important; max-width:none !important;
  }
}
/* 641-900px: honorér planner-common.css' auto-collapse (labels er skjult dér).
   Uden denne undtagelse tvang --uc-sw fuld 248px-bredde med ensomme center-
   ikoner og ~190px spildt plads på alle planner-tabs (audit 2026-07-10).
   Hover-expand (common.css sætter position:absolute + labels) skal stadig få
   fuld bredde — derfor :hover-reglen. Kun .pln-sidebar: canvas/hrm er urørt. */
@media (min-width:641px) and (max-width:900px){
  .pln-sidebar:not(.collapsed){
    width:var(--pln-sw-x, 72px) !important; min-width:var(--pln-sw-x, 72px) !important;
    max-width:var(--pln-sw-x, 72px) !important; flex:0 0 var(--pln-sw-x, 72px) !important;
    padding:16px 8px !important;
  }
  .pln-sidebar:not(.collapsed):hover{
    width:var(--uc-sw) !important; min-width:var(--uc-sw) !important; max-width:var(--uc-sw) !important;
  }
  /* 2026-07-11: brand-underteksten (tenant-navn) i 72px-skinnen - common.css'
     display:none tabes til skinnets globale ".pln-brand__sub{display:block
     !important}" (linje ~116). Undtagelsen SKAL derfor bo her i skinnet med
     samme vægt. Hover-expand viser den igen. */
  .pln-sidebar:not(.collapsed):not(:hover) .pln-brand__sub{ display:none !important; }
}
.sidebar-header,.sidebar-brand,.brand-area,.brand-text,.brand-name,.brand-sub,
.pln-brand,.pln-brand__logo,.pln-brand__text,.hrm-brand,.hrm-brand__logo,.hrm-brand__text{ color:var(--bh-ink) !important; }
.brand-sub{ color:var(--bh-ink-3) !important; }
/* dot-separator mellem ord i HR/Shift-wordmarks (giver mellemrums-look) */
.pln-brand__dot,.hrm-brand__dot{
  background:linear-gradient(160deg,var(--bh-blue-2),var(--bh-blue)) !important; color:#fff !important;
  border-radius:13px !important; border:0 !important;
}

/* ─── UNIFIED tekst-wordmark i sidebar-top (mockup-stil): produktnavn stort + "Callcenter Managr" lille.
   ccm-glyf fjernet pr. brugerkrav; ren tekst-wordmark på alle 4 produkter. ─── */
/* skjul ccm-grafik (sidebar-glyf + topbar-glyf) */
.bi-tile,.tb-tile{ display:none !important; }
/* skjul HELE workspace-brand-icon (den indeholder kun ccm-glyf + rå "ccm"-tekst + dot;
   produktnavnet "Workspace" lever i separat .brand-text). Robust selector: workspace har
   .brand-text-søskende i .sidebar-header — canvas har KUN .brand-icon (= wordmark, ingen .brand-text).
   Dette virker også når demo-portalen har strippet .bi-tile-SVG'en bort. */
.sidebar-header:has(.brand-text) .brand-icon{ display:none !important; }
/* produktnavn stort (Outfit bold) — text-transform:none ophæver canvas-inline-base's lowercase */
.brand-name,.bwm-name,.hrm-brand__logo,.pln-brand__logo{
  font-family:var(--bh-display) !important; font-weight:800 !important; font-size:1.05rem !important;
  letter-spacing:-.01em !important; color:var(--bh-ink) !important; line-height:1.15 !important;
  text-transform:none !important;
}
/* undertekst lille (dæmpet) */
.brand-sub,.bwm-sub,.hrm-brand__sub,.pln-brand__sub{
  display:block !important; font-family:var(--bh-body) !important; font-weight:500 !important;
  font-size:.72rem !important; color:var(--bh-ink-3) !important; letter-spacing:.02em !important; margin-top:1px !important;
  text-transform:none !important;
}
/* canvas: stable bwm-name + bwm-sub lodret (neutralisér gammelt tile-look på .brand-icon) */
.brand-icon{
  display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:0 !important;
  width:auto !important; height:auto !important; background:none !important; box-shadow:none !important;
  padding:0 !important; text-decoration:none !important; text-transform:none !important;
}
/* HR/Shift: logo + sub stables lodret, collapse/toggle-knap holdes i top-højre */
.hrm-brand,.pln-brand{
  flex-direction:column !important; align-items:flex-start !important; gap:0 !important; position:relative !important;
}
.hrm-brand .hrm-sidebar-toggle,.hrm-brand .sidebar-toggle,
.pln-brand .pln-sidebar-toggle{
  position:absolute !important; top:0 !important; right:6px !important;
}
.nav-btn,.pln-nav-btn,.hrm-nav-btn,.rail-item{
  border-radius:var(--bh-r-tile) !important; color:var(--bh-ink-2) !important;
  font-family:var(--bh-display) !important; font-weight:600 !important; letter-spacing:-.01em !important;
  background:transparent !important; border:0 !important; box-shadow:none !important;
}
.rail .nav-item-label,.rail .nav-item-icon,.pln-nav-btn__label,.pln-nav-btn__icon,
.hrm-nav-btn__label,.hrm-nav-btn__icon,.nav-item-label,.nav-item-icon{ color:var(--bh-ink-2) !important; }
.rail .nav-item-icon i.ic{ background-color:var(--bh-ink-2) !important; }
.nav-btn:hover,.pln-nav-btn:hover,.hrm-nav-btn:hover,.rail-item:hover{
  background:var(--bh-chrome-fill) !important; color:var(--bh-ink) !important; transform:translateX(2px) !important;
}
.nav-btn:hover .nav-item-icon i.ic,.nav-btn:hover .nav-item-label{ color:var(--bh-ink) !important; }
.nav-btn.active,.nav-btn[aria-current="page"],.pln-nav-btn--active,.pln-nav-btn.active,
.hrm-nav-btn--active,.hrm-nav-btn.active{
  background:linear-gradient(180deg, var(--accent-soft), var(--bh-glass-stop)) !important;
  color:var(--accent-ink) !important; border:0 !important;
  box-shadow:var(--bh-spec), 0 6px 16px -10px var(--bh-blue) !important;
}
/* FIX (blå-på-blå-bug): labelen får KUN tekstfarve — ALDRIG background-color.
   Kun ikon-MASKEN (.ic er en background-image-mask) farves via background-color. */
.nav-btn.active .nav-item-label,
.pln-nav-btn--active .pln-nav-btn__label,.pln-nav-btn.active .pln-nav-btn__label,
.hrm-nav-btn--active .hrm-nav-btn__label,.hrm-nav-btn.active .hrm-nav-btn__label{
  color:var(--accent-ink) !important; background:none !important;
}
.nav-btn.active .nav-item-icon{ background:none !important; }
.nav-btn.active .nav-item-icon i.ic,
.pln-nav-btn--active .pln-nav-btn__icon,.hrm-nav-btn--active .hrm-nav-btn__icon{
  background-color:var(--bh-blue) !important; color:var(--bh-blue) !important;
}
/* aktiv nav-ikon (SVG-baseret, fx workspace inline-SVG'er m. fill/stroke=currentColor) → vivid accent
   via color (currentColor driver BÅDE fill og stroke korrekt; tving ikke fill → ville fylde outline-ikoner). */
.nav-btn.active .nav-item-icon svg,.nav-btn.active .nav-item-icon{ color:var(--bh-blue) !important; }
/* canvas .rail-item nav → samme §3-nav-skin som .nav-btn/.pln-nav-btn/.hrm-nav-btn (var: 10px radius, flad card-aktiv → nu 14px + accent-gradient-pille, ENS m. de 3 andre) */
.rail-item .rail-label{ color:var(--bh-ink-2) !important; font-family:var(--bh-display) !important; font-weight:600 !important; }
.rail-item i.ic{ background-color:var(--bh-ink-2) !important; }
.rail-item:hover .rail-label{ color:var(--bh-ink) !important; }
.rail-item:hover i.ic{ background-color:var(--bh-ink) !important; }
.rail-item.active{
  background:linear-gradient(180deg, var(--accent-soft), var(--bh-glass-stop)) !important;
  color:var(--accent-ink) !important; border:0 !important;
  box-shadow:var(--bh-spec), 0 6px 16px -10px var(--bh-blue) !important;
}
.rail-item.active .rail-label{ color:var(--accent-ink) !important; }
.rail-item.active i.ic{ background-color:var(--bh-blue) !important; }

/* ════════ §4 TOPBAR — UNIFIED flydende glas-dock, ENS på alle 4 (var kant-til-kant) ════════ */
.topbar,.app-topbar,.pln-topbar,.hrm-topbar,.v8-topbar{
  margin:var(--uc-gap) var(--uc-gap) 0 var(--uc-gap) !important;
  padding:11px 18px !important;
  min-height:60px !important;
  border:1px solid var(--bh-edge) !important;        /* fuld kant (ikke kun bottom) */
  border-radius:var(--uc-r) !important;               /* rundet 24px */
  background:var(--bh-glass-2) !important;
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(220%) !important;
  backdrop-filter:blur(var(--glass-blur)) saturate(220%) !important;
  box-shadow:var(--bh-rim), var(--bh-spec), var(--bh-shadow-flat) !important;
  position:sticky !important; top:var(--uc-gap) !important; z-index:50 !important;
  box-sizing:border-box !important;
}
/* canvas board-editor: .ebar (titel+actions) + .ebar-ctx (filter-række) = ÉN flydende dock.
   ebar = top-rundet, ebar-ctx = bund-rundet, så de ses som én sammenhængende glas-bar (ens m. de 3 andre). */
.ebar{
  margin:var(--uc-gap) var(--uc-gap) 0 var(--uc-gap) !important;
  border:1px solid var(--bh-edge) !important; border-bottom:0 !important;
  border-radius:var(--uc-r) var(--uc-r) 0 0 !important;
  background:var(--bh-glass-2) !important;
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(220%) !important;
  backdrop-filter:blur(var(--glass-blur)) saturate(220%) !important;
  box-shadow:var(--bh-rim), var(--bh-spec) !important;
}
.ebar-ctx{
  margin:0 var(--uc-gap) !important;
  border:1px solid var(--bh-edge) !important; border-top:0 !important;
  border-radius:0 0 var(--uc-r) var(--uc-r) !important;
  background:var(--bh-glass-2) !important;
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(220%) !important;
  backdrop-filter:blur(var(--glass-blur)) saturate(220%) !important;
  box-shadow:var(--bh-shadow-flat) !important;
}
/* 2026-06-04 (Hammer "flet topbaren bedre sammen"): i dock-tilstanden (.ebar
   efterfulgt af .ebar-ctx) havde .ebar's --bh-rim et BUND-højlys (inset bottom-
   right) = en svag lyslinje lige hvor de to rækker mødes → de så ud som to barer.
   Drop bund-rimmen så de to glas-flader (samme bg + blur, ingen kant imellem)
   flyder sømløst til ÉN bar. Behold top-spec som dockens øverste kant-højlys. */
.ebar:has(+ .ebar-ctx){
  box-shadow:var(--bh-spec) !important;
}
/* ingen filter-række → ebar fuldt rundet */
.ebar:not(:has(+ .ebar-ctx)){ border-radius:var(--uc-r) !important; border-bottom:1px solid var(--bh-edge) !important; box-shadow:var(--bh-rim), var(--bh-spec), var(--bh-shadow-flat) !important; }

/* 2026-06-04 (Hammer "fiks topbar"): docken giver .ebar margin-top:var(--uc-gap),
   men base-griddet (.editor-shell) allokerer kun 52px til ebar-rækken → .ebar
   (52px + 14px margin = 66px) overflowede NED i .ebar-ctx (filter-rækken) og
   afklippede toppen af filter-pillerne + viewport-knapperne. Fix: allokér uc-gap
   ekstra til ebar-rækken så docken passer uden overlap. Kun >700px; ≤700px skjuler
   .ebar-ctx, så der er ingen klipning at fikse der (og 3-rækkers-griddet bevares). */
@media (min-width:701px){
  .editor-shell{
    grid-template-rows: calc(var(--ebar-h, 52px) + var(--uc-gap, 14px)) var(--ectx-h, 36px) 1fr 28px !important;
  }
}

/* hjælpe-launcher FAB-ikon → følg per-produkt accent (var hardcodet blå) */
.ccm-help-launcher__icon{ background:var(--accent-soft) !important; color:var(--accent-ink) !important; }
.ccm-help-launcher__icon i.ic,.ccm-help-launcher__icon .ic{ background-color:var(--accent-ink) !important; }

/* ════════ §5 KORT (universal) — SOLID hvid flade + blød skygge + runde hjørner ════════ */
.card,.glass-card,.section-card,.widget-card,.db-card,.kpi-card,.app-card,
.v8 .v8-box,.v8-box,.cv-tpl-card,.pln-card,.pln-tl-card,.hrm-card,.hrm-ov-card,
.hrm-org-card,.data-table,.app-modal-content,.modal-content,.lib-item{
  background:var(--card-bg) !important;
  border:1px solid var(--bh-line) !important;
  border-radius:var(--bh-r-block) !important;
  box-shadow:var(--bh-spec), var(--bh-shadow-flat) !important;
}
.card:hover,.glass-card:hover,.kpi-card:hover,.section-card:hover,.db-card:hover,
.widget-card:hover,.pln-card:hover,.hrm-ov-card:hover{
  box-shadow:var(--bh-spec), var(--sh-card-hover) !important; transform:translateY(-2px) !important;
}
.w-head,.card-head,.section-head{ border-bottom:1px solid var(--bh-line) !important; }

/* ════════ §6 KPI ════════ */
.kpi-card,.kpi-c{ padding:18px !important; }
.kpi-label,.kpi-sub{ color:var(--bh-ink-2) !important; }
.kpi-value,.kpi-num,.num,.bignum,.hero-num,.hero__primary-num{ color:var(--bh-ink) !important; }
.kpi-card .kpi-icon,.kpi-icon,.w-icon{
  background:rgba(var(--accent-rgb),.14) !important; border:1px solid var(--bh-edge) !important;
  border-radius:12px !important; color:var(--accent-ink) !important; box-shadow:var(--bh-spec) !important;
}

/* ════════ §7 KNAPPER — pille, glas/primær-gradient ════════ */
.btn,.button,.login-btn,.pln-btn,.hrm-btn,
.ds-btn:not(.ds-btn--primary):not(.ds-btn--danger),.bv-btn:not(.bv-btn-primary):not(.bv-btn-gold){
  border-radius:var(--bh-r-pill) !important; font-family:var(--bh-display) !important; font-weight:600 !important;
  border:1px solid var(--bh-edge) !important; background:var(--bh-chrome-fill) !important;
  color:var(--bh-ink) !important; box-shadow:var(--bh-spec) !important;
}
/* ds/bv danger- og gold-varianter beholder eget fyld men følger pille-radius */
.ds-btn--danger,.bv-btn-gold{ border-radius:var(--bh-r-pill) !important; }
.btn:hover:not(:disabled):not([aria-disabled="true"]),.button:hover:not(:disabled):not([aria-disabled="true"]),
.ds-btn:hover:not(:disabled):not(.ds-btn--primary):not(.ds-btn--danger),.bv-btn:hover:not(:disabled):not(.bv-btn-primary):not(.bv-btn-gold){ background:var(--bh-chrome-fill-hover) !important; transform:translateY(-1px) !important; }
.btn.primary,.btn--primary,.btn-primary,.primary,.login-btn,
.pln-btn--primary,.hrm-btn--primary,.cv-add-widget-btn,
.ds-btn--primary,.bv-btn-primary{
  background:linear-gradient(150deg,var(--bh-blue),var(--bh-blue-2)) !important; color:var(--on-accent-ink) !important;
  border-color:transparent !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.4), var(--bh-shadow-flat) !important;
}
/* ikon ovenpå fyld følger on-accent-ink (grøn/orange → mørk, blå/lilla → hvid). .ic er mask → background-color */
.btn.primary svg,.btn-primary svg,.primary svg,.pln-btn--primary svg,.hrm-btn--primary svg,.ds-btn--primary svg,.bv-btn-primary svg{ stroke:var(--on-accent-ink) !important; }
.btn.primary .ic,.btn-primary .ic,.pln-btn--primary .ic,.hrm-btn--primary .ic,.ds-btn--primary .ic,.bv-btn-primary .ic{ background-color:var(--on-accent-ink) !important; }
.btn.primary:hover:not(:disabled),.btn-primary:hover:not(:disabled),.primary:hover:not(:disabled),.pln-btn--primary:hover:not(:disabled),.hrm-btn--primary:hover:not(:disabled),.ds-btn--primary:hover:not(:disabled),.bv-btn-primary:hover:not(:disabled){ filter:saturate(1.12) brightness(1.03) !important; }
/* delt DISABLED-tilstand — ENS på alle 4 (var: app=ingen, planner=opacity, HRM=cursor:wait(forkert), canvas=mixed). Ét sted, theme-neutralt. */
.btn:disabled,.button:disabled,.login-btn:disabled,.pln-btn:disabled,.hrm-btn:disabled,.ds-btn:disabled,.bv-btn:disabled,
.btn[disabled],.button[disabled],.pln-btn[disabled],.hrm-btn[disabled],.ds-btn[disabled],.bv-btn[disabled],
.btn[aria-disabled="true"],.button[aria-disabled="true"],.pln-btn[aria-disabled="true"],.hrm-btn[aria-disabled="true"]{
  opacity:.5 !important; cursor:not-allowed !important; box-shadow:none !important; transform:none !important; filter:none !important;
}

/* ════════ §8 LEADERBOARD — vinder = accent-glød (mockup .lb-row.win) ════════ */
.lb2-row,.leaderboard-row,.perf-leaderboard-row{ border-radius:var(--bh-r-tile) !important; }
.lb2-row.winner,.lb2-row--winner,.leaderboard-row.is-winner,.perf-leaderboard-row--first{
  background:linear-gradient(180deg, rgba(var(--success-rgb),.18), var(--bh-glass-stop)) !important;
  border:1px solid var(--bh-edge) !important; box-shadow:var(--bh-spec), 0 10px 24px -14px var(--bh-green) !important;
}
.lb-rank,.lb2-rank,.leaderboard-rank{ color:var(--bh-ink-3) !important; }

/* ════════ §9 BADGES / CHIPS / PILLS ════════ */
.badge,.chip,.pill,.tag,.kpi-chip,.live-delta-chip,
.pln-badge,.pln-pill,.hrm-tag-pill,.hrm-ov-pill,.hrm-status{
  border-radius:var(--bh-r-pill) !important; border:1px solid var(--bh-line) !important;
}
.badge.accent,.chip.accent,.tag-blue,.is-active.chip,.chip.is-active{
  background:rgba(var(--accent-rgb),.14) !important; color:var(--accent-ink) !important; border-color:transparent !important;
}

/* ════════ §10 INPUTS ════════ */
input,select,textarea,.field,.input,.search-input,.loc-picker{
  border-radius:var(--bh-r-tile) !important; border:1px solid var(--bh-line) !important;
  background:var(--bh-chrome-fill) !important; color:var(--bh-ink) !important;
}
input:focus,select:focus,textarea:focus,.field:focus-within{
  border-color:var(--bh-blue) !important; outline:none !important;
}

/* ════════ §11 MODALER / DRAWERS / POPUPS — glas-chrome ════════ */
.app-modal-content,.modal-content,.pln-modal__box,.app-modal,.drawer,.ccm-product-popup,
.ccm-product-popup__tile,.popup,.dropdown-menu{
  border-radius:var(--bh-r-block) !important; border:1px solid var(--bh-edge) !important;
}
.ccm-product-popup,.dropdown-menu,.popup{
  background:var(--bh-glass-2) !important;
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(220%) !important;
  backdrop-filter:blur(var(--glass-blur)) saturate(220%) !important;
  box-shadow:var(--bh-rim), var(--bh-spec), var(--glass-shadow) !important;
}

/* ════════ §12 PER-PRODUKT nøgle-flader (Planner/HRM/Canvas) ════════ */
.pln-shell,.hrm-app{ background:transparent !important; }
.pln-grid__day--today,.pln-card--accent{
  background:linear-gradient(180deg, rgba(var(--accent-rgb),.12), var(--card-bg)) !important;
  border-color:var(--bh-edge) !important;
}
.hrm-ov-card--primary{
  background:linear-gradient(160deg, rgba(var(--accent-rgb),.1), var(--card-bg)) !important;
}
.w,.w-head,.cv-tpl-card{ border-radius:var(--bh-r-block) !important; }

/* ════════ §13 SLUK bauhaus-rester / glas-konflikt ════════ */
.bh-block--sky,.bh-block--ink,.bh-block--blue{ background:var(--card-bg) !important; color:var(--bh-ink) !important; }

/* ════════ §14 FOKUS + REDUCED-* (a11y) ════════ */
:focus-visible{ outline:2px solid var(--bh-blue) !important; outline-offset:2px; }
@media (prefers-reduced-transparency: reduce){
  .sidebar,.rail,.pln-sidebar,.hrm-sidebar,.topbar,.ccm-product-popup,.dropdown-menu,.pln-set-panel{
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:var(--surface-hi,#fff) !important;
  }
}

/* ════════ §14b GLOBAL CHROME-PARITY — scrollbars + reduced-motion (delt, sidst-loadet → ENS på alle 4) ════════
   Scrollbars var KUN i app (+canvas-sidebar delvist) → planner/HRM fik native chunky OS-scrollbars.
   Reduced-motion catch-all var KUN i app/canvas-lokale filer → planner partial, HRM nul. Lftet hertil = alle 4 dækket. */
*{ scrollbar-width:thin; scrollbar-color:var(--bh-track-fill) transparent; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--bh-track-fill); border-radius:var(--bh-r-pill); }
::-webkit-scrollbar-thumb:hover{ background:var(--bh-ink-3); }
::-webkit-scrollbar-corner{ background:transparent; }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ════════ §15 SKJUL IKKE-MOCKUP-CHROME (mockuppen har ingen ticker/beta-banner) ════════ */
.live-ticker,.live-ticker-v2{ display:none !important; }
body.has-live-ticker-v2{ padding-top:0 !important; margin-top:0 !important; }
#beta-banner{ display:none !important; }
:root{ --lt-h:0px !important; }


/* ════════ §17 WORKSPACE HOME-VIEW (.phb-*) — Rude-stil på de eksisterende widgets ════════ */
.phb-shell{ gap:var(--pad) !important; padding:var(--pad) !important; }
/* kort-flader → solid hvid, runde, bløde skygger, luftig padding */
.phb-top,.phb-card,.phb-stats,.phb-team,.phb-trend,.phb-yest,.phb-pb,.phb-timeline,.phb-hint,.phb-qstat,.phb-fcst-row{
  background:var(--card-bg) !important; border:1px solid var(--bh-line) !important;
  border-radius:var(--bh-r-block) !important; box-shadow:var(--bh-spec), var(--bh-shadow-flat) !important;
}
.phb-top{ padding:clamp(20px,2.6vw,30px) !important; }
.phb-card,.phb-stats,.phb-team,.phb-trend,.phb-yest,.phb-pb,.phb-hint,.phb-fcst-row{ padding:18px !important; }
/* mini-stat-rækken → rene KPI-kort (luftigt grid) */
.phb-qstats{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) !important; gap:var(--pad) !important; }
.phb-qstat{ padding:16px !important; display:flex !important; flex-direction:column !important; gap:8px !important; align-items:flex-start !important; }
/* tal → SF Pro / Inter, blød blå/blæk */
.phb-q-val,.phb-pb-val,.phb-h-val,.phb-stats-num,.phb-fcst-num{ font-family:var(--bh-mono) !important; font-weight:600 !important; color:var(--bh-ink) !important; letter-spacing:-.02em !important; }
.phb-stats-hero,.phb-stats-num{ color:var(--accent-ink) !important; }
/* labels → mono uppercase, ink-2 */
.phb-q-label,.phb-pb-label,.phb-h-label,.phb-stats-label{ color:var(--bh-ink-2) !important; font-family:var(--bh-mono) !important; text-transform:uppercase !important; letter-spacing:.05em !important; font-size:.72rem !important; }
.phb-q-sub{ color:var(--bh-ink-3) !important; }
/* greeting → Outfit display */
.phb-greet{ font-family:var(--bh-display) !important; font-weight:800 !important; letter-spacing:-.02em !important; }
.phb-date,.phb-clock,.phb-context,.phb-smeta{ color:var(--bh-ink-2) !important; }
/* pills + periode-tabs → kapsler */
.phb-pill{ border-radius:var(--bh-r-pill) !important; border:1px solid var(--bh-line) !important; background:var(--bh-pop-soft) !important; color:var(--bh-pop-deep) !important; }
.phb-period-tabs{ background:var(--bh-track) !important; border-radius:var(--bh-r-pill) !important; padding:3px !important; border:1px solid var(--bh-line) !important; }
.phb-ptab{ border-radius:var(--bh-r-pill) !important; color:var(--bh-ink-2) !important; }
.phb-ptab.active,.phb-ptab.is-active{ background:var(--bh-pill-active) !important; color:var(--accent-ink) !important; box-shadow:var(--bh-shadow-flat-sm) !important; }
/* delt aktiv-pille for ØVRIGE segment-kontroller (planner .pln-bem-view__segbtn / canvas .seg / app .perf-sub-nav-btn) → ENS m. .phb-ptab/.tb-period.seg/.mode-btn (var: hver sit hardcodede fyld/skygge) */
.pln-bem-view__segbtn.is-on,.seg.active,.perf-sub-nav-btn.active{
  background:var(--bh-pill-active) !important; color:var(--accent-ink) !important; box-shadow:var(--bh-shadow-flat-sm) !important;
}
/* delt segment-KAPSEL (track-container) → ENS m. .tb-period.seg/.phb-period-tabs (var: canvas 7px/planner 9px + forskellig bg).
   KUN de kompakte segment-kapsler (canvas .seg-group / planner .pln-bem-view__seg). .perf-sub-nav UDELADT bevidst:
   den er en sticky frostet glas-sub-nav-BAR (glass-bg+blur+sticky), ikke en kompakt toggle — kun dens aktiv-knap-FARVE er unificeret.
   .seg scopet til .seg-group så .tb-period.seg ikke dobbelt-rammes. */
.seg-group,.pln-bem-view__seg{
  background:var(--bh-track) !important; border:1px solid var(--bh-line) !important;
  border-radius:var(--bh-r-pill) !important; padding:3px !important;
}
.seg-group .seg,.pln-bem-view__segbtn{ border-radius:var(--bh-r-pill) !important; }
/* sektions-heads → ren mono-label, luft */
.phb-shead{ padding:14px 4px 6px !important; }
.phb-stitle{ font-family:var(--bh-mono) !important; text-transform:uppercase !important; letter-spacing:.06em !important; font-weight:600 !important; font-size:.78rem !important; color:var(--bh-ink-2) !important; }
.phb-pb-ico,.phb-hint-row .ic{ color:var(--accent-ink) !important; }

/* ════════ §18 HRM + PLANNER komponenter — Rude-polish (de er token-drevne → mest fin-tuning) ════════ */
.hrm-card,.hrm-ov-card,.hrm-employee-card,.hrm-org-card,.hrm-pl-card,.hrm-step,.hrm-integration-card,.hrm-ov-row,
.pln-card,.pln-tl-card,.pln-open-shift-card,.pln-claim-card,.pln-bytte-card,.pln-fravaer-card,.pln-briefing,.pln-integration-card,.pln-my-swap{
  background:var(--card-bg) !important; border:1px solid var(--bh-line) !important;
  border-radius:var(--bh-r-block) !important; box-shadow:var(--bh-spec), var(--bh-shadow-flat) !important;
}
.hrm-ov-big,.pln-balance{ font-family:var(--bh-mono) !important; font-weight:600 !important; color:var(--bh-ink) !important; letter-spacing:-.02em !important; }
.hrm-btn,.pln-btn,.hrm-filter-chip,.hrm-tag-choice,.hrm-reveal-btn{ border-radius:var(--bh-r-pill) !important; }
.hrm-btn--danger{ background:linear-gradient(150deg,#E2574C,#C0392B) !important; border-color:transparent !important; color:#fff !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.3), var(--bh-shadow-flat) !important; }
.pln-shift{ border-radius:var(--bh-r-tile) !important; }
.hrm-directory-search,.pln-field input,.hrm-form-row input,.pln-form-row input{ border-radius:var(--bh-r-tile) !important; }
.hrm-ov-card--primary{ background:linear-gradient(160deg, rgba(var(--accent-rgb),.1), var(--card-bg)) !important; }
.pln-grid__day--today,.pln-card--accent{ background:linear-gradient(180deg, rgba(var(--accent-rgb),.12), var(--card-bg)) !important; }
.hrm-modal,.pln-modal,.pln-modal__box{ border-radius:var(--bh-r-block) !important; }

/* ════════ §19 CANVAS DASHBOARD-WIDGETS — Rude-finish (rundere/blødere + rude-typografi) ════════
   .w/.bignum/.lb-* er token-drevne (var(--card)/--border/--accent) → følger allerede skinnet;
   her gives de mockup-finish: runde 24px, bløde skygger, mono-tal, mono-uppercase headers. */
.cv-board .w,.w{
  border-radius:var(--bh-r-block) !important;
  border:1px solid var(--bh-line) !important;
  box-shadow:var(--bh-spec), var(--bh-shadow-flat) !important;
}
.w-title,.w-head .w-title{
  font-family:var(--bh-display) !important; text-transform:uppercase !important; letter-spacing:.04em !important;
  font-weight:700 !important; color:var(--bh-ink-2) !important;
}
.bignum{ font-family:var(--bh-mono) !important; letter-spacing:-.03em !important; font-weight:600 !important; }
.lb-row,.lb-pro-row{ border-radius:var(--bh-r-tile) !important; }
.lb-rank{ color:var(--bh-ink-3) !important; font-family:var(--bh-mono) !important; }
.lb-name{ color:var(--bh-ink) !important; font-weight:600 !important; }
.lb-val,.metric-item{ font-family:var(--bh-mono) !important; }
.lbl,.w-body .lbl{ color:var(--bh-ink-2) !important; }

/* §19b — mockup-widget-finish på de RIGTIGE canvas-klasser (w-head, lb-rækker, kpi-thresh, trend, w-filter-chip).
   INGEN transform på .w (canvas positionerer widgets via transform-drag → ville hoppe).
   lb-av rØres IKKE (per-person identitets-gradienter = bevidst bevaret). */
.w-head{ margin-bottom:10px !important; align-items:center !important; }
.bignum{ color:var(--bh-ink) !important; }
/* counter-tal = ægte accent→accent-2 to-tone gradient (mockup .metric.grad).
   canvas-inline-base satte begge stop = --accent/--blue, men §20 gør dem ens → flad. */
.bignum.accent{
  background:linear-gradient(135deg,var(--bh-blue),var(--bh-blue-2)) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}
/* leaderboard-bar → accent-gradient-fyld i blød track (mockup .bar) */
.lb-bar-wrap{ background:var(--bh-track-fill) !important; border-radius:var(--bh-r-pill) !important; overflow:hidden !important; }
.lb-bar{ background:linear-gradient(90deg,var(--bh-blue),var(--bh-blue-2)) !important; box-shadow:0 0 10px var(--accent-soft) !important; border-radius:var(--bh-r-pill) !important; }
.lb-val{ color:var(--bh-ink) !important; font-weight:600 !important; }
/* eksplicit vinder-række (no-op hvis klassen ikke findes) — accent-glød (mockup .lb-row.win) */
.lb-row.win,.lb-row--top,.lb-row.is-first,.lb-pro-row.win{
  background:linear-gradient(180deg, var(--accent-soft), var(--bh-glass-stop)) !important;
  border:1px solid var(--bh-edge) !important; box-shadow:var(--bh-spec) !important;
}
.lb-row.win .lb-val,.lb-row--top .lb-val{ color:var(--success) !important; }
/* trend-pile + KPI-tærskler: de RIGTIGE runtime-klasser er .trend.up/.down/.flat (counter)
   plus .nc-zone-good/-mid/-bad/-critical (counter/tabel/gauge). De tidligere kpi-thresh-
   og trend-arrow.up-selektorer fandtes IKKE i runtime (døde regler) og er fjernet. Tærskel-
   toner er nu blødgjort ved KILDEN i canvas-inline-base (f59e0b til var(--warn), ef4444 til
   var(--red), f97316 til var(--tangerine-deep)), som §20 remapper til Rude-paletten. */
/* filter-chip → kapsel; aktiv = accent-soft + accent-ink */
.w-filter-chip{ border-radius:var(--bh-r-pill) !important; border:1px solid var(--bh-line) !important; }
.w-filter-chip.active,.w-filter-chip[aria-pressed="true"]{ background:var(--accent-soft) !important; color:var(--accent-ink) !important; }
.w-empty-illust{ opacity:.55 !important; }

/* ════════ §19c NATIVE-CHART VÆRDI-PILLER — blød glas-tone (var mørk navy) ════════
   native-charts.js (renderLine) tegner 2 mørke SVG-piller med inline fill="rgba(13,17,25,…)":
   (1) .nc-thresh-label rect = tærskel/mål-badges ("0","-5","-10"), (2) endpoint-værdi-tag
   = uklasset <g pointer-events=none> > path[stroke-linejoin=round] ("-19,4"). CSS-fill vinder
   over fill-ATTRIBUT. Scope til .apex-chart så nc-area/nc-seg/nc-line/hover-tooltip IKKE røres.
   Tekst+dot bevarer zone/semantik-farve (læsbar på hvid). Live-verificeret på 4 render-cases. */
.apex-chart svg .nc-thresh-label rect,
.apex-chart svg > g[pointer-events="none"] > path[stroke-linejoin="round"]{
  fill: var(--bh-surface) !important;
  stroke: var(--bh-line) !important;
  stroke-width: 1 !important;
  filter: drop-shadow(0 2px 6px rgba(16,24,48,.16)) !important;
}

/* ════════ §5b GLASMORPHISM — frostet glas på ALLE indholds-kort + widgets ════════
   Brugerønske: "det hele lidt floating og glasslike" som mockup. Translucent kort-flade
   (--bh-card-glass) + backdrop-blur → den farvede aura-mesh skinner blødt igennem (vibrancy).
   Tekst er mørk-ink på lys frost = læsbar. Placeret EFTER §17-18-19 så den vinder for phb-kort og widgets.
   .data-table BEVIDST udeladt (tæt data → solid for læsbarhed). Perf: backdrop-filter pr. widget
   kan belaste TV/mange-widget-boards; blur holdt moderat (15px). */
.card,.glass-card,.section-card,.widget-card,.kpi-card,.app-card,.v8-box,.cv-tpl-card,
.pln-card,.pln-tl-card,.hrm-card,.hrm-ov-card,.hrm-org-card,.app-modal-content,.modal-content,.lib-item,
.phb-top,.phb-card,.phb-stats,.phb-team,.phb-trend,.phb-yest,.phb-pb,.phb-timeline,.phb-hint,.phb-qstat,.phb-fcst-row,
.hrm-employee-card,.hrm-pl-card,.hrm-step,.hrm-integration-card,.hrm-ov-row,
.pln-open-shift-card,.pln-claim-card,.pln-bytte-card,.pln-fravaer-card,.pln-briefing,.pln-integration-card,.pln-my-swap,
.cv-board .w,.w{
  /* iOS 26-princip: INDHOLD = solid flade (.9, faint aura-bleed), glasset svæver KUN på chrome.
     backdrop-filter FJERNET fra indhold (1:1 mockup + perf) — kun chrome (§3/§4) frostes.
     none !important overstyrer også produkt-egne strø-blur (fx .pln-card blur(10px)). */
  background:var(--bh-card-glass) !important;
  border:1px solid var(--bh-hair) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
/* ════════ BAGGRUNDS-PANEL bag widgets = frosted glass (2026-06-04, Hammer) ════════
   .ecanvas (canvas-stage bag widget-gridet) var en solid flade (#eef1f5 lyst /
   radial mørkt) der BLOKEREDE body::before-aura'en → en flad grå "firkant".
   Nu: let translucent veil + backdrop-blur, så den farvede aura skinner blødt
   FROSTET igennem bag widget-kortene (glasslike). Widget-kortene (solid hvid §5b)
   står tydeligt ovenpå. Perf: backdrop-filter på stor scroll-container kan koste →
   droppet i TV-mode (1920×1080, jf. feedback_canvas_perf_rules). */
/* :not([data-cv-bg]) — board's MED en eksplicit scenisk baggrund (gradient/mesh/billede valgt i
   Dashboard-tema → _applyThemeToElement sætter data-cv-bg) viser DERES bg; veilen gælder kun
   default-board's (2026-06-30, så Ocean/Sunset/Aurora/Tour faktisk males i st.f. at washes væk). */
.ecanvas:not([data-cv-bg]){
  background:linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.16)) !important;
  -webkit-backdrop-filter:blur(20px) saturate(150%) !important;
  backdrop-filter:blur(20px) saturate(150%) !important;
}
[data-theme="dark"] .ecanvas:not([data-cv-bg]){
  background:linear-gradient(180deg, rgba(28,34,50,.44), rgba(18,22,36,.30)) !important;
}
body.canvas-tv-mode .ecanvas{
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
/* TV/storskærm (body.canvas-tv-mode): drop per-widget backdrop-filter — perf på 1920×1080 m.
   mange widgets (jf. feedback_canvas_perf_rules). Mockuppens TV-board bruger solide kort.
   Desktop/editor beholder glas-look (få widgets, bruger-ønske glasslike). */
body.canvas-tv-mode .cv-board .w,body.canvas-tv-mode .w[data-wtype]{
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:var(--bh-surface) !important;
}

/* ════════ §5c CANVAS BOARD-TEMA BRO — board-tema vinder over global app-tema ════════
   Canvas-dashboards har deres EGET tema-system ("Dashboard-tema": Mørk/Lys/Forest/Ocean/Sunset/Aurora
   + accent + baggrund). _applyDashboardTheme() (canvas-runtime.js) sætter board-temaets flader inline på
   #ecanvas[data-cv-themed] (--card/--text-1/--border/--accent …) og forventer at de cascader til widgets.
   MEN rude-skins §5b (.cv-board .w,.w → --bh-card-glass) + TV-mode (.w → --bh-surface) tvinger widget-
   fladen til den GLOBALE app-tema-flade (= hvid når app-temaet er lyst) med !important og slår dermed
   canvas-inline-base's non-important `#ecanvas[data-cv-themed] .w{background:var(--card)}`. Resultat:
   hvide widget/tabel-flader i et mørkt board. Charts skjuler det (de maler selv en mørk SVG/canvas-flade);
   tabel-/leaderboard-widgets (lb-*/ttx-*-klasser) viser rude-fladen direkte.
   ROOT-CAUSE-FIX: inde i et tema-sat board remappes rude-skins flade/linje/blæk/accent-tokens til
   board-temaets egne. Så følger ALLE rude-regler board-temaet automatisk — ingen per-regel-override.
   Gælder KUN når boardet faktisk er tema-sat; ellers (default board) er broen inaktiv og global rude-palet
   gælder uændret. Hvis et token mangler på boardet → var() falder tilbage til arvet global rude-værdi. */
#ecanvas[data-cv-themed],
.cv-board[data-cv-themed]{
  /* flader → board-temaets kort */
  --card-bg:var(--card);
  --bh-card-glass:var(--card);
  --bh-surface:var(--card);
  --bh-surface-hi:var(--card-2);
  /* linjer/kanter → board-temaets border */
  --bh-line:var(--border);
  --bh-hair:var(--border);
  --bh-edge:var(--border);
  /* blæk → board-temaets tekst-trin */
  --bh-ink:var(--text-1);
  --bh-ink-2:var(--text-2);
  --bh-ink-3:var(--text-3);
  /* accent-FYLD/-tekst → board-temaets accent (soft/glow arves allerede via samme navn på #ecanvas) */
  --bh-blue:var(--accent);
  --bh-blue-2:var(--accent-2);
  --bh-blue-deep:var(--accent);
  --accent-ink:var(--accent);
  /* dæmp rude's hårde hvide top-kant-spec på board-flader (kan være mørke som lyse) */
  --bh-spec:inset 0 1px 0 rgba(255,255,255,.08);
}

/* ════════ §5d FROSTED LYST TEMA — frosted glas på ALLE flader (2026-06-04, Hammer) ════════
   Mørkt tema føles glasslike fordi de mørke translucente flader lader den farvede aura skinne igennem.
   I lyst tema var indholds-kort bevidst solide (rgba(255,255,255,.9), backdrop:none) → flade og hvide.
   Her gøres ALLE lyse flader til ægte frosted glas: mere translucente + kraftig backdrop-blur, så
   aura-mesh'et (body::before) fryser blødt igennem — samme vibrancy som det mørke tema, overalt.
   PERF-VÆRN (jf. feedback_canvas_perf_rules): KUN to undtagelser bevares — (1) TV-board
   (body.canvas-tv-mode: 1920×1080 + mange widgets → backdrop-filter pr. widget for dyrt) og
   (2) TEMA-SATTE canvas-boards (#ecanvas[data-cv-themed]: board-temaet styrer selv fladen via §5c).
   Alt andet i lyst tema frostes. */
[data-theme="light"] :is(
  .card,.glass-card,.section-card,.widget-card,.kpi-card,.app-card,.db-card,.v8-box,.cv-tpl-card,
  .pln-card,.pln-tl-card,.hrm-card,.hrm-ov-card,.hrm-org-card,.app-modal-content,.modal-content,.lib-item,
  .phb-top,.phb-card,.phb-stats,.phb-team,.phb-trend,.phb-yest,.phb-pb,.phb-timeline,.phb-hint,.phb-qstat,.phb-fcst-row,
  .hrm-employee-card,.hrm-pl-card,.hrm-step,.hrm-integration-card,.hrm-ov-row,
  .pln-open-shift-card,.pln-claim-card,.pln-bytte-card,.pln-fravaer-card,.pln-briefing,.pln-integration-card,.pln-my-swap
){
  background:rgba(255,255,255,.52) !important;
  border:1px solid var(--bh-edge) !important;
  -webkit-backdrop-filter:blur(22px) saturate(175%) !important;
  backdrop-filter:blur(22px) saturate(175%) !important;
  box-shadow:var(--bh-spec), var(--bh-shadow-flat) !important;
}
/* tabeller: frost men mere opak (tæt numerisk data → læsbarhed bevares) */
[data-theme="light"] .data-table{
  background:rgba(255,255,255,.66) !important;
  -webkit-backdrop-filter:blur(18px) saturate(165%) !important;
  backdrop-filter:blur(18px) saturate(165%) !important;
}
/* canvas-widgets: frost KUN i non-themed editor-board (#ecanvas findes, ikke tema-sat, ikke TV).
   Tema-satte boards styres af §5c (board-temaets flade); TV holdes solid (perf-værn). */
[data-theme="light"] body:not(.canvas-tv-mode) #ecanvas:not([data-cv-themed]) .w{
  background:rgba(255,255,255,.5) !important;
  -webkit-backdrop-filter:blur(20px) saturate(170%) !important;
  backdrop-filter:blur(20px) saturate(170%) !important;
}
/* modaler/drawers lidt mere opake i lyst (fokus + læsbarhed over frost) */
[data-theme="light"] :is(.app-modal-content,.modal-content){
  background:rgba(255,255,255,.72) !important;
}

/* ════════ §20 CANVAS CHART-PALETTE — JS-rendret <canvas> (linje/bar/gauge/donut) ════════
   var() virker IKKE på <canvas>-pixels. canvas-runtime.js's chart-render læser i stedet
   brand-tokens ved render-tid via cvBrand(name,fallback) = getComputedStyle(:root)[name].
   Tokens er defineret som hård kobolt/orange i canvas-inline-base.css; her remappes HELE
   sættet til den bløde Rude-palette ÉT sted, så alle ~65 cvBrand-kald + rgba(var(--x-rgb))
   chart-glows følger temaet automatisk — uden at røre 30k linjer runtime.
   (Per-produkt accent fra §16 arver med: Planner→grøn, HRM→rav, fordi --bh-blue omdefineres.) */
:root{
  /* primær / sekundær serie + dybe varianter */
  --kobolt:var(--bh-blue) !important;        --blue:var(--bh-blue) !important;
  --kobolt-deep:var(--bh-blue-deep) !important; --purple:var(--bh-blue-deep) !important;
  --cyan:var(--bh-blue-2) !important;
  --tangerine:var(--bh-pop) !important;      --amber:var(--bh-pop) !important;
  --tangerine-deep:var(--bh-pop-deep) !important; --pink:var(--bh-pop-deep) !important;
  /* semantik (gauge over/tæt-på/under mål → blødere toner) */
  --success:var(--bh-green) !important;      --green:var(--bh-green) !important;
  --danger:var(--bh-danger) !important;      --red:var(--bh-danger) !important;
  --warn:var(--bh-pop) !important;           --info:var(--bh-blue-deep) !important;
  /* mørk serie/akse */
  --blaek:var(--bh-ink) !important;
  /* RGB-tripler til rgba(var(--x-rgb),A) chart-glows — spejler hex ovenfor */
  --kobolt-deep-rgb:82,115,201 !important;   --accent-2-rgb:157,182,240 !important;
  --tangerine-rgb:242,169,101 !important;    --tangerine-deep-rgb:219,147,79 !important;
  --success-rgb:87,194,154 !important;       --danger-rgb:237,138,143 !important;
}

/* brand: tom dot-span mellem produktord → mellemrum ("HR Managr" ikke "HRManager") */
.hrm-brand__logo .hrm-brand__dot,.pln-brand__logo .pln-brand__dot{
  display:inline-block !important; width:.3em !important; height:auto !important;
  background:none !important; border-radius:0 !important; box-shadow:none !important;
}

/* ════════ §19d CANVAS-WIDGET TYPOGRAFI — mockuppens signatur bredt anvendt ════════
   Mockup: ALLE tal i IBM Plex Mono tabular (.metric/.big/.lb-idx), overskrifter i Inter.
   Brede struktur-selektorer rammer counter/tabel-/leaderboard-værdier uden at kende hver
   dynamisk klasse. Sikkert: rammer kun tal-/værdi-bærende elementer inde i .w.
   2026-06-16: gauge-center UNDTAGET fra mono (se regel nedenfor). Måler-centret viser
   tal SAMMEN med enheds-ord/status ("1 salg", "På mål") → skal være Inter, aldrig mono. */
.cv-board .w [class*="-val"],.cv-board .w [class*="-num"],.cv-board .w [class*="metric"],
.cv-board .w .big,.cv-board .w .lb-idx,.cv-board .w td[class*="num"],.cv-board .w .stat-value{
  font-family:var(--bh-mono) !important; font-variant-numeric:tabular-nums !important; letter-spacing:-.02em !important;
}
/* Gauge-center (SVG-tekst + .g-center/.g-primary/secondary/status) → ALDRIG mono.
   Viser tal + enheds-ord/status, så Inter er mest læsbart. tabular-nums + letter-spacing
   bevares via inline SVG-attributter på .g-primary. */
.cv-board .w [class*="gauge"] text,
.cv-board .w [class*="gauge"] [class*="center"]{
  font-family:var(--bh-display) !important;
}
/* widget-overskrifter + sektions-labels → Inter (ikke mono) */
.cv-board .w h1,.cv-board .w h2,.cv-board .w h3,.cv-board .w .card-h{
  font-family:var(--bh-display) !important; letter-spacing:-.01em !important;
}

/* FIX: workspace .brand-text var display:none → produktnavn+tenant-undertekst usynlig.
   Tving synlig (kollapset sidebar skjuler hele indholdet separat via §3). */
.sidebar-header .brand-text,.sidebar .brand-text{ display:block !important; }
.sidebar.sidebar-collapsed .brand-text,.sidebar.collapsed .brand-text,.rail.collapsed .brand-text{ display:none !important; }

/* ════════ §21 TOPBAR-INDHOLD — mockuppens .seg / .search-pille / .icon-btn ════════
   Wired kontroller (app.js injicerer dem i #topbar-actions): periode-segment (.tb-period.seg),
   global-søgning (.global-search-wrap), ikon-knapper (tema/quiet/focus/notif). Inline-styles på
   ikon-knapperne tvinges til Rude .icon-btn-look (38px glas-pille) via !important. */
/* segmenteret periode-kontrol (mockup .seg: kapsel m. aktiv hvid pille) */
.tb-period.seg{
  display:inline-flex; align-items:center; gap:0; padding:3px !important;
  background:var(--bh-track) !important; border:1px solid var(--bh-line) !important;
  border-radius:var(--bh-r-pill) !important; box-shadow:none !important;
}
.tb-period.seg button{
  border:0 !important; background:transparent !important; color:var(--bh-ink-2) !important;
  font-family:var(--bh-display) !important; font-size:.78rem !important; font-weight:600 !important;
  padding:6px 14px !important; border-radius:var(--bh-r-pill) !important; cursor:pointer; transition:.16s; box-shadow:none !important;
  min-height:0 !important; width:auto !important; height:auto !important;
}
.tb-period.seg button:hover{ color:var(--bh-ink) !important; }
.tb-period.seg button.on{ color:var(--accent-ink) !important; background:var(--bh-pill-active) !important; box-shadow:var(--bh-shadow-flat-sm) !important; }

/* global-søgning → mockuppens .search-pille (glas-kapsel m. søgeikon + input + kbd) */
.topbar .global-search-wrap,.app-topbar .global-search-wrap{
  display:flex !important; align-items:center !important; gap:8px !important;
  background:var(--bh-chrome-fill) !important; border:1px solid var(--bh-edge) !important;
  border-radius:var(--bh-r-pill) !important; padding:7px 13px !important; box-shadow:var(--bh-spec) !important;
}
.topbar .global-search-wrap .search-input,.topbar #global-search{
  border:0 !important; background:transparent !important; box-shadow:none !important; padding:0 !important;
  color:var(--bh-ink) !important; font-family:var(--bh-body) !important; font-size:.82rem !important; min-width:120px !important;
}
.topbar .global-search-wrap:focus-within{ border-color:var(--bh-blue) !important; }
.topbar .search-kbd{
  border-radius:var(--bh-r-chip) !important; border:1px solid var(--bh-line) !important;
  background:var(--bh-track) !important; color:var(--bh-ink-3) !important; font-family:var(--bh-mono) !important; font-size:.62rem !important; padding:2px 6px !important;
}

/* topbar ikon-knapper → mockuppens .icon-btn (38px glas-pille). Tving over inline-styles. */
.topbar .theme-toggle,.topbar #quiet-mode-btn,.topbar #focus-mode-btn,.topbar .notif-bell,
.app-topbar .theme-toggle{
  width:38px !important; height:38px !important; border-radius:var(--bh-r-pill) !important;
  border:1px solid var(--bh-edge) !important; background:var(--bh-chrome-fill) !important;
  box-shadow:var(--bh-spec) !important; color:var(--bh-ink-2) !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important; transition:.16s;
}
.topbar .theme-toggle:hover,.topbar #quiet-mode-btn:hover,.topbar #focus-mode-btn:hover,.topbar .notif-bell:hover{
  background:var(--bh-chrome-fill-hover) !important; color:var(--bh-ink) !important;
}
/* profil-pille (avatar + navn) → glas-pille */
.topbar #nav-role-picker{
  background:var(--bh-chrome-fill) !important; border:1px solid var(--bh-edge) !important;
  border-radius:var(--bh-r-pill) !important; box-shadow:var(--bh-spec) !important; color:var(--bh-ink) !important;
  font-family:var(--bh-display) !important; font-weight:600 !important;
}

/* generisk .icon-btn (mockuppens chrome-kontrol) — bruges af HRM tema-toggle m.fl. */
.icon-btn{
  width:38px !important; height:38px !important; border-radius:var(--bh-r-pill) !important; flex:none;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  border:1px solid var(--bh-edge) !important; background:var(--bh-chrome-fill) !important;
  box-shadow:var(--bh-spec) !important; color:var(--bh-ink-2) !important; cursor:pointer; transition:.16s;
}
.icon-btn:hover{ background:var(--bh-chrome-fill-hover) !important; color:var(--bh-ink) !important; }
.icon-btn svg{ width:18px !important; height:18px !important; stroke:currentColor !important; fill:none !important; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
/* sol/måne-swap KUN for SVG-baserede toggles (HRM) — workspace bruger span.ic-moon (urørt) */
.theme-toggle svg.ic-sun{ display:none; }
[data-theme="dark"] .theme-toggle svg.ic-moon{ display:none; }
[data-theme="dark"] .theme-toggle svg.ic-sun{ display:block; }

/* §21.A A11Y FOKUS-STATES — topbar-kontroller (periode-select, dato-inputs, lokationsfilter, søg).
   Periode-select (#period-dropdown / .tb-period-host select) + global-loc-filter-knapperne
   havde inline 'outline:none' (eller manglede fokus helt) → keyboard-brugere mistede al
   visuel feedback ved Tab-navigation. Tving en synlig accent-ring på ALLE interaktive
   topbar-kontroller. !important slår de inline outline:none-erklæringer. WCAG 2.4.7. */
.topbar select:focus-visible,
.tb-period-host select:focus-visible,
.tb-period-host input[type="date"]:focus-visible,
#period-dropdown:focus-visible,
#global-loc-filter button:focus-visible,
.topbar .global-search-wrap:focus-within,
.topbar-actions button:focus-visible,
.topbar-actions a:focus-visible,
.topbar .theme-toggle:focus-visible,
.topbar #quiet-mode-btn:focus-visible,
.topbar #focus-mode-btn:focus-visible,
.topbar .notif-bell:focus-visible,
.topbar #nav-role-picker:focus-visible,
.topbar .tb-period.seg button:focus-visible{
  outline:2px solid var(--bh-blue) !important; outline-offset:1px !important;
}

/* ════════ §22 .v8 MANAGER-DASHBOARD — Rude radius-harmonisering (mockup 10/14/18/24) ════════
   .v8-forsiden (ui-dashboard.js) er et selvstændigt design med egne radier (8/12/16px) + 21
   hardcodede border-radius. Holdt i skin (alt tema ÉT sted) frem for at redigere JS-style-blokken.
   Typografi (greet→Outfit, .hl__val/.hw__val/.hero__slot-stat→mono) er sat i §2. */
.v8{ --v8-r-md:14px !important; --v8-r-lg:18px !important; --v8-r-xl:24px !important; }
.v8 .hero,.v8 .pulse{ border-radius:var(--bh-r-block) !important; }
.v8 .hero__primary,.v8 .attn__card,.wsl-modal__panel{ border-radius:18px !important; }
.v8 .hl,.v8 .hero__slot,.v8 .hw,.v8 .hero__widgets .hero__primary,.v8 .hero__placeholder{ border-radius:var(--bh-r-tile) !important; }
.v8 .hl__icon,.v8 .hw__chip,.v8 .hero__slot-empty-icon,.v8 .hero__slot-gear{ border-radius:var(--bh-r-chip) !important; }
/* greet-gradient em → følg accent→accent-2 (var accent→amber regnbue) */
.v8 .hero__greet em{ background:linear-gradient(120deg,var(--bh-blue),var(--bh-blue-2)) !important; -webkit-background-clip:text !important; background-clip:text !important; }

/* ════════ §23 CANVAS BOARD-EDITOR CHROME — mode-switch→.seg-kapsel, inspector→frostet glas ════════ */
.mode-switch{ background:var(--bh-track) !important; border:1px solid var(--bh-line) !important; border-radius:var(--bh-r-pill) !important; box-shadow:none !important; }
.mode-btn{ color:var(--bh-ink-2) !important; border-radius:var(--bh-r-pill) !important; font-family:var(--bh-display) !important; box-shadow:none !important; }
.mode-btn:hover{ color:var(--bh-ink) !important; background:transparent !important; }
.mode-btn.active{ background:var(--bh-pill-active) !important; color:var(--accent-ink) !important; box-shadow:var(--bh-shadow-flat-sm) !important; }
.mode-btn.active .mi{ color:var(--accent-ink) !important; }
/* inspector-popover → Rude frostet glas (var mørk navy m. hård slagskygge) */
.einsp{
  background:var(--bh-glass-2) !important; border:1px solid var(--bh-edge) !important;
  border-radius:var(--bh-r-block) !important; box-shadow:var(--bh-rim), var(--bh-spec), var(--glass-shadow) !important;
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(220%) !important; backdrop-filter:blur(var(--glass-blur)) saturate(220%) !important;
}

/* ════════ §24 GLAS SPECULAR-SHEEN — mockuppens .glass::after (top-lys-refleks, overlay-blend) ════════
   iOS 26-signaturen: en blød hvid top-refleks der får CHROME-glasset til at "fange lys".
   KUN på chrome (sidebar/topbar/dock/popover) — ALDRIG på indhold (Apple-princip). pointer-events:none. */
.sidebar,.rail,.pln-sidebar,.hrm-sidebar,.topbar,.app-topbar,.pln-topbar,.hrm-topbar,.v8-topbar,.ebar,.ebar-ctx{ position:relative; }
/* .ccm-product-popup/.dropdown-menu/.popup UDELADT bevidst fra position:relative ovenfor: de er
   JS-positioneret position:fixed (product-switcher.css) — relative overskrev fixed → popup landede i
   body-flowet ("random sted + bugger siden"). ::after-sheen (nedenfor) virker stadig: fixed er en
   positioneret kontekst, så ::after inset:0 dækker popup'en korrekt. Fix 2026-06-04. */
.sidebar::after,.rail::after,.pln-sidebar::after,.hrm-sidebar::after,
.topbar::after,.app-topbar::after,.pln-topbar::after,.hrm-topbar::after,.v8-topbar::after,
.ebar::after,.ccm-product-popup::after,.dropdown-menu::after,.popup::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.4), transparent 30%); opacity:.35; mix-blend-mode:overlay;
}
[data-theme="dark"] .sidebar::after,[data-theme="dark"] .rail::after,[data-theme="dark"] .pln-sidebar::after,
[data-theme="dark"] .hrm-sidebar::after,[data-theme="dark"] .topbar::after,[data-theme="dark"] .app-topbar::after,
[data-theme="dark"] .pln-topbar::after,[data-theme="dark"] .hrm-topbar::after,[data-theme="dark"] .ebar::after{
  background:linear-gradient(180deg, rgba(255,255,255,.22), transparent 32%); opacity:.4;
}

/* ════════ §25 STORY MODE — Rude iOS-glas på fuldskærms-præsentation (2026-06-04, Hammer) ════════
   Story Mode er TV / standup-præsentation → ALTID mørkt glas for læsbarhed,
   uanset app-tema. Slide-tiles (KPI / leaderboard / stream) bliver frostede
   iOS-26-glas-paneler: translucent flade + blur + saturate + spec-highlight +
   blød skygge. story-bg-auraen bag giver glasset farve at sample, så frosten
   faktisk læses (ren #000 gav intet at froste). Slides genereres dynamisk af
   storyboard-motoren (renderStoryboard i canvas-runtime.js) → vi styler på de
   stabile klasser, ikke per-slide-IDs.
   ──────────────────────────────────────────────────────────────────────── */
.story-scrim{
  /* Dyb, svagt blålig base i stedet for ren #000, så glasset har dybde at sample. */
  background:radial-gradient(ellipse at 50% -10%, #141a2c 0%, #070a12 65%) !important;
}
.story-bg{ filter:saturate(118%); }

/* Fælles glas-flade for alle slide-tiles (KPI-tiles, leaderboard-rækker, stream-items). */
.story-content .story-stats > div,
.story-content .sl-row,
.story-content .story-stream-item{
  background:rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(var(--glass-blur,30px)) saturate(170%);
  backdrop-filter:blur(var(--glass-blur,30px)) saturate(170%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.18);
}

/* KPI- + mål-tiles: fra bare tal-kolonner → centrerede glas-fliser. */
.story-content .story-stats{ gap:18px; }
.story-content .story-stats > div{ padding:22px 24px; border-radius:20px; text-align:center; }

/* Leaderboard-rækker: glas + iOS-radius (bevarer grid-layout fra base-CSS). */
.story-content .sl-row{ border-radius:16px; padding:14px 20px; }

/* Stream-items: glas med accent-kant (kant-farve sættes inline pr. række). */
.story-content .story-stream-item{
  padding:16px 22px; border-radius:14px;
  border-left:4px solid var(--accent);
}

/* Trofæ-cirkel: glasset ring med varm glød i stedet for flad gradient-skive. */
.story-slide.throwback .tb-photo{
  background:rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(var(--glass-blur,30px)) saturate(170%);
  backdrop-filter:blur(var(--glass-blur,30px)) saturate(170%);
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 26px 80px -22px color-mix(in srgb, var(--amber) 48%, transparent), inset 0 1px 0 rgba(255,255,255,.26);
}

/* Progress-segmenter: frostet glas-spor. */
.story-progress .sp-seg{
  background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  height:4px; border-radius:3px;
}

/* Controls: glas-chrome (knapper + meta-pille) som en iOS-kontrolbjælke. */
.story-controls .story-ctrl,
.story-controls .story-tv-meta{
  background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(var(--glass-blur,30px)) saturate(160%);
  backdrop-filter:blur(var(--glass-blur,30px)) saturate(160%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.story-controls .story-ctrl{ border-radius:12px; }
.story-controls .story-tv-meta{ border-radius:14px; padding:8px 16px; }
.story-controls .story-ctrl:hover{ background:rgba(255,255,255,.13); }

/* Storyboard-builder modal = chrome → frostet glas (Apple-reglen: glas på
   chrome, ikke på tæt indhold; modalen er chrome, kort/inputs forbliver solide). */
.sbb-scrim{
  background:rgba(8,11,18,.55) !important;
  -webkit-backdrop-filter:blur(8px) saturate(120%); backdrop-filter:blur(8px) saturate(120%);
}
.sbb-modal{
  background:var(--glass-bg, rgba(28,34,50,.86)) !important;
  -webkit-backdrop-filter:blur(var(--glass-blur,30px)) saturate(220%);
  backdrop-filter:blur(var(--glass-blur,30px)) saturate(220%);
  border:1px solid var(--glass-border, rgba(255,255,255,.14)) !important;
  box-shadow:var(--glass-shadow, 0 18px 40px -16px rgba(16,24,48,.28)), inset 0 1px 0 rgba(255,255,255,.16) !important;
}
.sbb-foot button.primary{ box-shadow:inset 0 1px 0 rgba(255,255,255,.25); }

/* Drift-indstillinger-panel: samme glas-look som sidebaren (uden sidebar-layout) — 2026-06-10 */
.pln-set-panel{
  background:var(--bh-glass-2) !important; color:var(--bh-ink) !important;
  border:1px solid var(--bh-edge) !important;
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(220%) !important;
  backdrop-filter:blur(var(--glass-blur)) saturate(220%) !important;
  box-shadow:var(--bh-rim), var(--bh-spec), var(--bh-shadow-ink) !important;
}
.pln-set-panel .pln-acc__hd{ color:var(--bh-ink) !important; }
.pln-set-panel .pln-set-panel__head h2{ color:var(--bh-ink) !important; }
.pln-set-panel .pln-acc.is-open > .pln-acc__hd{ color:var(--bh-accent, var(--color-accent)) !important; }