/* 
 * ⚡ CRITICAL THEME CSS
 * Minimal but effective - prevents FOUC without breaking layout
 * Supports both light and dark modes
 */

/* Force light mode - when dark class NOT present */
html:not(.dark)[data-theme='light'],
html:not(.dark):not([data-theme]) {
  color-scheme: light !important;
  background-color: #ffffff !important;
  background-image: linear-gradient(to bottom, #ffffff, #f8fafc) !important;
}

html:not(.dark)[data-theme='light'] body,
html:not(.dark)[data-theme='light'] body.bg-gradient-to-b,
html:not(.dark):not([data-theme]) body,
html:not(.dark):not([data-theme]) body.bg-gradient-to-b {
  background-color: #ffffff !important;
  background-image: linear-gradient(to bottom, #ffffff, #f8fafc) !important;
  color: #0f172a !important;
  min-height: 100vh !important;
}

/* Admin container light with gradient - when NOT in dark mode */
html:not(.dark)[data-theme='light'] .admin-layout-container,
html:not(.dark):not([data-theme]) .admin-layout-container {
  background-color: #ffffff !important;
  background-image: linear-gradient(to bottom right, #ffffff, #f1f5f9, #e2e8f0) !important;
}

/* System preference fallback before JS runs */
@media (prefers-color-scheme: dark) {
  html:not(.dark):not([data-theme]) {
    color-scheme: dark !important;
    background-color: #111827 !important;
    background-image: linear-gradient(to bottom, #111827, #1e293b) !important;
  }

  html:not(.dark):not([data-theme]) body,
  html:not(.dark):not([data-theme]) body.bg-gradient-to-b {
    background-color: #111827 !important;
    background-image: linear-gradient(to bottom, #111827, #1e293b) !important;
    color: #e5e7eb !important;
  }

  html:not(.dark):not([data-theme]) .admin-layout-container {
    background-color: #0f172a !important;
    background-image: linear-gradient(to bottom right, #0f172a, #1e293b, #0f172a) !important;
  }
}

/* Force dark ONLY when dark class present */
html.dark {
  color-scheme: dark !important;
  background-color: #111827 !important;
  background-image: linear-gradient(to bottom, #111827, #1e293b) !important;
}

html.dark body,
html.dark body.bg-gradient-to-b {
  background-color: #111827 !important;
  background-image: linear-gradient(to bottom, #111827, #1e293b) !important;
  color: #e5e7eb !important;
  min-height: 100vh !important;
}

/* Admin container dark with gradient - ONLY in dark mode */
html.dark .admin-layout-container {
  background-color: #0f172a !important;
  background-image: linear-gradient(to bottom right, #0f172a, #1e293b, #0f172a) !important;
}

/* Disable transitions on initial load ONLY - keep animations! */
html.no-transition *,
html.no-transition *::before,
html.no-transition *::after {
  transition: none !important;
  /* animation: none removed - let page animations run normally */
}