/* =========================================================
   KXCL APPLICATIONS - Black & White / Dark & Light Theme System
   ========================================================= */

/* Dark Mode Palette (Preto) */
html[data-theme="dark"], html:not([data-theme="light"]) {
  --theme-bg: #0c0f14;
  --theme-bg-secondary: #121721;
  --theme-card-bg: #151c28;
  --theme-card-border: rgba(255, 255, 255, 0.08);
  --theme-text-primary: #f8fafc;
  --theme-text-secondary: #94a3b8;
  --theme-header-bg: rgba(12, 15, 20, 0.85);
  --theme-header-border: rgba(255, 255, 255, 0.08);
  color-scheme: dark;
}

/* Light Mode Palette (Branco) */
html[data-theme="light"] {
  --theme-bg: #ffffff;
  --theme-bg-secondary: #f8fafc;
  --theme-card-bg: #ffffff;
  --theme-card-border: #e2e8f0;
  --theme-text-primary: #0f172a;
  --theme-text-secondary: #475569;
  --theme-header-bg: rgba(255, 255, 255, 0.9);
  --theme-header-border: #e2e8f0;
  color-scheme: light;
}

/* Core Element Theme Overrides */
html[data-theme="light"], html[data-theme="light"] body {
  background-color: var(--theme-bg) !important;
  color: var(--theme-text-primary) !important;
}

/* Light mode specific background and card overrides */
html[data-theme="light"] .bg-storm-900,
html[data-theme="light"] .bg-storm-950 {
  background-color: #f8fafc !important;
}

html[data-theme="light"] .bg-storm-800/50,
html[data-theme="light"] .bg-storm-800/40,
html[data-theme="light"] .bg-storm-800/25,
html[data-theme="light"] .storm-card {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .text-storm-50,
html[data-theme="light"] .text-storm-100 {
  color: #0f172a !important;
}

html[data-theme="light"] .text-storm-200,
html[data-theme="light"] .text-storm-300,
html[data-theme="light"] .text-storm-400 {
  color: #334155 !important;
}

html[data-theme="light"] header {
  background-color: rgba(255, 255, 255, 0.9) !important;
  border-bottom-color: #e2e8f0 !important;
  backdrop-filter: blur(12px);
}

html[data-theme="light"] .border-storm-800,
html[data-theme="light"] .border-storm-700/60,
html[data-theme="light"] .border-storm-700/50 {
  border-color: #e2e8f0 !important;
}

/* Fix Login Page Brand Text in Light & Dark Modes */
.login-form-panel__brand span,
.login-form-panel__brand a,
.login-page .login-form-panel__brand span,
html[data-theme="light"] .login-form-panel__brand span {
  color: #ffffff !important;
}

/* Smooth visibility */
[style*="opacity: 0"], [style*="opacity:0"] { opacity: 1 !important; }
[style*="transform: translateY"], [style*="transform:translateY"] { transform: none !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--theme-bg); }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }

/* =========================================================
   CLEAN ANIMATIONS & TRANSITIONS (GLOBAL & COMPONENTS)
   ========================================================= */

@keyframes cleanFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cleanScaleIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes valuePop {
  0% {
    opacity: 0.3;
    transform: scale(0.92) translateY(2px);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.04);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Global Page & Container Entrance Animations */
main, section, .login-page, .login-form-panel {
  animation: cleanFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) ease-out;
}

/* Smooth Popover, Menu & Dropdown Animations */
#sidebar-user-popover:not(.hidden),
#sidebar-bell-popover:not(.hidden),
#user-header-dropdown-menu:not(.hidden) {
  animation: cleanScaleIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.clean-fade-in {
  animation: cleanFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.value-pop-anim {
  animation: valuePop 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Global Micro-Interactions for Buttons, Links & Cards */
button, a, .group, input, select {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

button:active, a:active {
  transform: scale(0.98);
}

/* Smooth transition for numbers, tags & text elements */
.transition-value {
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes spinReverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

.animate-spin-slow {
  animation: spinSlow 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.animate-spin-reverse {
  animation: spinReverse 2.8s linear infinite;
}

.glow-emerald-shadow {
  box-shadow: 0 0 50px rgba(16, 185, 129, 0.22);
}