/*
 * Cookiewise Theme Bridge
 * Utility classes and component styles driven by CSS custom properties.
 * Loaded after app.css (Tailwind) and theme files.
 */

/* ===== Base overrides using CSS variables ===== */

/* Body backgrounds */
.cw-bg-page { background-color: rgb(var(--cw-bg)); color: rgb(var(--cw-text)); }
.cw-bg-alt { background-color: rgb(var(--cw-bg-alt)); }
.cw-bg-elevated { background-color: rgb(var(--cw-bg-elevated)); }
.cw-bg-surface { background-color: rgb(var(--cw-surface)); }
.cw-bg-dash { background-color: rgb(var(--cw-dash-bg)); color: rgb(var(--cw-text)); }

/* Dashboard-specific backgrounds */
.cw-dash-sidebar { background-color: rgb(var(--cw-dash-sidebar)); color: rgb(var(--cw-dash-sidebar-text)); }
.cw-dash-topbar { background-color: rgb(var(--cw-dash-topbar)); }
.cw-dash-card {
  background-color: rgb(var(--cw-dash-card));
  border: 1px solid rgb(var(--cw-border) / 0.5);
  border-radius: var(--cw-radius-lg);
  box-shadow: var(--cw-shadow-sm);
}

/* Text */
.cw-text { color: rgb(var(--cw-text)); }
.cw-text-secondary { color: rgb(var(--cw-text-secondary)); }
.cw-text-muted { color: rgb(var(--cw-text-muted)); }
.cw-text-inverse { color: rgb(var(--cw-text-inverse)); }

/* Borders */
.cw-border { border-color: rgb(var(--cw-border)); }
.cw-border-hover:hover { border-color: rgb(var(--cw-border-hover)); }

/* Primary button */
.cw-btn-primary {
  background-color: rgb(var(--cw-primary));
  color: rgb(var(--cw-text-inverse));
  padding: 0.625rem 1.5rem;
  border-radius: var(--cw-radius);
  font-weight: 600;
  font-size: 0.875rem;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  cursor: pointer;
}
.cw-btn-primary:hover {
  background-color: rgb(var(--cw-primary-hover));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgb(var(--cw-primary) / 0.3);
}

/* Secondary button */
.cw-btn-secondary {
  background-color: transparent;
  color: rgb(var(--cw-primary));
  padding: 0.625rem 1.5rem;
  border-radius: var(--cw-radius);
  font-weight: 600;
  font-size: 0.875rem;
  border: 1.5px solid rgb(var(--cw-primary) / 0.3);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
}
.cw-btn-secondary:hover {
  background-color: rgb(var(--cw-primary) / 0.08);
  border-color: rgb(var(--cw-primary) / 0.5);
}

/* Ghost button */
.cw-btn-ghost {
  background: transparent;
  color: rgb(var(--cw-text-secondary));
  padding: 0.5rem 1rem;
  border-radius: var(--cw-radius);
  font-weight: 500;
  font-size: 0.875rem;
  border: none;
  transition: all 0.15s ease;
  cursor: pointer;
}
.cw-btn-ghost:hover {
  background-color: rgb(var(--cw-border) / 0.3);
  color: rgb(var(--cw-text));
}

/* Large CTA button */
.cw-btn-cta {
  background: linear-gradient(135deg, rgb(var(--cw-primary)), rgb(var(--cw-primary-dark)));
  color: rgb(var(--cw-text-inverse));
  padding: 1rem 2rem;
  border-radius: var(--cw-radius-lg);
  font-weight: 700;
  font-size: 1.125rem;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 15px rgb(var(--cw-primary) / 0.3);
  position: relative;
  overflow: hidden;
}
.cw-btn-cta:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 25px rgb(var(--cw-primary) / 0.4);
}

/* ===== Card variants ===== */
.cw-card {
  background-color: rgb(var(--cw-surface));
  border: 1px solid rgb(var(--cw-border));
  border-radius: var(--cw-radius-lg);
  box-shadow: var(--cw-shadow-sm);
  padding: 1.5rem;
}

/* ===== Glassmorphism header ===== */
.cw-header-glass {
  background: var(--cw-glass-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--cw-glass-border);
}

/* ===== Navigation link styling ===== */
.cw-nav-link {
  color: rgb(var(--cw-text-secondary));
  transition: color 0.2s ease;
  position: relative;
  padding: 0.25rem 0;
}
.cw-nav-link:hover { color: rgb(var(--cw-text)); }
.cw-nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, rgb(var(--cw-primary)), rgb(var(--cw-secondary)));
  border-radius: 1px;
  transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cw-nav-link:hover::after,
.cw-nav-link.active::after {
  width: 100%;
}

/* ===== Sidebar nav items ===== */
.cw-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--cw-radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(var(--cw-dash-sidebar-text));
  transition: all 0.2s ease;
  position: relative;
}
.cw-sidebar-link:hover {
  background-color: rgb(var(--cw-border) / 0.15);
  color: rgb(var(--cw-text));
}
.cw-sidebar-link.active {
  background-color: rgb(var(--cw-dash-sidebar-active-bg) / 0.15);
  color: rgb(var(--cw-dash-sidebar-active-text));
  font-weight: 600;
}
.cw-sidebar-link svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  opacity: 0.7;
}
.cw-sidebar-link.active svg { opacity: 1; }
.cw-sidebar-link:hover svg { opacity: 0.9; }

/* ===== Status badges ===== */
.cw-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.cw-badge-success { background-color: rgb(var(--cw-success) / 0.12); color: rgb(var(--cw-success)); }
.cw-badge-warning { background-color: rgb(var(--cw-warning) / 0.12); color: rgb(var(--cw-warning)); }
.cw-badge-error { background-color: rgb(var(--cw-error) / 0.12); color: rgb(var(--cw-error)); }
.cw-badge-info { background-color: rgb(var(--cw-info) / 0.12); color: rgb(var(--cw-info)); }

/* ===== Footer ===== */
.cw-footer {
  background-color: rgb(var(--cw-footer-bg));
  color: rgb(var(--cw-footer-text));
}
.cw-footer a { color: rgb(var(--cw-footer-text)); transition: color 0.2s ease; }
.cw-footer a:hover { color: rgb(255 255 255); }
.cw-footer h4 { color: rgb(255 255 255); }

/* ===== Tables ===== */
.cw-table { width: 100%; font-size: 0.875rem; }
.cw-table thead { background-color: rgb(var(--cw-bg-alt)); }
.cw-table th {
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  color: rgb(var(--cw-text-secondary));
  text-align: left;
}
.cw-table td { padding: 0.75rem 1.5rem; color: rgb(var(--cw-text-secondary)); }
.cw-table tbody tr { border-top: 1px solid rgb(var(--cw-border) / 0.5); }
.cw-table tbody tr:hover { background-color: rgb(var(--cw-surface-hover)); }

/* ===== Inputs ===== */
.cw-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgb(var(--cw-border));
  border-radius: var(--cw-radius);
  font-size: 0.875rem;
  background-color: rgb(var(--cw-surface));
  color: rgb(var(--cw-text));
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cw-input:focus {
  border-color: rgb(var(--cw-primary));
  box-shadow: 0 0 0 3px rgb(var(--cw-primary) / 0.1);
}
.cw-input::placeholder { color: rgb(var(--cw-text-muted)); }

/* ===== Font setup ===== */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/plusjakartasans/v8/LDIbaomQNQcsA88c7O9yZ4KMCoOg4IA6-91aHEjcWuA_qU79TR_V.woff2') format('woff2');
}

[data-theme="aurora"] body,
[data-theme="midnight"] body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
[data-theme="aurora"] h1,
[data-theme="aurora"] h2,
[data-theme="aurora"] h3,
[data-theme="midnight"] h1,
[data-theme="midnight"] h2,
[data-theme="midnight"] h3 {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}

/* ===== Video slot placeholder ===== */
.cw-video-slot {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--cw-radius-xl);
  overflow: hidden;
  background: rgb(var(--cw-bg-alt));
  border: 1px solid rgb(var(--cw-border));
  display: none; /* Hidden until videos are ready */
}
.cw-video-slot.active { display: block; }
.cw-video-slot .cw-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.3);
  cursor: pointer;
  transition: background 0.2s ease;
}
.cw-video-slot .cw-video-play:hover { background: rgba(0,0,0,0.4); }
.cw-video-slot .cw-video-play svg {
  width: 4rem;
  height: 4rem;
  color: white;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* ===== Dark mode text overrides for Tailwind classes ===== */
[data-theme="aurora"].dark .text-slate-900,
[data-theme="midnight"] .text-slate-900 { color: rgb(var(--cw-text)); }
[data-theme="aurora"].dark .text-slate-800,
[data-theme="midnight"] .text-slate-800 { color: rgb(var(--cw-text)); }
[data-theme="aurora"].dark .text-slate-700,
[data-theme="midnight"] .text-slate-700 { color: rgb(var(--cw-text-secondary)); }
[data-theme="aurora"].dark .text-slate-600,
[data-theme="midnight"] .text-slate-600 { color: rgb(var(--cw-text-secondary)); }
[data-theme="aurora"].dark .text-slate-500,
[data-theme="midnight"] .text-slate-500 { color: rgb(var(--cw-text-muted)); }

[data-theme="aurora"].dark .bg-white,
[data-theme="midnight"] .bg-white { background-color: rgb(var(--cw-surface)); }
[data-theme="aurora"].dark .bg-slate-50,
[data-theme="midnight"] .bg-slate-50 { background-color: rgb(var(--cw-bg-alt)); }
[data-theme="aurora"].dark .bg-slate-100,
[data-theme="midnight"] .bg-slate-100 { background-color: rgb(var(--cw-bg-alt)); }

[data-theme="aurora"].dark .border-slate-200,
[data-theme="midnight"] .border-slate-200 { border-color: rgb(var(--cw-border)); }
[data-theme="aurora"].dark .border-slate-300,
[data-theme="midnight"] .border-slate-300 { border-color: rgb(var(--cw-border)); }

/* Ensure bg-white/95 glass effects also get overridden */
[data-theme="aurora"].dark .bg-white\/95,
[data-theme="midnight"] .bg-white\/95 { background-color: rgb(var(--cw-surface) / 0.95); }

[data-theme="aurora"].dark .bg-slate-200,
[data-theme="midnight"] .bg-slate-200 { background-color: rgb(var(--cw-border)); }

[data-theme="aurora"].dark .text-slate-400,
[data-theme="midnight"] .text-slate-400 { color: rgb(var(--cw-text-muted)); }
[data-theme="aurora"].dark .text-slate-300,
[data-theme="midnight"] .text-slate-300 { color: rgb(var(--cw-text-muted) / 0.6); }

[data-theme="aurora"].dark .border-slate-100,
[data-theme="midnight"] .border-slate-100 { border-color: rgb(var(--cw-border) / 0.5); }

/* Gradient background overrides for dark mode */
[data-theme="aurora"].dark .bg-gradient-to-br.from-blue-50,
[data-theme="midnight"] .bg-gradient-to-br.from-blue-50 { background: rgb(var(--cw-bg)) !important; }

/* Blue pill/badge backgrounds in dark mode */
[data-theme="aurora"].dark .bg-blue-100,
[data-theme="midnight"] .bg-blue-100 { background-color: rgb(99 102 241 / 0.15); }
[data-theme="aurora"].dark .text-blue-700,
[data-theme="midnight"] .text-blue-700 { color: rgb(165 180 252); }
[data-theme="aurora"].dark .hover\:text-blue-700:hover,
[data-theme="midnight"] .hover\:text-blue-700:hover { color: rgb(199 210 254); }

/* Error state backgrounds */
[data-theme="aurora"].dark .bg-red-50,
[data-theme="midnight"] .bg-red-50 { background-color: rgb(239 68 68 / 0.1); }
[data-theme="aurora"].dark .border-red-200,
[data-theme="midnight"] .border-red-200 { border-color: rgb(239 68 68 / 0.3); }

/* Success state backgrounds */
[data-theme="aurora"].dark .bg-green-100,
[data-theme="midnight"] .bg-green-100 { background-color: rgb(16 185 129 / 0.15); }

/* Text color overrides for status colors in dark mode */
[data-theme="aurora"].dark .text-red-700,
[data-theme="midnight"] .text-red-700 { color: rgb(252 165 165); }
[data-theme="aurora"].dark .text-red-600,
[data-theme="midnight"] .text-red-600 { color: rgb(248 113 113); }
[data-theme="aurora"].dark .text-green-600,
[data-theme="midnight"] .text-green-600 { color: rgb(52 211 153); }

/* Hover backgrounds */
[data-theme="aurora"].dark .hover\:bg-slate-50:hover,
[data-theme="midnight"] .hover\:bg-slate-50:hover { background-color: rgb(var(--cw-surface-hover)); }
[data-theme="aurora"].dark .hover\:bg-slate-100:hover,
[data-theme="midnight"] .hover\:bg-slate-100:hover { background-color: rgb(var(--cw-surface-hover)); }

/* Form inputs and selects in dark mode */
[data-theme="aurora"].dark input:not([type="checkbox"]):not([type="radio"]),
[data-theme="aurora"].dark select,
[data-theme="aurora"].dark textarea,
[data-theme="midnight"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="midnight"] select,
[data-theme="midnight"] textarea {
  background-color: rgb(var(--cw-bg));
  color: rgb(var(--cw-text));
  border-color: rgb(var(--cw-border));
}
[data-theme="aurora"].dark input::placeholder,
[data-theme="midnight"] input::placeholder,
[data-theme="aurora"].dark textarea::placeholder,
[data-theme="midnight"] textarea::placeholder {
  color: rgb(var(--cw-text-muted));
}
[data-theme="aurora"].dark select option,
[data-theme="midnight"] select option {
  background-color: rgb(var(--cw-surface));
  color: rgb(var(--cw-text));
}

/* ===== Card variants ===== */
.cw-card-hover {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.cw-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--cw-shadow-lg);
  border-color: rgb(var(--cw-primary) / 0.3);
}

/* Stat card with top accent border */
.cw-stat-card {
  position: relative;
  overflow: hidden;
}
.cw-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, rgb(var(--cw-primary)), rgb(var(--cw-secondary)));
  opacity: 0.7;
}

/* ===== Gradient text ===== */
.cw-gradient-text {
  background: linear-gradient(135deg, rgb(var(--cw-primary)), rgb(var(--cw-secondary)), rgb(var(--cw-accent)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== Gradient border effect ===== */
.cw-gradient-border {
  position: relative;
}
.cw-gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgb(var(--cw-primary) / 0.3), rgb(var(--cw-secondary) / 0.15), rgb(var(--cw-accent) / 0.2));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: xor;
  -webkit-mask-composite: xor;
  pointer-events: none;
}

/* ===== Glow effect ===== */
.cw-glow {
  box-shadow: 0 0 40px rgb(var(--cw-primary) / 0.15), 0 0 80px rgb(var(--cw-primary) / 0.05);
}

/* ===== Glassmorphism ===== */
.cw-glass {
  background: var(--cw-glass-bg, rgba(255, 255, 255, 0.7));
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border-radius: var(--cw-radius-lg);
}

/* ===== Hero section ===== */
.cw-hero {
  background: rgb(var(--cw-bg));
  position: relative;
}
.cw-hero-canvas {
  pointer-events: none;
}
.cw-hero-canvas canvas {
  width: 100% !important;
  height: 100% !important;
}

/* ===== Button shimmer animation ===== */
.cw-btn-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  animation: cw-shimmer 3s infinite;
}
@keyframes cw-shimmer {
  0% { left: -100%; }
  100% { left: 200%; }
}

/* ===== Pulse animation ===== */
.cw-pulse {
  animation: cw-pulse-anim 2s ease-in-out infinite;
}
@keyframes cw-pulse-anim {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ===== Scroll reveal animations ===== */
@keyframes cw-reveal-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.cw-reveal {
  opacity: 0;
}
.cw-reveal.cw-visible {
  animation: cw-reveal-up 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.cw-reveal-delay-1 { animation-delay: 0.1s; }
.cw-reveal-delay-2 { animation-delay: 0.2s; }
.cw-reveal-delay-3 { animation-delay: 0.3s; }
.cw-reveal-delay-4 { animation-delay: 0.4s; }

/* Counter value animation */
.cw-count-in {
  transition: opacity 0.4s ease;
}

/* Active nav indicator */
.cw-nav-active {
  position: relative;
}
.cw-nav-active::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, rgb(var(--cw-primary)), rgb(var(--cw-secondary)));
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .cw-reveal { opacity: 1; transform: none; transition: none; }
  .cw-btn-shimmer::after { animation: none; }
  .cw-pulse { animation: none; }
  .cw-card-hover:hover { transform: none; }
  .cw-btn-cta:hover { transform: none; }
  .cw-btn-primary:hover { transform: none; }
}