/* ==========================================================================
   RemoteROS Master Stylesheet
   Theme Management:
   - Default Light Theme: body (without .dark and without .light class)
   - Dark Theme: body.dark (platform default status)
   - Auth Pages: body.auth-page (permanently dark cybersecurity aesthetic)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base & Animations
   -------------------------------------------------------------------------- */
@keyframes pulse-slow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.animate-pulse-slow {
  animation: pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Custom Adaptive Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

body.dark ::-webkit-scrollbar-track,
html.dark ::-webkit-scrollbar-track,
body.auth-page ::-webkit-scrollbar-track {
  background: #090d16;
}
body.dark ::-webkit-scrollbar-thumb,
html.dark ::-webkit-scrollbar-thumb,
body.auth-page ::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 4px;
}
body.dark ::-webkit-scrollbar-thumb:hover,
html.dark ::-webkit-scrollbar-thumb:hover,
body.auth-page ::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

body:not(.dark):not(.auth-page) ::-webkit-scrollbar-track {
  background: #f1f5f9;
}
body:not(.dark):not(.auth-page) ::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
body:not(.dark):not(.auth-page) ::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Smooth color transitions for theme switches */
body, aside, header, nav, div, main, table, tr, td, th {
  transition-property: background-color, border-color, color;
  transition-duration: 120ms;
  transition-timing-function: ease-in-out;
}

/* Zero-flicker theme icon display based on body/html class */
body.dark .theme-icon-sun,
html.dark .theme-icon-sun {
  display: inline-block !important;
}
body.dark .theme-icon-moon,
html.dark .theme-icon-moon {
  display: none !important;
}

body:not(.dark) .theme-icon-sun,
html:not(.dark) .theme-icon-sun {
  display: none !important;
}
body:not(.dark) .theme-icon-moon,
html:not(.dark) .theme-icon-moon {
  display: inline-block !important;
}

/* ==========================================================================
   2. LIGHT THEME STYLES (body without .dark and without .light class)
   ========================================================================== */
body:not(.dark):not(.auth-page) {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

/* Top Navigation Bar */
body:not(.dark):not(.auth-page) header {
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
}

/* Sidebar Navigation */
body:not(.dark):not(.auth-page) aside {
  background-color: #ffffff !important;
  border-right: 1px solid #e2e8f0 !important;
  box-shadow: 1px 0 3px 0 rgba(0, 0, 0, 0.02) !important;
}

body:not(.dark):not(.auth-page) aside .border-b {
  border-bottom-color: #e2e8f0 !important;
}

body:not(.dark):not(.auth-page) aside .border-t {
  border-top-color: #e2e8f0 !important;
}

body:not(.dark):not(.auth-page) aside nav a {
  color: #475569 !important;
}

body:not(.dark):not(.auth-page) aside nav a:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

body:not(.dark):not(.auth-page) aside nav a[class*="bg-blue"],
body:not(.dark):not(.auth-page) aside nav a[class*="text-blue"] {
  background-color: #eff6ff !important;
  color: #2563eb !important;
  font-weight: 600 !important;
}

/* Headings & Text in Light Mode */
body:not(.dark):not(.auth-page) h1,
body:not(.dark):not(.auth-page) h2,
body:not(.dark):not(.auth-page) h3,
body:not(.dark):not(.auth-page) h4,
body:not(.dark):not(.auth-page) h5,
body:not(.dark):not(.auth-page) h6 {
  color: #0f172a !important;
}

body:not(.dark):not(.auth-page) p {
  color: #334155;
}

/* Hard-coded white text (admin pages) -> dark, BUT keep white text on
   solid coloured buttons / avatars / badges (and anything inside them). */
body:not(.dark):not(.auth-page) .text-white:not([class*="bg-"]):not([class*="from-"]):not(:is(
  [class~="bg-blue-500"], [class~="bg-blue-600"], [class~="bg-blue-700"],
  [class~="bg-emerald-500"], [class~="bg-emerald-600"], [class~="bg-emerald-700"],
  [class~="bg-rose-500"], [class~="bg-rose-600"], [class~="bg-rose-700"],
  [class~="bg-amber-500"], [class~="bg-amber-600"], [class~="bg-amber-700"],
  [class~="bg-purple-600"], [class~="bg-indigo-600"], [class~="bg-teal-600"],
  [class*="from-blue-6"], [class*="from-purple-6"], [class*="from-emerald-6"]
) *) {
  color: #0f172a !important;
}

/* Solid coloured buttons always keep white text in light theme */
body:not(.dark):not(.auth-page) :is(
  [class~="bg-blue-500"], [class~="bg-blue-600"], [class~="bg-blue-700"],
  [class~="bg-emerald-500"], [class~="bg-emerald-600"], [class~="bg-emerald-700"],
  [class~="bg-rose-500"], [class~="bg-rose-600"], [class~="bg-rose-700"],
  [class~="bg-amber-500"], [class~="bg-amber-600"], [class~="bg-amber-700"],
  [class~="bg-purple-600"], [class~="bg-indigo-600"], [class~="bg-teal-600"]
).text-white {
  color: #ffffff !important;
}

body:not(.dark):not(.auth-page) .text-slate-900,
body:not(.dark):not(.auth-page) .text-slate-800 {
  color: #0f172a !important;
}

/* slate-100/200 only appear un-prefixed on hard-coded dark pages */
body:not(.dark):not(.auth-page) .text-slate-700,
body:not(.dark):not(.auth-page) .text-slate-200,
body:not(.dark):not(.auth-page) .text-slate-100 {
  color: #1e293b !important;
}

body:not(.dark):not(.auth-page) .text-slate-600,
body:not(.dark):not(.auth-page) .text-slate-300 {
  color: #334155 !important;
}

body:not(.dark):not(.auth-page) .text-slate-500,
body:not(.dark):not(.auth-page) .text-slate-400 {
  color: #64748b !important;
}

/* Cards, Panels, Stats & Containers
   Only neutral surfaces are repainted; coloured banners (amber/rose/emerald/blue)
   keep their own tinted backgrounds. */
body:not(.dark):not(.auth-page) .bg-white\/80,
body:not(.dark):not(.auth-page) [class~="bg-slate-900"],
body:not(.dark):not(.auth-page) [class*=" bg-slate-900/"],
body:not(.dark):not(.auth-page) [class^="bg-slate-900"] {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

body:not(.dark):not(.auth-page) [class~="bg-slate-950"]:not([role="dialog"]),
body:not(.dark):not(.auth-page) [class*=" bg-slate-950/"]:not([role="dialog"]),
body:not(.dark):not(.auth-page) [class^="bg-slate-950"]:not([role="dialog"]) {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

body:not(.dark):not(.auth-page) [class~="bg-slate-800"],
body:not(.dark):not(.auth-page) [class*=" bg-slate-800/"],
body:not(.dark):not(.auth-page) [class~="bg-slate-700"] {
  background-color: #f1f5f9 !important;
}

/* Neutral borders (hard-coded dark borders only; dark: variants are ignored by Tailwind in light) */
body:not(.dark):not(.auth-page) [class~="border-slate-800"],
body:not(.dark):not(.auth-page) [class*=" border-slate-800/"],
body:not(.dark):not(.auth-page) [class~="border-slate-700"],
body:not(.dark):not(.auth-page) [class*=" border-slate-700/"] {
  border-color: #e2e8f0 !important;
}

/* Hard-coded dark hover backgrounds (NOT dark:hover:) -> light hover */
body:not(.dark):not(.auth-page) [class*=" hover:bg-slate-800"]:hover,
body:not(.dark):not(.auth-page) [class^="hover:bg-slate-800"]:hover,
body:not(.dark):not(.auth-page) [class*=" hover:bg-slate-700"]:hover {
  background-color: #f1f5f9 !important;
}

/* Welcome / Operational Pulse Banner */
body:not(.dark):not(.auth-page) .bg-gradient-to-r {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
}

/* Tables in Light Mode */
body:not(.dark):not(.auth-page) table {
  background-color: #ffffff !important;
}

body:not(.dark):not(.auth-page) thead {
  background-color: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

body:not(.dark):not(.auth-page) thead th {
  color: #475569 !important;
}

body:not(.dark):not(.auth-page) tbody tr {
  border-bottom: 1px solid #f1f5f9 !important;
}

body:not(.dark):not(.auth-page) tbody tr:hover {
  background-color: #f8fafc !important;
}

body:not(.dark):not(.auth-page) tbody td {
  color: #1e293b !important;
}

body:not(.dark):not(.auth-page) .divide-slate-800,
body:not(.dark):not(.auth-page) [class*="divide-slate-800"] {
  border-color: #f1f5f9 !important;
}

/* Form Inputs, Selects & Textareas */
body:not(.dark):not(.auth-page) input:not([type="submit"]):not([type="button"]),
body:not(.dark):not(.auth-page) select,
body:not(.dark):not(.auth-page) textarea {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
}

body:not(.dark):not(.auth-page) input::placeholder,
body:not(.dark):not(.auth-page) textarea::placeholder {
  color: #94a3b8 !important;
}

body:not(.dark):not(.auth-page) input:focus,
body:not(.dark):not(.auth-page) select:focus,
body:not(.dark):not(.auth-page) textarea:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
  outline: none !important;
}

body:not(.dark):not(.auth-page) label {
  color: #334155 !important;
}

/* Modals in Light Mode */
body:not(.dark):not(.auth-page) [role="dialog"] {
  background-color: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(4px) !important;
}

body:not(.dark):not(.auth-page) [role="dialog"] > div {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.18) !important;
  color: #0f172a !important;
}

body:not(.dark):not(.auth-page) [role="dialog"] .border-b,
body:not(.dark):not(.auth-page) [role="dialog"] .border-t {
  border-color: #f1f5f9 !important;
}

body:not(.dark):not(.auth-page) [role="dialog"] .preset-btn {
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
}

body:not(.dark):not(.auth-page) [role="dialog"] .preset-btn:hover {
  border-color: #10b981 !important;
  color: #047857 !important;
  background-color: #ecfdf5 !important;
}

/* Secondary & Cancel Buttons */
body:not(.dark):not(.auth-page) button[class*="border-slate"],
body:not(.dark):not(.auth-page) a[class*="border-slate"] {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

body:not(.dark):not(.auth-page) button[class*="border-slate"]:hover,
body:not(.dark):not(.auth-page) a[class*="border-slate"]:hover {
  background-color: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* Dropdown Menus & Popups */
body:not(.dark):not(.auth-page) #notificationsDropdownWrapper [class*="bg-white"],
body:not(.dark):not(.auth-page) #notificationsDropdownWrapper [class*="bg-slate-900"] {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
}

body:not(.dark):not(.auth-page) #notificationsDropdownWrapper .border-b {
  border-bottom-color: #e2e8f0 !important;
}

body:not(.dark):not(.auth-page) #notificationsDropdownWrapper a:hover,
body:not(.dark):not(.auth-page) #notificationsDropdownWrapper div[class*="hover:bg-slate"] {
  background-color: #f8fafc !important;
}

/* Badges, Pills & Tinted Banners in Light Mode
   Matches tinted (50/100 or 500/xx) backgrounds that are NOT dark: prefixed.
   Solid buttons (bg-x-600) are untouched. */
body:not(.dark):not(.auth-page) :is([class~="bg-emerald-50"], [class~="bg-emerald-100"], [class*=" bg-emerald-50/"], [class*=" bg-emerald-500/"], [class^="bg-emerald-500/"], [class*=" bg-emerald-100/"]) {
  background-color: #d1fae5 !important;
  border-color: #6ee7b7 !important;
  color: #065f46 !important;
}
body:not(.dark):not(.auth-page) :is([class~="bg-blue-50"], [class~="bg-blue-100"], [class*=" bg-blue-50/"], [class*=" bg-blue-500/"], [class^="bg-blue-500/"]) {
  background-color: #dbeafe !important;
  border-color: #93c5fd !important;
  color: #1e40af !important;
}
body:not(.dark):not(.auth-page) :is([class~="bg-rose-50"], [class~="bg-rose-100"], [class*=" bg-rose-50/"], [class*=" bg-rose-500/"], [class^="bg-rose-500/"]) {
  background-color: #ffe4e6 !important;
  border-color: #fda4af !important;
  color: #9f1239 !important;
}
body:not(.dark):not(.auth-page) :is([class~="bg-amber-50"], [class~="bg-amber-100"], [class*=" bg-amber-50/"], [class*=" bg-amber-500/"], [class^="bg-amber-500/"]) {
  background-color: #fef3c7 !important;
  border-color: #fcd34d !important;
  color: #92400e !important;
}
body:not(.dark):not(.auth-page) :is([class~="bg-purple-50"], [class~="bg-purple-100"], [class*=" bg-purple-500/"], [class^="bg-purple-500/"]) {
  background-color: #f3e8ff !important;
  border-color: #d8b4fe !important;
  color: #6b21a8 !important;
}
body:not(.dark):not(.auth-page) :is([class~="bg-teal-50"], [class*=" bg-teal-500/"], [class^="bg-teal-500/"]) {
  background-color: #ccfbf1 !important;
  border-color: #5eead4 !important;
  color: #115e59 !important;
}

/* Deep text tones inside tinted badges / banners */
body:not(.dark):not(.auth-page) :is(.text-emerald-400, .text-emerald-500, .text-emerald-600, .text-emerald-700, .text-emerald-800) { color: #047857 !important; }
body:not(.dark):not(.auth-page) :is(.text-blue-300, .text-blue-400, .text-blue-500, .text-blue-600, .text-blue-700) { color: #1d4ed8 !important; }
body:not(.dark):not(.auth-page) :is(.text-rose-400, .text-rose-500, .text-rose-600, .text-rose-700, .text-rose-800) { color: #be123c !important; }
body:not(.dark):not(.auth-page) :is(.text-amber-400, .text-amber-500, .text-amber-600, .text-amber-700, .text-amber-800) { color: #b45309 !important; }
body:not(.dark):not(.auth-page) :is(.text-purple-400, .text-purple-500, .text-purple-600, .text-purple-700) { color: #7e22ce !important; }
body:not(.dark):not(.auth-page) :is(.text-teal-400, .text-teal-600) { color: #0f766e !important; }

/* ...but text on solid coloured buttons stays white */
body:not(.dark):not(.auth-page) :is([class~="bg-blue-600"], [class~="bg-emerald-600"], [class~="bg-emerald-500"], [class~="bg-rose-600"], [class~="bg-amber-600"], [class~="bg-amber-500"], [class~="bg-purple-600"]) :is(svg, span) {
  color: #ffffff !important;
}

/* Email verification banner & modal (unverified accounts) */
body:not(.dark):not(.auth-page) .verify-banner {
  background-color: #fffbeb !important;
  border: 1px solid #f59e0b !important;
  color: #78350f !important;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.15) !important;
}
body:not(.dark):not(.auth-page) .verify-banner strong { color: #78350f !important; }
body:not(.dark):not(.auth-page) .verify-banner svg { color: #d97706 !important; }
body:not(.dark):not(.auth-page) #emailVerificationModal > div {
  border-color: #fcd34d !important;
}

/* Solid action buttons: consistent, clear hover */
body:not(.dark):not(.auth-page) button[class~="bg-amber-600"],
body:not(.dark):not(.auth-page) a[class~="bg-amber-600"] {
  background-color: #d97706 !important;
  color: #ffffff !important;
}
body:not(.dark):not(.auth-page) button[class~="bg-amber-600"]:hover,
body:not(.dark):not(.auth-page) a[class~="bg-amber-600"]:hover {
  background-color: #b45309 !important;
}
body:not(.dark):not(.auth-page) button[class~="bg-blue-600"]:hover,
body:not(.dark):not(.auth-page) a[class~="bg-blue-600"]:hover {
  background-color: #1d4ed8 !important;
}
body:not(.dark):not(.auth-page) button[class~="bg-emerald-600"]:hover,
body:not(.dark):not(.auth-page) a[class~="bg-emerald-600"]:hover {
  background-color: #047857 !important;
}

/* Neutral surfaces that also carry text-white must flip to dark text */
body:not(.dark):not(.auth-page) :is([class~="bg-slate-900"], [class~="bg-slate-800"], [class*=" bg-slate-900/"], [class*=" bg-slate-800/"]).text-white {
  color: #0f172a !important;
}

/* Code & Pre */
body:not(.dark):not(.auth-page) code,
body:not(.dark):not(.auth-page) pre {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Global Footer in Light Mode */
body:not(.dark):not(.auth-page) footer {
  border-top-color: #e2e8f0 !important;
  color: #64748b !important;
}


/* ==========================================================================
   3. DARK THEME STYLES (body.dark element - Platform Default Status)
   ========================================================================== */
body.dark:not(.auth-page) {
  background-color: #020617 !important;
  color: #f8fafc !important;
}

/* Top Navigation Bar */
body.dark:not(.auth-page) header {
  background-color: rgba(15, 23, 42, 0.88) !important;
  border-bottom: 1px solid rgba(51, 65, 85, 0.6) !important;
}

/* Sidebar Navigation */
body.dark:not(.auth-page) aside {
  background-color: #0b1120 !important;
  border-right: 1px solid rgba(51, 65, 85, 0.6) !important;
}

body.dark:not(.auth-page) aside .border-b {
  border-bottom-color: rgba(51, 65, 85, 0.6) !important;
}

body.dark:not(.auth-page) aside .border-t {
  border-top-color: rgba(51, 65, 85, 0.6) !important;
}

body.dark:not(.auth-page) aside nav a {
  color: #94a3b8 !important;
}

body.dark:not(.auth-page) aside nav a:hover {
  background-color: rgba(30, 41, 59, 0.6) !important;
  color: #f8fafc !important;
}

body.dark:not(.auth-page) aside nav a[class*="bg-blue"],
body.dark:not(.auth-page) aside nav a[class*="text-blue"] {
  background-color: rgba(37, 99, 235, 0.15) !important;
  color: #60a5fa !important;
  font-weight: 600 !important;
}

/* Headings & Text in Dark Mode */
body.dark:not(.auth-page) h1,
body.dark:not(.auth-page) h2,
body.dark:not(.auth-page) h3,
body.dark:not(.auth-page) h4,
body.dark:not(.auth-page) h5,
body.dark:not(.auth-page) h6 {
  color: #f8fafc !important;
}

body.dark:not(.auth-page) p {
  color: #cbd5e1;
}

body.dark:not(.auth-page) .text-white {
  color: #ffffff !important;
}

body.dark:not(.auth-page) .text-slate-100,
body.dark:not(.auth-page) .text-slate-200 {
  color: #f1f5f9 !important;
}

body.dark:not(.auth-page) .text-slate-300 {
  color: #cbd5e1 !important;
}

body.dark:not(.auth-page) .text-slate-400,
body.dark:not(.auth-page) .text-slate-500 {
  color: #94a3b8 !important;
}

/* Cards & Surface Containers */
body.dark:not(.auth-page) .rounded-xl,
body.dark:not(.auth-page) .rounded-2xl {
  background-color: rgba(15, 23, 42, 0.7);
  border-color: #1e293b !important;
}

body.dark:not(.auth-page) [class*="bg-slate-50"],
body.dark:not(.auth-page) [class*="bg-slate-950"] {
  background-color: #090d16 !important;
  border-color: #1e293b !important;
}

body.dark:not(.auth-page) [class*="bg-slate-900"] {
  background-color: rgba(15, 23, 42, 0.7) !important;
  border-color: #1e293b !important;
}

/* Tables in Dark Mode */
body.dark:not(.auth-page) table {
  background-color: transparent !important;
}

body.dark:not(.auth-page) thead {
  background-color: #090d16 !important;
  border-bottom: 1px solid #1e293b !important;
}

body.dark:not(.auth-page) thead th {
  color: #94a3b8 !important;
}

body.dark:not(.auth-page) tbody tr {
  border-bottom: 1px solid rgba(30, 41, 59, 0.6) !important;
}

body.dark:not(.auth-page) tbody tr:hover {
  background-color: rgba(30, 41, 59, 0.35) !important;
}

body.dark:not(.auth-page) tbody td {
  color: #e2e8f0 !important;
}

/* Form Controls in Dark Mode */
body.dark:not(.auth-page) input:not([type="submit"]):not([type="button"]),
body.dark:not(.auth-page) select,
body.dark:not(.auth-page) textarea {
  background-color: #090d16 !important;
  border: 1px solid #334155 !important;
  color: #ffffff !important;
}

body.dark:not(.auth-page) input::placeholder,
body.dark:not(.auth-page) textarea::placeholder {
  color: #64748b !important;
}

body.dark:not(.auth-page) input:focus,
body.dark:not(.auth-page) select:focus,
body.dark:not(.auth-page) textarea:focus {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
  outline: none !important;
}

body.dark:not(.auth-page) label {
  color: #cbd5e1 !important;
}

/* Modals in Dark Mode */
body.dark:not(.auth-page) [role="dialog"] {
  background-color: rgba(2, 6, 23, 0.8) !important;
  backdrop-filter: blur(4px) !important;
}

body.dark:not(.auth-page) [role="dialog"] > div {
  background-color: #0f172a !important;
  border: 1px solid #1e293b !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6) !important;
  color: #f8fafc !important;
}

body.dark:not(.auth-page) [role="dialog"] .border-b,
body.dark:not(.auth-page) [role="dialog"] .border-t {
  border-color: #1e293b !important;
}

body.dark:not(.auth-page) [role="dialog"] .preset-btn {
  background-color: #090d16 !important;
  border: 1px solid #334155 !important;
  color: #cbd5e1 !important;
}

body.dark:not(.auth-page) [role="dialog"] .preset-btn:hover {
  border-color: #10b981 !important;
  color: #34d399 !important;
  background-color: rgba(16, 185, 129, 0.15) !important;
}

/* Code & Pre in Dark Mode */
body.dark:not(.auth-page) code,
body.dark:not(.auth-page) pre {
  background-color: #090d16 !important;
  border-color: #1e293b !important;
  color: #e2e8f0 !important;
}

/* Footer in Dark Mode */
body.dark:not(.auth-page) footer {
  border-top-color: rgba(51, 65, 85, 0.5) !important;
  color: #64748b !important;
}


/* ==========================================================================
   4. AUTHENTICATION PAGES ISOLATION (Login, Register, Forgot & Reset Password)
   Except for login, create account and forgot password pages (Always Dark!)
   ========================================================================== */
body.auth-page {
  background-color: #020617 !important;
  color: #f8fafc !important;
}

body.auth-page .bg-slate-900\/60,
body.auth-page .rounded-2xl {
  background-color: rgba(15, 23, 42, 0.7) !important;
  border: 1px solid #1e293b !important;
  backdrop-filter: blur(12px) !important;
}

body.auth-page input {
  background-color: rgba(2, 6, 23, 0.75) !important;
  border: 1px solid #334155 !important;
  color: #ffffff !important;
}

body.auth-page input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

body.auth-page label {
  color: #cbd5e1 !important;
}

body.auth-page h1,
body.auth-page h2,
body.auth-page h3 {
  color: #ffffff !important;
}

body.auth-page p {
  color: #94a3b8 !important;
}

body.auth-page a {
  color: #60a5fa !important;
}

body.auth-page a:hover {
  color: #93c5fd !important;
}