/* ============================================================================
   v4-cards.css — Delt v4 kort/bento-designsystem (guld-standard)
   ----------------------------------------------------------------------------
   Ekstraheret VERBATIM fra ui-employees.js _empInjectV4CSS (2026-06-06) så ALLE
   flader kan genbruge det polerede kort-look: afrundede solide kort + accent-
   gradient-tint + typografi-hierarki (eyebrow -> mono-headline -> sub -> footer-
   pills) + hover-lift. Token-drevet (--card-solid/--border/--accent-rgb/--r),
   theme-aware. Bento = 12-kolonne grid med span-N.

   NB: v4-kort er SOLIDE (ikke frosted) — korrekt for INDHOLD (frost = chrome/nav).
   Loades efter rude-skin.css. Single source of truth for v4-* klasser.
   ============================================================================ */

/* ===== v4 KONTROLPANEL — ret HER, så ændres ALT der peger på v4-tokens =====
   Hver kort-flade (v4-tile, camp-row, kpi-card, shop-card ...) peger på disse
   tokens. Ret én token → tiles, lister og kpi-kort ændrer sig samtidig.
   v4-kort er SOLIDE (ikke frosted) — korrekt for indhold; frost = chrome/nav. */
:root{
  --v4-radius: var(--r, 18px);                  /* kort-hjørner */
  --v4-radius-sm: 10px;                          /* mindre elementer/pills */
  --v4-pad: 18px;                                /* kort-padding */
  --v4-card-bg: var(--card-solid, var(--card));  /* solid kort-flade */
  --v4-card-border: var(--border);
  --v4-card-border-hover: var(--border-2, rgba(255,255,255,.12));
  --v4-shadow-hover: 0 12px 32px rgba(0,0,0,.25);
  --v4-lift: -2px;                               /* hover-løft */
  --v4-accent-fill: linear-gradient(135deg, rgba(var(--accent-rgb),.08), rgba(var(--accent-rgb),.02));
  --v4-accent-border: rgba(var(--accent-rgb),.2);
  --v4-headline-font: var(--bh-mono);
  --v4-eyebrow-color: var(--text-3);
  --v4-pill-bg: var(--bh-chrome-fill, rgba(255,255,255,.04));  /* flip-token (lys/mrk) i st. for fast hvid */
}

.v4-topnav{padding:12px 20px;background:var(--card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:var(--r);margin-bottom:18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.v4-nav-label{font-size:.62rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.14em;font-weight:700;}
.v4-pill-group{display:flex;gap:3px;background:var(--surface);border:1px solid var(--border);border-radius:100px;padding:3px;}
.v4-pill{padding:6px 11px;border:none;background:transparent;color:var(--text-3);font-size:.68rem;font-weight:600;border-radius:100px;cursor:pointer;transition:all .25s;font-family:inherit;display:inline-flex;align-items:center;gap:5px;}
.v4-pill:hover{color:var(--text-1);}
.v4-pill.active{background:rgba(var(--accent-rgb),0.15);color:var(--accent);}
.v4-spacer{flex:1;}
.v4-hint{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:rgba(var(--accent-rgb),0.08);border:1px solid rgba(var(--accent-rgb),0.2);border-radius:100px;font-size:.62rem;color:var(--accent);font-weight:700;}
.v4-hint::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);animation:v4pulse 2s ease-out infinite;}

.v4-hero{padding:20px 0 28px;display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:center;margin-bottom:20px;}
@media(max-width:900px){.v4-hero{grid-template-columns:1fr;text-align:center;}}

.v4-aura{position:relative;width:200px;height:200px;flex-shrink:0;margin:0 auto;}
.v4-aura-ring{position:absolute;inset:0;border-radius:50%;}
.v4-aura-ring.r1{background:conic-gradient(from 0deg,var(--accent) 0%,transparent 40%,transparent 100%);mask:radial-gradient(farthest-side,transparent calc(100% - 2px),black calc(100% - 1px));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),black calc(100% - 1px));animation:v4spin 8s linear infinite;}
.v4-aura-ring.r2{inset:14px;background:conic-gradient(from 180deg,#3b9eff 0%,transparent 30%,transparent 100%);mask:radial-gradient(farthest-side,transparent calc(100% - 2px),black calc(100% - 1px));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),black calc(100% - 1px));animation:v4spin 12s linear infinite reverse;}
.v4-aura-ring.r3{inset:28px;background:conic-gradient(from 90deg,#a78bfa 0%,transparent 25%,transparent 100%);mask:radial-gradient(farthest-side,transparent calc(100% - 2px),black calc(100% - 1px));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),black calc(100% - 1px));animation:v4spin 16s linear infinite;}
@keyframes v4spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes v4pulse{0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0.5);}70%{box-shadow:0 0 0 6px transparent;}100%{box-shadow:0 0 0 0 transparent;}}
.v4-aura-core{position:absolute;inset:44px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#3b9eff);display:flex;align-items:center;justify-content:center;font-size:2.4rem;font-weight:900;color:#000;box-shadow:0 0 50px rgba(var(--accent-rgb),0.25);}
.v4-aura-status{position:absolute;bottom:46px;right:46px;width:20px;height:20px;border-radius:50%;background:var(--accent);border:4px solid var(--bg);animation:v4pulse 2s ease-out infinite;z-index:2;}
.v4-signal-chip{position:absolute;padding:4px 10px;background:var(--card);border:1px solid var(--border-2,rgba(255,255,255,0.12));border-radius:100px;font-size:.6rem;font-weight:700;display:inline-flex;align-items:center;gap:4px;animation:v4float 5s ease-in-out infinite;backdrop-filter:blur(10px);white-space:nowrap;}
.v4-signal-chip.green{color:var(--accent);border-color:rgba(25, 195, 125,0.3);}
.v4-signal-chip.blue{color:var(--color-info);border-color:rgba(59,158,255,0.3);}
.v4-signal-chip.amber{color:var(--amber,#f59e0b);border-color:rgba(245,158,11,0.3);}
.v4-signal-chip.purple{color:#a78bfa;border-color:rgba(167,139,250,0.3);}
@keyframes v4float{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}

.v4-narrative{position:relative;}
.v4-narrative-label{display:inline-flex;align-items:center;gap:6px;font-size:.6rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.12em;font-weight:700;margin-bottom:8px;}
.v4-narrative-label::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);animation:v4pulse 2s ease-out infinite;}
.v4-narrative-name{font-size:2.4rem;font-weight:800;letter-spacing:-0.03em;line-height:1;margin-bottom:8px;font-family:var(--font-brand);}
.v4-narrative-role{font-size:.82rem;color:var(--text-3);margin-bottom:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.v4-narrative-role .v4-tag{padding:3px 10px;border:1px solid var(--border-2,var(--border));border-radius:100px;font-weight:600;color:var(--text-2);font-size:.68rem;}
.v4-narrative-role .v4-tag.active{color:var(--accent);border-color:rgba(var(--accent-rgb),0.3);background:rgba(var(--accent-rgb),0.05);}
.v4-summary{font-size:1.02rem;line-height:1.55;color:var(--text-2);max-width:780px;transition:opacity .3s;}
.v4-summary strong{color:var(--text-1);font-weight:700;}
.v4-summary .hl{background:linear-gradient(120deg,rgba(var(--accent-rgb),0.15),rgba(var(--accent-rgb),0.05));color:var(--accent);padding:0 4px;border-radius:4px;font-weight:700;}
.v4-summary .hl-blue{background:linear-gradient(120deg,rgba(59,158,255,0.15),rgba(59,158,255,0.05));color:var(--color-info);padding:0 4px;border-radius:4px;font-weight:700;}
.v4-summary .hl-amber{background:linear-gradient(120deg,rgba(245,158,11,0.15),rgba(245,158,11,0.05));color:var(--amber,#f59e0b);padding:0 4px;border-radius:4px;font-weight:700;}
.v4-summary .hl-purple{background:linear-gradient(120deg,rgba(167,139,250,0.15),rgba(167,139,250,0.05));color:#a78bfa;padding:0 4px;border-radius:4px;font-weight:700;}
.v4-summary.switching{opacity:0.3;}

.v4-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;}
.v4-btn{padding:9px 14px;background:var(--card-solid,var(--card));border:1px solid var(--border);border-radius:10px;color:var(--text-1);font-size:.74rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.v4-btn:hover{background:rgba(var(--accent-rgb),0.08);border-color:rgba(var(--accent-rgb),0.3);color:var(--accent);}
.v4-btn.primary{background:var(--accent);color:#000;border-color:var(--accent);}
.v4-btn.primary:hover{background:#00e699;box-shadow:0 4px 14px rgba(var(--accent-rgb),0.3);}
.v4-btn.sm{padding:5px 10px;font-size:.68rem;}

.v4-priority{padding:14px 18px;background:linear-gradient(90deg,rgba(var(--accent-rgb),0.08),rgba(59,158,255,0.04));border:1px solid rgba(var(--accent-rgb),0.2);border-radius:14px;display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.v4-priority-icon{width:40px;height:40px;border-radius:11px;background:rgba(var(--accent-rgb),0.15);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;}
.v4-priority-body{flex:1;}
.v4-priority-title{font-weight:800;font-size:.88rem;margin-bottom:2px;}
.v4-priority-desc{font-size:.74rem;color:var(--text-2);}

.v4-section-title{font-size:.64rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.14em;font-weight:700;margin:24px 0 12px;display:flex;align-items:center;gap:10px;}
.v4-section-title::before{content:'';width:24px;height:1px;background:var(--border-2,var(--border));}
.v4-bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(100px,auto);gap:12px;}
.v4-tile{background:var(--v4-card-bg);border:1px solid var(--v4-card-border);border-radius:var(--v4-radius);padding:var(--v4-pad);position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .3s;cursor:pointer;}
.v4-tile:hover{transform:translateY(var(--v4-lift));border-color:var(--v4-card-border-hover);box-shadow:var(--v4-shadow-hover);}
.v4-tile.accent{background:var(--v4-accent-fill);border-color:var(--v4-accent-border);}
.v4-tile.blue{background:linear-gradient(135deg,rgba(59,158,255,0.08),rgba(59,158,255,0.02));border-color:rgba(59,158,255,0.2);}
.v4-tile.purple{background:linear-gradient(135deg,rgba(167,139,250,0.08),rgba(167,139,250,0.02));border-color:rgba(167,139,250,0.2);}
.v4-tile.amber{background:linear-gradient(135deg,rgba(245,158,11,0.08),rgba(245,158,11,0.02));border-color:rgba(245,158,11,0.2);}
.v4-tile.span-3{grid-column:span 3;}.v4-tile.span-4{grid-column:span 4;}.v4-tile.span-5{grid-column:span 5;}.v4-tile.span-6{grid-column:span 6;}.v4-tile.span-8{grid-column:span 8;}.v4-tile.span-12{grid-column:span 12;}
@media(max-width:1100px){.v4-tile.span-3,.v4-tile.span-4,.v4-tile.span-5{grid-column:span 6;}.v4-tile.span-8{grid-column:span 12;}}
@media(max-width:640px){.v4-tile{grid-column:span 12!important;}}
.v4-eyebrow{font-size:.62rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.12em;font-weight:700;margin-bottom:6px;}
.v4-headline{font-size:1.7rem;font-weight:800;letter-spacing:-0.025em;line-height:1.1;font-family:var(--bh-mono);font-variant-numeric:tabular-nums;color:var(--text-1);font-feature-settings:"tnum";}
.v4-headline.huge{font-size:3rem;letter-spacing:-0.035em;}
.v4-headline.sm{font-size:1.15rem;font-family:var(--font-brand);font-weight:700;letter-spacing:-0.015em;}
.v4-tile{color:var(--text-1);}
.v4-priority-title{color:var(--text-1);}
.v4-sub{font-size:.76rem;color:var(--text-2);margin-top:6px;line-height:1.5;}
.v4-footer{margin-top:12px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.v4-pill-ctx{display:inline-flex;align-items:center;gap:4px;font-size:.6rem;padding:2px 8px;background:rgba(255,255,255,0.04);border-radius:100px;color:var(--text-3);white-space:nowrap;}
.v4-pill-ctx strong{color:var(--accent);font-weight:700;}
.v4-pill-ctx.blue strong{color:var(--color-info);}.v4-pill-ctx.amber strong{color:var(--amber,#f59e0b);}
.v4-ctxbar{height:4px;background:linear-gradient(90deg,rgba(239,68,68,0.3),rgba(245,158,11,0.3),rgba(var(--accent-rgb),0.3));border-radius:2px;position:relative;margin-top:8px;}
.v4-ctxbar::after{content:'';position:absolute;width:10px;height:10px;border-radius:50%;background:#fff;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 2px var(--accent);left:var(--pos,50%);}
.v4-spark{height:48px;width:100%;position:relative;margin-top:8px;}
.v4-msg{padding:9px 11px;border-radius:9px;font-size:.76rem;line-height:1.45;background:rgba(255,255,255,0.02);border:1px solid var(--border);margin-top:6px;}
.v4-msg.mine{background:rgba(var(--accent-rgb),0.06);border-color:rgba(var(--accent-rgb),0.2);margin-left:24px;}
.v4-msg-from{font-size:.58rem;color:var(--text-3);font-weight:700;margin-bottom:3px;}
.v4-sched-week{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:8px;}
.v4-sched-day{background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:6px;padding:6px 4px;text-align:center;}
.v4-sched-dname{font-size:.52rem;color:var(--text-3);font-weight:700;text-transform:uppercase;}
.v4-sched-dnum{font-size:.92rem;font-weight:800;margin:1px 0;font-family:var(--bh-mono);font-variant-numeric:tabular-nums;}
.v4-sched-shift{font-size:.54rem;font-weight:700;padding:2px 3px;border-radius:3px;background:rgba(var(--accent-rgb),0.12);color:var(--accent);border:1px solid rgba(var(--accent-rgb),0.25);margin-top:2px;}
.v4-sched-shift.off{background:rgba(255,255,255,0.02);color:var(--text-3);border-color:var(--border);}
.v4-sched-shift.sick{background:rgba(239,68,68,0.1);color:var(--red,#ED8A8F);border-color:rgba(239,68,68,0.3);}
.v4-list-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.03);}
.v4-list-row:last-child{border-bottom:none;}
.v4-list-icon{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0;background:rgba(255,255,255,0.04);}
.v4-list-main{flex:1;min-width:0;}
.v4-list-title{font-size:.74rem;font-weight:600;}
.v4-list-sub{font-size:.62rem;color:var(--text-3);margin-top:1px;}
.v4-list-val{font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums;font-family:var(--bh-mono);font-variant-numeric:tabular-nums;}
.v4-streak{display:flex;gap:3px;margin-top:10px;}
.v4-streak-day{flex:1;height:28px;background:rgba(255,255,255,0.04);border-radius:3px;}
.v4-ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:5px;margin-top:8px;}
.v4-ach{aspect-ratio:1;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:all .2s;}
.v4-ach:hover{transform:translateY(-1px);border-color:var(--accent);}
.v4-ach.locked{opacity:0.25;filter:grayscale(1);}
.v4-ach.new{border-color:rgba(var(--accent-rgb),0.5);background:rgba(var(--accent-rgb),0.08);}
.v4-rail{position:relative;height:60px;margin:12px 0 16px;}
.v4-rail-line{position:absolute;top:50%;left:0;right:0;height:2px;background:var(--border-2,var(--border));}
.v4-rail-fill{position:absolute;top:50%;left:0;height:3px;background:linear-gradient(90deg,var(--accent),#3b9eff);transform:translateY(-50%);}
.v4-milestone{position:absolute;top:50%;transform:translate(-50%,-50%);}
.v4-milestone .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--bg);}
.v4-milestone.now .dot{width:14px;height:14px;box-shadow:0 0 0 3px var(--bg),0 0 14px rgba(var(--accent-rgb),0.5);animation:v4pulse 2s ease-out infinite;}
.v4-milestone.future .dot{background:transparent;border:2px dashed var(--text-3);box-shadow:none;}
.v4-milestone-lbl{position:absolute;top:14px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:.58rem;color:var(--text-3);font-weight:600;}
.v4-milestone-date{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:.56rem;color:var(--text-1);font-weight:700;font-family:var(--bh-mono);font-variant-numeric:tabular-nums;}
.v4-milestone.now .v4-milestone-lbl{color:var(--accent);font-weight:700;}
.v4-wave{height:32px;display:flex;align-items:center;gap:2px;}
.v4-wave .bar{width:3px;background:var(--accent);border-radius:2px;animation:v4wave 1.2s ease-in-out infinite;}
.v4-wave .bar:nth-child(1){height:35%;animation-delay:0s;}.v4-wave .bar:nth-child(2){height:65%;animation-delay:0.1s;}.v4-wave .bar:nth-child(3){height:95%;animation-delay:0.2s;}.v4-wave .bar:nth-child(4){height:55%;animation-delay:0.3s;}.v4-wave .bar:nth-child(5){height:80%;animation-delay:0.4s;}.v4-wave .bar:nth-child(6){height:40%;animation-delay:0.5s;}.v4-wave .bar:nth-child(7){height:70%;animation-delay:0.6s;}.v4-wave .bar:nth-child(8){height:50%;animation-delay:0.7s;}
@keyframes v4wave{0%,100%{transform:scaleY(1);opacity:0.4;}50%{transform:scaleY(1.3);opacity:1;}}
.v4-tile{opacity:0;animation:v4tilein .5s cubic-bezier(.2,.9,.3,1) forwards;}
.v4-tile:nth-child(1){animation-delay:.03s;}.v4-tile:nth-child(2){animation-delay:.06s;}.v4-tile:nth-child(3){animation-delay:.09s;}.v4-tile:nth-child(4){animation-delay:.12s;}.v4-tile:nth-child(5){animation-delay:.15s;}.v4-tile:nth-child(6){animation-delay:.18s;}.v4-tile:nth-child(7){animation-delay:.21s;}.v4-tile:nth-child(8){animation-delay:.24s;}.v4-tile:nth-child(n+9){animation-delay:.27s;}
@keyframes v4tilein{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@media(prefers-reduced-motion:reduce){.v4-tile,.v4-aura-ring,.v4-signal-chip,.v4-aura-status,.v4-wave .bar{animation:none!important;}.v4-tile{opacity:1;}}

/* ============================================================================
   FLADE-ADOPTION — peg eksisterende kort-klasser på v4-tokens.
   Loades efter de oprindelige regler (rude-skin/improvements) → vinder uden
   !important. Mere specifikke tilstande (.camp-row.open osv.) beholder deres
   egen styling. Ret v4-tokens i KONTROLPANELET ovenfor → alt herunder følger.
   Konverteres slavisk, område for område.
   ============================================================================ */

/* --- Kampagner (liste): rows beholder liste-layout, men får v4-flade/-hjørner */
.camp-row{ border-radius:var(--v4-radius); background:var(--v4-card-bg); border-color:var(--v4-card-border); }

/* --- KPI-kort (Coaching, Rekruttering, Performance/analytics): v4-flade/-hjørner.
   Den semantiske top-accent (border-top pr. nth-child) + ::after-tint bevares —
   jeg rører kun radius + baggrund. */
.kpi-card{ border-radius:var(--v4-radius); background:var(--v4-card-bg); }

/* --- Sektions-kort (Vejledere/accordion): align hjørner+flade til v4 (var --r ~ token) */
.section-card{ border-radius:var(--v4-radius); }

/* --- Glas-kort + kampagne-detalje-kort: bruger allerede --card-solid-flade,
   align kun hjørner til v4 */
.glass-card, .cspd-card{ border-radius:var(--v4-radius); }

/* ============================================================================
   MODAL-FROST — gør de flade/opake modaler frosted som chrome (IKKE v4-solid).
   Samme recept som .einsp/product-popup (de allerede-gode modaler): --bh-glass-2
   + blur. Tokenne FLIPPER (light=hvid-glas, dark=mørk-glas) i alle 4 produkter,
   så ingen "hvid modal på mørk baggrund". !important slår opak/inline-bg ud.
   ============================================================================ */
.modal-box, .app-modal-content,
.hrm-modal__panel, .pln-modal__box, .wsl-modal__panel, .cv-access-panel, .kbd-modal {
  /* 2026-06-09 (Hammer): modaler var nær-gennemsigtige og ulæselige — indholdet
     bag skinnede igennem fordi --bh-glass-2 har for lav opacity til TÆT indhold
     (fravær-lister o.l.). Root-cause: en modal med indhold = INDHOLD, ikke chrome
     → SOLID flade (rude-skins eget princip "indhold = solid flade"). Vi bruger den
     tema-flippende --color-card-solid (dark: ~solid navy, light: #fff) så tekst
     ALTID har kontrast. backdrop-filter fjernet: overflødig på opak baggrund +
     sparer scroll-frame-blur (perf, feedback_canvas_perf_rules). Chrome (sidebar/
     topbar/popups) beholder sin frost via §3/§11 — kun modal-INDHOLD bliver solid. */
  background: var(--color-card-solid, var(--card-solid, var(--card-bg, #fff))) !important;
  border: 1px solid var(--bh-edge, var(--border)) !important;
  /* modal-hjørner = blok-radius (24px) ENS m. kort + rude-skin §11/§18 (var --v4-radius=14px → skarpere end kortene i alle 4) */
  border-radius: var(--bh-r-block, var(--v4-radius)) !important;
  box-shadow:
    var(--bh-rim, 0 0 0 1px rgba(255,255,255,.06)),
    var(--bh-spec, inset 0 1px 0 rgba(255,255,255,.18)),
    var(--glass-shadow, 0 22px 50px -18px rgba(16,24,48,.45)) !important;
}
/* Manglende scrim-blur (HRM-modalens backdrop havde ingen) */
.hrm-modal__backdrop { -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important; }