@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  --primary: #2563EB;
  --primary-light: #3B82F6;
  --accent: #F97316;
  --surface: #F8FAFC;
  --ink: #1E293B;
  --ink-muted: #64748B;
  --ink-faint: #94A3B8;
  --border: #E2E8F0;
  --sidebar: #0F172A;
}

* { box-sizing: border-box; }

body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--surface);
  min-height: 100vh;
  color: var(--ink);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

.sidebar-scroll::-webkit-scrollbar { width: 3px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

/* ─── Sidebar ─── */
.sidebar {
  background: linear-gradient(180deg, #0F172A 0%, #0B1120 100%);
  position: relative;
}
.sidebar::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 1px; height: 100%;
  background: linear-gradient(180deg, rgba(59,130,246,0.15) 0%, rgba(59,130,246,0.02) 100%);
}

.sidebar-nav-btn {
  color: #94A3B8;
}
.sidebar-nav-btn:hover {
  color: #E2E8F0;
  background: rgba(255,255,255,0.06);
}
.sidebar-nav-btn.active {
  color: #fff;
  background: rgba(37, 99, 235, 0.15);
  box-shadow: inset 3px 0 0 0 var(--primary);
}
.sidebar-nav-btn.active i {
  color: #60A5FA;
}

/* Sidebar logo glow */
@keyframes logoGlow {
  0%, 100% { box-shadow: 0 4px 16px -2px rgba(37, 99, 235, 0.3); }
  50% { box-shadow: 0 4px 24px -2px rgba(37, 99, 235, 0.5); }
}
.sidebar-logo {
  animation: logoGlow 3s ease-in-out infinite;
}

/* Sidebar section link */
.sidebar-section-link {
  transition: all 0.15s ease-out;
  color: #94A3B8;
}
.sidebar-section-link:hover {
  color: #E2E8F0;
  background: rgba(255,255,255,0.06);
}
.sidebar-section-link .progress-pip {
  transition: all 0.3s ease-out;
}

/* ─── Animations ─── */
@keyframes checkPop {
  0% { transform: scale(0) rotate(-45deg); }
  60% { transform: scale(1.15) rotate(0deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.check-animate svg {
  animation: checkPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.progress-shimmer {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-slideDown {
  animation: slideDown 0.25s ease-out;
}
details[open] summary ~ * {
  animation: slideDown 0.25s ease-out;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.stagger-fade > * {
  animation: fadeInUp 0.4s ease-out both;
}
.stagger-fade > *:nth-child(1) { animation-delay: 0ms; }
.stagger-fade > *:nth-child(2) { animation-delay: 50ms; }
.stagger-fade > *:nth-child(3) { animation-delay: 100ms; }
.stagger-fade > *:nth-child(4) { animation-delay: 150ms; }
.stagger-fade > *:nth-child(5) { animation-delay: 200ms; }
.stagger-fade > *:nth-child(6) { animation-delay: 250ms; }
.stagger-fade > *:nth-child(7) { animation-delay: 300ms; }
.stagger-fade > *:nth-child(8) { animation-delay: 350ms; }

@keyframes cardReveal {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── Section Cards ─── */
.section-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  animation: cardReveal 0.5s ease-out both;
}
.section-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), #818CF8);
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.section-card:hover {
  border-color: #BFDBFE;
  box-shadow: 0 8px 32px -8px rgba(37, 99, 235, 0.1), 0 2px 8px -2px rgba(0,0,0,0.04);
  transform: translateY(-2px);
}
.section-card:hover::before {
  opacity: 1;
}
.section-card.is-complete {
  border-color: #BBF7D0;
}
.section-card.is-complete::before {
  background: linear-gradient(90deg, #22C55E, #4ADE80);
  opacity: 1;
}

/* Card decorative corner */
.section-card::after {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,0.04) 0%, transparent 70%);
  pointer-events: none;
  transition: all 0.4s ease-out;
}
.section-card:hover::after {
  transform: scale(1.5);
  background: radial-gradient(circle, rgba(37,99,235,0.08) 0%, transparent 70%);
}

/* Card stagger delays */
.section-card:nth-child(1) { animation-delay: 0ms; }
.section-card:nth-child(2) { animation-delay: 60ms; }
.section-card:nth-child(3) { animation-delay: 120ms; }
.section-card:nth-child(4) { animation-delay: 180ms; }
.section-card:nth-child(5) { animation-delay: 240ms; }
.section-card:nth-child(6) { animation-delay: 300ms; }
.section-card:nth-child(7) { animation-delay: 360ms; }
.section-card:nth-child(8) { animation-delay: 420ms; }

/* Section icon container */
.section-icon-wrap {
  position: relative;
}
.section-icon-wrap::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 16px;
  background: inherit;
  opacity: 0.3;
  filter: blur(6px);
  z-index: -1;
  transition: opacity 0.3s ease;
}
.section-card:hover .section-icon-wrap::after {
  opacity: 0.5;
}

/* ─── Item rows ─── */
.item-row {
  transition: all 0.15s ease-out;
  border-left: 3px solid transparent;
}
.item-row:hover {
  background: #F1F5F9;
  border-left-color: #BFDBFE;
}
.item-row.is-expanded {
  background: #EFF6FF;
  border-left-color: var(--primary);
}
.item-row.is-completed {
  background: #F0FDF4;
  border-left-color: #86EFAC;
}
.item-row.is-completed:hover {
  background: #ECFDF5;
}

/* ─── Checkbox ─── */
.custom-checkbox {
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}
.custom-checkbox:hover {
  transform: scale(1.15);
}
.custom-checkbox.checked {
  background: #16A34A;
  border-color: #16A34A;
  box-shadow: 0 2px 8px -2px rgba(22, 163, 74, 0.4);
}
.custom-checkbox:not(.checked):hover {
  border-color: var(--primary);
  background: #EFF6FF;
}

/* ─── Category badges ─── */
.cat-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.15s ease;
}

/* ─── Expand button ─── */
.expand-btn {
  transition: all 0.2s ease-out;
  opacity: 0;
}
.item-row:hover .expand-btn,
.item-row.is-expanded .expand-btn {
  opacity: 1;
}
.expand-btn:hover {
  background: #DBEAFE;
  color: var(--primary);
  transform: scale(1.1);
}

/* ─── Email preview ─── */
.email-preview p { margin-bottom: 0.75rem; }
.email-preview ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 0.75rem; }
.email-preview a { color: var(--primary); text-decoration: underline; }

/* ─── Tabular nums ─── */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* ─── Progress ring ─── */
@keyframes progressDraw {
  from { stroke-dasharray: 0, 100; }
}
.progress-ring-circle {
  animation: progressDraw 1s ease-out;
}

/* ─── Stat cards ─── */
.stat-card {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transition: transform 0.25s ease-out;
  transform-origin: left;
}
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px -6px rgba(37, 99, 235, 0.15);
  border-color: #BFDBFE;
}
.stat-card:hover::before {
  transform: scaleX(1);
}

/* ─── Detail panel ─── */
.detail-panel {
  animation: slideDown 0.25s ease-out;
  border-left: 3px solid var(--primary);
}

/* ─── Pipeline buttons ─── */
.pipeline-btn {
  transition: all 0.2s ease-out;
}
.pipeline-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px -3px rgba(0,0,0,0.1);
}
.pipeline-btn.active {
  box-shadow: 0 0 0 2px var(--primary), 0 0 0 5px rgba(37, 99, 235, 0.12);
}

/* ─── Tab underline ─── */
.tab-btn {
  position: relative;
}
.tab-btn::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  width: 0; height: 2px;
  background: var(--primary);
  transition: all 0.2s ease-out;
  transform: translateX(-50%);
}
.tab-btn.active::after {
  width: 60%;
}

/* ─── Diagram containers ─── */
.diagram-interactive {
  transition: all 0.25s ease-out;
  cursor: pointer;
  position: relative;
}
.diagram-interactive::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(37,99,235,0.02) 0%, transparent 60%);
  pointer-events: none;
}
.diagram-interactive:hover {
  border-color: #93C5FD;
  box-shadow: 0 8px 32px -8px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
}

/* ─── Top bar decorative line ─── */
#main-header {
  position: relative;
}
#main-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(37,99,235,0.15) 50%, transparent);
}

/* ─── Mode Switcher ─── */
#mode-switcher-dropdown {
  animation: modeDropIn 0.15s ease-out;
}
@keyframes modeDropIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.mode-option:hover {
  background: rgba(255,255,255,0.06);
}
.mode-option:active {
  background: rgba(255,255,255,0.1);
}

/* ─── View transition ─── */
@keyframes viewFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(8px); }
}
@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.view-fade-out {
  animation: viewFadeOut 0.15s ease-in forwards;
}
.view-fade-in {
  animation: viewFadeIn 0.25s ease-out forwards;
}

/* ─── Checkbox ripple ─── */
@keyframes checkboxRipple {
  0% { transform: scale(0.5); opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}
.checkbox-ripple {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #16A34A;
  pointer-events: none;
  animation: checkboxRipple 0.45s ease-out forwards;
}

/* ─── Animated counter ─── */
.counter-tick {
  display: inline-block;
  transition: none;
}

/* ─── Confetti burst ─── */
@keyframes confettiFly {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
  100% { opacity: 0; }
}
.confetti-particle {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
}

/* ─── Sidebar ambient particles ─── */
@keyframes ambientFloat {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.5; }
  90% { opacity: 0.5; }
  50% { transform: translateY(-60px) translateX(10px); }
}
.sidebar-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(96, 165, 250, 0.35);
  pointer-events: none;
  animation: ambientFloat linear infinite;
}

/* ─── Glassmorphism stat cards ─── */
.stat-card {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.6);
}
.stat-card:hover {
  background: rgba(255, 255, 255, 0.85) !important;
}

/* ─── Mode switch morph ─── */
.mode-transition-morph {
  transition: background 0.5s ease, box-shadow 0.5s ease;
}
.sidebar-logo {
  transition: background 0.5s ease, box-shadow 0.5s ease;
}
.sidebar-nav-btn.active {
  transition: all 0.35s ease;
}
#main-header {
  transition: border-color 0.4s ease;
}

/* ─── Progress bar glow ─── */
@keyframes progressGlow {
  0%, 100% { box-shadow: 0 0 4px 0 rgba(59, 130, 246, 0.3); }
  50% { box-shadow: 0 0 10px 2px rgba(59, 130, 246, 0.5); }
}
.progress-bar-glow {
  animation: progressGlow 2s ease-in-out infinite;
  border-radius: 9999px;
}

/* ─── Item row enter animation ─── */
@keyframes itemSlideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}
.items-animate .item-row {
  animation: itemSlideIn 0.25s ease-out both;
}
.items-animate .item-row:nth-child(1) { animation-delay: 0ms; }
.items-animate .item-row:nth-child(2) { animation-delay: 30ms; }
.items-animate .item-row:nth-child(3) { animation-delay: 60ms; }
.items-animate .item-row:nth-child(4) { animation-delay: 90ms; }
.items-animate .item-row:nth-child(5) { animation-delay: 120ms; }
.items-animate .item-row:nth-child(6) { animation-delay: 150ms; }
.items-animate .item-row:nth-child(7) { animation-delay: 180ms; }
.items-animate .item-row:nth-child(8) { animation-delay: 210ms; }
.items-animate .item-row:nth-child(9) { animation-delay: 240ms; }
.items-animate .item-row:nth-child(10) { animation-delay: 270ms; }
.items-animate .item-row:nth-child(11) { animation-delay: 300ms; }
.items-animate .item-row:nth-child(12) { animation-delay: 330ms; }

/* ─── Enhanced section card hover ─── */
.section-card:hover {
  border-color: #BFDBFE;
  box-shadow:
    0 4px 12px -4px rgba(37, 99, 235, 0.08),
    0 8px 32px -8px rgba(37, 99, 235, 0.1),
    0 16px 48px -12px rgba(0, 0, 0, 0.06);
  transform: translateY(-3px);
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}