/* Light theme for the auth portal (login, password change, AuthCenter).
   The portal is written with Tailwind's dark slate classes; under <html data-theme="light">
   this maps them onto the panel's light tokens (panel/src/app.css) instead of rewriting the
   markup. The choice is the panel's: localStorage pnl_theme = system | light | dark. */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="light"] body.bg-slate-900 { background-color: #EEF2F6; }

/* surfaces */
html[data-theme="light"] .bg-slate-900 { background-color: #F5F8FB; }
html[data-theme="light"] .bg-slate-900\/50 { background-color: rgba(245, 248, 251, .7); }
html[data-theme="light"] .bg-slate-800,
html[data-theme="light"] .bg-slate-800\/80 { background-color: #FFFFFF; }
html[data-theme="light"] .bg-slate-800\/70 { background-color: rgba(255, 255, 255, .8); }
html[data-theme="light"] .bg-slate-700 { background-color: #E7EDF3; }
html[data-theme="light"] .bg-slate-600 { background-color: #A9B6C3; }
html[data-theme="light"] .hover\:bg-slate-800:hover { background-color: #F5F8FB; }
html[data-theme="light"] .hover\:bg-slate-700:hover { background-color: #E7EDF3; }
html[data-theme="light"] .hover\:bg-slate-700\/30:hover,
html[data-theme="light"] .hover\:bg-slate-700\/40:hover { background-color: #F0F4F8; }
html[data-theme="light"] .hover\:bg-slate-600:hover { background-color: #D7E0EA; }
html[data-theme="light"] .hover\:bg-red-900\/30:hover { background-color: rgba(210, 43, 43, .08); }
html[data-theme="light"] .shadow-2xl, html[data-theme="light"] .shadow-xl { box-shadow: 0 14px 34px rgba(16, 32, 48, .14); }

/* lines */
html[data-theme="light"] .border-slate-800,
html[data-theme="light"] .border-slate-700 { border-color: #D7E0EA; }
html[data-theme="light"] .border-slate-600 { border-color: #C5D1DD; }
html[data-theme="light"] .border-slate-500 { border-color: #B4C2CF; }
html[data-theme="light"] .divide-slate-800 > *,
html[data-theme="light"] .divide-slate-700 > *,
html[data-theme="light"] .divide-slate-700\/50 > * { border-color: #E7EDF3; }

/* text (white stays white on coloured buttons and badges) */
html[data-theme="light"] .text-white:not([class*="bg-blue-"]):not([class*="bg-emerald-"]):not([class*="bg-amber-"]):not([class*="bg-red-"]):not([class*="bg-purple-"]),
html[data-theme="light"] .text-slate-200,
html[data-theme="light"] .hover\:text-white:hover { color: #0E1922; }
html[data-theme="light"] .text-slate-300 { color: #24323F; }
html[data-theme="light"] .text-slate-400 { color: #47596B; }
html[data-theme="light"] .text-slate-500 { color: #6E8395; }
html[data-theme="light"] .text-slate-600 { color: #8A9BAA; }
html[data-theme="light"] ::placeholder { color: #8A9BAA; }

/* accents: the light steps of the same hues (readable on white) */
html[data-theme="light"] .text-blue-400, html[data-theme="light"] .text-blue-500,
html[data-theme="light"] .hover\:text-blue-400:hover { color: #1D6FD0; }
html[data-theme="light"] .text-emerald-400, html[data-theme="light"] .text-emerald-500 { color: #0E9E58; }
html[data-theme="light"] .text-amber-400, html[data-theme="light"] .text-amber-500,
html[data-theme="light"] .hover\:text-amber-400:hover { color: #B07000; }
html[data-theme="light"] .text-red-300, html[data-theme="light"] .text-red-400, html[data-theme="light"] .text-red-500,
html[data-theme="light"] .hover\:text-red-400:hover, html[data-theme="light"] .hover\:text-red-500:hover { color: #D22B2B; }
html[data-theme="light"] .text-purple-400 { color: #7C3AED; }

/* scrollbars, dialogs */
html[data-theme="light"] .log-scroll::-webkit-scrollbar-track { background: #E7EDF3; }
html[data-theme="light"] .log-scroll::-webkit-scrollbar-thumb { background: #C5D1DD; }
html[data-theme="light"] dialog::backdrop { background: rgba(14, 25, 34, .35); }