body {
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.glass {
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.glass-hover:hover {
  background: rgba(30, 41, 59, 0.7);
  border-color: rgba(255, 255, 255, 0.08);
}
/* Custom scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

/* ================= WHITE/LIGHT THEME OVERRIDES ================= */
html:not(.dark) body {
  background: #f8fafc;
  color: #0f172a;
}

html:not(.dark) #app-screen {
  background: #f1f5f9;
  color: #0f172a;
}

/* Light glass panel style */
html:not(.dark) .glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
}

html:not(.dark) .glass-hover:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(15, 23, 42, 0.12);
}

/* Header style override */
html:not(.dark) header {
  background: rgba(255, 255, 255, 0.8) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}

/* Border overrides */
html:not(.dark) .border-slate-800,
html:not(.dark) .border-slate-800\/80,
html:not(.dark) .border-slate-800\/50,
html:not(.dark) .border-slate-900\/60,
html:not(.dark) .divide-slate-900\/60 > * {
  border-color: rgba(15, 23, 42, 0.08) !important;
}

/* Text color overrides */
html:not(.dark) .text-white,
html:not(.dark) .text-slate-100,
html:not(.dark) .text-slate-200 {
  color: #0f172a !important;
}

html:not(.dark) .text-slate-400 {
  color: #64748b !important;
}

html:not(.dark) .text-slate-500 {
  color: #475569 !important;
}

/* Force white text inside colored backgrounds and elements */
html:not(.dark) .bg-brand-500,
html:not(.dark) .bg-brand-600,
html:not(.dark) .bg-brand-700,
html:not(.dark) .bg-emerald-500,
html:not(.dark) .bg-rose-500,
html:not(.dark) .bg-indigo-500,
html:not(.dark) .bg-brand-500 *,
html:not(.dark) .bg-brand-600 *,
html:not(.dark) .bg-brand-700 *,
html:not(.dark) .bg-emerald-500 *,
html:not(.dark) .bg-rose-500 *,
html:not(.dark) .bg-indigo-500 * {
  color: #ffffff !important;
}

/* Active tab selection in Light Mode (replaces solid purple with soft brand tint) */
html:not(.dark) .nav-btn.bg-brand-500 {
  background-color: rgba(16, 185, 129, 0.12) !important;
  color: #059669 !important;
  box-shadow: none !important;
}

html:not(.dark) .nav-btn.bg-brand-500 * {
  color: #059669 !important;
}

/* Inputs, Selects, and Textareas */
html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
  color: #94a3b8 !important;
}

html:not(.dark) input:focus,
html:not(.dark) select:focus,
html:not(.dark) textarea:focus {
  border-color: #3b82f6 !important;
  outline: none;
}

/* Sidebar active hover states in light mode */
html:not(.dark) .hover\:bg-slate-900\/60:hover {
  background-color: rgba(15, 23, 42, 0.05) !important;
  color: #0f172a !important;
}

/* Progress bar container and details */
html:not(.dark) .bg-slate-800 {
  background-color: #e2e8f0 !important;
}

html:not(.dark) .bg-slate-900 {
  background-color: #f1f5f9 !important;
}

html:not(.dark) .bg-slate-950 {
  background-color: #f8fafc !important;
}

html:not(.dark) .bg-slate-950\/40 {
  background-color: rgba(15, 23, 42, 0.15) !important;
}

/* Chart center total color */
html:not(.dark) canvas + div span {
  color: #0f172a !important;
}

/* Scrollbars for light theme */
html:not(.dark) ::-webkit-scrollbar-thumb {
  background: #cbd5e1;
}

html:not(.dark) ::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Expandable sidebar on mobile/narrow screens */
@media (max-width: 767px) {
  aside.expanded {
    width: 16rem !important; /* 256px, same as md:w-64 */
    z-index: 40;
    position: absolute;
    left: 0;
    top: 0;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.25);
  }
  aside.expanded .hidden.md\:inline {
    display: inline !important;
  }
  aside.expanded .hidden.md\:block {
    display: block !important;
  }
  aside.expanded .nav-btn {
    justify-content: flex-start !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    gap: 0.75rem !important;
  }
}

/* Flatpickr Calendar Styling Overrides */
.flatpickr-calendar {
  background: #0f172a !important;
  border: 1px solid #1e293b !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3) !important;
  font-family: inherit !important;
  border-radius: 12px !important;
}

.flatpickr-calendar.arrowTop:after, .flatpickr-calendar.arrowTop:before {
  border-bottom-color: #0f172a !important;
}

.flatpickr-calendar.arrowBottom:after, .flatpickr-calendar.arrowBottom:before {
  border-top-color: #0f172a !important;
}

.flatpickr-day {
  color: #94a3b8 !important;
  border-radius: 8px !important;
}

.flatpickr-day.today {
  border-color: #10b981 !important;
  color: #10b981 !important;
}

.flatpickr-day.selected, .flatpickr-day.selected:hover {
  background: #10b981 !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
}

.flatpickr-day:hover {
  background: rgba(16, 185, 129, 0.1) !important;
  color: #ffffff !important;
}

.flatpickr-months .flatpickr-month,
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: #f1f5f9 !important;
  fill: #f1f5f9 !important;
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: #f1f5f9 !important;
}

.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: #f1f5f9 !important;
}

span.flatpickr-weekday {
  color: #64748b !important;
}

/* Light Theme overrides for Flatpickr */
html:not(.dark) .flatpickr-calendar {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05) !important;
}

html:not(.dark) .flatpickr-calendar.arrowTop:after, html:not(.dark) .flatpickr-calendar.arrowTop:before {
  border-bottom-color: #ffffff !important;
}

html:not(.dark) .flatpickr-calendar.arrowBottom:after, html:not(.dark) .flatpickr-calendar.arrowBottom:before {
  border-top-color: #ffffff !important;
}

html:not(.dark) .flatpickr-day {
  color: #334155 !important;
}

html:not(.dark) .flatpickr-day:hover {
  background: rgba(16, 185, 129, 0.08) !important;
  color: #047857 !important;
}

html:not(.dark) .flatpickr-months .flatpickr-month,
html:not(.dark) .flatpickr-months .flatpickr-prev-month,
html:not(.dark) .flatpickr-months .flatpickr-next-month {
  color: #0f172a !important;
  fill: #0f172a !important;
}

html:not(.dark) .flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: #0f172a !important;
}

html:not(.dark) .flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: #0f172a !important;
}

html:not(.dark) span.flatpickr-weekday {
  color: #64748b !important;
}

/* Desktop Sidebar Collapse Styling Overrides */
@media (min-width: 768px) {
  aside {
    width: 16rem !important; /* Default expanded state */
    transition: width 0.2s ease-in-out !important;
  }
  aside.collapsed {
    width: 4rem !important; /* Collapsed state: 64px */
  }
  
  /* When collapsed, hide text labels, email, and details */
  aside.collapsed .nav-btn span,
  aside.collapsed .logo-text,
  aside.collapsed .profile-details {
    display: none !important;
  }
  
  aside.collapsed .nav-btn,
  aside.collapsed .logo-container,
  aside.collapsed .profile-container {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 0 !important;
  }
}

/* ================= LOGIN LOADING SCREEN ANIMATIONS ================= */

@keyframes loginOrbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
  25% { transform: translate(60px, -80px) scale(1.2); opacity: 0.6; }
  50% { transform: translate(-40px, -120px) scale(0.9); opacity: 0.3; }
  75% { transform: translate(80px, -40px) scale(1.1); opacity: 0.55; }
}

@keyframes loginOrbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
  25% { transform: translate(-70px, -60px) scale(1.15); opacity: 0.5; }
  50% { transform: translate(50px, -100px) scale(0.85); opacity: 0.25; }
  75% { transform: translate(-30px, -30px) scale(1.05); opacity: 0.45; }
}

@keyframes loginOrbFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.35; }
  33% { transform: translate(40px, -70px) scale(1.3); opacity: 0.55; }
  66% { transform: translate(-60px, -50px) scale(0.8); opacity: 0.2; }
}

@keyframes loginPulseRing {
  0% { transform: scale(0.8); opacity: 0.6; }
  50% { transform: scale(1.3); opacity: 0; }
  100% { transform: scale(0.8); opacity: 0.6; }
}

@keyframes loginPulseRing2 {
  0% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1); opacity: 0.4; }
}

@keyframes loginShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes loginFadeIn {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes loginSpinSlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes loginTimerPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.login-loading-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}

.login-loading-orb-1 {
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.5), transparent 70%);
  top: 20%; left: 15%;
  animation: loginOrbFloat 8s ease-in-out infinite;
}

.login-loading-orb-2 {
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.45), transparent 70%);
  top: 50%; right: 15%;
  animation: loginOrbFloat2 10s ease-in-out infinite;
}

.login-loading-orb-3 {
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.4), transparent 70%);
  bottom: 15%; left: 40%;
  animation: loginOrbFloat3 12s ease-in-out infinite;
}

.login-loading-orb-4 {
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(244, 63, 94, 0.3), transparent 70%);
  top: 10%; right: 25%;
  animation: loginOrbFloat 14s ease-in-out infinite reverse;
}

.login-loading-orb-5 {
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.35), transparent 70%);
  bottom: 25%; left: 10%;
  animation: loginOrbFloat2 9s ease-in-out infinite reverse;
}

.login-shimmer-text {
  background: linear-gradient(90deg, #94a3b8 0%, #e2e8f0 40%, #94a3b8 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: loginShimmer 3s linear infinite;
}

.login-loading-fadein {
  animation: loginFadeIn 0.5s ease-out forwards;
}