/* ============================================================
   AGENDA SIMPLES — THEME SYSTEM
   5 themes: default (light/dark), neon-pulse, royal-gold,
   ocean-breeze, glassmorphism
   ============================================================ */

/* DEFAULT LIGHT */
:root {
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-border: #e2e8f0;
  --color-text-primary: #0f172a;
  --color-text-secondary: #64748b;
  --color-accent: #6366f1;
  --color-accent-hover: #4f46e5;
  --color-input-bg: #ffffff;
  --color-input-text: #0f172a;
  --color-input-border: #cbd5e1;
  --color-sidebar-bg: #ffffff;
  --color-sidebar-border: #e2e8f0;
  --color-card-bg: #ffffff;
  --color-radius: 0.75rem;
  --color-neon-glow: none;
  --font-family-base: 'Inter', sans-serif;
}

/* DEFAULT DARK */
html.dark {
  --color-bg: #0f172a;
  --color-surface: #1e293b;
  --color-border: #334155;
  --color-text-primary: #f1f5f9;
  --color-text-secondary: #94a3b8;
  --color-accent: #6366f1;
  --color-accent-hover: #4f46e5;
  --color-input-bg: #374151;
  --color-input-text: #f9fafb;
  --color-input-border: #4b5563;
  --color-sidebar-bg: #1e293b;
  --color-sidebar-border: #334155;
  --color-card-bg: #1e293b;
}

/* NEON PULSE */
html.theme-neon-pulse {
  --color-bg: #050a0e;
  --color-surface: #0b151e;
  --color-border: #1b3d5a;
  --color-text-primary: #e2f1fc;
  --color-text-secondary: #7fa6c7;
  --color-accent: #00f5d4;
  --color-accent-hover: #00d2b4;
  --color-input-bg: #0d1f2d;
  --color-input-text: #e2f1fc;
  --color-input-border: #1b3d5a;
  --color-sidebar-bg: #060d13;
  --color-sidebar-border: #1b3d5a;
  --color-card-bg: #0b151e;
  --color-radius: 0.375rem;
  --font-family-base: 'Courier New', 'Consolas', monospace;
}

/* ROYAL GOLD */
html.theme-royal-gold {
  --color-bg: #1a1710;
  --color-surface: #242016;
  --color-border: #383222;
  --color-text-primary: #fcfbf7;
  --color-text-secondary: #a8a494;
  --color-accent: #d4af37;
  --color-accent-hover: #aa8a2a;
  --color-input-bg: #2d281c;
  --color-input-text: #fcfbf7;
  --color-input-border: #48412e;
  --color-sidebar-bg: #1f1b13;
  --color-sidebar-border: #383222;
  --color-card-bg: #242016;
  --color-radius: 0.5rem;
  --font-family-base: 'Georgia', 'Times New Roman', serif;
}

/* OCEAN BREEZE */
html.theme-ocean-breeze {
  --color-bg: #bae6fd;
  --color-surface: rgba(240, 249, 255, 0.75);
  --color-border: #bae6fd;
  --color-text-primary: #0369a1;
  --color-text-secondary: #0ea5e9;
  --color-accent: #0ea5e9;
  --color-accent-hover: #0284c7;
  --color-input-bg: #f0f9ff;
  --color-input-text: #0369a1;
  --color-input-border: #bae6fd;
  --color-sidebar-bg: #f0f9ff;
  --color-sidebar-border: #bae6fd;
  --color-card-bg: #e0f2fe;
  --color-radius: 1rem;
  --font-family-base: 'Inter', 'Segoe UI', sans-serif;
}

html.theme-ocean-breeze body {
  background: linear-gradient(135deg, #f0f9ff 0%, #bae6fd 50%, #7dd3fc 100%) fixed !important;
}

html.theme-ocean-breeze nav,
html.theme-ocean-breeze nav[class*="bg-white"] {
  background-color: rgba(240, 249, 255, 0.85) !important;
  border-bottom-color: rgba(14, 165, 233, 0.25) !important;
  backdrop-filter: blur(10px) !important;
}

/* GLASSMORPHISM */
html.theme-glassmorphism {
  --color-bg: #0b071e;
  --color-surface: rgba(255, 255, 255, 0.05);
  --color-border: rgba(255, 255, 255, 0.1);
  --color-text-primary: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.6);
  --color-accent: #8b5cf6;
  --color-accent-hover: #7c3aed;
  --color-input-bg: rgba(255, 255, 255, 0.08);
  --color-input-text: #ffffff;
  --color-input-border: rgba(255, 255, 255, 0.15);
  --color-sidebar-bg: rgba(0, 0, 0, 0.25);
  --color-sidebar-border: rgba(255, 255, 255, 0.08);
  --color-card-bg: rgba(255, 255, 255, 0.04);
  --color-radius: 1.25rem;
  --font-family-base: 'Inter', sans-serif;
}

html.theme-glassmorphism body {
  background: radial-gradient(ellipse at 30% 20%, #2d1b69 0%, #0b071e 60%) fixed !important;
}
html.theme-glassmorphism .glass-effect {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ============================================================
   GLOBAL VARIABLE APPLICATION
   ============================================================ */
html {
  background-color: var(--color-bg) !important;
  color: var(--color-text-primary) !important;
}
body {
  background-color: var(--color-bg) !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-family-base) !important;
}

/* ROYAL GOLD typography */
html.theme-royal-gold h1,
html.theme-royal-gold h2,
html.theme-royal-gold h3,
html.theme-royal-gold h4,
html.theme-royal-gold p {
  font-family: 'Georgia', 'Times New Roman', serif;
  letter-spacing: 0.01em;
}

/* NEON PULSE headings */
html.theme-neon-pulse h1,
html.theme-neon-pulse h2,
html.theme-neon-pulse h3 {
  font-family: 'Courier New', monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
html.theme-neon-pulse .text-indigo-600,
html.theme-neon-pulse .text-indigo-700,
html.theme-neon-pulse .text-indigo-500 {
  color: var(--color-accent) !important;
  text-shadow: 0 0 8px rgba(var(--color-neon-accent-rgb, 0, 245, 212), 0.5);
}

/* ============================================================
   BG OVERRIDES (dark + themed backgrounds)
   ============================================================ */
html.dark .bg-white,
html.dark [class*="bg-white"],
html.theme-neon-pulse .bg-white,
html.theme-neon-pulse [class*="bg-white"],
html.theme-royal-gold .bg-white,
html.theme-royal-gold [class*="bg-white"],
html.theme-glassmorphism .bg-white,
html.theme-glassmorphism [class*="bg-white"],
html.theme-ocean-breeze .bg-white,
html.theme-ocean-breeze [class*="bg-white"] {
  background-color: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
}

html.dark .bg-gray-50,
html.dark .bg-slate-50,
html.theme-neon-pulse .bg-gray-50,
html.theme-neon-pulse .bg-slate-50,
html.theme-neon-pulse [class*="bg-slate-50"],
html.theme-royal-gold .bg-gray-50,
html.theme-royal-gold .bg-slate-50,
html.theme-glassmorphism .bg-gray-50,
html.theme-glassmorphism .bg-slate-50 {
  background-color: var(--color-bg) !important;
}

html.theme-ocean-breeze .bg-gray-50,
html.theme-ocean-breeze .bg-slate-50 {
  background-color: #e0f2fe !important;
}

/* ============================================================
   NEON PULSE — CARD NEON BORDERS (Landing + Dashboard)
   ============================================================ */

/* All rounded card containers get neon border */
html.theme-neon-pulse .rounded-xl,
html.theme-neon-pulse .rounded-2xl,
html.theme-neon-pulse .rounded-lg {
  background-color: var(--color-surface) !important;
  border: 2px solid rgba(var(--color-neon-accent-rgb, 0, 245, 212), 0.3) !important;
  box-shadow: 0 0 0 1px rgba(var(--color-neon-accent-rgb, 0, 245, 212),0.1),
              0 0 12px rgba(var(--color-neon-accent-rgb, 0, 245, 212),0.18),
              inset 0 0 20px rgba(var(--color-neon-accent-rgb, 0, 245, 212),0.02) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

html.theme-neon-pulse .rounded-xl:hover,
html.theme-neon-pulse .rounded-2xl:hover,
html.theme-neon-pulse .rounded-lg:hover {
  border-color: rgba(var(--color-neon-accent-rgb, 0, 245, 212), 0.7) !important;
  box-shadow: 0 0 0 2px rgba(var(--color-neon-accent-rgb, 0, 245, 212),0.3),
              0 0 22px rgba(var(--color-neon-accent-rgb, 0, 245, 212),0.35),
              inset 0 0 28px rgba(var(--color-neon-accent-rgb, 0, 245, 212),0.05) !important;
}

/* Small utility badges/pills - don't apply neon */
html.theme-neon-pulse .rounded-full {
  border: 1px solid rgba(var(--color-neon-accent-rgb, 0, 245, 212), 0.2) !important;
  box-shadow: none !important;
}

/* Sidebar */
html.theme-neon-pulse aside {
  background-color: var(--color-sidebar-bg) !important;
  border-right: 2px solid rgba(var(--color-neon-accent-rgb, 0, 245, 212), 0.25) !important;
  box-shadow: 2px 0 20px rgba(var(--color-neon-accent-rgb, 0, 245, 212), 0.07) !important;
  border-radius: 0 !important;
}

/* Active nav in sidebar */
html.theme-neon-pulse .bg-indigo-50 {
  background-color: rgba(var(--color-neon-accent-rgb, 0, 245, 212), 0.08) !important;
  border: 1px solid rgba(var(--color-neon-accent-rgb, 0, 245, 212), 0.3) !important;
}
html.theme-neon-pulse .text-indigo-700 {
  color: var(--color-accent) !important;
}

/* Main content area */
html.theme-neon-pulse main {
  background-color: var(--color-bg) !important;
}

/* ============================================================
   GLASSMORPHISM CARD TREATMENT
   ============================================================ */
html.theme-glassmorphism .rounded-xl,
html.theme-glassmorphism .rounded-2xl,
html.theme-glassmorphism .rounded-lg {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.theme-glassmorphism .bg-indigo-50 {
  background-color: rgba(139, 92, 246, 0.1) !important;
  border: 1px solid rgba(139, 92, 246, 0.2) !important;
}

/* ============================================================
   BORDERS
   ============================================================ */
html.dark .border-gray-100, html.dark .border-gray-200, html.dark .border-gray-300,
html.theme-neon-pulse .border-gray-100, html.theme-neon-pulse .border-gray-200, html.theme-neon-pulse .border-gray-300,
html.theme-royal-gold .border-gray-100, html.theme-royal-gold .border-gray-200, html.theme-royal-gold .border-gray-300,
html.theme-glassmorphism .border-gray-100, html.theme-glassmorphism .border-gray-200, html.theme-glassmorphism .border-gray-300 {
  border-color: var(--color-border) !important;
}

/* ============================================================
   INPUTS
   ============================================================ */
html.dark input, html.dark select, html.dark textarea,
html.theme-neon-pulse input, html.theme-neon-pulse select, html.theme-neon-pulse textarea,
html.theme-royal-gold input, html.theme-royal-gold select, html.theme-royal-gold textarea,
html.theme-glassmorphism input, html.theme-glassmorphism select, html.theme-glassmorphism textarea {
  background-color: var(--color-input-bg) !important;
  color: var(--color-input-text) !important;
  border-color: var(--color-input-border) !important;
}

html.theme-neon-pulse input,
html.theme-neon-pulse select,
html.theme-neon-pulse textarea {
  box-shadow: 0 0 0 1px rgba(var(--color-neon-accent-rgb, 0, 245, 212),0.2) !important;
}
html.theme-neon-pulse input:focus,
html.theme-neon-pulse select:focus,
html.theme-neon-pulse textarea:focus {
  box-shadow: 0 0 0 2px rgba(var(--color-neon-accent-rgb, 0, 245, 212),0.45), 0 0 14px rgba(var(--color-neon-accent-rgb, 0, 245, 212),0.2) !important;
  outline: none !important;
}

/* ============================================================
   TEXT OVERRIDES
   ============================================================ */
html.dark .text-gray-900, html.dark .text-gray-800, html.dark .text-gray-700,
html.theme-neon-pulse .text-gray-900, html.theme-neon-pulse .text-gray-800, html.theme-neon-pulse .text-gray-700,
html.theme-royal-gold .text-gray-900, html.theme-royal-gold .text-gray-800, html.theme-royal-gold .text-gray-700,
html.theme-glassmorphism .text-gray-900, html.theme-glassmorphism .text-gray-800, html.theme-glassmorphism .text-gray-700 {
  color: var(--color-text-primary) !important;
}

html.dark .text-gray-600, html.dark .text-gray-500,
html.theme-neon-pulse .text-gray-600, html.theme-neon-pulse .text-gray-500,
html.theme-royal-gold .text-gray-600, html.theme-royal-gold .text-gray-500,
html.theme-glassmorphism .text-gray-600, html.theme-glassmorphism .text-gray-500 {
  color: var(--color-text-secondary) !important;
}

/* ============================================================
   ROYAL GOLD ACCENT
   ============================================================ */
html.theme-royal-gold .text-indigo-600,
html.theme-royal-gold .text-indigo-700,
html.theme-royal-gold .text-indigo-500 {
  color: var(--color-accent) !important;
}
html.theme-royal-gold .bg-indigo-600,
html.theme-royal-gold .bg-indigo-500 {
  background-color: var(--color-accent) !important;
}
html.theme-royal-gold .bg-indigo-50 {
  background-color: rgba(212,175,55,0.1) !important;
  border: 1px solid rgba(212,175,55,0.2) !important;
}
html.theme-royal-gold .text-indigo-700 {
  color: #d4af37 !important;
}

/* ============================================================
   OCEAN BREEZE ACCENT
   ============================================================ */
html.theme-ocean-breeze .text-indigo-600,
html.theme-ocean-breeze .text-indigo-700,
html.theme-ocean-breeze .text-indigo-500 {
  color: var(--color-accent) !important;
}
html.theme-ocean-breeze .bg-indigo-600,
html.theme-ocean-breeze .bg-indigo-500 {
  background-color: var(--color-accent) !important;
}
html.theme-ocean-breeze .bg-indigo-50 {
  background-color: rgba(14,165,233,0.08) !important;
}

/* ============================================================
   GLASSMORPHISM ACCENT
   ============================================================ */
html.theme-glassmorphism .text-indigo-600,
html.theme-glassmorphism .text-indigo-700,
html.theme-glassmorphism .text-indigo-500 {
  color: var(--color-accent) !important;
}

/* ============================================================
   SERVICE & SHOP CARD THEME WORKAROUNDS
   ============================================================ */
html.theme-royal-gold .service-card {
  background: linear-gradient(135deg, #bf953f 0%, #fcf6ba 25%, #b38728 50%, #fbf5b7 75%, #aa771c 100%) !important;
  border: 2px solid #fcf6ba !important;
  color: #12131a !important;
  box-shadow: 0 10px 25px rgba(212, 175, 55, 0.4), inset 0 0 12px rgba(255, 255, 255, 0.6) !important;
  transition: all 0.3s ease !important;
}
html.theme-royal-gold .service-card:hover {
  box-shadow: 0 15px 35px rgba(212, 175, 55, 0.6), inset 0 0 18px rgba(255, 255, 255, 0.8) !important;
  transform: translateY(-2px) !important;
}
html.theme-royal-gold nav,
html.theme-royal-gold nav[class*="bg-white"] {
  background-color: rgba(28, 24, 15, 0.93) !important;
  border-bottom: 2px solid rgba(212, 175, 55, 0.35) !important;
  backdrop-filter: blur(12px) !important;
}
html.theme-royal-gold .service-card h3,
html.theme-royal-gold .service-card p,
html.theme-royal-gold .service-card span,
html.theme-royal-gold .service-card div {
  color: #12131a !important;
}

html.theme-glassmorphism .service-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.01) 100%) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4),
              inset 0 1px 0 0 rgba(255, 255, 255, 0.35),
              inset 0 -1px 0 0 rgba(0, 0, 0, 0.2) !important;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
html.theme-glassmorphism .service-card:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
  border-color: rgba(255, 255, 255, 0.38) !important;
  box-shadow: 0 15px 45px 0 rgba(139, 92, 246, 0.35),
              inset 0 1px 0 0 rgba(255, 255, 255, 0.5),
              inset 0 -1px 0 0 rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-5px) !important;
}

html.theme-ocean-breeze .service-card {
  background: linear-gradient(135deg, rgba(240, 249, 255, 0.7) 0%, rgba(224, 242, 254, 0.8) 50%, rgba(186, 230, 253, 0.9) 100%) !important;
  border: 2px solid rgba(14, 165, 233, 0.3) !important;
  color: #0369a1 !important;
  box-shadow: 0 8px 20px rgba(14, 165, 233, 0.12), inset 0 0 10px rgba(255, 255, 255, 0.8) !important;
  transition: all 0.3s ease !important;
}
html.theme-ocean-breeze .service-card:hover {
  box-shadow: 0 12px 28px rgba(14, 165, 233, 0.25), inset 0 0 14px rgba(255, 255, 255, 0.9) !important;
  border-color: #0ea5e9 !important;
  transform: translateY(-2px) !important;
}
html.theme-ocean-breeze .service-card h3,
html.theme-ocean-breeze .service-card p,
html.theme-ocean-breeze .service-card span,
html.theme-ocean-breeze .service-card div {
  color: #0369a1 !important;
}

/* ============================================================
   MOBILE RESPONSIVE NAVIGATION BACKGROUND OVERRIDES
   ============================================================ */
@media (max-width: 768px) {
  html.theme-glassmorphism nav,
  html.theme-glassmorphism nav[class*="bg-white"] {
    background-color: #0b071e !important; /* solid dark violet background on mobile */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ============================================================
   SCROLLBARS
   ============================================================ */
html.theme-neon-pulse ::-webkit-scrollbar-track { background: #050a0e; }
html.theme-neon-pulse ::-webkit-scrollbar-thumb { background: rgba(var(--color-neon-accent-rgb, 0, 245, 212),0.25); border-radius: 4px; }
html.theme-neon-pulse ::-webkit-scrollbar-thumb:hover { background: rgba(var(--color-neon-accent-rgb, 0, 245, 212),0.5); }

html.theme-glassmorphism ::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
html.theme-glassmorphism ::-webkit-scrollbar-thumb { background: rgba(139,92,246,0.35); border-radius: 4px; }