/* ================================================================
   EKONOM-IA Premium Design System v1
   Upgraded design tokens, typography, glassmorphism, animations
   ================================================================ */

/* ── DESIGN TOKENS ── */
:root {
  --eko-indigo: #6366F1;
  --eko-purple: #A855F7;
  --eko-pink: #EC4899;
  --eko-cyan: #22D3EE;
  --eko-accent: #E09855;
  --eko-grad-primary: linear-gradient(135deg, #6366F1, #A855F7, #EC4899);
  --eko-grad-accent: linear-gradient(135deg, #22D3EE, #6366F1);
  --eko-grad-warm: linear-gradient(135deg, #E09855, #F472B6);
  --eko-glass-bg: rgba(255,255,255,0.03);
  --eko-glass-border: rgba(99,102,241,0.12);
  --eko-glass-shadow: 0 4px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04);
  --eko-ease: cubic-bezier(.16,1,.3,1);
  --eko-spring: cubic-bezier(.175,.885,.32,1.275);
}

/* ── TYPOGRAPHY — Montserrat for headings ── */
h1, h2, h3, h4,
.text-4xl, .text-3xl, .text-2xl, .text-xl {
  font-family: 'Montserrat', 'Plus Jakarta Sans', system-ui, sans-serif !important;
  letter-spacing: -0.02em !important;
}

/* ── FORCE DARK MODE everywhere inside #root ── */
#root div, #root section, #root main, #root article, #root aside {
  color-scheme: dark !important;
}

/* ── NUKE ALL white/light backgrounds inside app ── */
#root .bg-white,
#root .bg-gray-50,
#root .bg-gray-100,
#root .bg-slate-50,
#root .bg-slate-100,
#root [class*="bg-white"],
#root [style*="background-color: white"],
#root [style*="background-color: rgb(255"],
#root [style*="background: white"],
#root [style*="background: rgb(255"] {
  background-color: rgba(5,5,32,.85) !important;
}

/* ── Profile/Client page specific dark overrides ── */
.profile-stat-card,
.profile-hero-card,
.profile-menu-item,
.client-profile-page [class*="rounded-2xl"],
.client-profile-page [class*="rounded-xl"],
#root [class*="profile"] {
  background-color: rgba(10,10,46,.7) !important;
  border-color: rgba(99,102,241,.12) !important;
}

/* Module cards on profile (Eko Premium, Smart Budget, etc.) */
#root [class*="ep-module"],
#root [class*="rounded-2xl"][class*="cursor-pointer"],
#root [class*="rounded-2xl"][class*="border"] {
  background-color: rgba(10,10,46,.65) !important;
  border-color: rgba(99,102,241,.12) !important;
}

/* ── PREMIUM CARD STYLE — scoped to avoid dock/nav ── */
#root [class*="rounded-"][class*="border"]:not(.glass-dock):not(nav):not(button):not(input):not(select),
[class*="glass-panel"]:not(.glass-dock),
.bg-card,
[class*="bg-muted"]:not(.glass-dock) {
  background-color: rgba(5,5,32,.5) !important;
  border-color: var(--eko-glass-border) !important;
  box-shadow: var(--eko-glass-shadow) !important;
  backdrop-filter: blur(8px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(150%) !important;
}

/* ── PREMIUM BUTTONS ── */
button[class*="bg-gradient"],
button[class*="bg-indigo"],
button[class*="bg-purple"],
button[class*="bg-blue"],
a[class*="bg-gradient"] {
  background: var(--eko-grad-primary) !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(99,102,241,.3), 0 0 0 1px rgba(99,102,241,.1) !important;
  transition: transform .3s var(--eko-spring), box-shadow .3s ease !important;
}

button[class*="bg-gradient"]:hover,
button[class*="bg-indigo"]:hover,
button[class*="bg-purple"]:hover,
button[class*="bg-blue"]:hover,
a[class*="bg-gradient"]:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 30px rgba(99,102,241,.45), 0 0 0 1px rgba(99,102,241,.2) !important;
}

/* ── ACCENT (orange) BUTTONS — premium warm glow ── */
button[class*="bg-[#E09855]"],
button[class*="bg-orange"],
button[class*="bg-amber"],
[style*="background-color: rgb(224, 152, 85)"],
[style*="#E09855"] {
  box-shadow: 0 4px 15px rgba(224,152,85,.3), 0 0 0 1px rgba(224,152,85,.1) !important;
  transition: transform .3s var(--eko-spring), box-shadow .3s ease !important;
}

/* ── GLASS DOCK (bottom nav) — force dark premium ── */
.glass-dock,
nav.glass-dock,
#root .glass-dock {
  background: rgba(3,0,20,.88) !important;
  background-color: rgba(3,0,20,.88) !important;
  border: 1px solid rgba(99,102,241,.15) !important;
  box-shadow: 0 -8px 32px rgba(99,102,241,.12), 0 0 0 1px rgba(99,102,241,.08), inset 0 1px 0 rgba(255,255,255,.04) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
}

/* Active dock item glow */
.glass-dock [class*="text-[#E09855]"],
.glass-dock [style*="color: rgb(224, 152, 85)"] {
  filter: drop-shadow(0 0 8px rgba(224,152,85,.4));
}

/* ── FORCE LIGHT TEXT on dark backgrounds ── */
#root .text-black,
#root .text-gray-900,
#root .text-gray-800,
#root .text-gray-700,
#root .text-slate-900,
#root .text-slate-800,
#root .text-slate-700 {
  color: #E8E8FF !important;
}

#root .text-gray-600,
#root .text-gray-500,
#root .text-slate-600,
#root .text-slate-500 {
  color: #9A9AC0 !important;
}

#root .text-gray-400,
#root .text-slate-400 {
  color: #7878A0 !important;
}

/* ── HEADERS/NAV — glassmorphism ── */
#root nav,
#root header {
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-bottom: 1px solid rgba(99,102,241,.08) !important;
}

/* ── DIVIDERS — subtle gradient ── */
hr, [class*="border-b"] {
  border-color: rgba(99,102,241,.08) !important;
}

/* ── INPUT FIELDS — premium focus state ── */
input:focus, textarea:focus, select:focus {
  border-color: rgba(99,102,241,.4) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.1), 0 0 20px rgba(99,102,241,.08) !important;
  outline: none !important;
}

/* ── BADGES / PILLS ── */
[class*="rounded-full"][class*="text-xs"],
[class*="rounded-full"][class*="text-sm"] {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* ── SMOOTH TRANSITIONS everywhere ── */
*, *::before, *::after {
  transition-timing-function: var(--eko-ease) !important;
}

/* Exclude animations from the global transition override */
[style*="animation"], [class*="animate-"] {
  transition-timing-function: unset !important;
}

/* ── SCROLLBAR premium ── */
#root::-webkit-scrollbar {
  width: 3px;
}
#root::-webkit-scrollbar-track {
  background: transparent;
}
#root::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(99,102,241,.3), rgba(168,85,247,.3));
  border-radius: 3px;
}
#root::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(99,102,241,.5), rgba(168,85,247,.5));
}

/* ── SELECTION ── */
::selection {
  background: rgba(99,102,241,.3) !important;
  color: #fff !important;
}

/* ── TEXT GRADIENT utility (for JS-injected content) ── */
.eko-text-gradient {
  background: var(--eko-grad-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── GLOW ANIMATION for premium badges ── */
.eko-glow {
  animation: ekoGlowPulse 3s ease-in-out infinite;
}

/* ── LOADING SKELETON shimmer ── */
[class*="animate-pulse"] {
  background: linear-gradient(90deg, rgba(99,102,241,.05) 0%, rgba(99,102,241,.12) 50%, rgba(99,102,241,.05) 100%) !important;
  background-size: 200% 100% !important;
  animation: ekoTextShimmer 1.5s linear infinite !important;
}

/* ── PROGRESS BARS — gradient ── */
[role="progressbar"] > div,
[class*="bg-indigo"][class*="h-1"],
[class*="bg-indigo"][class*="h-2"],
[class*="bg-purple"][class*="h-1"],
[class*="bg-purple"][class*="h-2"] {
  background: var(--eko-grad-primary) !important;
  box-shadow: 0 0 10px rgba(99,102,241,.3) !important;
}

/* ── AVATAR RINGS ── */
[class*="rounded-full"] img {
  box-shadow: 0 0 0 2px rgba(99,102,241,.15), 0 0 15px rgba(99,102,241,.1) !important;
}

/* ── FLOATING LABEL EFFECT for stat numbers ── */
[class*="text-3xl"][class*="font-bold"],
[class*="text-4xl"][class*="font-bold"] {
  text-shadow: 0 0 30px rgba(99,102,241,.15), 0 0 60px rgba(168,85,247,.08) !important;
}

/* ================================================================
   MODULE OVERLAY PREMIUM UPGRADES
   Targets: EkoCarburant, EkoEnergie, EkoVoyage, SmartBudget,
            EkoPremium Hub, EkoRide overlays
   ================================================================ */

/* ── OVERLAY BACKGROUNDS — premium gradient instead of flat ── */
#ekocarburant-overlay,
#ekoenergie-overlay,
#ekovoyage-overlay,
#smartbudget-overlay,
#ekopremium-overlay,
#ekoride-overlay {
  background: linear-gradient(180deg, #030014 0%, #0a0530 30%, #080025 60%, #030014 100%) !important;
}

/* ── OVERLAY HEADERS — glassmorphism upgrade ── */
.ec-header, .ee-header, .ev-header, .sb-header, .ep-header,
.ekoride-header {
  background: rgba(3,0,20,.85) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  border-bottom: 1px solid rgba(99,102,241,.1) !important;
  box-shadow: 0 1px 20px rgba(0,0,0,.3) !important;
}

/* ── HEADER TITLES — text glow ── */
.ec-header h1, .ee-header h1, .ev-header h1, .sb-header h1, .ep-header h1,
.ekoride-header h1,
.ec-header span, .ee-header span, .ev-header span, .sb-header span {
  text-shadow: 0 0 20px rgba(99,102,241,.2) !important;
  font-family: 'Montserrat', 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

/* ── HEADER BACK/CLOSE BUTTONS — premium style ── */
.ec-header button, .ee-header-btn, .ev-header button,
.sb-header button, .ep-close-btn,
.ekoride-header button {
  background: rgba(99,102,241,.08) !important;
  border: 1px solid rgba(99,102,241,.15) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: all .3s cubic-bezier(.16,1,.3,1) !important;
}

.ec-header button:hover, .ee-header-btn:hover, .ev-header button:hover,
.sb-header button:hover, .ep-close-btn:hover,
.ekoride-header button:hover {
  background: rgba(99,102,241,.15) !important;
  border-color: rgba(99,102,241,.25) !important;
  transform: scale(1.05) !important;
}

/* ── PRIMARY BUTTONS — enhanced gradient + glow ── */
.ec-btn-primary, .ee-btn-primary, .ev-btn-primary,
.sb-btn-primary, .ep-pb-btn,
.ekoride-btn-primary {
  background: linear-gradient(135deg, #6366F1, #A855F7, #EC4899) !important;
  box-shadow: 0 8px 30px rgba(99,102,241,.35), 0 0 0 1px rgba(99,102,241,.15) !important;
  border: none !important;
  transition: transform .3s cubic-bezier(.175,.885,.32,1.275), box-shadow .3s ease !important;
  font-family: 'Montserrat', 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

.ec-btn-primary:hover, .ee-btn-primary:hover, .ev-btn-primary:hover,
.sb-btn-primary:hover, .ep-pb-btn:hover,
.ekoride-btn-primary:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 12px 40px rgba(99,102,241,.5), 0 0 0 1px rgba(99,102,241,.25) !important;
}

.ec-btn-primary:active, .ee-btn-primary:active, .ev-btn-primary:active,
.sb-btn-primary:active, .ep-pb-btn:active,
.ekoride-btn-primary:active {
  transform: translateY(0) scale(0.98) !important;
}

/* ── SECONDARY BUTTONS ── */
.ec-btn-secondary, .ee-btn-secondary, .ev-btn-secondary,
.sb-btn-secondary, .ekoride-btn-secondary {
  background: rgba(99,102,241,.08) !important;
  border: 1px solid rgba(99,102,241,.15) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: all .3s cubic-bezier(.16,1,.3,1) !important;
}

.ec-btn-secondary:hover, .ee-btn-secondary:hover, .ev-btn-secondary:hover,
.sb-btn-secondary:hover, .ekoride-btn-secondary:hover {
  background: rgba(99,102,241,.15) !important;
  border-color: rgba(99,102,241,.25) !important;
}

/* ── CARDS — glassmorphism + premium glow ── */
.ec-station-card, .ee-provider-card, .ev-trip-card,
.ev-deal-card, .ev-alert-card, .ev-inspo-card,
.sb-card, .sb-account-card, .sb-transaction-card,
.ep-module-card, .ekoride-card {
  background: rgba(99,102,241,.04) !important;
  border: 1px solid rgba(99,102,241,.1) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.03) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  transition: all .4s cubic-bezier(.16,1,.3,1) !important;
}

.ec-station-card:hover, .ee-provider-card:hover, .ev-trip-card:hover,
.ev-deal-card:hover, .ev-alert-card:hover, .ev-inspo-card:hover,
.sb-card:hover, .sb-account-card:hover, .sb-transaction-card:hover,
.ep-module-card:hover, .ekoride-card:hover {
  border-color: rgba(99,102,241,.2) !important;
  box-shadow: 0 8px 32px rgba(99,102,241,.15), 0 0 0 1px rgba(99,102,241,.12), inset 0 1px 0 rgba(255,255,255,.05) !important;
  transform: translateY(-2px) !important;
}

/* ── CARDS — accent variants ── */
.ee-provider-card.ee-best, .ekoride-card-accent {
  border-color: rgba(16,185,129,.25) !important;
  background: linear-gradient(135deg, rgba(16,185,129,.08), rgba(52,211,153,.04)) !important;
  box-shadow: 0 4px 20px rgba(16,185,129,.1), inset 0 1px 0 rgba(255,255,255,.03) !important;
}

.ee-provider-card.ee-current {
  border-color: rgba(99,102,241,.25) !important;
  background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(168,85,247,.04)) !important;
  box-shadow: 0 4px 20px rgba(99,102,241,.1), inset 0 1px 0 rgba(255,255,255,.03) !important;
}

/* ── TOASTS — glassmorphism backdrop ── */
.ec-toast, .ee-toast, .ev-toast, .sb-toast,
.ekoride-toast {
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.3) !important;
}

.ec-toast-success, .ee-toast-success, .ev-toast-success, .sb-toast-success,
.ekoride-toast-success {
  background: rgba(16,185,129,.12) !important;
  border: 1px solid rgba(16,185,129,.25) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.3), 0 0 20px rgba(16,185,129,.1) !important;
}

.ec-toast-error, .ee-toast-error, .ev-toast-error, .sb-toast-error,
.ekoride-toast-error {
  background: rgba(239,68,68,.12) !important;
  border: 1px solid rgba(239,68,68,.25) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.3), 0 0 20px rgba(239,68,68,.1) !important;
}

.ec-toast-info, .ee-toast-info, .ev-toast-info, .sb-toast-info {
  background: rgba(34,211,238,.10) !important;
  border: 1px solid rgba(34,211,238,.2) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.3), 0 0 20px rgba(34,211,238,.08) !important;
}

.ee-toast-warning, .sb-toast-warning {
  background: rgba(245,158,11,.10) !important;
  border: 1px solid rgba(245,158,11,.2) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.3), 0 0 20px rgba(245,158,11,.08) !important;
}

/* ── TAB NAVIGATION in overlays ── */
.ec-tab, .ee-tab, .ev-tab, .sb-tab, .ep-tab,
.ekoride-tab {
  transition: all .3s cubic-bezier(.16,1,.3,1) !important;
}

.ec-tab.active, .ee-tab.active, .ev-tab.active, .sb-tab.active,
.ep-tab.active, .ekoride-tab.active,
.ec-tab-active, .ee-tab-active, .ev-tab-active, .sb-tab-active {
  background: rgba(99,102,241,.15) !important;
  border-color: rgba(99,102,241,.3) !important;
  box-shadow: 0 0 15px rgba(99,102,241,.15) !important;
}

/* ── STAT BOXES in overlays ── */
.ec-stat, .ee-stat, .ev-stat, .sb-stat,
.ekoride-stat {
  background: rgba(99,102,241,.06) !important;
  border: 1px solid rgba(99,102,241,.1) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* ── PREMIUM BANNER in overlays ── */
.ep-premium-banner, .ec-premium-banner, .sb-premium-banner {
  background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(168,85,247,.08), rgba(236,72,153,.06)) !important;
  border: 1px solid rgba(99,102,241,.2) !important;
  box-shadow: 0 8px 32px rgba(99,102,241,.12), inset 0 1px 0 rgba(255,255,255,.04) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ── FORM INPUTS in overlays ── */
.ec-input, .ee-input, .ev-input, .sb-input,
.ekoride-input {
  background: rgba(99,102,241,.04) !important;
  border: 1px solid rgba(99,102,241,.12) !important;
  transition: all .3s cubic-bezier(.16,1,.3,1) !important;
}

.ec-input:focus, .ee-input:focus, .ev-input:focus, .sb-input:focus,
.ekoride-input:focus {
  border-color: rgba(99,102,241,.4) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.1), 0 0 20px rgba(99,102,241,.08) !important;
}

/* ── SCROLLABLE CONTENT in overlays ── */
.ec-content, .ee-content, .ev-content, .sb-content, .ep-content,
.ekoride-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(99,102,241,.2) transparent;
}

.ec-content::-webkit-scrollbar, .ee-content::-webkit-scrollbar,
.ev-content::-webkit-scrollbar, .sb-content::-webkit-scrollbar,
.ep-content::-webkit-scrollbar, .ekoride-content::-webkit-scrollbar {
  width: 3px;
}

.ec-content::-webkit-scrollbar-thumb, .ee-content::-webkit-scrollbar-thumb,
.ev-content::-webkit-scrollbar-thumb, .sb-content::-webkit-scrollbar-thumb,
.ep-content::-webkit-scrollbar-thumb, .ekoride-content::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(99,102,241,.25), rgba(168,85,247,.25));
  border-radius: 3px;
}

/* ── EkoRide green accent — keep but enhance ── */
.ekoride-btn-primary {
  background: linear-gradient(135deg, #10B981, #059669, #047857) !important;
  box-shadow: 0 8px 30px rgba(16,185,129,.3), 0 0 0 1px rgba(16,185,129,.15) !important;
}

.ekoride-btn-primary:hover {
  box-shadow: 0 12px 40px rgba(16,185,129,.45), 0 0 0 1px rgba(16,185,129,.25) !important;
}