/* ═══════════════════════════════════════════════════════════════════
   BØRNS VILKÅR · COMPREHENSIVE UI IMPROVEMENTS
   Skeleton screens · Data freshness · Mission impact · Empty states
   Accessibility · Micro-interactions · Mobile polish
═══════════════════════════════════════════════════════════════════ */

/* ── LIVE-UPDATES - count-up animation + frisk-marker (15 min) ────────────
   Fyrer når LiveUpdates.applyDiff opdager en ændret værdi efter SSE-refresh.
   .live-fresh markerer at værdien er ændret seneste 15 min. -up/-down
   lægger en farve-tone på (grøn ved stigning, orange ved fald). */
.live-fresh {
  position: relative;
  animation: liveFreshPulse 1.4s cubic-bezier(.2,.8,.3,1);
  border-radius: 4px;
  transition: box-shadow .4s ease, color .4s ease;
}
@keyframes liveFreshPulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6), inset 0 0 0 0 rgba(var(--accent-rgb), 0); }
  40%  { box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0.0), inset 0 0 0 1px rgba(var(--accent-rgb), 0.4); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}
.live-fresh-up {
  color: var(--color-green, var(--accent, #0A84FF)) !important;
  text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.35);
}
.live-fresh-down {
  color: var(--color-amber, #f59e0b) !important;
  text-shadow: 0 0 12px rgba(245, 158, 11, 0.30);
}
@media (prefers-reduced-motion: reduce) {
  .live-fresh { animation: none; }
}

/* ── LIVE-DELTA-CHIP - flydende +N/-N ved siden af ændret tal ─────────────
   Vises i 5 sek efter et tal opdateres på kampagne-overblik. Brugeren ser
   PRECIS hvor meget tallet er steget/faldet uden at miste sin position på
   siden. SPT falder naturligt over tid (timer-tællen øges) så ▼-pil er
   forventet adfærd og kommunikerer aktivitet, ikke fejl. */
.live-delta-chip {
  display: inline-block;
  margin-left: 6px;
  font-size: .58rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  vertical-align: middle;
  letter-spacing: .02em;
  white-space: nowrap;
  /* Synlig i 30 sek - kort nok til at chips ikke overlapper med næste
     Adversus-sync (60 sek), længe nok til at brugeren ser ændringen.
     fade-out tager 0.8s ved slutningen. JS setTimeout matcher delay. */
  animation: deltaChipIn .25s cubic-bezier(.2,.8,.3,1), deltaChipOut .8s 29.2s forwards;
}
/* Match eksisterende camp-row-trend.up/.down konvention på samme side:
   stigning = grøn, fald = rød. Tidligere brugte vi amber til down hvilket
   var visuelt inkonsekvent ved siden af den store trend-pil i venstre side
   af rækken. */
.live-delta-chip.up {
  background: color-mix(in srgb, var(--green, var(--accent, #0A84FF)) 16%, transparent);
  color: var(--green, var(--accent, #0A84FF));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--green, var(--accent, #0A84FF)) 22%, transparent);
}
.live-delta-chip.down {
  background: color-mix(in srgb, var(--red, #ED8A8F) 14%, transparent);
  color: var(--red, #ED8A8F);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--red, #ED8A8F) 22%, transparent);
}
@keyframes deltaChipIn {
  from { opacity: 0; transform: translateY(-3px) scale(.85); }
  to   { opacity: 1; transform: none; }
}
@keyframes deltaChipOut {
  to { opacity: 0; transform: translateY(2px); }
}
@media (prefers-reduced-motion: reduce) {
  .live-delta-chip { animation: none; opacity: 1; }
}

/* SILENT REFRESH: når SSE-data fyrer en re-render, vil vi ikke have synligt
   flash af skeleton/empty-state/fade-in. body.silent-refresh skiftes til 1
   animation-frame mens showView mutater DOM, og fjernes efter LiveUpdates
   har applyDiff'et. Suppress alt fade-in/skeleton-shimmer i dette vindue.
   UNDTAGET: .live-fresh + .live-delta-chip skal stadig animere - det er
   HELE pointen at brugeren ser hvilke tal der ændrede sig. */
body.silent-refresh * {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition-duration: 0s !important;
}
/* Override-back: live-fresh + delta-chip skal animere fuldt. Højere
   specificity vinder. Bruger samme værdier som de oprindelige keyframes
   (1.4s pulse + 5s/30s chip-fade). Anvendes både i og udenfor silent-
   refresh-vinduet. */
body.silent-refresh .live-fresh {
  animation: liveFreshPulse 1.4s cubic-bezier(.2,.8,.3,1) !important;
  transition: box-shadow .4s ease, color .4s ease !important;
}
body.silent-refresh .live-delta-chip {
  animation: deltaChipIn .25s cubic-bezier(.2,.8,.3,1), deltaChipOut .8s 29.2s forwards !important;
}
body.silent-refresh .skeleton,
body.silent-refresh .skeleton-shimmer,
body.silent-refresh [data-loading-state="loading"] {
  display: none !important;
}
body.silent-refresh .view-fade-in,
body.silent-refresh .fade-in {
  animation: none !important;
  opacity: 1 !important;
}

/* ── SKELETON LOADING SCREENS ────────────────────────────────── */
@keyframes skeleton-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--surface) !important;
  color: transparent !important;
  border-radius: var(--r-sm);
  pointer-events: none;
  user-select: none;
}
.skeleton * { visibility: hidden; }
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.04) 20%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 80%,
    transparent 100%
  );
  animation: skeleton-shimmer 1.8s ease-in-out infinite;
}
[data-theme="light"] .skeleton::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,0.03) 20%,
    rgba(0,0,0,0.06) 50%,
    rgba(0,0,0,0.03) 80%,
    transparent 100%
  );
}
@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none; opacity: 0.5; }
}

.skeleton-text {
  display: inline-block;
  height: 1em;
  width: 80%;
  border-radius: 4px;
}
.skeleton-text.short { width: 40%; }
.skeleton-text.medium { width: 60%; }
.skeleton-circle {
  display: inline-block;
  border-radius: 50%;
}

/* Skeleton KPI card */
.kpi-card.skeleton { min-height: 90px; }
.kpi-card.skeleton .kpi-label,
.kpi-card.skeleton .kpi-value,
.kpi-card.skeleton .kpi-sub { 
  background: var(--surface); 
  border-radius: 4px; 
  height: 1em; 
  display: block; 
}

/* ── DATA FRESHNESS INDICATOR ────────────────────────────────── */
.data-freshness {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
  font-family: var(--font-mono);font-variant-numeric:tabular-nums;
  color: var(--text-3);
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: all 0.3s ease;
}
.data-freshness-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.3s ease;
}
.data-freshness.live .data-freshness-dot {
  background: var(--green);
  box-shadow: 0 0 6px rgba(var(--accent-rgb),0.5);
  animation: pulse-dot 2s ease infinite;
}
.data-freshness.recent .data-freshness-dot {
  background: var(--amber);
}
.data-freshness.stale .data-freshness-dot {
  background: var(--red);
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── MISSION IMPACT COUNTER ──────────────────────────────────── */
.mission-impact {
  background: linear-gradient(135deg, rgba(228,0,43,0.06), rgba(255,184,28,0.03));
  border: 1px solid rgba(228,0,43,0.12);
  border-radius: var(--r);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.mission-impact::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(228,0,43,0.04) 0%, transparent 70%);
  pointer-events: none;
}
.mission-impact-icon {
  font-size: 2rem;
  flex-shrink: 0;
  animation: heartbeat 2s ease infinite;
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.15); }
  30% { transform: scale(1); }
  45% { transform: scale(1.1); }
}
.mission-impact-text {
  flex: 1;
}
.mission-impact-number {
  font-family: var(--font-mono);font-variant-numeric:tabular-nums;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-1);
  letter-spacing: -0.02em;
}
.mission-impact-label {
  font-size: 0.75rem;
  color: var(--text-2);
  line-height: 1.4;
}
.mission-impact-sub {
  font-size: 0.65rem;
  color: var(--text-3);
  margin-top: 2px;
}

/* ── IMPROVED EMPTY STATES ───────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  max-width: 360px;
  margin: 0 auto;
}
.empty-state .es-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  opacity: 0.7;
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.empty-state .es-title {
  font-family: var(--font-brand);
  font-size: var(--font-size-lg, 1.05rem);
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 8px;
}
.empty-state .es-desc {
  font-size: 0.82rem;
  color: var(--text-3);
  line-height: 1.5;
  margin-bottom: 16px;
}
.empty-state .es-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--r-sm);
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.2s;
}
.empty-state .es-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb),0.3);
}

/* ── WIDGET STATE MANAGEMENT ─────────────────────────────────── */
.widget-state-error {
  padding: 20px;
  text-align: center;
  background: rgba(239,68,68,0.05);
  border: 1px solid rgba(239,68,68,0.1);
  border-radius: var(--r-sm);
  margin: 8px;
}
.widget-state-error .error-icon {
  font-size: 1.5rem;
  margin-bottom: 8px;
}
.widget-state-error .error-msg {
  font-size: 0.78rem;
  color: var(--text-3);
  margin-bottom: 12px;
}
.widget-retry-btn {
  padding: 6px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
}
.widget-retry-btn:hover {
  background: var(--accent-light);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb),0.2);
}

.widget-stale-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.58rem;
  font-family: var(--font-mono);font-variant-numeric:tabular-nums;
  color: var(--amber);
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(252,196,25,0.08);
  border: 1px solid rgba(252,196,25,0.12);
}

/* ── IMPROVED NOTIFICATION BADGES ────────────────────────────── */
.notif-badge-improved {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--red);
  color: white;
  font-size: 0.6rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--card-bg);
  animation: badge-pop 0.3s cubic-bezier(0.68,-0.55,0.265,1.55);
}
@keyframes badge-pop {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

/* ── LEADERBOARD IMPROVEMENTS ────────────────────────────────── */
.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.15s ease;
}
.leaderboard-row:hover {
  background: var(--surface-hover);
}
.leaderboard-row:last-child {
  border-bottom: none;
}
.leaderboard-rank {
  font-family: var(--font-mono);font-variant-numeric:tabular-nums;
  font-weight: 800;
  font-size: 0.85rem;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
  color: var(--text-3);
}
.leaderboard-rank.gold { color: var(--color-medal-gold, #FFD700); }
.leaderboard-rank.silver { color: var(--color-medal-silver, #C0C0C0); }
.leaderboard-rank.bronze { color: var(--color-medal-bronze, #CD7F32); }

/* ── COACHING CARD IMPROVEMENTS ──────────────────────────────── */
.coaching-tip {
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(51,154,240,0.04), rgba(var(--accent-rgb),0.02));
  border: 1px solid rgba(51,154,240,0.08);
  border-left: 3px solid var(--blue);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 0.78rem;
  color: var(--text-2);
  line-height: 1.5;
  margin-bottom: 8px;
}
.coaching-tip strong {
  color: var(--text-1);
  font-weight: 700;
}

/* ── PROGRESS RING (for daily goals) ─────────────────────────── */
.progress-ring-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.progress-ring-text {
  position: absolute;
  text-align: center;
}

/* ── MICRO-INTERACTIONS ──────────────────────────────────────── */
@keyframes count-up {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-count {
  animation: count-up 0.4s ease both;
}

@keyframes slide-in-right {
  0% { opacity: 0; transform: translateX(20px); }
  100% { opacity: 1; transform: translateX(0); }
}
.slide-in {
  animation: slide-in-right 0.3s ease both;
}

/* Staggered fade for list items */
.stagger-fade > * {
  opacity: 0;
  animation: viewIn 0.35s ease forwards;
}
.stagger-fade > *:nth-child(1) { animation-delay: 0ms; }
.stagger-fade > *:nth-child(2) { animation-delay: 40ms; }
.stagger-fade > *:nth-child(3) { animation-delay: 80ms; }
.stagger-fade > *:nth-child(4) { animation-delay: 120ms; }
.stagger-fade > *:nth-child(5) { animation-delay: 160ms; }
.stagger-fade > *:nth-child(6) { animation-delay: 200ms; }
.stagger-fade > *:nth-child(7) { animation-delay: 240ms; }
.stagger-fade > *:nth-child(8) { animation-delay: 280ms; }

/* ── ACCESSIBILITY ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .mission-impact-icon { animation: none; }
  .empty-state .es-icon { animation: none; }
}

/* Focus visible - keyboard accessibility */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.nav-btn:focus-visible,
.kpi-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

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

/* ── MOBILE IMPROVEMENTS ─────────────────────────────────────── */
@media (max-width: 600px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .kpi-card {
    padding: 12px !important;
  }
  .kpi-card .kpi-value,
  .kpi-value {
    font-size: 1.1rem !important;
  }
  .dashboard-grid {
    grid-template-columns: 1fr !important;
  }
  .content-wrapper {
    padding: 12px 14px 80px !important;
  }
  .topbar {
    padding: 0 14px !important;
  }
  .topbar-title {
    font-size: 1rem !important;
  }
  .data-table {
    font-size: 0.75rem;
  }
  .data-table th,
  .data-table td {
    padding: 6px 6px !important;
  }
  .mission-impact {
    padding: 12px 14px;
    gap: 12px;
  }
  .mission-impact-number {
    font-size: 1.1rem;
  }
  /* Better touch targets */
  .nav-btn,
  .leaderboard-row,
  .data-table tr {
    min-height: 44px;
  }
  .empty-state {
    padding: 32px 16px;
  }
  /* Auto-collapse sidebar on mobile */
  .sidebar:not(.sidebar-open) {
    width: var(--sw-x, 72px) !important;
  }
  .sidebar:not(.sidebar-open) .nav-label,
  .sidebar:not(.sidebar-open) .brand-name,
  .sidebar:not(.sidebar-open) .brand-sub {
    display: none !important;
  }
}
/* Tablet breakpoint */
@media (min-width: 601px) and (max-width: 1024px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .dashboard-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── TV DASHBOARD MISSION ZONE ───────────────────────────────── */
.tv-mission-zone {
  background: linear-gradient(135deg, rgba(228,0,43,0.08), rgba(255,184,28,0.04));
  border: 1px solid rgba(228,0,43,0.15);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.tv-mission-icon {
  font-size: 2rem;
  animation: heartbeat 2s ease infinite;
}
.tv-mission-number {
  font-family: var(--mono);font-variant-numeric:tabular-nums;
  font-size: 28px;
  font-weight: 900;
  color: var(--text, #fff);
}
.tv-mission-label {
  font-size: 11px;
  color: var(--text2, rgba(255,255,255,0.5));
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── CHART IMPROVEMENTS ──────────────────────────────────────── */
.chart-container {
  position: relative;
}
.chart-container canvas {
  max-width: 100%;
}
.chart-fallback {
  font-size: 0.75rem;
  color: var(--text-3);
  padding: 8px;
}

/* ── TOOLTIP IMPROVEMENTS ────────────────────────────────────── */
.info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.55rem;
  color: var(--text-3);
  cursor: help;
  flex-shrink: 0;
}
.info-tip {
  position: relative;
}
.info-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--card-solid, #1a1e2e);
  color: var(--text-2);
  font-size: 0.68rem;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: var(--sh-md);
  white-space: nowrap;
  max-width: 250px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 10000;
}
.info-tip:hover::after {
  opacity: 1;
}

/* ── CONFETTI CELEBRATION ────────────────────────────────────── */
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99998;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  top: -10px;
  border-radius: 2px;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  0% { 
    transform: translateY(-10px) rotate(0deg); 
    opacity: 1; 
  }
  100% { 
    transform: translateY(100vh) rotate(720deg); 
    opacity: 0; 
  }
}

/* ── BATTLE PASS TRACK ───────────────────────────────────────── */
.bp-track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding: 16px 0;
  scrollbar-width: thin;
}
.bp-tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
  position: relative;
}
.bp-tier::after {
  content: '';
  position: absolute;
  top: 28px;
  left: 50%;
  width: 100%;
  height: 3px;
  background: var(--border);
}
.bp-tier:last-child::after { display: none; }
.bp-tier.unlocked::after { background: var(--success); }
.bp-tier-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  position: relative;
  z-index: 1;
  transition: all 0.2s;
}
.bp-tier.unlocked .bp-tier-icon {
  border-color: var(--success);
  background: rgba(var(--success-rgb),0.08);
}
.bp-tier.current .bp-tier-icon {
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb),0.3);
  animation: pulse-dot 2s ease infinite;
}
.bp-tier-label {
  font-size: 0.6rem;
  color: var(--text-3);
  margin-top: 6px;
  text-align: center;
}
.bp-tier.unlocked .bp-tier-label { color: var(--success); }

/* ── DUEL ARENA ──────────────────────────────────────────────── */
.duel-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
  margin-bottom: 10px;
}
.duel-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.duel-player {
  text-align: center;
  flex: 1;
}
.duel-player-name {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-1);
  margin-top: 6px;
}
.duel-divider {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--text-3);
}

/* ── QUIZ WIDGET ─────────────────────────────────────────────── */
.quiz-option {
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.85rem;
  color: var(--text-1);
  margin-bottom: 8px;
}
.quiz-option:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb),0.04);
}
.quiz-option.correct {
  border-color: var(--green);
  background: rgba(var(--accent-rgb),0.08);
}
.quiz-option.wrong {
  border-color: var(--red);
  background: rgba(239,68,68,0.08);
}

/* ── PREDICTION WIDGET ───────────────────────────────────────── */
.prediction-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
  margin-bottom: 10px;
}
.prediction-options {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.prediction-btn {
  flex: 1;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--text-2);
}
.prediction-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.prediction-btn.selected {
  background: rgba(var(--accent-rgb),0.08);
  border-color: var(--accent);
  color: var(--accent);
}

/* ── BINGO GRID ──────────────────────────────────────────────── */
.bingo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  max-width: 400px;
  margin: 0 auto;
}
.bingo-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-2);
  text-align: center;
  padding: 4px;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.2;
}
.bingo-cell:hover {
  border-color: var(--accent);
}
.bingo-cell.completed {
  background: rgba(var(--success-rgb),0.12);
  border-color: rgba(var(--success-rgb),0.3);
  color: var(--success);
}
.bingo-cell.center {
  background: var(--accent);
  color: white;
  font-weight: 800;
}

/* ── PRINT STYLES ────────────────────────────────────────────── */
@media print {
  body { background: white; color: black; }
  .sidebar, .topbar, .mobile-nav, .toast-container { display: none !important; }
  .content-wrapper { padding: 0 !important; overflow: visible !important; }
  .view { display: block !important; }
  .kpi-card, .glass-card, .section-card { 
    break-inside: avoid; 
    box-shadow: none !important; 
    border: 1px solid #ddd !important;
    background: white !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ADDITIONAL IMPROVEMENTS - Container queries, dark mode, slide-over
═══════════════════════════════════════════════════════════════════ */

/* ── DARK MODE AUTO-DETECT ───────────────────────────────────── */
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) {
    /* Auto-apply light theme when system prefers light and no explicit dark override */
  }
}

/* ── CONTAINER QUERIES for responsive widgets ────────────────── */
.kpi-card,
.glass-card,
.campaign-card,
.emp-card,
.section-card {
  container-type: inline-size;
}

/* KPI card adapts to container width */
@container (max-width: 200px) {
  .kpi-label { font-size: 0.6rem !important; }
  .kpi-value { font-size: 1rem !important; }
  .kpi-sub { font-size: 0.6rem !important; }
}

@container (min-width: 300px) {
  .campaign-card-stats {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}
@container (max-width: 250px) {
  .campaign-card-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── SLIDE-OVER PANEL - for drill-down without losing context ── */
.slide-over {
  position: fixed;
  top: 0;
  right: 0;
  width: min(480px, 90vw);
  height: 100vh;
  background: var(--card-solid);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 32px rgba(0,0,0,0.3);
  z-index: 9998;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.slide-over.open {
  transform: translateX(0);
}
.slide-over-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.2);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 9997;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.slide-over-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.slide-over-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.slide-over-title {
  font-family: var(--font-brand);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-1);
}
.slide-over-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-2);
  font-size: 0.85rem;
  transition: all 0.15s;
}
.slide-over-close:hover {
  background: var(--border);
  color: var(--text-1);
}
.slide-over-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* ── BREAK REMINDER ──────────────────────────────────────────── */
.break-reminder {
  position: fixed;
  bottom: 80px;
  right: 20px;
  z-index: 9990;
  background: var(--card-solid);
  border: 1px solid rgba(51,154,240,0.2);
  border-radius: var(--r);
  padding: 14px 18px;
  max-width: 280px;
  box-shadow: var(--sh-md);
  animation: slide-in-right 0.3s ease;
}
.break-reminder-title {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text-1);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.break-reminder-msg {
  font-size: 0.72rem;
  color: var(--text-3);
  line-height: 1.4;
}
.break-reminder-dismiss {
  margin-top: 8px;
  padding: 4px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  font-size: 0.68rem;
  color: var(--text-2);
  cursor: pointer;
  font-family: var(--font-brand);
  font-weight: 600;
}

/* ── TEAM BATTLE WIDGET ──────────────────────────────────────── */
.team-battle-card {
  background: linear-gradient(135deg, rgba(51,154,240,0.04), rgba(132,94,247,0.03));
  border: 1px solid rgba(51,154,240,0.1);
  border-radius: var(--r);
  padding: 16px;
  margin-bottom: 12px;
}
.team-battle-vs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.team-battle-side {
  flex: 1;
  text-align: center;
}
.team-battle-name {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-1);
  margin-bottom: 4px;
}
.team-battle-score {
  font-family: var(--font-mono);font-variant-numeric:tabular-nums;
  font-size: 1.6rem;
  font-weight: 800;
}
.team-battle-divider {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--text-3);
  flex-shrink: 0;
}
.team-battle-progress {
  margin-top: 12px;
  height: 8px;
  background: var(--surface);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
}
.team-battle-fill-left {
  height: 100%;
  background: var(--blue);
  border-radius: 4px 0 0 4px;
  transition: width 1s ease;
}
.team-battle-fill-right {
  height: 100%;
  background: var(--purple);
  border-radius: 0 4px 4px 0;
  transition: width 1s ease;
  margin-left: auto;
}

/* ── PULSE SURVEY ────────────────────────────────────────────── */
.pulse-survey {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.04), rgba(51,154,240,0.03));
  border: 1px solid rgba(var(--accent-rgb),0.1);
  border-radius: var(--r);
  padding: 16px;
  margin-bottom: 12px;
}
.pulse-survey-q {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-1);
  margin-bottom: 10px;
}
.pulse-survey-options {
  display: flex;
  gap: 6px;
}
.pulse-survey-btn {
  flex: 1;
  padding: 8px 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  font-size: 0.7rem;
  color: var(--text-2);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  font-family: var(--font-brand);
  font-weight: 600;
}
.pulse-survey-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(var(--accent-rgb),0.04);
}

/* ── WORKLOAD BALANCE INDICATOR ──────────────────────────────── */
.workload-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface);
  border-radius: var(--r-sm);
  font-size: 0.7rem;
  margin-bottom: 8px;
}
.workload-bar {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.workload-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}
.workload-fill.low { background: var(--green); }
.workload-fill.medium { background: var(--amber); }
.workload-fill.high { background: var(--red); }

/* ── SLIDE-OVER PANEL (drill-down without losing context) ──── */
.slide-panel-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,0.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.slide-panel-backdrop.open { opacity: 1; pointer-events: auto; }
.slide-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 500px;
  max-width: 92vw;
  z-index: 9999;
  background: var(--card-solid);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 32px rgba(0,0,0,0.3);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.slide-panel.open { transform: translateX(0); }
.slide-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.slide-panel-title {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-1);
}
.slide-panel-close {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text-2);
  font-size: 0.9rem;
  transition: all 0.15s;
}
.slide-panel-close:hover { background: var(--border); color: var(--text-1); }
.slide-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.slide-panel-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* ── CONTAINER QUERIES - widgets adapt to their container ──── */
@supports (container-type: inline-size) {
  
  
  .glass-card { container-type: inline-size; }
  
  @container (max-width: 400px) {
    .kpi-card { padding: 10px !important; }
    .kpi-card .kpi-value, .kpi-value { font-size: 1rem !important; }
    .kpi-label { font-size: 0.6rem !important; }
  }
  @container (max-width: 300px) {
    .stat-item { font-size: 0.7rem; }
    .campaign-card-stats { grid-template-columns: repeat(2, 1fr) !important; }
  }
}

/* ── BREAK REMINDER WIDGET ───────────────────────────────────── */
.break-reminder {
  position: fixed;
  bottom: 80px;
  right: 20px;
  z-index: 9000;
  background: var(--card-solid);
  border: 1px solid rgba(51,154,240,0.2);
  border-radius: var(--r);
  padding: 14px 18px;
  box-shadow: var(--sh-md);
  max-width: 280px;
  animation: slide-in-right 0.3s ease;
}
.break-reminder-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: 0.9rem;
}
.break-reminder-title {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-1);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.break-reminder-text {
  font-size: 0.75rem;
  color: var(--text-3);
  line-height: 1.4;
}

/* ── PULSE SURVEY ────────────────────────────────────────────── */
.pulse-survey {
  background: linear-gradient(135deg, rgba(51,154,240,0.04), rgba(132,94,247,0.03));
  border: 1px solid rgba(51,154,240,0.1);
  border-radius: var(--r);
  padding: 16px;
  margin-bottom: 12px;
}
.pulse-survey-q {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-1);
  margin-bottom: 10px;
}
.pulse-survey-options {
  display: flex;
  gap: 6px;
}
.pulse-survey-opt {
  flex: 1;
  padding: 8px 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 0.72rem;
  color: var(--text-2);
  font-family: var(--font-brand);
  font-weight: 600;
}
.pulse-survey-opt:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb),0.04);
}

/* (Mobile nav styles moved to enhanced section below) */

/* ═══════════════════════════════════════════════════════════════
   CRITICAL CSS FIXES - Addressing all audit issues
═══════════════════════════════════════════════════════════════ */

/* ── FIX: Table horizontal scroll on mobile ──────────────────── */
@media (max-width: 768px) {
  .data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .data-table thead,
  .data-table tbody,
  .data-table tr {
    display: table;
    width: 100%;
    table-layout: auto;
  }
  /* Fade hint on right edge to indicate scrollability */
  .section-body:has(.data-table) {
    position: relative;
  }
}

/* ── FIX: Reduce backdrop-filter on low-power devices ────────── */
@media (prefers-reduced-motion: reduce), (max-width: 768px) {
  .sidebar,
  .topbar,
  .toast,
  .app-modal-backdrop,
  .notif-panel {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Compensate with solid backgrounds */
  .sidebar { background: var(--sidebar-bg) !important; }
  .topbar { background: var(--topbar-bg) !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   .app-modal - bruges af _openPhonerPrediction, _openLiveSessionDetail,
   _openLiveSettings m.fl. Uden disse styles var modalerne helt
   gennemsigtige (ingen baggrund, ingen position) og layeredes direkte
   oven på live-timelinen.
   ═══════════════════════════════════════════════════════════════════ */
.app-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 20px 20px;
  overflow-y: auto;
  opacity: 0;
  transition: opacity .18s ease-out;
}
.app-modal.open {
  display: flex;
  opacity: 1;
}
.app-modal-content {
  background: var(--card-solid, var(--card, #1a1f2e));
  color: var(--text-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255,255,255,0.04);
  width: 100%;
  max-width: 620px;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: app-modal-rise .25s cubic-bezier(.2,.9,.3,1);
}
@keyframes app-modal-rise {
  from { transform: translateY(18px) scale(.98); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.app-modal-header {
  flex-shrink: 0;
  background: var(--card-solid, var(--card));
}
.app-modal-title {
  color: var(--text-1);
  margin: 0;
}
.app-modal-close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s, border-color .12s;
  flex-shrink: 0;
}
.app-modal-close:hover {
  background: color-mix(in srgb, var(--red, #ED8A8F) 12%, transparent);
  color: var(--red, #ED8A8F);
  border-color: var(--red, #ED8A8F);
}
/* Light-tema for disse komponenter (modal/section-card/glass-header/
   mission-impact/coaching-tip/break-reminder/pulse-survey) ejes nu af
   bauhaus-skin.css (kobolt-bauhaus). Det forældede grøn/rød/blå-tint-system
   er fjernet ved kilden — skinnen er light-temaets eneste sandhed. */

/* ── FIX: Phoner 5-col KPI grid breaks on mobile ────────────── */
@media (max-width: 768px) {
  .bv-dash[style*="repeat(5"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .bv-dash[style*="repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .bv-dash[style*="repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Fix inline grid-template-columns from JS */
  [style*="grid-template-columns:repeat(auto-fill,minmax(240px"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(auto-fill,minmax(150px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 380px) {
  .bv-dash {
    grid-template-columns: 1fr !important;
  }
}

/* ── FIX: Content max-width centering on ultrawide ───────────── */
.content-wrapper {
  max-width: 1400px;
  margin: 0 auto;
}
@media (min-width: 1600px) {
  .content-wrapper {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* ── FIX: Minimum font sizes for accessibility ───────────────── */
.data-table td,
.data-table th,
.kpi-label,
.stat-label,
.tag,
.kpi-sub,
.section-badge {
  font-size: max(0.68rem, 11px) !important;
}
/* Ensure very small text is still legible */
[style*="font-size:.5"], [style*="font-size:.55"], [style*="font-size:.58"] {
  font-size: max(0.65rem, 10.4px) !important;
}

/* ── FIX: Focus states for all interactive elements ──────────── */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
[onclick]:focus-visible,
.data-table tr:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Remove focus ring on mouse clicks */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

/* ── FIX: Toast z-index consistency - must be above confetti (99998) ── */
.toast-container {
  z-index: 99999 !important;
}

/* ── Mobile nav: show mobile-tabs on small screens, hide old .mobile-nav ── */
@media (max-width: 768px) {
  .mobile-tabs { display: flex !important; }
  .mobile-nav { display: none !important; }
}
@media (min-width: 769px) {
  .mobile-tabs { display: none !important; }
  .mobile-nav { display: none !important; }
}

/* ── FIX: Inline style overrides for dark/light mode ─────────── */
[data-theme="light"] [style*="color:var(--text-1)"],
[data-theme="light"] [style*="color: var(--text-1)"] {
  color: var(--text-1) !important;
}
[data-theme="light"] [style*="background:var(--surface)"],
[data-theme="light"] [style*="background: var(--surface)"] {
  background: var(--surface) !important;
}

/* ── FIX: Card hover transform causes layout reflow on Safari ── */
@supports (-webkit-touch-callout: none) {
  .kpi-card:hover,
  .glass-card:hover,
  .emp-card:hover {
    transform: none !important;
  }
}

/* ── FIX: Smooth transition for sidebar mobile overlay ───────── */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    left: 0 !important;
    transition: transform 0.25s ease;
  }
  .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 8px 0 32px rgba(0,0,0,0.4);
  }
  .sidebar.mobile-open ~ .sidebar-backdrop,
  .sidebar-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
  }
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 199;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
}

/* ── FIX: Chart container minimum height ─────────────────────── */
.bv-chart-lg {
  min-height: 180px;
  position: relative;
}
.bv-chart-lg canvas {
  max-height: 280px;
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN SYSTEM - Utility classes for migrating inline styles
═══════════════════════════════════════════════════════════════ */

/* Layout */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-between { justify-content: space-between; }
.flex-center { align-items: center; }
.flex-1 { flex: 1; min-width: 0; }
.gap-xs { gap: 4px; }
.gap-sm { gap: 8px; }
.gap-md { gap: 12px; }
.gap-lg { gap: 16px; }
.gap-xl { gap: 20px; }

/* Typography */
.mono { font-family: var(--font-mono) !important; }
.brand { font-family: var(--font-brand) !important; }
.font-bold { font-weight: 700 !important; }
.font-black { font-weight: 800 !important; }
.text-xs { font-size: var(--text-xs) !important; }
.text-sm { font-size: var(--text-sm) !important; }
.text-md { font-size: var(--text-md) !important; }
.text-lg { font-size: var(--text-lg) !important; }
.text-1 { color: var(--text-1) !important; }
.text-2 { color: var(--text-2) !important; }
.text-3 { color: var(--text-3) !important; }
.c-green { color: var(--green) !important; }
.c-amber { color: var(--amber) !important; }
.c-red { color: var(--red) !important; }
.c-blue { color: var(--blue) !important; }

/* Spacing */
.mb-0 { margin-bottom: 0 !important; }
.mb-xs { margin-bottom: 4px !important; }
.mb-sm { margin-bottom: 8px !important; }
.mb-md { margin-bottom: 12px !important; }
.mb-lg { margin-bottom: 16px !important; }
.mt-sm { margin-top: 8px !important; }
.mt-md { margin-top: 12px !important; }
.p-0 { padding: 0 !important; }
.p-sm { padding: 8px !important; }
.p-md { padding: 12px !important; }
.p-lg { padding: 16px !important; }
.px-md { padding-left: 12px !important; padding-right: 12px !important; }
.py-sm { padding-top: 8px !important; padding-bottom: 8px !important; }

/* Card variants */
.card-accent-left { border-left: 3px solid var(--accent); border-radius: 0 var(--r-sm) var(--r-sm) 0 !important; }
.card-warn-left { border-left: 3px solid var(--amber); border-radius: 0 var(--r-sm) var(--r-sm) 0 !important; }
.card-danger-left { border-left: 3px solid var(--red); border-radius: 0 var(--r-sm) var(--r-sm) 0 !important; }

/* Grid utilities */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   CRITICAL LAYOUT FIXES - From design audit
═══════════════════════════════════════════════════════════════ */

/* FIX: Dashboard 2-col grid → adaptive */
#dashboard-inner {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
}

/* FIX: Leaderboard campaign tabs horizontal scroll */
#leaderboard-filters {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap !important;
  padding-bottom: 4px;
}
#leaderboard-filters .spectrum-camp-tab {
  white-space: nowrap;
  flex-shrink: 0;
}

/* FIX: Achievement progress bars too thin */
.bv-progress {
  height: 6px !important;
  border-radius: 3px;
}
.bv-progress-fill {
  height: 100%;
  border-radius: 3px;
}

/* FIX: Spectrum scatter points too small on mobile */
@media (max-width: 768px) {
  .spectrum-canvas-wrap canvas {
    min-height: 300px;
  }
}

/* FIX: Onboarding timeline overflow */
.ob-timeline {
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

/* FIX: Settings tab overflow */
#settings-content .spectrum-tabs,
#settings-content [style*="display:flex"][style*="gap:6px"] {
  overflow-x: auto;
  scrollbar-width: thin;
  flex-wrap: nowrap !important;
  padding-bottom: 4px;
}

/* FIX: Coaching card preview in collapsed state */
.coaching-card .section-header .section-title {
  max-width: calc(100% - 80px);
}

/* ══════════════════════════════════════════════════════════════
   CAMPAIGNS PAGE - redesigned
   ══════════════════════════════════════════════════════════════ */

/* ── KPI-fliser (summary → skimbare tal) ── */
.camp-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.camp-kpi-tile {
  position: relative;
  background: var(--card, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 14px);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.camp-kpi-tile.accent::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
}
.camp-kpi-tile .ckt-lab {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-3);
}
.camp-kpi-tile .ckt-val {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  margin-top: 6px;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
.camp-kpi-tile .ckt-val small {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text-2);
}
.camp-kpi-tile .ckt-meta {
  font-size: .72rem;
  color: var(--text-3);
  margin-top: 7px;
}
@media (max-width: 820px) { .camp-kpis { grid-template-columns: repeat(2, 1fr); } }

/* ── Performance group ── */
#campaigns-cards { counter-reset: camprank; }
.camp-group {
  margin-bottom: 22px;
}
.camp-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  margin-bottom: 9px;
}
.camp-group-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.camp-group-label {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-2);
}
.camp-group--above .camp-group-label { color: var(--green); }
.camp-group--close .camp-group-label { color: #d97706; }
.camp-group--below .camp-group-label { color: var(--red); }
.camp-group-count {
  font-size: .7rem;
  font-weight: 700;
  color: var(--text-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 9px;
  font-variant-numeric: tabular-nums;
}
.camp-group-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}

/* ── Campaign row ── */
.camp-row {
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: 10px;
  margin-bottom: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, border-color .15s;
  overflow: hidden;
  contain: layout style paint;
}
.camp-row:hover {
  transform: translateX(3px);
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.camp-row:active { transform: translateX(1px); }
.camp-row.open {
  transform: none;
  border-color: rgba(var(--accent-rgb),0.35);
  box-shadow: 0 4px 20px rgba(0,0,0,.10);
}
.camp-row.open:hover { transform: none; }

.camp-row { counter-increment: camprank; }
/* Rediger-blyant: skjult indtil hover/fokus/åben, så den ikke flyder i rækken */
.camp-row .camp-goal-edit { opacity: 0; transition: opacity .15s; }
.camp-row:hover .camp-goal-edit,
.camp-row:focus-within .camp-goal-edit,
.camp-row.open .camp-goal-edit { opacity: 1; }
@media (hover: none) { .camp-row .camp-goal-edit { opacity: 1; } }
.camp-row-main {
  display: grid;
  grid-template-columns: 3px 30px 1fr minmax(190px, 260px) 96px 34px;
  align-items: center;
  gap: 0;
  min-width: 0;
}

/* Status indicator bar (left edge) */
.camp-row-bar {
  width: 3px;
  align-self: stretch;
  border-radius: 3px 0 0 3px;
}

/* Rank number (CSS counter → survives live-update DOM-rebuild) */
.camp-row-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  font-weight: 800;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.camp-row-rank::before { content: counter(camprank); }
.camp-s-green > .camp-row-main > .camp-row-rank,
.camp-s-amber > .camp-row-main > .camp-row-rank { color: var(--text-2); }

/* Main content area */
.camp-row-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 16px 11px 10px;
  min-width: 0;
}
.camp-row-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: -.01em;
  color: var(--text-1);
  min-width: 0;
}
.camp-row-name > span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.camp-row-stats {
  display: flex;
  gap: 0;
  font-size: .76rem;
  color: var(--text-3);
  flex-wrap: wrap;
  align-items: baseline;
}
.camp-row-stats > span:not(:last-child)::after {
  content: "·";
  margin: 0 9px;
  color: var(--text-3);
  opacity: .5;
}
.camp-row-stats strong {
  color: var(--text-1);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.camp-row-trend {
  font-size: .72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.camp-row-trend.up   { color: var(--green); }
.camp-row-trend.down { color: var(--red); }
.camp-row-trend.flat { color: var(--text-3); }

/* ── Målopfyldelses-bar (fylder den tidligere døde midterzone) ── */
.camp-row-prog {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 18px;
}
.camp-row-prog-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: .68rem;
  color: var(--text-3);
}
.camp-prog-togoal { font-weight: 700; color: var(--text-2); }
.camp-prog-togoal.over   { color: var(--green); }
.camp-prog-togoal.behind { color: var(--red); }
.camp-prog-track {
  position: relative;
  height: 9px;
  border-radius: 999px;
  background: rgba(128,128,128,.16);
  overflow: hidden;
}
.camp-prog-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .35s cubic-bezier(.22,1,.36,1);
}
.camp-prog-goalmark {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  border-radius: 2px;
  background: var(--text-3);
  opacity: .5;
}
.camp-row-prog-empty {
  padding: 0 18px;
  font-size: .7rem;
  color: var(--text-3);
  font-style: italic;
}

/* Index badge (right side) */
.camp-row-idx {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: 8px 4px 8px 14px;
  text-align: right;
}
.camp-row-idx-val {
  font-variant-numeric: tabular-nums;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
}
.camp-row-idx-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .58rem;
  color: var(--text-3);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
.camp-row-idx-label .camp-idx-sep { opacity: .6; }

@media (max-width: 820px) {
  .camp-row-main { grid-template-columns: 3px 26px 1fr 84px 30px; }
  .camp-row-prog { display: none; }
}

/* ── Color utility classes ── */
.camp-c-green  { color: var(--green); }
.camp-c-lime   { color: #84cc16; }
.camp-c-amber  { color: #fbbf24; }
.camp-c-orange { color: #f97316; }
.camp-c-red    { color: var(--red); }
.camp-c-muted  { color: var(--text-3); }

.camp-bg-green  { background: var(--green); }
.camp-bg-lime   { background: #84cc16; }
.camp-bg-amber  { background: #fbbf24; }
.camp-bg-orange { background: #f97316; }
.camp-bg-red    { background: var(--red); }
.camp-bg-muted  { background: var(--text-3); }

/* ── Animeret sparkline (14 dages udvikling i kampagne-rækken) ── */
.camp-row-spark-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 4px;
}
.camp-spark {
  display: block;
  overflow: visible;
}
.camp-spark-empty {
  width: 90px;
  height: 26px;
  background: repeating-linear-gradient(90deg, rgba(128,128,128,.12) 0 2px, transparent 2px 5px);
  mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
  border-radius: 2px;
}
.camp-spark-line {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: camp-spark-draw 1.1s cubic-bezier(.25,.8,.3,1) forwards;
}
.camp-spark-big .camp-spark-line {
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  animation: camp-spark-draw-big 1.4s cubic-bezier(.25,.8,.3,1) forwards;
  filter: drop-shadow(0 0 4px rgba(var(--accent-rgb),.35));
}
.camp-spark-goal { opacity: 0; animation: camp-spark-goal-fade .6s ease-out .4s forwards; }
.camp-spark-goal-lbl { opacity: 0; animation: camp-spark-goal-fade .6s ease-out .6s forwards; }
.camp-spark-hit {
  cursor: crosshair;
}
.camp-spark-hit:hover {
  fill: rgba(var(--accent-rgb),0.06);
}
@keyframes camp-spark-draw     { to { stroke-dashoffset: 0; } }
@keyframes camp-spark-draw-big { to { stroke-dashoffset: 0; } }
@keyframes camp-spark-goal-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .camp-spark-line, .camp-spark-big .camp-spark-line { stroke-dashoffset: 0; animation: none; }
  .camp-spark-goal, .camp-spark-goal-lbl { opacity: 1; animation: none; }
}

/* ── Realtime hover-tooltip (delt på tværs af alle sparklines) ── */
.camp-spark-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-9999px, -9999px);
  pointer-events: none;
  z-index: 10000;
  background: var(--surface-1, #0f1724);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: .72rem;
  color: var(--text-1);
  box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(var(--accent-rgb),.08);
  opacity: 0;
  transition: opacity .12s ease-out;
  min-width: 180px;
  max-width: 240px;
  backdrop-filter: blur(6px);
}
.camp-spark-tooltip .cstip-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .76rem;
  color: var(--text-1);
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.camp-spark-tooltip .cstip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}
.camp-spark-tooltip .cstip-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
  font-size: .7rem;
  color: var(--text-3);
}
.camp-spark-tooltip .cstip-row strong {
  color: var(--text-1);
  font-family: var(--font-mono);font-variant-numeric:tabular-nums;
  font-weight: 700;
}
.camp-spark-tooltip .cstip-status {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  font-size: .68rem;
  font-weight: 700;
  text-align: center;
}
.camp-spark-tooltip .cstip-ok  { color: var(--bh-green, #57C29A); }
.camp-spark-tooltip .cstip-mid { color: var(--bh-pop, #F2A965); }
.camp-spark-tooltip .cstip-bad { color: var(--bh-danger, #ED8A8F); }
/* .camp-spark-tooltip light-tema ejes nu af bauhaus-skin.css (hvid + flad skygge). */

/* ── Stor sparkline i expand-panel ── */
.camp-expand-chart {
  background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px 12px;
  margin-bottom: 16px;
}
[data-theme="light"] .camp-expand-chart {
  background: linear-gradient(180deg, rgba(0,0,0,.015), rgba(0,0,0,0));
}
.camp-expand-spark {
  width: 100%;
  overflow: hidden;
  padding: 8px 0 4px;
}
.camp-expand-spark .camp-spark-big {
  width: 100%;
  height: 110px;
  display: block;
}
.camp-expand-legend {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: .62rem;
  color: var(--text-3);
  font-weight: 600;
  flex-wrap: wrap;
}
.camp-legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
  box-shadow: 0 0 6px currentColor;
  opacity: .9;
}
.camp-legend-goal {
  margin-left: auto;
  letter-spacing: .4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.camp-legend-goal::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 1px;
  border-top: 1px dashed currentColor;
  opacity: .5;
}
.camp-legend-prev {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  opacity: .85;
}

/* ── Expand chevron i højre side ── */
.camp-expand-btn {
  background: none;
  border: none;
  width: 32px;
  height: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  cursor: pointer;
  transition: color .15s, background .15s;
  border-left: 1px solid var(--border);
}
.camp-expand-btn:hover {
  color: var(--accent);
  background: rgba(var(--accent-rgb),0.06);
}
.camp-expand-btn svg {
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.camp-row.open .camp-expand-btn {
  color: var(--accent);
  background: rgba(var(--accent-rgb),0.08);
}
.camp-row.open .camp-expand-btn svg {
  transform: rotate(180deg);
}

/* ── Expand-panel (folder ud under rækken) ── */
.camp-expand-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .45s cubic-bezier(.4,0,.2,1),
              opacity .3s ease-out,
              padding .45s cubic-bezier(.4,0,.2,1);
  padding: 0 18px;
  border-top: 1px solid transparent;
  cursor: default;
}
.camp-row.open .camp-expand-panel {
  max-height: 1400px;
  opacity: 1;
  padding: 18px;
  border-top-color: var(--border);
}

/* Graf-kort: hæv sparkline op i et nested kort (matcher det nye kort-sprog) */
.camp-expand-chart {
  margin-bottom: 16px;
  background: var(--surface-2, rgba(128,128,128,.05));
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 14px);
  padding: 14px 16px;
}

/* ── Redesignet expand-panel: nøgletals-væg + phoners/budget-kolonner ── */
.camp-exp-band-title {
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 18px 2px 10px;
}
.camp-stat-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 14px);
  overflow: hidden;
}
.camp-stat-tile {
  background: var(--card, var(--surface));
  padding: 11px 13px;
  min-width: 0;
}
.camp-stat-tile.accent {
  background: color-mix(in srgb, rgba(var(--accent-rgb), .10) 65%, var(--card, var(--surface)));
}
.camp-stat-tile .cst-lbl {
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.camp-stat-tile .cst-val {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-1);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.camp-stat-tile .cst-sub { font-size: .6rem; font-weight: 600; color: var(--text-3); }
.camp-stat-tile .cst-delta { font-size: .6rem; font-weight: 700; }

.camp-exp-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.camp-exp-main { min-width: 0; display: flex; flex-direction: column; }
.camp-exp-main .camp-exp-band-title:first-of-type { margin-top: 14px; }
.camp-exp-side { min-width: 0; display: flex; flex-direction: column; }
/* Phoner-tabel kan være bred (mange kolonner) → scroll i egen container */
.camp-exp-phoners-scroll { overflow-x: auto; }
/* Budget-mål følger efter phonere i side-kolonnen → let adskillelse */
.camp-exp-side .camp-expand-stats { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--border); }
.camp-exp-side .camp-stats-grid { grid-template-columns: 1fr 1fr; }
.camp-exp-side .camp-expand-open { align-self: flex-start; margin-top: 16px; }
@media (max-width: 900px) {
  .camp-exp-cols { grid-template-columns: 1fr; }
}
.camp-expand-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.camp-expand-title {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .6px;
  color: var(--text-3);
}
.camp-expand-sub {
  font-size: .68rem;
  color: var(--text-2);
  font-weight: 600;
}

.camp-expand-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 14px;
}
/* 2-col layout - Nøgletal kompakt, Top phoners bredere så salg/timer/SPT/beløb
   alle kan vises uden at krybe ind på hinanden. */
.camp-expand-grid.camp-expand-grid-2 {
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
}
.camp-expand-col {
  min-width: 0;
}
.camp-expand-col-title {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .6px;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

/* Nøgletal som flise-grid (2-kolonne) i stedet for løs liste */
.camp-ns-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 14px);
  overflow: hidden;
  margin-top: 4px;
}
.camp-ns-list .camp-kpi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 9px 11px;
  background: var(--card, var(--surface));
}
.camp-ns-list .camp-kpi > span:first-child {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-3);
}
.camp-ns-list .camp-kpi strong {
  font-size: 1rem;
}
.camp-kpi {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  font-size: .72rem;
  color: var(--text-3);
}
.camp-kpi strong {
  color: var(--text-1);
  font-weight: 700;
  font-family: var(--font-mono);font-variant-numeric:tabular-nums;
}
.camp-kpi-sub {
  font-size: .62rem;
  color: var(--text-3);
  font-weight: 500;
  margin-left: 2px;
}

/* Top Phoners (campaign-detail) - header + rows aligneres på samme grid.
   12 kolonner: rank · phoner · salg · timer · SPT · hitrate · effekt · genopkald · afsluttede · beløb · gns/salg · anomali */
.camp-top-header,
.camp-top-row {
  display: grid;
  grid-template-columns: 26px minmax(120px,1.4fr) 56px 56px 70px 70px 56px 70px 70px 70px 70px 28px;
  gap: 10px;
  align-items: center;
}
.camp-top-anomaly {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  cursor: help;
  filter: drop-shadow(0 0 4px rgba(245, 158, 11, .5));
  animation: anomalyPulse 2.5s ease-in-out infinite;
}
@keyframes anomalyPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.12); opacity: .85; }
}

/* Drag-handle på header-cells */
.camp-top-h-drag {
  cursor: grab;
  user-select: none;
  text-align: right;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background .15s ease, color .15s ease;
}
.camp-top-h-drag:hover {
  background: rgba(var(--accent-rgb),.08);
  color: var(--text-1);
}
.camp-top-h-drag.dragging {
  opacity: .4;
  cursor: grabbing;
}
.camp-top-h-drag.drop-target {
  background: var(--accent);
  color: #fff;
}

/* Klik-på-dag modal */
.camp-spark-day-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.camp-spark-day-modal.show { pointer-events: auto; }
.cspd-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .2s ease;
}
.camp-spark-day-modal.show .cspd-overlay { opacity: 1; }
.cspd-card {
  position: relative;
  background: var(--card-solid, var(--surface));
  border: 1px solid var(--border);
  border-radius: 16px;
  width: min(95vw, 1100px);
  max-height: 88vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  transform: scale(.96) translateY(8px);
  opacity: 0;
  transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .18s ease;
}
.camp-spark-day-modal.show .cspd-card {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.cspd-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
}
.cspd-camp {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: 1rem;
  color: var(--text-1);
  margin-bottom: 2px;
}
.cspd-date {
  font-size: .74rem;
  color: var(--text-3);
  text-transform: capitalize;
}
.cspd-close {
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--text-3);
  cursor: pointer;
  padding: 0 4px;
  transition: color .15s;
}
.cspd-close:hover { color: var(--text-1); }
.cspd-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  font-size: .8rem;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
}
.cspd-summary strong { color: var(--text-1); font-weight: 700; }
.cspd-summary .cspd-sep { color: var(--text-3); opacity: .6; }
.cspd-body {
  padding: 14px 18px 18px;
  overflow-y: auto;
}
.camp-top-header {
  padding: 8px 4px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-3);
  font-weight: 700;
}
.camp-top-header > span:nth-child(n+3) {
  text-align: right;
}
.camp-top-row {
  padding: 8px 4px;
  font-size: .76rem;
  border-radius: 8px;
  transition: background .15s ease;
}
.camp-top-row:hover {
  background: var(--surface-hover);
}
.camp-top-cell {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
  white-space: nowrap;
  text-align: right;
  font-weight: 600;
}
.camp-top-cell.muted { color: var(--text-3); font-weight: 500; }
.camp-top-cell.pos { color: var(--accent); font-weight: 700; }
.camp-top-cell.mid { color: var(--color-warn, #f59e0b); font-weight: 700; }
.camp-top-cell.neg { color: var(--red, #ED8A8F); font-weight: 700; }
@media (max-width: 1100px) {
  /* På medium: skjul Beløb + Gns/salg (kan ses i full-width) */
  .camp-top-header,
  .camp-top-row { grid-template-columns: 26px minmax(0,1.4fr) 50px 50px 64px 64px 56px 64px 64px 28px; gap: 8px; }
  .camp-top-header > span:nth-child(10),
  .camp-top-header > span:nth-child(11),
  .camp-top-row > .camp-top-cell:nth-child(10),
  .camp-top-row > .camp-top-cell:nth-child(11) { display: none; }
}
@media (max-width: 800px) {
  /* På mobil: skjul Hitrate, Effekt, Genopkald, Afsluttede + Beløb + Gns/salg */
  .camp-top-header,
  .camp-top-row { grid-template-columns: 26px minmax(0,1fr) 56px 56px 64px 28px; gap: 8px; }
  .camp-top-header > span:nth-child(n+6):not(:last-child),
  .camp-top-row > .camp-top-cell:nth-child(n+6) { display: none; }
}
.camp-top-rank {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  color: var(--text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .68rem;
  font-weight: 700;
  border: 1px solid var(--border);
}
[data-theme="light"] .camp-top-rank {
  background: rgba(0,0,0,.03);
}
.camp-top-rank.r1 {
  background: linear-gradient(135deg, #fde68a, #fbbf24);
  color: #78350f;
  border-color: #f59e0b;
  box-shadow: 0 0 8px rgba(251,191,36,.35);
}
.camp-top-rank.r2 {
  background: linear-gradient(135deg, #e5e7eb, #9ca3af);
  color: #1f2937;
  border-color: #9ca3af;
}
.camp-top-rank.r3 {
  background: linear-gradient(135deg, #fed7aa, #c2855e);
  color: #431407;
  border-color: #c2855e;
}
.camp-top-name {
  color: var(--text-1);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.camp-top-val {
  font-family: var(--font-mono);font-variant-numeric:tabular-nums;
  color: var(--accent);
  font-weight: 700;
}
.camp-top-empty {
  color: var(--text-3);
  font-size: .7rem;
  font-style: italic;
  padding: 4px 0;
}
.camp-top-more {
  color: var(--text-3);
  font-size: .65rem;
  font-style: italic;
  padding: 6px 12px 2px;
  border-top: 1px dashed var(--border);
  margin-top: 2px;
}

.camp-expand-idx {
  font-family: var(--font-mono);font-variant-numeric:tabular-nums;
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 6px;
}
.camp-expand-idx-bar {
  width: 100%;
  height: 4px;
  background: rgba(128,128,128,.14);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}
.camp-expand-idx-fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  transition: width .8s cubic-bezier(.4,0,.2,1) .2s;
}
.camp-row.open .camp-expand-idx-fill {
  /* width set inline */
}

.camp-expand-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.12), rgba(var(--accent-rgb),0.04));
  border: 1px solid rgba(var(--accent-rgb),0.28);
  color: var(--accent);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: .74rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.camp-expand-open:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.22), rgba(var(--accent-rgb),0.10));
  border-color: var(--accent);
  transform: translateX(2px);
}
.camp-expand-open:hover svg { transform: translateX(2px); }
.camp-expand-open svg { transition: transform .15s; }

/* ── No-goal badge ── */
.camp-no-goal {
  font-size: .58rem;
  color: var(--text-3);
  background: rgba(128,128,128,.1);
  padding: 2px 8px;
  border-radius: 4px;
}

/* ── Expand-panel stats (Aktivitet/Konvertering/Budget) ──
   Tilføjet 2026-04-27: 12-felt-stats-grid + inline mål-input. */
.camp-expand-stats {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.camp-stats-section { }
.camp-stats-section-title {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-3);
  font-weight: 700;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.camp-stats-section-sub {
  font-size: .58rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-3);
  font-weight: 500;
  font-style: italic;
}
.camp-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.camp-stat-cell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.camp-stat-cell.editable {
  border-color: rgba(var(--accent-rgb),0.18);
  background: rgba(var(--accent-rgb),0.04);
}
.camp-stat-label {
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-3);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.camp-stat-sub {
  font-size: .54rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-3);
  font-weight: 500;
  margin-left: 4px;
  font-style: italic;
}
.camp-stat-value {
  font-size: .92rem;
  font-weight: 700;
  color: var(--text-1);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Brug CSS-vars (ikke hardcoded hex) så light theme får korrekt farve.
   Var-værdier kommer fra :root + [data-theme="light"]-overrides. */
.camp-stat-value.camp-c-green { color: var(--green, var(--accent, #0A84FF)); }
.camp-stat-value.camp-c-red   { color: var(--red, #ED8A8F); }
.camp-goal-input {
  width: 100%;
  background: var(--card-solid, var(--card));
  color: var(--text-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: .92rem;
  font-weight: 700;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  outline: none;
  transition: border-color .15s, background .15s;
}
.camp-goal-input:hover { border-color: var(--text-3); }
.camp-goal-input:focus {
  border-color: var(--accent);
  background: var(--card-solid, var(--card));
}
/* Skjul number-spinners (de optager plads og er klodsede) */
.camp-goal-input::-webkit-inner-spin-button,
.camp-goal-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.camp-goal-input { -moz-appearance: textfield; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .camp-row-spark-wrap { display: none; }
}
@media (max-width: 640px) {
  .camp-row-body { flex-direction: column; align-items: flex-start; gap: 4px; }
  .camp-row-stats { flex-wrap: wrap; gap: 8px; }
  .camp-summary { flex-direction: column; gap: 4px; }
  .camp-expand-grid { grid-template-columns: 1fr; gap: 14px; }
  .camp-expand-spark .camp-spark-big { height: 64px; }
  .camp-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
@media (max-width: 480px) {
  .camp-stats-grid { grid-template-columns: 1fr; }
}

/* .camp-row light-tema (rad/open/expand-btn) ejes nu af bauhaus-skin.css. */

/* ── Sort buttons ── */
.camp-sort-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 11px;
  font-size: .72rem;
  font-weight: 600;
  font-family: var(--font-brand);
  color: var(--text-2);
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
}
.camp-sort-btn:hover { color: var(--text-1); border-color: var(--text-2); }
.camp-sort-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ── Samlet toolbar-række (søg + filtre + sortering på ÉN linje) ── */
.camp-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.camp-filter-slot {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.camp-search-wrap {
  position: relative;
  flex: 1;
  min-width: 180px;
  display: flex;
  align-items: center;
}
.camp-search-ic {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
}
.camp-kpi-settings-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill, 999px);
  padding: 8px 13px;
  cursor: pointer;
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  transition: all .12s;
}
.camp-kpi-settings-btn:hover { color: var(--text-1); border-color: var(--text-2); }
/* Sortering som samlet segment-kontrol (connected pills) */
.camp-sort-seg {
  display: inline-flex;
  gap: 0;
  background: var(--card-2, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-pill, 999px);
  padding: 3px;
}
.camp-sort-seg .camp-sort-btn {
  border: 0;
  border-radius: var(--radius-pill, 999px);
  padding: 6px 12px;
  background: none;
}
.camp-sort-seg .camp-sort-btn:hover { background: rgba(128,128,128,.1); }
.camp-sort-seg .camp-sort-btn.active {
  background: var(--accent);
  color: #fff;
}

/* ── KPI-vælger (kampagne-overblik) ───────────────────────────────────────── */
.camp-kpi-picker { position: relative; display: inline-block; }
.camp-kpi-btn { display: inline-flex; align-items: center; gap: 5px; }
.camp-kpi-caret { font-size: .6rem; opacity: .8; }
.camp-kpi-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  min-width: 220px;
  padding: 8px;
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
}
.camp-kpi-dropdown.open { display: block; }
.camp-kpi-dd-head {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-3);
  padding: 2px 6px 6px;
}
.camp-kpi-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 7px;
  border-radius: 8px;
  font-size: .74rem;
  color: var(--text-1);
  cursor: pointer;
  user-select: none;
}
.camp-kpi-item:hover { background: var(--surface-hover); }
.camp-kpi-item input { accent-color: var(--accent); cursor: pointer; margin: 0; }
/* Træk-sortér: handle + label + dragging-state (delt af overblik-vælger + KPI-indstillinger) */
.kpi-drag { cursor: grab; color: var(--text-3); font-size: .8rem; line-height: 1; user-select: none; flex-shrink: 0; }
.kpi-drag:active { cursor: grabbing; }
.kpi-lbl { flex: 1; }
.camp-kpi-item.kpi-dragging, .kpi-vis-item.kpi-dragging { opacity: .5; }
.kpi-vis-item:hover { border-color: var(--text-2); }
.camp-kpi-reset {
  margin-top: 6px;
  width: 100%;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  font-size: .68rem;
  font-weight: 600;
  font-family: var(--font-brand);
  color: var(--text-2);
  cursor: pointer;
  transition: all .12s;
}
.camp-kpi-reset:hover { color: var(--text-1); border-color: var(--text-2); }

/* Legacy compat - keep for any old references */
.campaign-card[data-status="danger"] { border-left: 3px solid var(--red) !important; }
.campaign-card[data-status="warning"] { border-left: 3px solid var(--amber) !important; }
.campaign-card[data-status="success"] { border-left: 3px solid var(--green) !important; }

/* ══════════════════════════════════════════════════════════════
   INTEGRATIONS PANEL — flyttet til components/integrations.css (2026-06-16)
   .int-* var KUN her, så standalone-settings (settings.html, loader IKKE
   improvements.css) rendrede integrationspanelet helt ustylet. Nu i én
   delt fil der loades begge steder. .trend-pill nedenfor BLIVER her —
   den hører til widget-builder, ikke integrationer.
   ══════════════════════════════════════════════════════════════ */

/* Trend-chart metric toggle pills */
.trend-pill-row {
  display: inline-flex; gap: 3px; padding: 3px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
}
.trend-pill {
  padding: 4px 10px; border-radius: 6px; border: none; cursor: pointer;
  font-size: .62rem; font-weight: 700; font-family: inherit;
  background: transparent; color: var(--text-3);
  transition: all .12s;
}
.trend-pill:hover { color: var(--text-2); background: rgba(255,255,255,.04); }
.trend-pill.active {
  background: var(--card);
  color: var(--pill-color, var(--accent));
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
/* (.int-* detalje-panel, tabs, form-elementer + responsive flyttet til
   components/integrations.css 2026-06-16 — se kommentar ovenfor.) */

/* FIX: Phoner performance sub-navigation */
.perf-sub-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--app-bg);
  padding: 8px 0;
  margin-bottom: 12px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border);
}
.perf-sub-nav::-webkit-scrollbar { display: none; }
.perf-sub-nav-btn {
  background: none;
  border: none;
  padding: 6px 14px;
  font-family: var(--font-brand);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-3);
  cursor: pointer;
  white-space: nowrap;
  border-radius: var(--r-p);
  transition: all 0.15s;
}
.perf-sub-nav-btn:hover { color: var(--text-1); background: var(--surface); }
.perf-sub-nav-btn.active { color: var(--accent); background: var(--accent-light); border-bottom: 2px solid var(--accent); border-radius: var(--r-p) var(--r-p) 0 0; }

/* FIX: Præmieshop category tabs */
.shop-categories {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.shop-cat-btn {
  padding: 6px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-p);
  font-family: var(--font-brand);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.shop-cat-btn.active {
  background: var(--accent-light);
  border-color: rgba(var(--accent-rgb),0.2);
  color: var(--accent);
}

/* FIX: TV scoreboard name truncation */
@media (max-width: 1200px) {
  .nm { font-size: 13px !important; }
  .nm-sub { font-size: 7px !important; }
}

/* FIX: Vagtplan responsive fallback */
@media (max-width: 768px) {
  .schedule-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.7rem;
  }
  .schedule-table th,
  .schedule-table td {
    padding: 4px 6px !important;
    min-width: 60px;
  }
}


/* ═══════════════════════════════════════════════════════════════
   LIGHT-TEMA = KOBOLT-BAUHAUS (ejet 100% af bauhaus-skin.css)
   ───────────────────────────────────────────────────────────────
   Det forældede grøn→teal→blå→lilla→gul "BOLD & VISIBLE COLOR
   OVERHAUL"-system er FJERNET ved kilden. Skallen (app-root,
   sidebar, topbar, content-wrapper), kort (kpi/glass/widget/section/
   bv-mini/campaign/emp/coaching/goal), tabeller, leaderboard,
   inputs, filter-tabs, toast/slide/upload/modal og login-skærm
   styles nu udelukkende af kobolt-bauhaus-skinnen (creme/hvid/
   kobolt/tangerine/blæk). ÉN ren kilde, ingen specificitets-krig.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   PHONER DASHBOARD - "Command Center" Redesign
   Transforms the vertical card dump into a structured dashboard
═══════════════════════════════════════════════════════════════ */

/* ── Sticky sub-nav: glassmorphism pill bar ── */
.perf-sub-nav {
  display: flex;
  gap: 4px;
  padding: 6px;
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  margin: -4px 0 16px 0;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.perf-sub-nav-btn {
  flex: 1;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--text-3);
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.perf-sub-nav-btn:hover {
  background: var(--surface-hover);
  color: var(--text-1);
}
.perf-sub-nav-btn.active {
  background: var(--bh-pill-active);
  color: var(--accent-ink);
  box-shadow: var(--bh-shadow-flat-sm);
}

/* ── Hero card: gradient banner ── */
.perf-hero {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.08), rgba(43,125,233,0.06), rgba(112,72,214,0.04));
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.perf-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(var(--accent-rgb),0.06) 0%, transparent 70%);
  pointer-events: none;
}
/* .perf-hero light-tema ejes nu af bauhaus-skin.css (kobolt-blok). */

/* ── KPI Grid: score gauge + mini stats ── */
.perf-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 768px) {
  .perf-kpi-grid { grid-template-columns: 1fr; }
  .perf-two-col { grid-template-columns: 1fr !important; }
  /* Match inline styles both with and without space after colon */
  #my-performance-view [style*="grid-template-columns:1fr 1fr"],
  #my-performance-view [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  /* Personal records 3-col → 1-col on mobile */
  #my-performance-view [style*="grid-template-columns:repeat(3,1fr)"],
  #my-performance-view [style*="grid-template-columns: repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  /* Campaign cards grid */
  #my-performance-view .bv-dash[style*="grid-template-columns:repeat(auto-fill"] { grid-template-columns: 1fr !important; }
  /* Mini stats 2x2 → stacked */
  .perf-mini-stats { grid-template-columns: 1fr 1fr; }
}

/* Score gauge - the big centerpiece */
.perf-score-gauge {
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  overflow: hidden;
}
.perf-score-gauge::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.03), transparent 60%);
  pointer-events: none;
}
/* .perf-score-gauge light-tema ejes nu af bauhaus-skin.css (hvidt kort). */

/* Mini stats grid (4 stats in 2x2) */
.perf-mini-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.perf-mini-stat {
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.perf-mini-stat:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh-sm);
}
.perf-mini-stat .stat-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 4px;
}
.perf-mini-stat .stat-value {
  font-family: var(--font-mono);font-variant-numeric:tabular-nums;
  font-weight: 900;
  font-size: 1.15rem;
  color: var(--text-1);
  line-height: 1.2;
}
/* .perf-mini-stat light-tema ejes nu af bauhaus-skin.css (hvidt kort). */

/* ── Action cards row (daily goal + focus tip side by side) ── */
.perf-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 600px) {
  .perf-actions-row { grid-template-columns: 1fr; }
}

/* ── Daily challenge banner ── */
.perf-challenge-banner {
  background: linear-gradient(135deg, rgba(255,215,0,0.06), rgba(255,146,43,0.04));
  border: 1px solid rgba(255,215,0,0.15);
  border-radius: var(--r-md);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
/* .perf-challenge-banner light-tema ejes nu af bauhaus-skin.css (tangerine-pop). */

/* ── Section headers ── */
.perf-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.perf-section-header h3 {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text-1);
  margin: 0;
}
.perf-section-header .section-badge {
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.6rem;
  font-weight: 700;
  background: var(--accent-light);
  color: var(--accent);
}

/* ── Campaign cards - enhanced ── */
.perf-camp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.perf-camp-card {
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.perf-camp-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}
.perf-camp-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}
.perf-camp-card[data-pct="green"]::before { background: var(--green); }
.perf-camp-card[data-pct="amber"]::before { background: var(--amber); }
.perf-camp-card[data-pct="red"]::before { background: var(--red); }
/* .perf-camp-card light-tema ejes nu af bauhaus-skin.css (hvidt kort + flad hover). */

/* ── Leaderboard enhanced ── */
.perf-leaderboard-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.perf-leaderboard-row:hover {
  background: var(--surface-hover);
}
.perf-leaderboard-row.is-me {
  background: rgba(var(--accent-rgb),0.08);
  border: 1px solid rgba(var(--accent-rgb),0.15);
}
.perf-leaderboard-row .rank {
  font-weight: 900;
  font-size: 0.75rem;
  width: 24px;
  text-align: center;
}
.perf-leaderboard-row .rank.gold { color: var(--color-medal-gold, #ffd700); }
.perf-leaderboard-row .rank.silver { color: #c0c0c0; }
.perf-leaderboard-row .rank.bronze { color: #cd7f32; }

/* ── Achievement grid ── */
.perf-ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}
.perf-ach-item {
  text-align: center;
  padding: 12px 8px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform 0.15s ease;
}
.perf-ach-item.earned {
  background: linear-gradient(135deg, rgba(var(--success-rgb),0.08), rgba(255,215,0,0.06));
  border-color: rgba(var(--success-rgb),0.20);
}
.perf-ach-item:hover { transform: scale(1.05); }
.perf-ach-item .ach-icon { font-size: 1.5rem; margin-bottom: 4px; }
.perf-ach-item .ach-name { font-size: 0.55rem; font-weight: 700; color: var(--text-2); line-height: 1.3; }
.perf-ach-item.locked { opacity: 0.4; filter: grayscale(1); }

/* ── Progress bars ── */
.perf-progress {
  height: 6px;
  background: var(--surface);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
}
.perf-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.8s cubic-bezier(0.22,1,0.36,1);
}

/* ── Fade-in animations ── */
.perf-fade {
  opacity: 0;
  transform: translateY(8px);
  animation: perfFadeIn 0.4s ease forwards;
  animation-delay: var(--perf-delay, 0ms);
}
@keyframes perfFadeIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Records grid ── */
.perf-records-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.perf-record-card {
  text-align: center;
  padding: 12px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--surface), transparent);
  border: 1px solid var(--border);
}
.perf-record-card .record-value {
  font-family: var(--font-mono);font-variant-numeric:tabular-nums;
  font-weight: 900;
  font-size: 1.3rem;
  color: var(--accent);
}
.perf-record-card .record-label {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}
.perf-record-card .record-date {
  font-size: 0.55rem;
  color: var(--text-3);
  margin-top: 2px;
}
/* .perf-record-card light-tema ejes nu af bauhaus-skin.css (hvidt kort). */

/* ═══════════════════════════════════════════════════════════════
   PERF PAGE - Transform existing elements via CSS selectors
   Targets #my-performance-view children without JS changes
═══════════════════════════════════════════════════════════════ */

/* The 5-stat KPI row */
#my-performance-view .bv-dash {
  gap: 10px;
}
#my-performance-view .bv-dash .bv-mini-card {
  border-radius: var(--r-md);
  padding: 16px;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#my-performance-view .bv-dash .bv-mini-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}

/* First card (SCORE) gets accent treatment */
#my-performance-view .bv-dash .bv-mini-card:first-child {
  border-top: 3px solid var(--accent);
  background: linear-gradient(180deg, rgba(var(--accent-rgb),0.06), var(--card-solid)) !important;
}
#my-performance-view .bv-dash .bv-mini-card:first-child .bv-mini-stat {
  font-size: 1.6rem !important;
}

/* Other KPI cards - subtle unique colors */
#my-performance-view .bv-dash .bv-mini-card:nth-child(2) { border-top: 3px solid var(--accent); }
#my-performance-view .bv-dash .bv-mini-card:nth-child(3) { border-top: 3px solid var(--blue); }
#my-performance-view .bv-dash .bv-mini-card:nth-child(4) { border-top: 3px solid var(--amber); }
#my-performance-view .bv-dash .bv-mini-card:nth-child(5) { border-top: 3px solid var(--purple); }

/* KPI labels - more visible */
#my-performance-view .bv-label {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  font-weight: 800;
  opacity: 0.7;
}

/* KPI stat values - bigger */
#my-performance-view .bv-mini-stat {
  font-size: 1.3rem;
  font-weight: 900;
}

/* Mission impact card - full-bleed colored banner */
#my-performance-view .mission-impact {
  border-radius: var(--r-md);
  padding: 18px 22px;
  margin-bottom: 14px;
  border: 1px solid rgba(228,0,43,0.10);
  background: linear-gradient(135deg, rgba(228,0,43,0.04), rgba(255,184,28,0.03)) !important;
}
.mission-impact-number {
  font-family: var(--font-mono);font-variant-numeric:tabular-nums;
  font-weight: 900;
  font-size: 1.8rem;
  color: var(--text-1);
  line-height: 1.1;
}
.mission-impact-label {
  font-size: var(--text-sm);
  color: var(--text-2);
  margin-top: 2px;
}
.mission-impact-sub {
  font-size: var(--text-xs);
  color: var(--text-3);
  margin-top: 4px;
}
.mission-impact-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

/* General BV mini cards on perf page - enhanced */
#my-performance-view > div > .bv-mini-card {
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--card-solid);
  box-shadow: var(--sh-xs);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#my-performance-view > div > .bv-mini-card:hover {
  box-shadow: var(--sh-sm);
}

/* Campaign card section headers */
#perf-campaigns-section + div .bv-mini-card,
#my-performance-view .bv-mini-card[style*="border-left:3px solid var(--blue)"] {
  border-radius: var(--r-md) !important;
  overflow: hidden;
}

/* Achievements section - grid layout for icons */
#my-performance-view .bv-mini-card:has(> div > [style*="Milepæle"]) {
  padding: 16px 18px;
}

/* Weekly challenges - tighter layout */
#my-performance-view .bv-mini-card:has(> div > [style*="Ugens"]) {
  padding: 14px 16px;
}

/* Chart container - proper sizing */
#my-performance-view canvas {
  border-radius: var(--r-sm);
  max-height: 200px;
}

/* ═══════════════════════════════════════════════════════════════
   SETTINGS PANEL - better responsive layout
═══════════════════════════════════════════════════════════════ */

/* Settings: full-width override for tabel-tunge tabs (Kampagnemål, SPT-eksklusioner,
   medarbejder-tabel etc.). .content-wrapper > .view har 1600px max globalt - settings
   har brug for mere bredde så Weekend/Type/Lodpris-kolonner ikke crampes sammen. */
.content-wrapper > #settings-view {
  max-width: none !important;
  margin: 0 !important;
}
#settings-content {
  overflow-x: hidden;
  max-width: none;
}
#settings-content table {
  min-width: 0 !important;
  table-layout: auto;
}
#settings-content table td,
#settings-content table th {
  word-break: normal;
  white-space: nowrap;
}
#settings-content table td:first-child {
  white-space: normal;
  min-width: 120px;
  max-width: 200px;
}
#settings-content select {
  min-width: 100px;
}

/* Settings panel scrollable */
#settings-panel-content {
  overflow-x: auto;
}
#settings-panel-content > div {
  min-width: 400px;
}

/* On narrow screens, stack settings layout */
@media (max-width: 800px) {
  #settings-layout {
    flex-direction: column !important;
  }
  #settings-sidebar {
    width: 100% !important;
    max-height: none !important;
    overflow-y: visible !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding-right: 0 !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid var(--border) !important;
    padding-bottom: 8px !important;
  }
  #settings-sidebar > div[style*="text-transform"] {
    display: none !important; /* hide group labels on mobile */
  }
  #settings-content .settings-tab-btn {
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 5px 10px !important;
  }
  #settings-panel-content {
    border-left: none !important;
    padding-left: 0 !important;
    max-height: none !important;
  }
}

/* Phoner visibility panel - responsive grid */
#settings-panel-content .glass-card,
#settings-panel-content [style*="grid-template-columns: 1fr 1fr"] {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
}

/* Fix: ensure content fills available width */
.content-wrapper { width: 100%; box-sizing: border-box; }
.main-area { width: 100%; overflow: hidden; }


/* ═══════════════════════════════════════════════════════════════
   SETTINGS PAGE - Premium tab interface with transitions
═══════════════════════════════════════════════════════════════ */
#settings-layout {
  background: var(--card-solid);
  border-radius: 16px;
  border: 1px solid var(--border);
  overflow: hidden;
}
#settings-sidebar {
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, transparent 100%);
  border-right: 1px solid var(--border) !important;
  padding: 8px !important;
}
.settings-tab-btn {
  font-family: var(--font-brand) !important;
  position: relative;
  overflow: hidden;
  transition: all .2s cubic-bezier(.4,0,.2,1) !important;
}
.settings-tab-btn::before {
  content: '';
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
  transition: height .2s ease;
}
.settings-tab-btn[style*="rgba(0,214,143"]::before {
  height: 60%;
}
.settings-tab-btn:hover {
  background: var(--surface) !important;
  transform: translateX(2px);
}
.settings-tab-btn:active {
  transform: scale(0.97);
}
#settings-panel-content {
  animation: settingsFadeIn .25s ease;
  padding: 20px !important;
}
@keyframes settingsFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
#settings-panel-content h3,
#settings-panel-content [style*="font-size:1.1rem"],
#settings-panel-content [style*="font-size: 1.1rem"] {
  font-family: var(--font-brand) !important;
}
#settings-panel-content table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}
#settings-panel-content table thead th {
  background: rgba(var(--accent-rgb),0.06) !important;
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-2);
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--border);
}
#settings-panel-content table tbody tr {
  transition: background .15s;
}
#settings-panel-content table tbody tr:hover {
  background: var(--surface);
}
#settings-panel-content table tbody td {
  padding: 8px 12px !important;
  border-bottom: 1px solid var(--border);
  font-size: .78rem;
}
#settings-panel-content table tbody tr:last-child td {
  border-bottom: none;
}
#settings-panel-content select {
  background: var(--input-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  color: var(--text-1) !important;
  font-family: var(--font-brand) !important;
  font-size: .75rem !important;
  transition: border-color .15s, box-shadow .15s;
  cursor: pointer;
}
#settings-panel-content select:focus {
  border-color: var(--accent) !important;
  outline: none;
}
#settings-panel-content input[type="text"],
#settings-panel-content input[type="number"],
#settings-panel-content input[type="password"],
#settings-panel-content textarea {
  background: var(--input-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  color: var(--text-1) !important;
  font-family: var(--font-brand) !important;
  font-size: .78rem !important;
  transition: border-color .15s, box-shadow .15s;
}
#settings-panel-content input:focus,
#settings-panel-content textarea:focus {
  border-color: var(--accent) !important;
  outline: none;
}
#settings-panel-content button:not(.settings-tab-btn) {
  font-family: var(--font-brand) !important;
  transition: all .15s ease !important;
}
#settings-panel-content button:not(.settings-tab-btn):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
#settings-panel-content button:not(.settings-tab-btn):active {
  transform: scale(0.97);
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE NAV - Legacy .mobile-nav hidden, replaced by .mobile-tabs
═══════════════════════════════════════════════════════════════ */
.mobile-nav { display: none !important; }
@media (max-width: 768px) {
  .mobile-nav {
    display: none !important;
  }
  .mobile-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 4px 4px !important;
    font-size: 0.55rem !important;
    font-weight: 600;
    color: var(--text-3) !important;
    background: none !important;
    border: none !important;
    cursor: pointer;
    min-width: 52px;
    transition: color .2s, transform .15s !important;
    font-family: var(--font-brand);
    position: relative;
  }
  .mobile-nav-btn::before {
    content: attr(data-icon);
    font-size: 1.3rem !important;
    line-height: 1;
    transition: transform .2s cubic-bezier(.4,0,.2,1);
  }
  .mobile-nav-btn:active {
    transform: scale(0.88);
  }
  .mobile-nav-btn:active::before {
    transform: scale(0.9);
  }
  .mobile-nav-btn.active {
    color: var(--accent) !important;
  }
  .mobile-nav-btn.active::before {
    transform: scale(1.15);
    filter: drop-shadow(0 0 6px rgba(var(--accent-rgb),0.4));
  }
  .mobile-nav-btn.active::after {
    content: '' !important;
    position: absolute !important;
    top: -1px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 24px !important;
    height: 3px !important;
    background: var(--accent) !important;
    border-radius: 0 0 3px 3px !important;
    box-shadow: 0 2px 8px rgba(var(--accent-rgb),0.4);
    animation: mobNavPill .3s cubic-bezier(.4,0,.2,1);
  }
  @keyframes mobNavPill {
    from { width: 0; opacity: 0; }
    to { width: 24px; opacity: 1; }
  }
  /* Floating action dot for notifications */
  .mobile-nav-btn[data-badge]::after {
    content: attr(data-badge);
    position: absolute;
    top: 2px; right: 8px;
    min-width: 14px; height: 14px;
    background: var(--color-danger);
    color: var(--color-on-accent);
    font-size: .5rem;
    font-weight: 800;
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px;
    box-shadow: 0 2px 6px rgba(239,68,68,0.4);
    animation: mobBadgePop .3s ease;
  }
  @keyframes mobBadgePop {
    0% { transform: scale(0); }
    70% { transform: scale(1.2); }
    100% { transform: scale(1); }
  }
  /* Safe area padding for content when mobile nav is visible */
  .content-area {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
/* Light theme overrides for mobile nav */
[data-theme="light"] .mobile-nav {
  background: rgba(255,255,255,0.92) !important;
  border-top-color: rgba(0,0,0,0.06) !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .mobile-nav-btn {
  color: var(--color-text-3) !important;
}
[data-theme="light"] .mobile-nav-btn.active {
  color: var(--accent) !important;
}
/* Light theme for settings */
[data-theme="light"] #settings-layout {
  background: rgba(255,255,255,0.95);
}
[data-theme="light"] #settings-sidebar {
  background: linear-gradient(180deg, rgba(0,0,0,0.02) 0%, transparent 100%);
}

/* ═══════════════════════════════════════════════════════════════
   LEADERBOARD v2 - animated rows with sparklines
═══════════════════════════════════════════════════════════════ */
@keyframes lb-slideIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes lb-countUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lb-barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lb-drawLine { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
/* PERF 2026-05-07: lb-pulse + lb-shimmer slettet - verificeret aldrig brugt i CSS/HTML/JS. */

/* Main tabs */
.lb2-main-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 2px solid var(--border); }
.lb2-main-tabs .spectrum-camp-tab { padding: 8px 20px; font-size: .78rem; }

/* Campaign unit label */
.lb2-camp-unit { font-size: .6rem; color: var(--text-3); }

/* Score info box */
.lb2-score-info { margin-top: 20px; font-size: 0.72rem; color: var(--text-3); padding: 12px 16px; background: var(--surface); border-radius: var(--r-xs); line-height: 1.6; }

/* Period + location filter bar */
.lb2-filters-bar { margin-bottom: 10px; display: flex; gap: 16px; flex-wrap: wrap; }

/* Sparkline SVG sizing (remove inline styles) */
.lb2-spark svg { width: 120px; height: 44px; }

/* Page header */
.lb2-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.lb2-page-title { font-family: var(--font-brand); font-size: 1.3rem; font-weight: 800; color: var(--text-1); margin: 0; }
.lb2-eotm-btn { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: .72rem; color: var(--text-2); white-space: nowrap; flex-shrink: 0; }
.lb2-eotm-btn:hover { border-color: var(--border-md); color: var(--text-1); }

/* My-card elements */
.lb2-my-rank { font-family: var(--font-mono);font-variant-numeric:tabular-nums; font-weight: 900; font-size: 1.2rem; color: var(--accent); min-width: 36px; text-align: center; }
.lb2-my-label { flex: 1; font-weight: 700; font-size: .85rem; color: var(--accent); }
.lb2-kpi-accent { color: var(--accent); }
.lb2-no-data { padding: 10px 16px; border-radius: 10px; background: var(--surface); margin-bottom: 12px; font-size: .78rem; color: var(--text-3); text-align: center; }
.lb2-no-data-lg { padding: 32px 16px; font-size: .85rem; }

/* Name badges */
.lb2-xp-icon { font-size: .6rem; margin-right: 2px; vertical-align: middle; }
.lb2-eotm-badge { font-size: .55rem; }
.lb2-me-badge { font-size: .55rem; font-weight: 700; color: var(--accent); background: rgba(var(--accent-rgb),0.12); padding: 1px 6px; border-radius: 4px; }

/* Trend arrows (replace emojis) */
.lb2-trend { font-size: .5rem; font-weight: 800; }
.lb2-trend-up { color: var(--green, #1F9E5A); }
.lb2-trend-down { color: #e24b4a; }
.lb2-trend-flat { color: var(--text-3); font-size: .56rem; }

/* Sparkline sub-label */
.lb2-spark-label { font-size: .5rem; color: var(--text-3); text-align: center; margin-top: -2px; }

/* KPI muted state */
.lb2-kpi-muted { color: var(--text-3) !important; }

/* Hero card inner layout */
.rec-hero-inner { display: flex; align-items: center; gap: 20px; position: relative; z-index: 1; }
.rec-hero-info { flex: 1; }
.rec-hero-stats { text-align: right; }
.rec-hero-stats-label { font-size: .7rem; font-weight: 700; color: var(--text-3); margin-top: 2px; }
.rec-hero-stats-metric { font-family: var(--font-mono);font-variant-numeric:tabular-nums; font-size: .85rem; font-weight: 700; color: var(--text-1); margin-top: 4px; }

/* Podium medal colors */
.rec-pod-medal-silver { color: #c0c0c0; font-weight: 900; }
.rec-pod-medal-bronze { color: #cd7f32; font-weight: 900; }
.rec-podium { margin-bottom: 14px; }

/* Campaign tab strip - horizontal scroll instead of wrapping */
.lb2-camp-tabs {
  display: flex; gap: 6px; margin-bottom: 16px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  mask-image: linear-gradient(to right, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, black 92%, transparent);
}
.lb2-camp-tabs::-webkit-scrollbar { height: 3px; }
.lb2-camp-tabs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.lb2-camp-tabs .spectrum-camp-tab { flex-shrink: 0; }

/* Scoreboard card */
.lb2-board { padding: 0; overflow: hidden; }
.lb2-board-header { padding: 14px 18px; border-bottom: 1px solid var(--border); }
.lb2-board-title { font-family: var(--font-brand); font-weight: 700; font-size: .92rem; color: var(--text-1); }
.lb2-board-meta { font-size: .62rem; color: var(--text-3); margin-top: 2px; }
.lb2-board-body { padding: 8px 10px; }

/* Goal separator line */
.lb2-goal-sep { display: flex; align-items: center; gap: 10px; margin: 14px 8px 10px; }
.lb2-goal-sep-line { flex: 1; height: 1px; background: var(--red); opacity: .25; }
.lb2-goal-sep-text { font-size: .58rem; color: var(--red); font-weight: 700; white-space: nowrap; text-transform: uppercase; letter-spacing: .5px; opacity: .7; }

.lb2-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 12px;
  border: 1px solid transparent;
  transition: all 0.25s ease;
  cursor: pointer;
  animation: lb-slideIn 0.4s ease both;
  position: relative;
}
.lb2-row:hover { background: var(--surface); transform: translateX(4px); border-color: var(--border); }
.lb2-row.lb2-me { background: rgba(var(--accent-rgb),0.06); border-left: 3px solid var(--accent); }

.lb2-rank { min-width: 28px; text-align: center; font-family: var(--font-mono);font-variant-numeric:tabular-nums; font-weight: 800; font-size: .85rem; color: var(--text-3); }

.lb2-avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; position: relative; }

.lb2-info { flex: 1; min-width: 0; }
.lb2-name { font-weight: 700; font-size: 0.85rem; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb2-sub { font-size: 0.62rem; color: var(--text-3); margin-top: 1px; }

.lb2-spark { width: 120px; height: 52px; flex-shrink: 0; position: relative; }
.lb2-spark svg { filter: drop-shadow(0 1px 4px rgba(0,0,0,.15)); }
.lb2-spark polyline { opacity: 0; animation: lb-drawLine 0.8s ease forwards; }
.lb2-spark .lb2-area { opacity: 0; animation: lb-countUp 0.8s ease 0.4s forwards; }
.lb2-spark .lb2-dot { opacity: 0; animation: lb-dotAppear 0.3s ease forwards; filter: drop-shadow(0 0 4px currentColor); }
.lb2-spark .lb2-pt { opacity: 0; animation: lb-countUp 0.3s ease forwards; transition: r 0.15s ease, filter 0.15s ease; }
.lb2-spark .lb2-pt:hover { r: 6 !important; filter: drop-shadow(0 0 8px currentColor); }
.lb2-spark .lb2-goal { stroke-dasharray: 3,3; opacity: 0.35; }
.lb2-tip { display: none; position: absolute; bottom: calc(100% + 6px); background: var(--card-solid, #1a1a2e); border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; font-size: 0.6rem; font-weight: 600; color: var(--text-1); white-space: nowrap; pointer-events: none; z-index: 50; box-shadow: 0 4px 20px rgba(0,0,0,0.35); transform: translateX(-50%); }
@keyframes lb-dotAppear { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }

.lb2-kpis { display: flex; gap: 14px; align-items: center; flex-shrink: 0; }
.lb2-kpi { text-align: center; animation: lb-countUp 0.5s ease both; }
.lb2-kpi-big { font-family: var(--font-mono);font-variant-numeric:tabular-nums; font-size: 1.15rem; font-weight: 800; line-height: 1.2; }
.lb2-kpi-label { font-size: 0.55rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.03em; }
.lb2-kpi-spt { font-family: var(--font-mono);font-variant-numeric:tabular-nums; font-size: 0.78rem; font-weight: 700; color: var(--text-2); }

.lb2-pct { width: 62px; flex-shrink: 0; text-align: right; }
.lb2-pct-val { font-family: var(--font-mono);font-variant-numeric:tabular-nums; font-size: 0.95rem; font-weight: 800; }
.lb2-pct-bar { height: 4px; border-radius: 2px; margin-top: 3px; overflow: hidden; background: var(--bh-track-fill); }
.lb2-pct-bar-fill { height: 100%; border-radius: 2px; animation: lb-barGrow 0.8s ease both; transform-origin: left; }

/* My placement card */
.lb2-my-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-radius: 12px;
  background: rgba(var(--accent-rgb),0.06); border: 1px solid rgba(var(--accent-rgb),0.15);
  margin-bottom: 12px;
  animation: lb-slideIn 0.3s ease both;
}

/* Zero-sales rows */
.lb2-zero { opacity: 0.55; }
.lb2-zero:hover { opacity: 0.85; }

/* Mobile: hide sparkline, compact KPIs */
@media (max-width: 640px) {
  .lb2-spark { display: none !important; }
  .lb2-kpis { gap: 8px; }
  .lb2-kpi-big { font-size: 0.95rem; }
  .lb2-row { padding: 10px 12px; gap: 8px; }
  .lb2-avatar { width: 34px; height: 34px; }
}

/* ═══ CELEBRATION COMPONENTS (shared: records + leaderboard) ═══ */
.rec-hero{position:relative;overflow:hidden;border-radius:16px;background:linear-gradient(135deg,rgba(255,215,0,.10),rgba(255,165,0,.05),rgba(var(--accent-rgb),.03));border:1.5px solid rgba(255,215,0,.3);padding:20px 20px 16px;margin-bottom:14px;animation:rec-hero-in .5s ease-out both;}
@keyframes rec-hero-in{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.rec-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 20% 10%,rgba(255,215,0,.15),transparent 70%),radial-gradient(ellipse 50% 60% at 80% 90%,rgba(var(--accent-rgb),.1),transparent 70%);pointer-events:none;}
.rec-hero::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent,rgba(255,215,0,.06),transparent 30%);animation:rec-hero-spin 8s linear infinite;pointer-events:none;}
@keyframes rec-hero-spin{to{transform:rotate(360deg)}}
.rec-hero-crown{position:absolute;top:-2px;left:50%;transform:translateX(-50%);font-size:2rem;filter:drop-shadow(0 2px 8px rgba(255,215,0,.5));animation:rec-crown-bob 2s ease-in-out infinite;z-index:2;}
@keyframes rec-crown-bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}}
.rec-hero-avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#ffd700,#ff8c00);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.4rem;color:#1a1a2e;box-shadow:0 0 0 4px rgba(255,215,0,.3),0 0 30px rgba(255,215,0,.2);animation:rec-av-pulse 2s ease-in-out infinite;position:relative;z-index:1;}
@keyframes rec-av-pulse{0%,100%{box-shadow:0 0 0 4px rgba(255,215,0,.3),0 0 30px rgba(255,215,0,.2)}50%{box-shadow:0 0 0 8px rgba(255,215,0,.15),0 0 50px rgba(255,215,0,.3)}}
.rec-hero-val{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:3rem;font-weight:900;background:linear-gradient(135deg,#ffd700,#ffaa00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1;animation:rec-val-in .8s ease-out .3s both;}
@keyframes rec-val-in{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
.rec-hero-name{font-weight:800;font-size:1.1rem;color:var(--text-1);margin-top:2px;position:relative;z-index:1;}
.rec-hero-sub{font-size:.72rem;color:var(--text-3);margin-top:4px;position:relative;z-index:1;}
.rec-hero-badge{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,rgba(255,215,0,.2),rgba(255,165,0,.15));border:1px solid rgba(255,215,0,.3);border-radius:20px;padding:4px 12px;font-size:.65rem;font-weight:700;color:#ffd700;animation:rec-badge-in .6s ease-out .5s both;}
@keyframes rec-badge-in{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
.rec-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.rec-particle{position:absolute;width:6px;height:6px;border-radius:50%;animation:rec-float 4s ease-in-out infinite;opacity:.6;}
@keyframes rec-float{0%,100%{transform:translateY(0) rotate(0deg);opacity:.6}50%{transform:translateY(-30px) rotate(180deg);opacity:.3}}
.rec-podium{display:grid;gap:8px;margin-bottom:16px;animation:rec-podium-in .5s ease-out .2s both;}
@keyframes rec-podium-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rec-pod-card{position:relative;border-radius:16px;padding:16px 12px;text-align:center;border:1px solid var(--border);cursor:pointer;transition:all .2s;overflow:hidden;}
.rec-pod-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.2);}
.rec-pod-1{background:linear-gradient(135deg,rgba(255,215,0,.1),rgba(255,165,0,.05));border-color:rgba(255,215,0,.3);}
.rec-pod-2{background:linear-gradient(135deg,rgba(192,192,192,.08),rgba(200,200,200,.04));border-color:rgba(192,192,192,.25);}
.rec-pod-3{background:linear-gradient(135deg,rgba(205,127,50,.08),rgba(205,127,50,.04));border-color:rgba(205,127,50,.25);}
.rec-pod-rank{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:900;font-size:1.2rem;margin-bottom:4px;}
.rec-pod-1 .rec-pod-rank{color:#ffd700;}.rec-pod-2 .rec-pod-rank{color:#c0c0c0;}.rec-pod-3 .rec-pod-rank{color:#cd7f32;}
.rec-pod-av{width:48px;height:48px;border-radius:50%;margin:0 auto 6px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;color:#fff;}
.rec-pod-1 .rec-pod-av{background:linear-gradient(135deg,#ffd700,#ff8c00);box-shadow:0 0 20px rgba(255,215,0,.3);}
.rec-pod-2 .rec-pod-av{background:linear-gradient(135deg,#c0c0c0,#a0a0a0);box-shadow:0 0 15px rgba(192,192,192,.2);}
.rec-pod-3 .rec-pod-av{background:linear-gradient(135deg,#cd7f32,#a0642a);box-shadow:0 0 15px rgba(205,127,50,.2);}
.rec-pod-name{font-weight:700;font-size:.72rem;color:var(--text-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rec-pod-val{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:900;font-size:1.1rem;margin-top:4px;}
.rec-pod-1 .rec-pod-val{color:#ffd700;}.rec-pod-2 .rec-pod-val{color:#c0c0c0;}.rec-pod-3 .rec-pod-val{color:#cd7f32;}
.rec-pod-period{font-size:.6rem;color:var(--text-3);margin-top:2px;}

/* Active campaign tab */
.spectrum-camp-tab.active {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}
.spectrum-camp-tab.active span { color: rgba(255,255,255,0.7) !important; }

/* ═══════════════════════════════════════════════════════════════
   UI/UX OVERHAUL - Depth, animations, micro-interactions
═══════════════════════════════════════════════════════════════ */

/* View transition consolidated in style.css - .view.active uses viewEnter */

/* ── Stagger children animation ── */
@keyframes staggerIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Cards: universal depth + hover lift ── */
.bv-feed-item,
[style*="border-radius:14px"],
[style*="border-radius: 14px"],
.kpi-card,
.stat-card {
  transition: transform 0.2s cubic-bezier(.4,0,.2,1), box-shadow 0.2s ease, border-color 0.2s ease !important;
}

/* ── Sidebar polish ── */
#sidebar {
  transition: width 0.25s ease, transform 0.25s ease;
}
.nav-btn {
  transition: all 0.15s ease !important;
  position: relative;
  overflow: hidden;
}
.nav-btn::before {
  content: '';
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%) scaleY(0);
  width: 3px; height: 60%; border-radius: 0 4px 4px 0;
  background: var(--accent);
  transition: transform 0.2s ease;
}
.nav-btn.active::before,
.nav-btn[aria-current="page"]::before {
  transform: translateY(-50%) scaleY(1);
}
.nav-btn:hover {
  background: rgba(255,255,255,0.04) !important;
  transform: translateX(2px);
}

/* ── Topbar glassmorphism ── */
.topbar, header, [class*="topbar"] {
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}

/* ── Buttons: press effect ── */
button, .btn, [role="button"] {
  transition: transform 0.1s ease, box-shadow 0.15s ease, opacity 0.15s ease !important;
}
button:active:not(:disabled), .btn:active:not(:disabled) {
  transform: scale(0.96) !important;
}

/* ── Toast notifications: slide in from right ── */
@keyframes toastSlideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes toastSlideOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}
.bv-toast {
  animation: toastSlideIn 0.3s cubic-bezier(.4,0,.2,1) both !important;
}
.bv-toast.removing {
  animation: toastSlideOut 0.25s ease both !important;
}

/* ── Progress bars: animated fill ── */
@keyframes progressGrow {
  from { width: 0; }
}
[style*="border-radius:3px"] > [style*="height:100%"],
[style*="border-radius:5px"] > [style*="height:100%"] {
  animation: progressGrow 0.8s cubic-bezier(.4,0,.2,1) both;
}

/* ── Tables: row hover highlight ── */
table tbody tr {
  transition: background 0.15s ease;
}
table tbody tr:hover {
  background: rgba(255,255,255,0.02) !important;
}
[data-theme="light"] table tbody tr:hover {
  background: rgba(0,0,0,0.02) !important;
}

/* ── Feed provider-badge: vises kun for multi-integration tenants ──
   Backward-compat: feed-items uden .provider rendrer ingen badge.
   Farver per provider matcher integration-brand. */
.feed-provider {
  display: inline-block;
  font-size: .55rem;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 700;
  vertical-align: middle;
  margin-left: 4px;
}
.feed-provider.adversus  { background: rgba(59,130,246,.15);  color: #3b82f6; }
.feed-provider.enreach   { background: rgba(167,139,250,.15); color: #a78bfa; }
.feed-provider.pipedrive { background: rgba(16,185,129,.15);  color: #10b981; }
.feed-provider.herobase  { background: rgba(244,114,182,.15); color: #f472b6; }
.feed-provider.actimizer { background: rgba(251,146,60,.15);  color: #fb923c; }
.feed-provider.planday   { background: rgba(148,163,184,.15); color: #94a3b8; }

/* ── Feed items: staggered entrance ── */
.bv-feed-item {
  animation: staggerIn 0.3s ease both;
}
.bv-feed-item:nth-child(1) { animation-delay: 0s; }
.bv-feed-item:nth-child(2) { animation-delay: 0.04s; }
.bv-feed-item:nth-child(3) { animation-delay: 0.08s; }
.bv-feed-item:nth-child(4) { animation-delay: 0.12s; }
.bv-feed-item:nth-child(5) { animation-delay: 0.16s; }
.bv-feed-item:nth-child(6) { animation-delay: 0.2s; }
.bv-feed-item:nth-child(7) { animation-delay: 0.24s; }
.bv-feed-item:nth-child(8) { animation-delay: 0.28s; }

/* ── Reaction buttons: bounce on hover ── */
.bv-reaction-btn {
  transition: transform 0.15s ease, background 0.15s ease !important;
}
.bv-reaction-btn:hover {
  transform: scale(1.25) !important;
  background: rgba(255,255,255,0.08) !important;
}
.bv-reaction-btn:active {
  transform: scale(0.9) !important;
}

/* ── Modal: backdrop blur + scale in ── */
@keyframes modalBackdropIn {
  from { opacity: 0; backdrop-filter: blur(0); }
  to { opacity: 1; backdrop-filter: blur(6px); }
}
@keyframes modalContentIn {
  from { opacity: 0; transform: scale(0.92) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
#app-modal {
  animation: modalBackdropIn 0.2s ease both;
}
#app-modal > div, .modal-content, .bv-modal-content {
  animation: modalContentIn 0.25s cubic-bezier(.4,0,.2,1) both;
}

/* ── Notification badge: pulse 3x then stop ── */
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
.notif-badge {
  animation: badgePulse 1.5s ease-in-out 3;
}

/* ── Scrollbar styling ── */
.content-wrapper::-webkit-scrollbar {
  width: 6px;
}
.content-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.content-wrapper::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
}
.content-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.15);
}
[data-theme="light"] .content-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.1);
}
[data-theme="light"] .content-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.2);
}

/* ── Number counters: tabular figures for alignment ── */
[style*="font-mono"], .font-mono, td:nth-child(n+2) {
  font-variant-numeric: tabular-nums;
}

/* ── Coin display: subtle glow ── */
[style*="3190"], .coin-display {
  text-shadow: 0 0 8px rgba(255,215,0,0.3);
}

/* ── Live dot: breathing animation ── */
@keyframes liveBreathe {
  0%, 100% { box-shadow: 0 0 4px rgba(var(--accent-rgb),0.4); }
  50% { box-shadow: 0 0 10px rgba(var(--accent-rgb),0.7); }
}
.live-dot {
  animation: liveBreathe 2s ease-in-out infinite;
}
.pulse-live {
  animation: pulseLive 1.5s ease-in-out infinite;
}
@keyframes pulseLive {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,.4); }
  50% { box-shadow: 0 0 0 4px rgba(16,185,129,.0); }
}

/* ── Focus ring for accessibility ── */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Smooth color transitions for theme switch ── */
*, *::before, *::after {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-duration: 0s;
}
html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after {
  transition-duration: 0.55s !important;
  transition-timing-function: cubic-bezier(.65, 0, .35, 1) !important;
}

/* ── Cinematic theme switch - radial reveal fra toggle-knap ──
   JS sætter CSS-vars --theme-reveal-x/y (px) på <html> inden class toggles.
   Et snapshot af den gamle theme vises kort og clip-path'es væk i en cirkel. */
.theme-reveal-layer {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  /* layered radial: inderst = accent-core, yderst = theme-bg */
  background:
    radial-gradient(circle at var(--theme-reveal-x, 50%) var(--theme-reveal-y, 50%),
      var(--color-accent-soft) 0%,
      transparent 18%);
  opacity: 0;
  transition: opacity .2s ease;
}
.theme-reveal-layer.active {
  opacity: 1;
}
/* Ripple - en ring der udvider fra toggle-knappen */
.theme-reveal-ripple {
  position: fixed;
  left: var(--theme-reveal-x, 50%);
  top: var(--theme-reveal-y, 50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle,
    var(--color-accent-soft) 0%,
    var(--color-accent-dim) 40%,
    transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 99998;
  opacity: 0.9;
}
.theme-reveal-ripple.active {
  animation: themeRipple .75s cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes themeRipple {
  0% {
    width: 0;
    height: 0;
    opacity: 0.95;
  }
  60% {
    opacity: 0.5;
  }
  100% {
    /* diagonal ca. 120vmax sikrer dækning på enhver skærm */
    width: 240vmax;
    height: 240vmax;
    opacity: 0;
  }
}

/* Ambient mesh administreres inline i primær-sider (index.html body::before);
   tint-værdier kommer fra --color-bg-tint-1 / --color-bg-tint-2. */

/* ── Empty state illustrations ── */
.empty-state-icon {
  font-size: 3rem;
  animation: staggerIn 0.5s ease both;
  filter: grayscale(0.2);
}

/* ── Performance two-col grid: card entrance ── */
.perf-two-col > * {
  animation: staggerIn 0.35s ease both;
}
.perf-two-col > *:nth-child(1) { animation-delay: 0s; }
.perf-two-col > *:nth-child(2) { animation-delay: 0.08s; }

/* ── Selection color ── */
::selection {
  background: rgba(29,158,117,0.3);
  color: inherit;
}

/* ── Input focus glow ── */
input:focus, textarea:focus, select:focus {
  border-color: var(--accent) !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE FULL MENU DRAWER - Bottom sheet with all modules
═══════════════════════════════════════════════════════════════ */
.mobile-menu-drawer {
  position: fixed;
  inset: 0;
  z-index: 10000;
}
.mobile-menu-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .25s ease;
}
.mobile-menu-sheet {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--card-solid);
  border-top: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 8px));
  max-height: 70vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.mobile-menu-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--border-md);
  margin: 4px auto 16px;
}
.mobile-menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.mobile-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  font-family: var(--font-brand);
  font-size: .6rem;
  font-weight: 600;
  color: var(--text-2);
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}
.mobile-menu-item span {
  font-size: 1.4rem;
  line-height: 1;
}
.mobile-menu-item:active {
  transform: scale(0.9);
  background: rgba(var(--accent-rgb),0.08);
  border-color: rgba(var(--accent-rgb),0.2);
  color: var(--accent);
}
[data-theme="light"] .mobile-menu-sheet {
  background: rgba(255,255,255,0.98);
}
@media (min-width: 769px) {
  .mobile-menu-drawer { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE APP OVERHAUL - Comprehensive mobile optimization
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Topbar - moved to MOBILE COMPREHENSIVE FIX section below */
  /* User pill compact */
  .user-pill {
    padding: 4px 8px !important;
    gap: 6px !important;
  }
  .user-name { display: none !important; }

  /* Content wrapper - full mobile padding */
  .content-wrapper {
    padding: 12px 0 80px !important;
    scroll-behavior: smooth;
  }

  /* Views - smooth transitions */
  .view.active {
    animation: mobileViewIn .3s cubic-bezier(.4,0,.2,1) !important;
  }
  @keyframes mobileViewIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Cards - touch-optimized */
  .glass-card, .kpi-card, .ds-card {
    border-radius: 14px !important;
    margin-bottom: 10px;
  }
  .glass-card:active, .ds-card:active {
    transform: scale(0.98);
    transition: transform .1s;
  }

  /* KPI cards - 2 columns on mobile */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .kpi-card {
    padding: 12px !important;
  }
  .kpi-value {
    font-size: 1.2rem !important;
  }

  /* Tables - compact mobile view */
  .data-table td, .data-table th {
    padding: 8px 10px !important;
    font-size: .72rem !important;
  }

  /* Modal - full-width on mobile */
  #app-modal > div {
    max-width: 100% !important;
    margin: 0 8px !important;
    border-radius: 16px !important;
    max-height: 85vh !important;
  }

  /* Hub cards - single column on narrow */
  .ghub-grid, .ghub-rec-grid, .ghub-pin-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .ghub-card {
    padding: 14px !important;
    border-radius: 14px !important;
  }
  .ghub-card:active {
    transform: scale(0.97) !important;
    box-shadow: none !important;
  }
  /* Disable hover preview on touch (it uses timer) */
  .ghub-card.show-preview {
    padding-bottom: 14px !important;
  }
  .ghub-preview { display: none !important; }

  /* Sidebar hamburger trigger */
  .sidebar-mobile-trigger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--text-2);
    -webkit-tap-highlight-color: transparent;
  }
  .sidebar-mobile-trigger:active { transform: scale(0.9); }

  /* Smooth slide-panel on mobile */
  .slide-panel {
    width: 92vw !important;
    max-width: 100% !important;
  }

  /* Feed items - compact */
  .bv-feed-item {
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }
}
/* Small phones */
@media (max-width: 380px) {
  .ph-kpi-strip {
    gap: 6px !important;
  }
  .ph-kpi-card {
    padding: 10px 6px !important;
  }
  .ph-kpi-val {
    font-size: 1.1rem !important;
  }
  .ph-quick-actions {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
/* .topbar light-tema ejes nu af bauhaus-skin.css (solid hvid surface + blæk-hairline). */

/* ═══════════════════════════════════════════════════════════════════
   ENHANCED ANIMATIONS & VISUAL POLISH
   Smooth transitions, micro-interactions, ambient effects
═══════════════════════════════════════════════════════════════════ */

/* ── Smooth global transitions ── */
*, *::before, *::after {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Card hover lift with glow ── */
.glass-card, .bv-card, .kpi-card {
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s cubic-bezier(0.4,0,0.2,1), border-color 0.2s ease !important;
}
.glass-card:hover, .bv-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(var(--accent-rgb),0.06);
}
[data-theme="dark"] .glass-card:hover, [data-theme="dark"] .bv-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 2px 8px rgba(var(--accent-rgb),0.08);
}

/* ── KPI card entrance animation ── */
@keyframes kpiSlideUp {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.kpi-card {
  animation: kpiSlideUp 0.4s cubic-bezier(0.4,0,0.2,1) both;
}
.kpi-card:nth-child(1) { animation-delay: 0s; }
.kpi-card:nth-child(2) { animation-delay: 0.05s; }
.kpi-card:nth-child(3) { animation-delay: 0.1s; }
.kpi-card:nth-child(4) { animation-delay: 0.15s; }
.kpi-card:nth-child(5) { animation-delay: 0.2s; }
.kpi-card:nth-child(6) { animation-delay: 0.25s; }

/* Page transition consolidated in style.css */

/* ── Button micro-interactions ── */
.bv-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.bv-btn:active, button:active {
  transform: translateY(0) scale(0.98) !important;
}
.bv-btn-primary:hover {
  box-shadow: 0 4px 16px rgba(var(--accent-rgb),0.3) !important;
}

/* ── Sidebar nav polish ── */
.nav-btn {
  border-radius: 10px !important;
  transition: all 0.18s cubic-bezier(0.4,0,0.2,1) !important;
}
.nav-btn:hover {
  background: var(--surface-hover) !important;
  transform: translateX(4px) !important;
}
.nav-btn.active {
  background: var(--accent-light) !important;
}
.nav-btn.active::before {
  width: 3px; border-radius: 0 4px 4px 0;
  transition: height 0.2s ease;
}

/* ── Topbar ── */
.topbar {
  transition: background 0.3s ease, box-shadow 0.3s ease !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 16px !important;
  gap: 8px !important;
  position: sticky;
  top: 0;
  z-index: 200;
}
.topbar-title {
  font-size: .88rem !important;
  font-weight: 800 !important;
  white-space: nowrap;
  flex-shrink: 0;
}
/* 2026-05-30 (audit #39): #data-freshness/#topbar-meta/#topbar-freshness fjernet helt - regel udgået */
#topbar-xp-today {
  font-size: .62rem !important;
  padding: 2px 8px;
  background: rgba(var(--accent-rgb),.08);
  border-radius: 6px;
  flex-shrink: 0;
}
/* ── Search bar - centered, prominent ── */
.global-search-wrap {
  flex: 1 !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  position: relative !important;
}
.global-search-wrap .search-input,
#global-search {
  width: 100% !important;
  max-width: 100% !important;
  font-size: .78rem !important;
  padding: 7px 14px 7px 34px !important;
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text-1) !important;
  transition: all .2s ease !important;
  font-family: var(--font-brand) !important;
}
#global-search:focus {
  border-color: var(--accent) !important;
  background: var(--card-solid, var(--card)) !important;
}
#global-search::placeholder { color: var(--text-3) !important; }
/* Search icon */
.global-search-wrap::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  background: var(--text-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events: none;
  z-index: 1;
}
.global-search-results {
  top: calc(100% + 6px) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: 380px !important;
  max-height: 420px !important;
  overflow-y: auto !important;
  border-radius: 14px !important;
}
/* Suggestions section styling */
.search-section-label {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-3);
  padding: 8px 12px 4px;
}
/* ── Right side actions ── */
.topbar-actions, .topbar .topbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0;
}
.topbar-actions > button:not(.theme-toggle), #quiet-mode-btn, #focus-mode-btn {
  width: 30px !important;
  height: 30px !important;
  font-size: .78rem !important;
}
.topbar-actions > .theme-toggle {
  width: 64px !important;
  height: 32px !important;
  flex-shrink: 0 !important;
}
#nav-role-picker {
  padding: 3px 10px 3px 3px !important;
  font-size: .78rem !important;
  gap: 6px !important;
}
#topbar-avatar {
  width: 28px !important;
  height: 28px !important;
}
.notif-bell { font-size: .85rem !important; }
[data-theme="dark"] .topbar {
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 4px 24px rgba(0,0,0,0.2) !important;
}
/* .topbar light-tema box-shadow fjernet — bauhaus-skin sætter flad/hairline (box-shadow:none). */

/* ── Input focus glow (mouse click) ── */
input:focus:not(:focus-visible), textarea:focus:not(:focus-visible), select:focus:not(:focus-visible), .bv-input:focus:not(:focus-visible) {
  outline: none;
  border-color: var(--accent);
  transition: border-color 0.15s, box-shadow 0.15s;
}
/* ── Keyboard focus - always visible (WCAG 2.4.7) ── */
input:focus-visible, textarea:focus-visible, select:focus-visible, .bv-input:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
  border-color: var(--accent);
}

/* ── Toast improvements ── */
.bv-toast {
  animation: toastSlideIn 0.35s cubic-bezier(0.4,0,0.2,1), toastFadeOut 0.3s 4.7s cubic-bezier(0.4,0,0.2,1) forwards !important;
  backdrop-filter: blur(12px);
}
@keyframes toastSlideIn {
  from { transform: translateX(120%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes toastFadeOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(80px); }
}

/* ── Modal backdrop animation ── */
#app-modal {
  transition: opacity 0.25s ease !important;
}
#app-modal > div {
  animation: modalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
@keyframes modalPop {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Scrollbar polish ── */
/* Firefox scrollbar (standard CSS) */
/* Tema-korrekt track-fill (flipper light/dark via token) */
* { scrollbar-width: thin; scrollbar-color: var(--bh-track-fill) transparent; }
/* WebKit scrollbar (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 6px; height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--bh-track-fill);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--bh-ink-3);
}

/* ── Glass card refinements (Canva: mere luft, rundere hjørner, blød shadow) ── */
.glass-card {
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

/* ── Ambient accent glow on sidebar brand ── */
@keyframes ambientPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(var(--accent-rgb),0.08); }
  50% { box-shadow: 0 0 30px rgba(var(--accent-rgb),0.15); }
}
.sidebar .brand-area {
  animation: ambientPulse 4s ease-in-out infinite;
}

/* PERF 2026-05-07: onlinePulse slettet - verificeret aldrig brugt. */

/* ── Smooth number transitions ── */
.bv-stat, .bv-stat-sm, .bv-mono {
  transition: color 0.3s ease;
}

/* Light-tema kort-dybde (glass/bv/kpi box-shadow) fjernet — bauhaus-skin
   sætter den flade Bauhaus-skygge (--bh-shadow-flat) på alle kort. */

/* ── Selection color ── */
::selection {
  background: rgba(var(--accent-rgb),0.2);
  color: inherit;
}

/* ── Focus visible ring ── */
:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
}

/* ── Reduced motion preference ── */
@media (prefers-reduced-motion: reduce) {
  .view.active,
  .bv-feed-item,
  .perf-two-col > *,
  #app-modal,
  #app-modal > div,
  .bv-toast {
    animation-duration: 0.01s !important;
  }
  button:active { transform: none !important; }
  .nav-btn:hover { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE COMPREHENSIVE FIX - Topbar, games, scroll, touch
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── Topbar: Clean & compact ── */
  .topbar {
    position: sticky !important;
    top: 0;
    z-index: 500;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 10px !important;
    gap: 6px !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
  }
  .topbar-title {
    font-size: .85rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
  }
  /* Hide non-essential topbar items on mobile */
  .topbar .global-search-wrap,
  .topbar #topbar-xp-today {
    display: none !important;
  }
  .topbar .user-name { display: none !important; }
  .topbar .user-pill {
    padding: 3px 6px !important;
    gap: 4px !important;
    flex-shrink: 0;
  }
  .topbar .user-pill .user-avatar {
    width: 28px !important;
    height: 28px !important;
  }
  .topbar .notif-bell {
    flex-shrink: 0;
  }
  /* Coins badge compact */
  .topbar .bv-coins {
    font-size: .72rem !important;
    padding: 2px 8px !important;
    flex-shrink: 0;
  }
  .topbar-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: auto !important;
    flex-shrink: 0;
    overflow: visible;
  }

  /* ── Content wrapper: proper padding for sticky topbar + bottom nav ── */
  .content-wrapper {
    padding: 8px 10px 90px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── Beta banner compact ── */
  #beta-banner {
    padding: 6px 10px !important;
    font-size: .65rem !important;
    margin-bottom: 8px !important;
  }

  /* ── Game Hub specific fixes ── */
  .gh-hero {
    padding: 16px 14px !important;
    border-radius: 14px !important;
    margin-bottom: 14px !important;
  }
  .gh-hero-title {
    font-size: 1.2rem !important;
  }
  .gh-hero-sub {
    font-size: .68rem !important;
  }
  .gh-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .gh-card {
    padding: 12px !important;
    border-radius: 12px !important;
  }
  .gh-card:active {
    transform: scale(0.96) !important;
  }
  .gh-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  .gh-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    margin-bottom: 6px !important;
  }
  .gh-icon svg {
    width: 36px !important;
    height: 36px !important;
  }
  .gh-title {
    font-size: .75rem !important;
  }
  .gh-desc {
    font-size: .55rem !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .gh-coins {
    font-size: .5rem !important;
    margin-top: 4px !important;
  }
  .gh-preview {
    height: 40px !important;
  }
  .gh-section-title {
    font-size: .82rem !important;
  }
  .gh-section-sub {
    font-size: .58rem !important;
  }
  .gh-featured {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .gh-feat-card {
    padding: 10px 8px !important;
    border-radius: 12px !important;
  }
  .gh-feat-icon {
    width: 36px !important;
    height: 36px !important;
  }
  .gh-feat-icon svg {
    width: 36px !important;
    height: 36px !important;
  }
  .gh-feat-title {
    font-size: .7rem !important;
  }
  .gh-social-tag {
    font-size: .56rem !important;
    padding: 1px 5px !important;
  }
  .gh-lb {
    padding: 12px !important;
    border-radius: 12px !important;
  }
  .gh-lb-title {
    font-size: .8rem !important;
  }
  .gh-lb-row {
    padding: 5px 0 !important;
    gap: 4px !important;
    flex-wrap: wrap;
  }
  .gh-lb-name {
    font-size: .7rem !important;
  }
  .gh-lb-wins {
    font-size: .65rem !important;
  }

  /* ── Football Bingo responsive ── */
  .fbb {
    max-width: 100% !important;
    padding: 0 4px !important;
  }
  .fbb-grid {
    gap: 3px !important;
  }
  .fbb-cell {
    padding: 6px !important;
    font-size: .55rem !important;
    min-height: 60px !important;
  }
  .fbb-cell img {
    width: 28px !important;
    height: 28px !important;
  }
  .fbb-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .fbb-actions button {
    padding: 8px 14px !important;
    font-size: .7rem !important;
    min-height: 40px !important;
  }

  /* ── Jeopardy responsive ── */
  .jp-wrap {
    padding: 4px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .jp-board {
    min-width: 300px;
  }
  .jp-cell {
    padding: 6px 4px !important;
    font-size: .6rem !important;
    min-height: 36px !important;
  }
  .jp-cat {
    font-size: .5rem !important;
    padding: 4px 2px !important;
  }

  /* ── GeoTrivia responsive ── */
  .gt-container {
    max-width: 100% !important;
    padding: 0 !important;
  }
  .gt-cat-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
    gap: 6px !important;
  }
  .gt-options {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .gt-option {
    padding: 12px !important;
    min-height: 44px !important;
    font-size: .75rem !important;
  }

  /* ── Logo Quiz responsive ── */
  .lq-container {
    max-width: 100% !important;
  }

  /* ── All game modals: full-width on mobile ── */
  .jp-import-overlay > div,
  .jp-autogen-overlay > div {
    width: 90vw !important;
    max-width: 90vw !important;
    max-height: 85vh !important;
    padding: 16px !important;
    border-radius: 14px !important;
  }

  /* ── Game end buttons: stack vertically on mobile ── */
  .game-end-btns,
  [style*="display:flex"][style*="gap"] button {
    min-height: 44px !important;
  }

  /* ── Touch targets: minimum 44px ── */
  .glass-card[onclick],
  .gh-card,
  .gh-feat-card,
  button {
    min-height: 44px;
  }

  /* ── Settings panel responsive ── */
  .settings-layout {
    flex-direction: column !important;
  }
  .settings-sidebar {
    width: 100% !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 4px !important;
    padding-bottom: 8px !important;
  }
  .settings-sidebar .settings-tab {
    white-space: nowrap !important;
    min-width: auto !important;
    padding: 8px 12px !important;
    font-size: .65rem !important;
  }

  /* ── Ensure views don't block scroll ── */
  .view {
    overflow: visible !important;
    min-height: 0 !important;
  }
  .content-wrapper {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── Mobile-friendly integrations panel ── */
  #int-adv-key, #int-adv-org, #int-pd-client, #int-pd-token, #int-pd-appid {
    font-size: .75rem !important;
  }
}

/* ── Small phones (375px and below) ── */
@media (max-width: 400px) {
  .topbar-title {
    font-size: .75rem !important;
    max-width: 100px;
  }
  .gh-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  .gh-card {
    padding: 10px !important;
  }
  .gh-icon {
    width: 30px !important;
    height: 30px !important;
  }
  .gh-icon svg {
    width: 30px !important;
    height: 30px !important;
  }
  .gh-title {
    font-size: .68rem !important;
  }
  .content-wrapper {
    padding: 6px 8px 90px !important;
  }
  .fbb-grid {
    gap: 2px !important;
  }
  .fbb-cell {
    padding: 4px !important;
    min-height: 50px !important;
  }
}

/* ═══════════════════════════════════════════════════
   EMPLOYEE PROFILE - Redesigned flat layout
   ═══════════════════════════════════════════════════ */

/* KPI strip: 4 cards in a row */
.emp-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.emp-kpi-strip .emp-kpi {
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  text-align: center;
}
.emp-kpi-strip .emp-kpi-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 4px;
}
.emp-kpi-strip .emp-kpi-value {
  font-family: var(--font-mono);font-variant-numeric:tabular-nums;
  font-weight: 900;
  font-size: 1.15rem;
  color: var(--text-1);
  line-height: 1.2;
}
/* .emp-kpi-strip .emp-kpi light-tema ejes nu af bauhaus-skin.css (hvidt felt). */

/* 2-column grid for profile sections */
.emp-grid-2 {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 14px;
  margin-bottom: 16px;
}
.emp-grid-half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

/* Responsive: stack on mobile */
@media (max-width: 768px) {
  .emp-kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .emp-grid-2, .emp-grid-half { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .emp-kpi-strip { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   CONSISTENCY NORMALIZATION - April 2026
   Unifies visual inconsistencies across card systems
   ═══════════════════════════════════════════════════════════ */

/* Utility classes for most-repeated inline patterns */
.u-section-title { font-family: var(--font-brand); font-size: 1.1rem; font-weight: 800; color: var(--text-1); margin-bottom: 12px; }
.u-section-title-lg { font-family: var(--font-brand); font-size: 1.3rem; font-weight: 800; color: var(--text-1); margin-bottom: 6px; }
.u-label { font-weight: 700; color: var(--text-1); margin-bottom: 4px; }
.u-sublabel { font-size: .78rem; color: var(--text-3); text-align: center; }
.u-close-btn { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 1rem; padding: 0; line-height: 1; }
.u-close-btn:hover { color: var(--text-1); }
.u-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 8px; font-size: .65rem; font-weight: 700; }
.u-stat-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border-top: 1px solid var(--border); }
.u-flex-center { display: flex; align-items: center; justify-content: center; }
.u-flex-between { display: flex; align-items: center; justify-content: space-between; }
.u-gap-sm { gap: 6px; }
.u-gap-md { gap: 10px; }
.u-gap-lg { gap: 16px; }
.u-mono { font-family: var(--font-mono);font-variant-numeric:tabular-nums; font-weight: 800; }
.u-text-xs { font-size: .6rem; }
.u-text-sm { font-size: .72rem; }
.u-text-md { font-size: .82rem; }
.u-text-muted { color: var(--text-3); }
.u-border-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm, 10px); padding: 6px 10px; }
.u-accent { color: var(--accent); }
.u-bold { font-weight: 700; }

/* Standard modal overlay + box */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  z-index: var(--z-modal, 1000);
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
}
.modal-overlay.show { display: flex; animation: fadeIn .2s ease; }
.modal-box {
  background: var(--card-solid, #161b22);
  border: 1px solid var(--border);
  border-radius: 20px;
  max-width: 520px; width: 92%; max-height: 85vh;
  overflow-y: auto; padding: 28px 32px;
  box-shadow: 0 24px 64px rgba(0,0,0,.4);
  animation: slideUp .3s ease;
}
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;
}
.modal-title { font-family: var(--font-brand); font-size: 1.1rem; font-weight: 800; color: var(--text-1); }
.modal-close {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-2); font-size: 1rem; transition: all .15s;
}
.modal-close:hover { background: var(--surface-hover); color: var(--text-1); }

/* Normalize all card hover states */
.ph-card:hover, .ds-card:hover, .glass-card:hover, .bv-card:hover, .gam-card:hover {
  border-color: rgba(var(--accent-rgb),.15);
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}

/* Consistent focus-visible for keyboard users */
[tabindex="0"]:focus-visible,
button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Normalize scrollbar across browsers */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }

/* ═══════════════════════════════════════════════════════════
   VISUAL POLISH - Micro-interactions & depth
   ═══════════════════════════════════════════════════════════ */

/* Content wrapper - subtle gradient background for depth */
.content-wrapper {
  background:
    radial-gradient(ellipse 50% 30% at 80% 10%, var(--glow-green) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 10% 80%, var(--glow-purple) 0%, transparent 60%);
}

/* Section cards - subtle entrance animation */
.section-card { animation: sectionFadeIn .3s ease both; }
@keyframes sectionFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Stagger section cards */
.section-card:nth-child(1) { animation-delay: 0s; }
.section-card:nth-child(2) { animation-delay: .05s; }
.section-card:nth-child(3) { animation-delay: .1s; }
.section-card:nth-child(4) { animation-delay: .15s; }
.section-card:nth-child(5) { animation-delay: .2s; }
.section-card:nth-child(6) { animation-delay: .25s; }

/* KPI grid cards - stagger animation */
.kpi-grid > div { animation: kpiFadeIn .4s cubic-bezier(.4,0,.2,1) both; }
@keyframes kpiFadeIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.kpi-grid > div:nth-child(1) { animation-delay: 0s; }
.kpi-grid > div:nth-child(2) { animation-delay: .06s; }
.kpi-grid > div:nth-child(3) { animation-delay: .12s; }
.kpi-grid > div:nth-child(4) { animation-delay: .18s; }

/* Widget action buttons - polish */
.widget-action-btn:hover {
  background: var(--surface-hover);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

/* Chart containers - consistent glass look */
canvas { border-radius: 8px; }

/* Table rows - subtle hover */
table tr:hover td { background: rgba(var(--accent-rgb),.02); }

/* Selection color - brand green */
::selection { background: rgba(var(--accent-rgb),.20); }

/* Smooth page scroll + consistent content padding */
.content-wrapper { scroll-behavior: smooth; }
.content-wrapper > .view { padding-bottom: 40px; }

/* View headings - consistent spacing after topbar */
.view > h2:first-child,
.view > div:first-child > h2:first-child { margin-top: 4px; }

/* Breathing room between major dashboard sections */
.section-card + .section-card { margin-top: 2px; }
#dashboard-inner > div { margin-bottom: 16px; }

/* Active link underline animation */
.sidebar .nav-btn.active .nav-item-label {
  position: relative;
}

/* Subtle shine on accent elements */
[style*="background:var(--accent)"],
[style*="background: var(--accent)"],
.btn-p, .login-btn {
  background-image: linear-gradient(135deg, transparent 40%, rgba(255,255,255,.1) 50%, transparent 60%);
  background-size: 200% 100%;
}

/* Quick actions - tighter, more compact */
.ph-quick-actions {
  margin-bottom: 16px;
}

/* Card accent borders - subtle color coding */
.ph-cards-grid > .ph-card:nth-child(1) { border-left: 2px solid rgba(var(--accent-rgb),.15); }
.ph-cards-grid > .ph-card:nth-child(2) { border-left: 2px solid rgba(51,154,240,.15); }
.ph-cards-grid > .ph-card:nth-child(3) { border-left: 2px solid rgba(132,94,247,.15); }
.ph-cards-grid > .ph-card:nth-child(4) { border-left: 2px solid rgba(245,158,11,.15); }
.ph-cards-grid > .ph-card:nth-child(5) { border-left: 2px solid rgba(var(--accent-rgb),.12); }
.ph-cards-grid > .ph-card:nth-child(6) { border-left: 2px solid rgba(255,215,0,.15); }
.ph-cards-grid > .ph-card:nth-child(7) { border-left: 2px solid rgba(51,154,240,.12); }
.ph-cards-grid > .ph-card:nth-child(8) { border-left: 2px solid rgba(236,72,153,.12); }
.ph-card-full { border-left: 2px solid rgba(var(--accent-rgb),.10); }

/* Phoner cards stagger */
.ph-cards-grid > .ph-card { animation: phCardIn .3s ease both; }
@keyframes phCardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.ph-cards-grid > .ph-card:nth-child(1) { animation-delay: 0s; }
.ph-cards-grid > .ph-card:nth-child(2) { animation-delay: .04s; }
.ph-cards-grid > .ph-card:nth-child(3) { animation-delay: .08s; }
.ph-cards-grid > .ph-card:nth-child(4) { animation-delay: .12s; }
.ph-cards-grid > .ph-card:nth-child(5) { animation-delay: .16s; }
.ph-cards-grid > .ph-card:nth-child(6) { animation-delay: .2s; }
.ph-cards-grid > .ph-card:nth-child(7) { animation-delay: .24s; }
.ph-cards-grid > .ph-card:nth-child(8) { animation-delay: .28s; }

/* Normalize tooltip-like titles - prevent flash on hover */
[title] { position: relative; }

/* Consistent transition speed */
.ph-card, .ds-card, .glass-card, .gam-card, .bv-card,
.nav-btn, .ph-action, button { transition: all .15s ease; }

/* Mobile: prevent horizontal overflow from wide inline grids */
@media (max-width: 768px) {
  .ph-kpi-strip { grid-template-columns: 1fr 1fr; }
  .ph-quick-actions { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 420px) {
  .ph-kpi-strip { grid-template-columns: 1fr; }
  .ph-quick-actions { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════
   LIVE UI - micro-interactions that make the dashboard feel alive
═══════════════════════════════════════════════════════════════════ */

/* ── LIVE PULSE DOT ──────────────────────────────────────────────── */
.live-pulse {
  position: relative;
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red, #ED8A8F);
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
  animation: livePulse 2s infinite;
}
.live-pulse.green { background: var(--green, #1F9E5A); box-shadow: 0 0 0 0 rgba(25, 195, 125, 0.6); animation-name: livePulseGreen; }
.live-pulse.blue { background: var(--blue, #3b9eff); box-shadow: 0 0 0 0 rgba(59, 158, 255, 0.6); animation-name: livePulseBlue; }
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
  70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
@keyframes livePulseGreen {
  0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6); }
  70% { box-shadow: 0 0 0 10px rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}
@keyframes livePulseBlue {
  0% { box-shadow: 0 0 0 0 rgba(59, 158, 255, 0.6); }
  70% { box-shadow: 0 0 0 10px rgba(59, 158, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(59, 158, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .live-pulse, .live-pulse.green, .live-pulse.blue { animation: none; }
}

/* ── RIPPLE EFFECT ON BUTTONS ─────────────────────────────────────── */
.btn, button.primary, button.accent, .es-action, .nav-btn {
  position: relative;
  overflow: hidden;
}
@keyframes btnRipple {
  from { transform: scale(0); opacity: 0.5; }
  to { transform: scale(4); opacity: 0; }
}
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  pointer-events: none;
  transform: scale(0);
  animation: btnRipple 600ms ease-out forwards;
}
@media (prefers-reduced-motion: reduce) {
  .btn-ripple { display: none; }
}

/* ── NUMBER COUNT-UP (pulse on change) ────────────────────────────── */
@keyframes numberBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); color: var(--accent, var(--accent, #0A84FF)); }
  100% { transform: scale(1); }
}
.number-bump { animation: numberBump 450ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .number-bump { animation: none; }
}

/* ── CARD HOVER LIFT ─────────────────────────────────────────────── */
.card, .dash-module-card, .emp-card, .camp-card, .kpi-card {
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .2s ease;
}
.card:hover, .dash-module-card:hover, .emp-card:hover, .camp-card:hover, .kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.1);
}
@media (prefers-reduced-motion: reduce) {
  .card, .dash-module-card, .emp-card, .camp-card, .kpi-card { transition: none; }
  .card:hover, .dash-module-card:hover, .emp-card:hover, .camp-card:hover, .kpi-card:hover { transform: none; box-shadow: none; }
}

/* ── SHIMMERING "LIVE" BACKGROUND ON ACTIVE ELEMENTS ─────────────── */
@keyframes liveShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.live-shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--accent-rgb),0.08) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: liveShimmer 3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .live-shimmer { animation: none; background: none; }
}

/* ── STAGGER FADE-IN (enhances the existing stagger-in) ──────────── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.stagger-in > * {
  opacity: 0;
  animation: fadeSlideUp .5s cubic-bezier(.2,.8,.2,1) forwards;
}
.stagger-in > *:nth-child(1) { animation-delay: 0ms; }
.stagger-in > *:nth-child(2) { animation-delay: 50ms; }
.stagger-in > *:nth-child(3) { animation-delay: 100ms; }
.stagger-in > *:nth-child(4) { animation-delay: 150ms; }
.stagger-in > *:nth-child(5) { animation-delay: 200ms; }
.stagger-in > *:nth-child(6) { animation-delay: 250ms; }
.stagger-in > *:nth-child(7) { animation-delay: 300ms; }
.stagger-in > *:nth-child(8) { animation-delay: 350ms; }
.stagger-in > *:nth-child(n+9) { animation-delay: 400ms; }
@media (prefers-reduced-motion: reduce) {
  .stagger-in > * { opacity: 1; animation: none; }
}

/* ── PROGRESS BAR FILL ANIMATION ─────────────────────────────────── */
@keyframes progressFill {
  from { width: 0; }
}
.progress-bar-fill,
.bv-bar-fill,
.gam-bar-fill {
  animation: progressFill 1.2s cubic-bezier(.2,.8,.2,1);
  transition: width .6s cubic-bezier(.2,.8,.2,1);
}
@media (prefers-reduced-motion: reduce) {
  .progress-bar-fill, .bv-bar-fill, .gam-bar-fill { animation: none; transition: none; }
}

/* ── TOAST SLIDE-IN ──────────────────────────────────────────────── */
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(40px) scale(0.95); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
.toast, .notification-toast {
  animation: toastSlideIn .35s cubic-bezier(.2,.8,.2,1);
}
@media (prefers-reduced-motion: reduce) {
  .toast, .notification-toast { animation: none; }
}

/* ── KPI STRIP SUBTLE GLOW ON ACCENT VALUES ──────────────────────── */
.kpi-value-accent {
  background: linear-gradient(135deg, var(--accent, var(--accent, #0A84FF)), #339af0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 6s ease-in-out infinite;
  background-size: 200% 200%;
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .kpi-value-accent { animation: none; }
}

/* ── LIVE-TICKER ──────────────────────────────────────────────────── */
/* Bloomberg-terminal stil - mørk bar, mono-font, ▲/▼ grøn/rød.      */
/* CSS er primært injected inline af live-ticker.js (_injectCSS()),    */
/* men body-offset og global overrides sættes her så layout er stabilt */
/* FØR JS loader (undgår layout-shift).                                */

:root {
  --lt-h: 36px;
}
body.has-live-ticker-v2 {
  padding-top: var(--lt-h) !important;
}
/* Sørg for at #liveTicker (v1 id) aldrig vises side om side med v2 */
#liveTicker {
  display: none !important;
}
body.has-live-ticker {
  padding-top: 0 !important;
}
@media (max-width: 700px) {
  :root { --lt-h: 30px; }
}
/* ── END LIVE-TICKER ──────────────────────────────────────────────── */

/* ── LIVE-TICKER ──────────────────────────────────────────────────────────
   Linear/Wolt-clean single-event bar.
   Struktur: [●LIVE | icon text | tid ›]
   Animationer: slide-in/out via CSS classes + JS timing.
   ────────────────────────────────────────────────────────────────────── */

/* Container */
.live-ticker {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 42px;
  z-index: 250;
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--card, #1e1f28) 92%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 2px 18px -6px rgba(0,0,0,.4);
  font-size: .8rem;
  font-weight: 500;
  color: var(--text-2, #c9c9d3);
  user-select: none;
  overflow: hidden;
  /* Initialtilstand: slide-in klar */
  opacity: 1;
}

/* LIVE-badge (venstre) */
.lt-live-badge {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px 0 16px;
  height: 100%;
}

.lt-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #F3EEE4;
  flex-shrink: 0;
  animation: ltPulse 1.6s ease-out infinite;
}

@keyframes ltPulse {
  0%   { box-shadow: 0 0 0 0   rgba(243,238,228,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(243,238,228,0);   }
  100% { box-shadow: 0 0 0 0   rgba(243,238,228,0);   }
}

.lt-live-label {
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #F3EEE4;
  line-height: 1;
}

/* Divider */
.lt-divider {
  width: 1px;
  height: 20px;
  background: var(--border, rgba(255,255,255,.1));
  flex-shrink: 0;
  margin-right: 14px;
}

/* Body (center) */
.lt-body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  min-width: 0;
}

/* Icon */
.lt-icon-wrap {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}
.lt-icon-wrap .ic {
  width: 14px;
  height: 14px;
  background: currentColor;
}

/* Tekst */
.lt-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-2, #c9c9d3);
  font-size: .8rem;
}
.lt-text b {
  font-weight: 700;
  color: var(--text-1, #fff);
}

/* Meta (højre) */
.lt-meta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px 0 12px;
  height: 100%;
}

.lt-time {
  font-size: .7rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-3, rgba(255,255,255,.35));
  white-space: nowrap;
}

.lt-chevron {
  font-size: .85rem;
  font-weight: 300;
  color: var(--text-3, rgba(255,255,255,.3));
  line-height: 1;
  display: none; /* vises kun ved klikbare events via JS */
  transition: transform .15s ease;
}

/* Klikbar tilstand */
.live-ticker.lt-clickable {
  cursor: pointer;
}
.live-ticker.lt-clickable:hover .lt-text b {
  color: var(--accent, var(--accent, #0A84FF));
}
.live-ticker.lt-clickable:hover .lt-chevron {
  transform: translateX(2px);
  color: var(--accent, var(--accent, #0A84FF));
}
.live-ticker.lt-clickable:focus-visible {
  outline: 2px solid var(--accent, var(--accent, #0A84FF));
  outline-offset: -2px;
}

/* ── Animationer ─────────────────────────────────────────────────── */
.live-ticker .lt-body,
.live-ticker .lt-meta {
  transition: opacity .15s ease, transform .15s ease;
}

/* Slide-in: fra højre (translateX 20px → 0) */
.live-ticker.lt-slide-in .lt-body,
.live-ticker.lt-slide-in .lt-meta {
  animation: ltSlideIn 400ms cubic-bezier(.2,.8,.3,1) both;
}
@keyframes ltSlideIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0);    }
}

/* Slide-out: mod venstre */
.live-ticker.lt-slide-out .lt-body,
.live-ticker.lt-slide-out .lt-meta {
  animation: ltSlideOut 300ms cubic-bezier(.4,0,.6,1) both;
}
@keyframes ltSlideOut {
  from { opacity: 1; transform: translateX(0);     }
  to   { opacity: 0; transform: translateX(-20px); }
}

/* Blank-pause: indhold skjult */
.live-ticker.lt-blank .lt-body,
.live-ticker.lt-blank .lt-meta {
  opacity: 0;
}

/* ── Body padding ────────────────────────────────────────────────── */
body.has-live-ticker { padding-top: 42px; }

/* ── Mobil ───────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .live-ticker { height: 36px; }
  .lt-time { display: none; }
  .lt-live-label { display: none; }
  .lt-divider { margin-right: 10px; }
  body.has-live-ticker { padding-top: 36px; }
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lt-dot { animation: none !important; }
  .live-ticker.lt-slide-in .lt-body,
  .live-ticker.lt-slide-in .lt-meta,
  .live-ticker.lt-slide-out .lt-body,
  .live-ticker.lt-slide-out .lt-meta { animation: none !important; opacity: 1; transform: none; }
}

/* ── Accent-farver per event-type (via lt-body icon) ─────────────── */
.live-ticker[data-lt-type="emp"] .lt-icon-wrap .ic { background: var(--accent, var(--accent, #0A84FF)); }
.live-ticker[data-lt-type="camp"] .lt-icon-wrap .ic { background: #a78bfa; }
.live-ticker[data-lt-type="stat"] .lt-icon-wrap .ic { background: #7dd3fc; }

/* ═══════════════════════════════════════════════════════════════════════════
   PHONER HJEM - Briefing-koncept (1:1 med /phoner-home-briefing.html mockup)
   Scoped --phb-* tokens. Tealt accent (#5eead4), deep navy bg (#0a0d14),
   Inter font. Uafhængig af appens øvrige tema-vars.
   ═══════════════════════════════════════════════════════════════════════════ */
.phb-shell {
  --phb-bg: #0a0d14;
  --phb-surface: #11151f;
  --phb-surface-2: #161c2a;
  --phb-border: rgba(255,255,255,.06);
  --phb-border-2: rgba(255,255,255,.10);
  --phb-text-1: #f3f5f9;
  --phb-text-2: #a1a9bc;
  --phb-text-3: #5d6679;
  --phb-text-4: #3d4456;
  --phb-accent: var(--bh-blue, #0A84FF);   /* Rude systemblaa (var teal #5eead4 — off-brand) */
  --phb-accent-2: var(--bh-blue-deep, #0060DF);
  --phb-accent-soft: rgba(10, 132, 255, .12);
  --phb-green: #4ade80;
  --phb-amber: #fbbf24;
  --phb-red: #f87171;
  --phb-blue: #60a5fa;
  --phb-purple: #a78bfa;
  --phb-r-lg: 14px;
  --phb-r-md: 10px;
  --phb-r-sm: 6px;
  --phb-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px -8px rgba(0,0,0,.4);
  --phb-font: var(--bh-body);
  --phb-font-num: var(--bh-mono);

  max-width: 560px;
  margin: 0 auto;
  padding: 28px 20px 100px;
  background: var(--phb-bg);
  color: var(--phb-text-1);
  font-family: var(--phb-font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  box-sizing: border-box;
}
.phb-shell *, .phb-shell *::before, .phb-shell *::after { box-sizing: border-box; }

html[data-theme="light"] .phb-shell {
  --phb-bg: #F3EEE4;
  --phb-surface: #ffffff;
  --phb-surface-2: #fafbfc;
  --phb-border: rgba(0,0,0,.07);
  --phb-border-2: rgba(0,0,0,.12);
  --phb-text-1: #14110D;
  --phb-text-2: #475569;
  --phb-text-3: #94a3b8;
  --phb-text-4: #cbd5e1;
  --phb-accent: var(--bh-blue, #0A84FF);   /* Rude systemblaa (var kobolt #0A84FF — off-brand) */
  --phb-accent-2: var(--bh-blue-deep, #0060DF); /* dyb Rude-blaa */
  --phb-accent-soft: rgba(10, 132, 255, .10);
  --phb-green: #1F9E5A;    /* bauhaus success */
  --phb-amber: #FF6A1A;    /* tangerine pop */
  --phb-red: #E0392B;      /* bauhaus danger */
  --phb-r-lg: 16px;        /* bauhaus radius (var 14px) */
  --phb-r-md: 8px;         /* bauhaus radius (var 10px) */
  --phb-r-sm: 4px;         /* bauhaus radius (var 6px) */
  --phb-shadow: 0 1px 0 rgba(0,0,0,.02), 0 4px 16px -4px rgba(15,23,42,.08);
}

/* Phoner-home-view: override design-system.css's max-width:820px så briefing-bg
 * fylder hele viewport (deep navy / lys cream matchende mockup). Padding:0 så
 * .phb-shell selv styrer max-width-centrering af content. */
#phoner-home-view {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #0a0d14;
  min-height: 100vh;
}
html[data-theme="light"] #phoner-home-view { background: #F3EEE4; }

/* ── Top: dato + person ── */
.phb-top {
  margin-bottom: 24px;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
}
.phb-date {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--phb-text-3);
  text-transform: uppercase;
}
.phb-clock {
  font-family: var(--phb-font-num);
  font-variant-numeric: tabular-nums;
  font-size: .76rem;
  color: var(--phb-text-3);
  letter-spacing: .04em;
}
.phb-greet {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--phb-text-1);
  margin: 4px 0 2px;
}
.phb-context {
  font-size: .82rem;
  color: var(--phb-text-2);
  font-weight: 500;
}
.phb-context .phb-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px;
  background: var(--phb-accent-soft);
  color: var(--phb-accent);
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 600;
  margin-left: 4px;
  vertical-align: 1px;
}

/* ── Sektion-header ── */
.phb-shead {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 32px 0 12px;
}
.phb-stitle {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--phb-text-3);
}
.phb-smeta {
  font-size: .72rem;
  color: var(--phb-text-3);
  font-variant-numeric: tabular-nums;
}

/* ──────── HVOR ER DU ──────── */
.phb-card {
  background: var(--phb-surface);
  border: 1px solid var(--phb-border);
  border-radius: var(--phb-r-lg);
  padding: 22px 22px 18px;
  box-shadow: var(--phb-shadow);
}

/* ──────── AVATAR-PODIUM (2026-05-19) ────────
   Centralt på phoner-siden. User-avatar på gold-platform i midten,
   silver/bronze på siderne med top-2 sæson-leaders. */
.phb-card.phb-podium {
  padding: 28px 22px 18px;
  background: linear-gradient(180deg, rgba(251,191,36,.06), rgba(251,191,36,.02) 40%, var(--phb-surface));
  border-color: rgba(251,191,36,.25);
}
.phb-podium-stage {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  align-items: end;
  gap: 12px;
  margin-bottom: 18px;
  min-height: 200px;
}
.phb-podium-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.phb-podium-slot.phb-pod-empty { opacity: 0.35; }
.phb-pod-crown { font-size: 1.8rem; line-height: 1; margin-bottom: -4px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.phb-pod-avatar {
  width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
  background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.15);
}
.phb-pod-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phb-pod-avatar-lg {
  width: 88px; height: 88px; border: 3px solid var(--phb-accent, var(--accent, #0A84FF));
  box-shadow: 0 6px 18px rgba(var(--accent-rgb),.3), 0 0 0 4px rgba(251,191,36,.18);
}
.phb-pod-name {
  font-size: .82rem; font-weight: 800; color: var(--phb-text-1);
  text-align: center; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.phb-pod-title {
  font-size: .62rem; font-weight: 700; color: var(--phb-accent, var(--accent, #0A84FF));
  text-align: center; padding: 2px 8px; background: rgba(var(--accent-rgb),.1);
  border-radius: 10px; max-width: 100%; white-space: nowrap;
}
.phb-pod-platform {
  width: 100%; min-height: 36px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px 8px 0 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 900; color: var(--phb-text-2);
  margin-top: 4px;
}
.phb-podium-1st .phb-pod-platform { min-height: 70px; font-size: 2rem; }
.phb-pod-platform-gold {
  background: linear-gradient(180deg, rgba(251,191,36,.4), rgba(251,191,36,.2));
  border-color: rgba(251,191,36,.5);
  color: #fbbf24;
  box-shadow: inset 0 -4px 0 rgba(251,191,36,.4);
}
.phb-podium-2nd .phb-pod-platform {
  background: linear-gradient(180deg, rgba(180,180,180,.3), rgba(160,160,160,.15));
  border-color: rgba(180,180,180,.4);
  color: #c0c0c0; min-height: 50px;
}
.phb-podium-3rd .phb-pod-platform {
  background: linear-gradient(180deg, rgba(205,127,50,.3), rgba(180,110,40,.15));
  border-color: rgba(205,127,50,.4);
  color: #cd7f32; min-height: 40px;
}
.phb-podium-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  padding-top: 16px; border-top: 1px solid rgba(255,255,255,.06);
}
.phb-podium-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.phb-pod-stat-label {
  font-size: .6rem; font-weight: 700; color: var(--phb-text-3);
  text-transform: uppercase; letter-spacing: .08em;
}
.phb-pod-stat-val {
  font-size: .9rem; font-weight: 900; color: var(--phb-text-1);
  font-family: var(--font-mono);font-variant-numeric:tabular-nums;
}
@media (max-width: 480px) {
  .phb-podium-stage { gap: 6px; min-height: 170px; }
  .phb-pod-avatar { width: 44px; height: 44px; }
  .phb-pod-avatar-lg { width: 68px; height: 68px; }
  .phb-pod-name { font-size: .72rem; }
}
.phb-fcst-row {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 18px;
}
.phb-fcst-num {
  font-family: var(--phb-font);
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--phb-accent);
  font-variant-numeric: tabular-nums;
}
.phb-fcst-num.warn { color: var(--phb-amber); }
.phb-fcst-num.bad { color: var(--phb-red); }
.phb-fcst-text {
  font-size: .88rem;
  color: var(--phb-text-2);
  line-height: 1.4;
  font-weight: 500;
}
.phb-fcst-text strong { color: var(--phb-text-1); font-weight: 700; }

/* ── TIDSLINJE ── */
.phb-timeline {
  position: relative;
  margin: 12px 0 14px;
  height: 88px;
}
.phb-tl-track {
  position: absolute; inset: 0 0 22px 0;
  display: flex;
  gap: 3px;
}
.phb-tl-hour {
  flex: 1;
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: var(--phb-r-sm);
  background: var(--phb-surface-2);
  overflow: hidden;
  cursor: default;
}
.phb-tl-bar {
  background: linear-gradient(180deg, var(--phb-accent), var(--phb-accent-2));
  border-radius: var(--phb-r-sm);
  width: 100%;
  transition: height .8s cubic-bezier(.4, 0, .2, 1);
}
.phb-tl-hour.pause {
  background: repeating-linear-gradient(
    -45deg,
    var(--phb-surface-2) 0 4px,
    transparent 4px 8px
  );
  border: 1px dashed var(--phb-border-2);
}
.phb-tl-hour.pause .phb-tl-bar { display: none; }
.phb-tl-hour.power {
  outline: 1px solid rgba(251, 191, 36, .25);
  outline-offset: -1px;
}
.phb-tl-hour.power::before {
  content: '';
  position: absolute; inset: auto 4px 4px 4px;
  height: 2px;
  background: var(--phb-amber);
  border-radius: 1px;
  opacity: .85;
}
.phb-tl-hour.now {
  outline: 1.5px solid var(--phb-accent);
  outline-offset: -1.5px;
  box-shadow: 0 0 16px var(--phb-accent-soft);
}
.phb-tl-hour.now .phb-tl-bar {
  background: linear-gradient(180deg, var(--phb-accent), var(--phb-accent-2));
  position: relative;
}
.phb-tl-hour.now .phb-tl-bar::after {
  content: ''; position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--phb-accent);
  box-shadow: 0 0 8px var(--phb-accent);
  animation: phb-pulse-dot 1.6s ease-in-out infinite;
}
@keyframes phb-pulse-dot {
  0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
  50% { opacity: .5; transform: translateX(-50%) scale(1.3); }
}
.phb-tl-hour:hover::before {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  padding: 5px 9px;
  background: var(--phb-surface-2);
  border: 1px solid var(--phb-border-2);
  border-radius: 6px;
  font-size: .64rem;
  color: var(--phb-text-1);
  font-weight: 600;
  pointer-events: none;
  z-index: 5;
}
.phb-tl-hour:hover::after {
  content: '';
  position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 4px solid var(--phb-border-2);
  pointer-events: none;
  z-index: 5;
}

.phb-tl-labels {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; gap: 3px;
  font-size: .58rem;
  color: var(--phb-text-3);
  font-family: var(--phb-font-num);
  font-variant-numeric: tabular-nums;
}
.phb-tl-labels > span {
  flex: 1;
  text-align: center;
  letter-spacing: .04em;
}

/* ── Hint-strip ── */
.phb-hint-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--phb-border);
}
.phb-hint {
  display: flex; flex-direction: column; gap: 2px;
}
.phb-h-label {
  font-size: .62rem;
  color: var(--phb-text-3);
  font-weight: 600;
  letter-spacing: .04em;
}
.phb-h-val {
  font-family: var(--phb-font-num);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  font-weight: 700;
  color: var(--phb-text-1);
  letter-spacing: -.01em;
}
.phb-h-val.up { color: var(--phb-green); }
.phb-h-val.dn { color: var(--phb-red); }
.phb-h-val small {
  font-size: .68rem;
  color: var(--phb-text-3);
  margin-left: 2px;
  font-weight: 500;
}

/* ──────── MINE TAL ──────── */
.phb-period-tabs {
  display: inline-flex;
  background: var(--phb-surface-2);
  border: 1px solid var(--phb-border);
  border-radius: 999px;
  padding: 3px;
}
.phb-ptab {
  background: none; border: none; cursor: pointer;
  padding: 5px 12px;
  border-radius: 999px;
  color: var(--phb-text-3);
  font-size: .68rem;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: .02em;
  transition: all .15s;
}
.phb-ptab:hover { color: var(--phb-text-2); }
.phb-ptab.active {
  background: var(--phb-surface);
  color: var(--phb-text-1);
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.phb-stats-hero {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--phb-border);
}
.phb-stats-num {
  font-family: var(--phb-font);
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--phb-text-1);
  font-variant-numeric: tabular-nums;
}
.phb-stats-label {
  font-size: .76rem;
  color: var(--phb-text-3);
  font-weight: 500;
  margin-top: 6px;
}
.phb-stats-delta {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px;
  font-size: .7rem;
  color: var(--phb-text-3);
}
.phb-delta-arrow {
  display: inline-block; font-size: 1.1rem; line-height: 1;
  font-weight: 700;
}
.phb-delta-arrow.up, .phb-delta-num.up { color: var(--phb-green); }
.phb-delta-arrow.dn, .phb-delta-num.dn { color: var(--phb-red); }
.phb-delta-num {
  font-family: var(--phb-font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: .82rem;
}
.phb-delta-vs { font-size: .65rem; }

.phb-trend {
  width: 100%;
  height: 100px;
  margin: 16px 0 4px;
  display: block;
  overflow: visible;
}
.phb-trend-goal { stroke: var(--phb-text-4); }
.phb-trend-x {
  display: flex;
  font-size: .58rem;
  color: var(--phb-text-3);
  font-family: var(--phb-font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  padding: 0 2px 14px;
  border-bottom: 1px solid var(--phb-border);
}
.phb-trend-x > span { flex: 1; text-align: center; }

/* Hover-tooltip på trend-chart */
.phb-trend-tooltip {
  position: absolute;
  transform: translate(-50%, -100%);
  background: var(--phb-surface-2);
  border: 1px solid var(--phb-border-2);
  border-radius: 6px;
  padding: 6px 10px;
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  font-size: .68rem;
  line-height: 1.2;
}
.phb-trend-tooltip .phb-tt-date {
  color: var(--phb-text-3);
  font-size: .58rem;
  letter-spacing: .04em;
  font-family: var(--phb-font-num);
  margin-bottom: 2px;
}
.phb-trend-tooltip .phb-tt-val {
  font-weight: 700;
  font-size: .85rem;
  font-family: var(--phb-font-num);
  font-variant-numeric: tabular-nums;
}
.phb-trend-tooltip .phb-tt-val.up { color: var(--phb-accent); }
.phb-trend-tooltip .phb-tt-val.dn { color: var(--phb-text-2); }
.phb-card.phb-stats { position: relative; }

.phb-qstats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 16px 0 4px;
  border-bottom: 1px solid var(--phb-border);
}
.phb-qstat {
  text-align: left;
  padding: 0 8px;
  border-right: 1px solid var(--phb-border);
}
.phb-qstat:first-child { padding-left: 0; }
.phb-qstat:last-child { border-right: 0; padding-right: 0; }
.phb-q-label {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--phb-text-3);
  margin-bottom: 4px;
}
.phb-q-val {
  font-family: var(--phb-font);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--phb-text-1);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.phb-q-val small {
  font-size: .65rem;
  font-weight: 600;
  color: var(--phb-text-3);
  margin-left: 2px;
}
.phb-q-sub {
  font-size: .62rem;
  color: var(--phb-text-3);
  margin-top: 4px;
  font-weight: 500;
}
.phb-q-sub.up { color: var(--phb-green); }
.phb-q-sub.dn { color: var(--phb-red); }

.phb-pb-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  padding-top: 16px;
}
.phb-pb {
  display: flex; align-items: center; gap: 10px;
  font-size: .76rem;
}
.phb-pb-ico {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--phb-surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; flex-shrink: 0;
}
.phb-pb-label {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--phb-text-3);
  margin-bottom: 1px;
}
.phb-pb-val {
  font-size: .76rem;
  font-weight: 700;
  color: var(--phb-text-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.005em;
  line-height: 1.2;
}

/* ──────── HVAD HOLDET LAVER ──────── */
.phb-team {
  padding: 16px 0 12px;
  overflow: hidden;
}
.phb-team-feed {}
.phb-team-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 22px;
  font-size: .87rem;
  border-bottom: 1px solid var(--phb-border);
  transition: background .12s;
}
.phb-team-row:last-of-type { border-bottom: 0; }
.phb-team-row:hover { background: var(--phb-surface-2); }
.phb-team-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--phb-surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
}
.phb-team-icon.up { background: rgba(74,222,128,.10); }
.phb-team-icon.rank { background: rgba(96,165,250,.10); }
.phb-team-icon.streak { background: rgba(251,191,36,.10); }
.phb-team-icon.crown { background: rgba(167,139,250,.10); }
.phb-team-text {
  color: var(--phb-text-2);
  line-height: 1.3;
}
.phb-team-text strong { color: var(--phb-text-1); font-weight: 700; }
.phb-team-text em {
  font-style: normal;
  color: var(--phb-accent);
  font-weight: 600;
}
.phb-team-time {
  font-family: var(--phb-font-num);
  font-variant-numeric: tabular-nums;
  font-size: .7rem;
  color: var(--phb-text-3);
}
.phb-team-summary {
  padding: 12px 22px 4px;
  margin-top: 4px;
  border-top: 1px solid var(--phb-border);
  display: flex; justify-content: space-between; align-items: center;
  font-size: .76rem;
  color: var(--phb-text-2);
}
.phb-team-summary strong { color: var(--phb-text-1); font-weight: 700; }
.phb-live-dot {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--phb-text-3);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.phb-live-dot::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--phb-green);
  box-shadow: 0 0 8px var(--phb-green);
  animation: phb-pulse-dot 1.6s ease-in-out infinite;
}

/* ──────── I GÅR ──────── */
.phb-yest-row { display: flex; align-items: center; gap: 18px; }
.phb-yest-num {
  font-family: var(--phb-font);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--phb-text-1);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.phb-yest-text { flex: 1; }
.phb-yest-headline {
  font-size: .88rem;
  font-weight: 600;
  color: var(--phb-text-1);
  margin-bottom: 2px;
}
.phb-yest-sub {
  font-size: .76rem;
  color: var(--phb-text-3);
}
.phb-yest-link {
  font-size: .74rem;
  font-weight: 600;
  color: var(--phb-accent);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.phb-yest-link:hover { color: var(--phb-accent-2); }

/* Mobile */
@media (max-width: 480px) {
  .phb-shell { padding: 20px 14px 100px; }
  .phb-greet { font-size: 1.3rem; }
  .phb-fcst-num { font-size: 2.5rem; }
  .phb-stats-num { font-size: 2rem; }
  .phb-pb-row { grid-template-columns: 1fr; gap: 10px; }
  .phb-qstats { grid-template-columns: repeat(2, 1fr); gap: 14px 0; padding: 16px 0; }
  .phb-qstat { border-right: 1px solid var(--phb-border); padding-right: 8px; }
  .phb-qstat:nth-child(2) { border-right: 0; padding-right: 0; }
  .phb-qstat:nth-child(3) { padding-left: 0; }
  .phb-stats-hero { flex-direction: column; align-items: flex-start; gap: 10px; }
  .phb-stats-delta { align-items: flex-start; flex-direction: row; gap: 8px; }
}

/* ───────────────────────────────────────────────────────────
   Data sets - card-grid (Settings → Integrations → datasets)
   Erstatter den gamle int-table view med en mere visuel grid.
   Backward-compat: card-root bærer data-int-ds-open / data-int-ds-label
   så eksisterende querySelectorAll('[data-int-ds-open]') stadig binder.
   ─────────────────────────────────────────────────────────── */
.ds-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    padding: 8px 0;
}

.ds-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--card-solid, var(--surface));
    border: 1px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    outline: none;
}

.ds-card:hover,
.ds-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.ds-card-disabled {
    opacity: .45;
    cursor: not-allowed;
}
.ds-card-disabled:hover {
    transform: none;
    border-color: var(--border);
    box-shadow: none;
}

.ds-card-enreach { border-left: 3px solid #a78bfa; }
.ds-card-adversus { border-left: 3px solid #3b82f6; }
.ds-card-planday { border-left: 3px solid #10b981; }

.ds-icon {
    font-size: 1.6rem;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    background: var(--surface);
    border-radius: 12px;
    flex-shrink: 0;
}

.ds-body {
    flex: 1;
    min-width: 0;
}
.ds-name {
    font-weight: 700;
    font-size: .85rem;
    color: var(--text-1);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ds-source {
    font-size: .55rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px;
}
.ds-count {
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.ds-warning {
    font-size: .55rem;
    color: #ffa726;
    margin-top: 4px;
}
.ds-freshness {
    font-size: .55rem;
    margin-top: 4px;
    letter-spacing: .3px;
}
.ds-freshness.live { color: var(--bh-green, #57C29A); }
.ds-freshness.cached { color: var(--bh-pop, #F2A965); }
.ds-freshness.stale { color: var(--bh-danger, #ED8A8F); }

.ds-arrow {
    font-size: 1.5rem;
    color: var(--text-3);
    transition: color .15s, transform .15s;
    flex-shrink: 0;
}
.ds-card:hover .ds-arrow,
.ds-card:focus-visible .ds-arrow {
    color: var(--accent);
    transform: translateX(3px);
}
.ds-card-disabled .ds-arrow { color: var(--text-3); transform: none; }

/* ═══════════════════════════════════════════════════════════════════════════
 * Data Studio - provider-grouped folders i "Mine formler" (2026-05-14)
 * Hver <details class="fml-group"> wrapper formler fra samme datakilde
 * (ENREACH/Adversus/Planday/Egne). Bruger CSS-custom-property --fml-group-accent
 * (set inline pr. gruppe) til venstre-stribe-farve + count-badge.
 * ─────────────────────────────────────────────────────────────────────────── */
.fmlv4 #mineGrid .fml-group {
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    overflow: hidden;
    border-left: 3px solid var(--fml-group-accent, var(--text-2));
}
.fmlv4 #mineGrid .fml-group[open] {
    background: var(--surface);
}
.fmlv4 #mineGrid .fml-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: background .15s;
}
.fmlv4 #mineGrid .fml-group-header::-webkit-details-marker { display: none; }
.fmlv4 #mineGrid .fml-group-header::before {
    content: '▸';
    color: var(--fml-group-accent, var(--text-2));
    transition: transform .18s ease;
    font-size: .8rem;
    display: inline-block;
    width: 12px;
}
.fmlv4 #mineGrid .fml-group[open] .fml-group-header::before {
    transform: rotate(90deg);
}
.fmlv4 #mineGrid .fml-group-header:hover {
    background: var(--surface-hover);
}
.fmlv4 #mineGrid .fml-group-icon {
    font-size: 1rem;
    color: var(--fml-group-accent, var(--text-2));
}
.fmlv4 #mineGrid .fml-group-name {
    font-weight: 700;
    font-size: .82rem;
    flex: 1;
    color: var(--text-1);
    letter-spacing: .2px;
}
.fmlv4 #mineGrid .fml-group-count {
    background: var(--fml-group-accent, var(--text-2));
    color: white;
    font-size: .62rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 700;
    min-width: 22px;
    text-align: center;
}
.fmlv4 #mineGrid .fml-group-items {
    padding: 4px 12px 12px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
html[data-theme="light"] .fmlv4 #mineGrid .fml-group {
    background: var(--card-solid, white);
    border-color: rgba(0, 0, 0, 0.08);
}
@media (max-width: 800px) {
    .fmlv4 #mineGrid .fml-group-items { grid-template-columns: 1fr; }
}

/* ═══ SMART SEARCH - fælles UI til alle søgefelter (smart-search.js) ═══════
   Brug:
     <mark class="ss-hl">match</mark> - highlight af tegn der matcher
     .ss-dropdown                   - autocomplete-popup (portal'et til body)
     .ss-opt / .ss-opt-active       - option-row + keyboard-highlight

   Tokens fra design-tokens.css: --bg, --bg-2, --text-1, --text-2, --border,
   --color-accent. Fallbacks så det også virker på sider uden token-system.   */
mark.ss-hl {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-accent, var(--accent, #0A84FF)) 28%, transparent),
        color-mix(in srgb, var(--color-accent, var(--accent, #0A84FF)) 18%, transparent));
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
    font-weight: 600;
    text-shadow: 0 0 6px color-mix(in srgb, var(--color-accent, var(--accent, #0A84FF)) 22%, transparent);
}
/* Fallback hvis color-mix ikke understøttes (ældre browsers) */
@supports not (color: color-mix(in srgb, red, blue)) {
    mark.ss-hl {
        background: rgba(var(--accent-rgb), 0.22);
        text-shadow: none;
    }
}

.ss-dropdown {
    position: fixed;
    z-index: 99999;
    background: var(--bg-2, #0e1421);
    border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: 10px;
    box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.25);
    padding: 4px;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: inherit;
    font-size: .72rem;
    color: var(--text-1, #e8ecf3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    scrollbar-width: thin;
    scrollbar-color: var(--border, rgba(255,255,255,.15)) transparent;
}
.ss-dropdown::-webkit-scrollbar { width: 6px; }
.ss-dropdown::-webkit-scrollbar-thumb {
    background: var(--border, rgba(255,255,255,.15));
    border-radius: 3px;
}
.ss-opt {
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1.35;
    color: var(--text-1, #e8ecf3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background .08s ease;
}
.ss-opt + .ss-opt { margin-top: 1px; }
.ss-opt:hover {
    background: color-mix(in srgb, var(--color-accent, var(--accent, #0A84FF)) 10%, transparent);
}
.ss-opt-active {
    background: color-mix(in srgb, var(--color-accent, var(--accent, #0A84FF)) 18%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent, var(--accent, #0A84FF)) 30%, transparent);
}
@supports not (color: color-mix(in srgb, red, blue)) {
    .ss-opt:hover { background: rgba(var(--accent-rgb), 0.10); }
    .ss-opt-active { background: rgba(var(--accent-rgb), 0.18); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.30); }
}
.ss-opt-sub {
    display: block;
    font-size: .58rem;
    color: var(--text-3, #6b7280);
    margin-top: 2px;
    font-weight: 400;
}
.ss-opt-empty {
    padding: 10px 12px;
    color: var(--text-3, #6b7280);
    font-style: italic;
    text-align: center;
}

/* Lyst tema */
html[data-theme="light"] mark.ss-hl {
    background: rgba(var(--accent-rgb), 0.18);
    color: #14110D;
}
html[data-theme="light"] .ss-dropdown {
    background: #fff;
    border-color: rgba(0,0,0,.10);
    box-shadow: 0 14px 40px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.10);
}