/* ═══════════════════════════════════════════════
   UX ENHANCEMENTS — 10/10 Visual Polish Pass
   Targeted overrides for production quality lift
   ═══════════════════════════════════════════════ */

/* ── 1. DASHBOARD HERO CARD ── */

/* Thicker, glowing progress bar */
.dash-hero-bar-track {
  height: 8px;
  border-radius: 4px;
}
.dash-hero-bar-fill {
  border-radius: 4px;
  background: linear-gradient(90deg, var(--acc), var(--cyn)) !important;
  box-shadow: 0 0 12px rgba(10,132,255,0.35), 0 0 4px rgba(10,132,255,0.2);
}
[data-theme="dark"] .dash-hero-bar-fill,
[data-theme="onyx"] .dash-hero-bar-fill {
  box-shadow: 0 0 16px rgba(125,184,255,0.4), 0 0 6px rgba(125,184,255,0.25);
}

/* Passing threshold marker — subtle glow */
.dash-hero-bar-marker {
  background: var(--amb);
  opacity: 0.7;
  box-shadow: 0 0 6px rgba(255,159,10,0.3);
}

/* Exam countdown urgency — pulsing red when ≤ 3 days */
.dash-hero-footer .exam-urgent,
.dash-hero-days.exam-urgent {
  color: var(--red) !important;
  animation: urgencyPulse 1.8s ease-in-out infinite;
}
@keyframes urgencyPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Stat cards — hover glow lift */
.dash-stat-card {
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), border-color 0.2s;
}
.dash-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hero);
  border-color: var(--acc-25);
}

/* Stat number — color coding */
.dash-stat-num.score-danger { color: var(--red); }
.dash-stat-num.score-warning { color: var(--amb); }
.dash-stat-num.score-good { color: var(--grn); }
.dash-stat-num.score-great { color: var(--cyn); }

/* Hero card — subtle ambient glow */
.dash-hero {
  transition: box-shadow 0.3s var(--ease-out);
}
.dash-hero:hover {
  box-shadow: var(--glow-blue);
}

/* Hero grid values — staggered entrance */
.dash-hero-grid-val:nth-child(1) { animation-delay: 0.1s; }
.dash-hero-grid-val:nth-child(2) { animation-delay: 0.2s; }
.dash-hero-grid-val:nth-child(3) { animation-delay: 0.3s; }

/* Recommended Next Step card — accent border glow */
.dash-next-action {
  border-left: 3px solid var(--acc);
  transition: all 0.25s var(--ease-out);
}
.dash-next-action:hover {
  border-color: var(--acc);
  box-shadow: var(--glow-blue);
  transform: translateY(-2px);
}
.dash-next-action-icon {
  background: var(--acc-15);
  color: var(--acc);
  box-shadow: 0 0 12px var(--acc-15);
}

/* ── 2. DOMAIN MASTERY BARS ── */

/* Domain-specific gradient fills */
.dash-domain-bar-fill,
.domain-bar-fill {
  transition: width 0.8s var(--ease-out);
  animation: barGrow 0.8s var(--ease-out) both;
}

/* Domain 1 — Blue (Infrastructure) */
.dash-domain-card:nth-child(1) .dash-domain-bar-fill,
.domain-bar-fill.d1 {
  background: linear-gradient(90deg, #0A84FF, #5AC8FA) !important;
  box-shadow: 0 0 10px rgba(10,132,255,0.3);
}
.dash-domain-card:nth-child(1)::before { background: linear-gradient(90deg, #0A84FF, #5AC8FA) !important; }

/* Domain 2 — Cyan (Manage Devices) */
.dash-domain-card:nth-child(2) .dash-domain-bar-fill,
.domain-bar-fill.d2 {
  background: linear-gradient(90deg, #5AC8FA, #64D2FF) !important;
  box-shadow: 0 0 10px rgba(90,200,250,0.3);
}
.dash-domain-card:nth-child(2)::before { background: linear-gradient(90deg, #5AC8FA, #64D2FF) !important; }

/* Domain 3 — Purple (Applications) */
.dash-domain-card:nth-child(3) .dash-domain-bar-fill,
.domain-bar-fill.d3 {
  background: linear-gradient(90deg, #AF52DE, #C7A6FF) !important;
  box-shadow: 0 0 10px rgba(175,82,222,0.3);
}
.dash-domain-card:nth-child(3)::before { background: linear-gradient(90deg, #AF52DE, #C7A6FF) !important; }

/* Domain 4 — Green (Protect Devices) */
.dash-domain-card:nth-child(4) .dash-domain-bar-fill,
.domain-bar-fill.d4 {
  background: linear-gradient(90deg, #34C759, #42D98C) !important;
  box-shadow: 0 0 10px rgba(52,199,89,0.3);
}
.dash-domain-card:nth-child(4)::before { background: linear-gradient(90deg, #34C759, #42D98C) !important; }

/* Domain cards — hover lift + glow */
.dash-domain-card {
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.dash-domain-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-hero);
}

/* Domain bar track — slightly thicker */
.dash-domain-bar-track,
.domain-bar-track {
  height: 7px;
  border-radius: 4px;
}

/* Domain score color coding */
.dash-domain-score.score-low { color: var(--red); }
.dash-domain-score.score-mid { color: var(--amb); }
.dash-domain-score.score-high { color: var(--grn); }

/* Staggered entrance for domain cards */
.dash-domain-card:nth-child(1) { animation-delay: 0ms; }
.dash-domain-card:nth-child(2) { animation-delay: 60ms; }
.dash-domain-card:nth-child(3) { animation-delay: 120ms; }
.dash-domain-card:nth-child(4) { animation-delay: 180ms; }

/* ── 3. ACHIEVEMENT BADGES ── */

/* Milestone badges — earned golden glow */
.pr-milestone-badge.pr-milestone-earned .pr-milestone-icon-circle {
  box-shadow: 0 0 16px rgba(255,213,79,0.35), 0 0 4px rgba(255,213,79,0.2);
  border-color: rgba(255,213,79,0.4) !important;
}
.pr-milestone-badge.pr-milestone-earned {
  transition: transform 0.2s var(--ease-out);
}
.pr-milestone-badge.pr-milestone-earned:hover {
  transform: scale(1.08);
}

/* Unearned badges — desaturated */
.pr-milestone-badge:not(.pr-milestone-earned) .pr-milestone-icon-circle {
  filter: grayscale(0.6) brightness(0.7);
  opacity: 0.5;
  transition: all 0.25s var(--ease-out);
}
.pr-milestone-badge:not(.pr-milestone-earned):hover .pr-milestone-icon-circle {
  filter: grayscale(0.3) brightness(0.85);
  opacity: 0.7;
}

/* Context rail achievement items */
.cr-badge-item.earned {
  position: relative;
}
.cr-badge-item.earned::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255,213,79,0.08), transparent 70%);
  pointer-events: none;
}

/* ── 4. CTA BUTTONS — PROMINENCE ── */

/* Primary CTA — pulsing glow */
.dash-cta,
.home-cta,
.home-quick-btn.primary,
.btn-pri {
  position: relative;
  overflow: hidden;
}

/* Shimmer sweep on primary CTAs */
.dash-cta::after,
.home-cta::after,
.home-quick-btn.primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  animation: ctaShimmer 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ctaShimmer {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

/* Pulsing glow behind CTA */
.dash-cta {
  box-shadow: 0 4px 20px rgba(10,132,255,0.3), 0 0 40px rgba(10,132,255,0.1);
}
.dash-cta:hover {
  box-shadow: 0 6px 28px rgba(10,132,255,0.4), 0 0 50px rgba(10,132,255,0.15);
  transform: translateY(-2px);
}

/* "Get started" / "Start First Session" — enhanced prominence */
.dash-next-action {
  position: relative;
  overflow: hidden;
}
.dash-next-action::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  animation: ctaShimmer 4s ease-in-out infinite;
  pointer-events: none;
}

/* Action pill CTA — better primary state */
.dash-action-pill.primary {
  box-shadow: 0 4px 16px rgba(10,132,255,0.25);
  transition: all 0.2s var(--ease-out);
}
.dash-action-pill.primary:hover {
  box-shadow: 0 6px 24px rgba(10,132,255,0.35);
  transform: translateY(-1px);
}

/* ── 5. STUDY MODE CARDS ── */

/* Mode grid buttons — better engagement */
.study-pill {
  transition: all 0.2s var(--ease-out);
}
.study-pill:hover {
  background: var(--glass-bg-strong);
  transform: translateY(-1px);
  box-shadow: var(--elev-2);
}
.study-pill.active {
  box-shadow: 0 4px 14px rgba(10,132,255,0.25);
}

/* Context rail study mode buttons */
.cr-mode-btn {
  transition: all 0.15s var(--ease-out);
}
.cr-mode-btn:hover {
  background: var(--acc-10) !important;
  color: var(--acc) !important;
  transform: translateX(2px);
}

/* Study lane card recommended glow */
.study-lane-recommended {
  border-color: var(--acc-25) !important;
  box-shadow: var(--glow-blue);
}

/* ── 6. NAVIGATION SIDEBAR ── */

/* Desktop sidebar — active indicator animation */
@media (min-width: 1024px) {
  .tab-bar-item {
    position: relative;
    transition: color 0.2s var(--ease-out);
  }

  .tab-bar-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 24px;
    border-radius: 0 3px 3px 0;
    background: var(--acc);
    transition: transform 0.25s var(--ease-spring);
  }

  .tab-bar-item.active::before {
    transform: translateY(-50%) scaleY(1);
    box-shadow: 0 0 10px rgba(10,132,255,0.3);
  }

  .tab-bar-item.active {
    background: var(--acc-8);
  }

  /* Hover glow for inactive items */
  .tab-bar-item:not(.active):hover {
    color: var(--tx);
    background: var(--subtle-bg);
  }

  /* Icon scale on active */
  .tab-bar-item.active svg {
    filter: drop-shadow(0 0 6px rgba(10,132,255,0.4));
  }
}

/* Mobile bottom bar — bounce on tap */
@media (max-width: 1023px) {
  .tab-bar-item:active svg {
    transform: scale(0.85);
    transition: transform 0.1s ease;
  }
  .tab-bar-item svg {
    transition: transform 0.15s var(--ease-out), filter 0.25s ease;
  }
  .tab-bar-item.active svg {
    filter: drop-shadow(0 0 5px rgba(10,132,255,0.35));
  }
}

/* Tab badge — pulsing notification */
.tab-badge {
  animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* ── 7. CALENDAR HEATMAP ── */

/* Today cell — brighter, more distinct */
.hm-week-today {
  box-shadow: inset 0 0 0 2px var(--acc), 0 0 14px rgba(10,132,255,0.25);
  background: var(--acc-10) !important;
}
.hm-week-today .hm-week-num {
  font-weight: 800;
  color: var(--acc);
}

/* Intensity levels — richer gradient scale */
[data-theme="dark"] .hm-l1,
[data-theme="onyx"] .hm-l1 {
  background: rgba(10,132,255,0.12);
  box-shadow: inset 0 0 8px rgba(10,132,255,0.06);
}
[data-theme="dark"] .hm-l2,
[data-theme="onyx"] .hm-l2 {
  background: rgba(10,132,255,0.25);
  box-shadow: inset 0 0 10px rgba(10,132,255,0.1);
}
[data-theme="dark"] .hm-l3,
[data-theme="onyx"] .hm-l3 {
  background: rgba(10,132,255,0.45);
  box-shadow: inset 0 0 12px rgba(10,132,255,0.15), 0 0 8px rgba(10,132,255,0.12);
}
[data-theme="dark"] .hm-l4,
[data-theme="onyx"] .hm-l4 {
  background: linear-gradient(135deg, rgba(10,132,255,0.7), rgba(90,200,250,0.6));
  box-shadow: inset 0 0 14px rgba(10,132,255,0.2), 0 0 12px rgba(10,132,255,0.2);
}

/* Cell hover — snappier feedback */
.hm-week-cell {
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.hm-week-cell:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

/* Monthly calendar view cells — better visual weight */
.cal-cell {
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.cal-cell:hover {
  transform: scale(1.06);
}
.cal-cell.today {
  box-shadow: inset 0 0 0 2px var(--acc), 0 0 8px rgba(10,132,255,0.15);
}

/* ── 8. GLOBAL MICRO-ANIMATIONS & TYPOGRAPHY ── */

/* Smooth scroll globally */
html {
  scroll-behavior: smooth;
}

/* Better skeleton shimmer */
.skeleton {
  background: linear-gradient(90deg, var(--subtle-bg) 25%, var(--glass-bg-strong) 50%, var(--subtle-bg) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* Section heading — consistent kicker style */
.dash-section-kicker {
  position: relative;
  padding-left: 10px;
}
.dash-section-kicker::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 3px;
  border-radius: 2px;
  background: var(--acc);
}

/* Section titles — better weight */
.dash-section-title {
  font-size: 17px;
  letter-spacing: -0.01em;
}

/* Card entrance animations — smoother stagger */
.dash-tile:nth-child(1) { animation-delay: 40ms; }
.dash-tile:nth-child(2) { animation-delay: 80ms; }
.dash-tile:nth-child(3) { animation-delay: 120ms; }
.dash-tile:nth-child(4) { animation-delay: 160ms; }
.dash-tile:nth-child(5) { animation-delay: 200ms; }

/* View transitions — smoother */
.view {
  transition: opacity 0.25s var(--ease-cinematic), transform 0.25s var(--ease-cinematic);
}

/* Toast notifications — smoother entrance */
.streak-toast {
  transition: opacity 0.4s var(--ease-cinematic), transform 0.4s var(--ease-spring);
}

/* Glass card hover — subtle lift everywhere */
.glass-card:hover,
.glass-card-elevated:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-hero);
}

/* Button press feedback — consistent */
button:active,
[role="button"]:active {
  transition: transform 0.08s ease;
}

/* Progress ring — gradient stroke effect via filter */
.dash-readiness-ring svg circle:last-child,
.recap-ring-wrap svg circle:last-child {
  filter: drop-shadow(0 0 4px rgba(10,132,255,0.4));
}

/* Readiness card ring — glow */
.dash-readiness-ring {
  filter: drop-shadow(0 0 8px rgba(10,132,255,0.15));
}

/* Calibration ring — glow */
.dash-calibration-ring-wrap {
  filter: drop-shadow(0 0 6px rgba(10,132,255,0.2));
}

/* ── 9. RIGHT SIDEBAR / CONTEXT RAIL ── */

/* Context rail section headers — better hierarchy */
.cr-section-label,
.context-rail-section-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dim);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--flat-divider);
  margin-bottom: 12px;
}

/* Quick action buttons — hover enhancement */
.cr-action-btn,
.context-rail-action {
  transition: all 0.15s var(--ease-out);
  border-radius: var(--r1);
  padding: 8px 10px;
}
.cr-action-btn:hover,
.context-rail-action:hover {
  background: var(--acc-8);
  color: var(--acc);
  transform: translateX(3px);
}

/* Context rail stat values — better visual weight */
.cr-stat-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ── 10. ADDITIONAL POLISH ── */

/* "Update Available" badge — more prominent */
.dash-hdr .update-badge,
.home-brand + .update-badge {
  background: linear-gradient(135deg, var(--amb), #FFC861);
  color: var(--text-on-color);
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  box-shadow: 0 0 12px rgba(255,159,10,0.2);
  animation: fadeUp 0.4s var(--ease-out) both;
}

/* Consent banner — less intrusive */
.consent-bar,
.privacy-bar {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--glass-border);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
}

/* Version tag — modern badge */
.version-tag,
.sidebar-version-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--subtle-bg);
  color: var(--dim);
  border: 1px solid var(--glass-border);
  transition: all 0.15s ease;
}
.version-tag:hover,
.sidebar-version-tag:hover {
  background: var(--acc-8);
  color: var(--acc);
  border-color: var(--acc-25);
}

/* Floating search trigger — glow on hover */
.global-search-trigger:hover {
  box-shadow: var(--glow-blue);
  border-color: var(--acc-25);
}

/* Mastery ladder — current tier emphasis */
.dash-lt-current {
  background: var(--acc-10);
  border-radius: 10px;
  border: 1px solid var(--acc-25);
}

/* Cert chip in header strip — active glow */
.dash-cert-chip.is-current {
  border-color: var(--acc-25);
  box-shadow: var(--glow-blue);
}

/* Weak areas "go" button — pulse */
.dash-weak-go {
  transition: all 0.2s var(--ease-out);
}
.dash-weak-go:hover {
  transform: scale(1.1);
  box-shadow: 0 0 16px rgba(10,132,255,0.4);
}

/* Goal items — left border pulse on near-completion */
.dash-goal-item.green {
  border-left-width: 4px;
  box-shadow: inset 4px 0 8px -4px rgba(52,199,89,0.2);
}

/* Smooth loading screen transition */
#app-loader {
  transition: opacity 0.4s var(--ease-cinematic);
}

/* Better focus-visible ring */
:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Reduced motion — honor preferences */
/* ── 11. WORKSPACE / AUTO-STUDY VIEW ── */

/* Domain bars in workspace — domain-specific colors */
.as-domain-row:nth-child(1) .as-domain-fill { background: linear-gradient(90deg, #0A84FF, #5AC8FA); }
.as-domain-row:nth-child(2) .as-domain-fill { background: linear-gradient(90deg, #5AC8FA, #64D2FF); }
.as-domain-row:nth-child(3) .as-domain-fill { background: linear-gradient(90deg, #AF52DE, #C7A6FF); }
.as-domain-row:nth-child(4) .as-domain-fill { background: linear-gradient(90deg, #34C759, #42D98C); }

/* Domain bars — thicker + animated */
.as-domain-bar {
  height: 7px;
  border-radius: 4px;
  background: var(--track-bg);
}
.as-domain-fill {
  animation: barGrow 0.6s var(--ease-out) both;
  box-shadow: 0 0 8px rgba(10,132,255,0.2);
}

/* Auto-study ring — enhanced glow */
.as-header-ring,
.as-launch-ring {
  filter: drop-shadow(0 0 10px rgba(10,132,255,0.2));
}

/* Study path "Start First Session" CTA in workspace */
.as-next {
  transition: all 0.2s var(--ease-out);
}
.as-next:hover {
  box-shadow: var(--glow-blue);
  transform: translateY(-1px);
}

/* Study mode buttons in workspace rail */
.cr-mode-pill {
  transition: all 0.15s var(--ease-out);
}
.cr-mode-pill:hover {
  background: var(--acc-10);
  transform: translateY(-1px);
}
.cr-mode-pill.active {
  box-shadow: 0 4px 12px rgba(10,132,255,0.2);
}

/* Achievement grid in workspace — earned badges glow */
.cr-ach-icon.earned {
  filter: drop-shadow(0 0 6px rgba(255,213,79,0.3));
}
.cr-ach-icon:not(.earned) {
  filter: grayscale(0.5) brightness(0.6);
  opacity: 0.55;
  transition: all 0.2s ease;
}
.cr-ach-icon:not(.earned):hover {
  filter: grayscale(0.2) brightness(0.8);
  opacity: 0.75;
}

/* ── 12. QUIZ / QUESTION VIEW ── */

/* Quiz answer choices — better hover feedback */
.quiz-choice {
  transition: all 0.15s var(--ease-out);
}
.quiz-choice:hover {
  transform: translateX(3px);
  border-color: var(--acc-25);
  background: var(--acc-5);
}
.quiz-choice.selected {
  border-color: var(--acc);
  box-shadow: 0 0 0 1px var(--acc), 0 4px 12px rgba(10,132,255,0.12);
}

/* Correct/incorrect feedback — vivid */
.quiz-choice.correct {
  border-color: var(--grn);
  box-shadow: 0 0 0 1px var(--grn), 0 4px 12px rgba(52,199,89,0.15);
  background: var(--grn-soft);
}
.quiz-choice.incorrect {
  border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red), 0 4px 12px rgba(255,59,48,0.15);
  background: var(--red-soft);
}

/* Question header — domain badge */
.quiz-domain-badge {
  background: var(--acc-12);
  color: var(--acc);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}

/* ── 13. SETTINGS VIEW ── */

/* Settings rows — better interaction */
.settings-row {
  transition: background 0.12s ease;
}
.settings-row:hover {
  background: var(--subtle-bg);
}
.settings-row:active {
  background: var(--acc-5);
}

/* ── 14. ONBOARDING ── */

/* Onboarding card — enhanced entrance */
.onboarding-card {
  animation: scaleIn 0.4s var(--ease-cinematic) both;
}

/* Cert picker cards — hover lift */
.onboarding-cert-card {
  transition: all 0.2s var(--ease-out);
}
.onboarding-cert-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hero);
}
.onboarding-cert-card.selected {
  border-color: var(--acc);
  box-shadow: var(--glow-blue);
}

@media (prefers-reduced-motion: reduce) {
  .dash-cta::after,
  .home-cta::after,
  .home-quick-btn.primary::after,
  .dash-next-action::after {
    animation: none !important;
  }
  .tab-badge {
    animation: none !important;
  }
  .dash-hero-footer .exam-urgent,
  .dash-hero-days.exam-urgent {
    animation: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}