/* ==========================================================================
   Login page light-theme overrides
   Forces the admin login form to render in light mode regardless of
   LeptonX / Bootstrap dark theme settings.
   ========================================================================== */

/* Reset LeptonX + Bootstrap CSS custom properties to light values.
   This is the nuclear option — every LeptonX component inside .lpx-login-area
   that reads these variables will get light-theme values. */
.lpx-login-area {
    --lpx-content-bg: #fff;
    --lpx-card-bg: #fff;
    --lpx-card-border: #dee2e6;
    --lpx-border-color: #dee2e6;
    --lpx-text: #212529;
    --lpx-text-muted: #6c757d;
    --lpx-light-text: #6c757d;
    --lpx-info: #212529;
    --lpx-logo: url('/images/logo/SDdataCollaborative-dark.svg');
    --lpx-logo-icon: url('/images/logo/SDdataCollaborative-dark.svg');
    --lpx-icon-color: #6c757d;
    --lpx-background: #eef2ff;
    --lpx-background-secondary: #f8f9fa;

    --bs-body-color: #212529;
    --bs-body-bg: #fff;
    --bs-emphasis-color: #000;
    --bs-secondary-color: rgba(33, 37, 41, 0.75);
    --bs-tertiary-bg: #f8f9fa;
    --bs-tertiary-color: rgba(33, 37, 41, 0.5);
    --bs-border-color: #dee2e6;
    --bs-heading-color: #212529;
    --bs-link-color: #6366f1;

    color-scheme: light;
    background-color: #eef2ff !important;
    color: #212529 !important;
}

/* Force ALL text and headings inside login area to dark */
.lpx-login-area h1,
.lpx-login-area h2,
.lpx-login-area h3,
.lpx-login-area h4,
.lpx-login-area h5,
.lpx-login-area h6,
.lpx-login-area p,
.lpx-login-area span,
.lpx-login-area label,
.lpx-login-area .lpx-main-title,
.lpx-login-area .lpx-login-title {
    color: #212529 !important;
    -webkit-text-fill-color: #212529 !important;
}

/* The LeptonX card / content wrapper — whatever sits between
   .lpx-login-area and .account-module-form */
.lpx-login-area [class*="lpx-card"],
.lpx-login-area [class*="lpx-content"],
.lpx-login-area [class*="card"] {
    background-color: #fff !important;
    border-color: #dee2e6 !important;
    color: #212529 !important;
}

/* The card container around the form */
.lpx-login-area .account-module-form {
    background-color: #fff !important;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(99, 102, 241, 0.10) !important;
    padding: 2rem;
}

/* Login form */
.lpx-login-area .login-form {
    background-color: transparent !important;
    color: #212529 !important;
}

/* Form inputs */
.lpx-login-area .form-control {
    background-color: #eef2ff !important;
    color: #212529 !important;
    border: 1px solid #c7d2fe !important;
    border-radius: 6px;
    -webkit-text-fill-color: #212529 !important;
    box-shadow: none !important;
    transition: background-color 0.2s, border-color 0.2s !important;
}

.lpx-login-area .form-control:focus {
    background-color: #fff !important;
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.20) !important;
}

/* Kill browser autofill dark styling */
.lpx-login-area .form-control:-webkit-autofill,
.lpx-login-area .form-control:-webkit-autofill:hover,
.lpx-login-area .form-control:-webkit-autofill:focus,
.lpx-login-area .form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #eef2ff inset !important;
    -webkit-text-fill-color: #212529 !important;
    border: 1px solid #c7d2fe !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

.lpx-login-area .form-control::placeholder {
    color: #6c757d !important;
    -webkit-text-fill-color: #6c757d !important;
}

/* Floating labels */
.lpx-login-area .form-floating > label {
    color: #6c757d !important;
}

/* Language dropdown (LeptonX renders this outside .login-form) */
.lpx-login-area select,
.lpx-login-area .dropdown-toggle,
.lpx-login-area [class*="language"],
.lpx-login-area [class*="locale"] {
    background-color: #fff !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
    -webkit-text-fill-color: #212529 !important;
}

.lpx-login-area .dropdown-menu {
    background-color: #fff !important;
    border-color: #dee2e6 !important;
    color: #212529 !important;
}

.lpx-login-area .dropdown-item {
    color: #212529 !important;
}

.lpx-login-area .dropdown-item:hover,
.lpx-login-area .dropdown-item:focus {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

/* Links */
.lpx-login-area a {
    color: #6366f1 !important;
}

/* Remember me / labels */
.lpx-login-area .form-check-label {
    color: #212529 !important;
}

/* Form switch */
.lpx-login-area .form-switch .form-check-input {
    background-color: #dee2e6 !important;
    border-color: #dee2e6 !important;
}

.lpx-login-area .form-switch .form-check-input:checked {
    background-color: #6366f1 !important;
    border-color: #6366f1 !important;
}

/* Buttons */
.lpx-login-area .btn-primary {
    color: #fff !important;
}

/* Layout styles for external login page */
.loginPage {
    overflow-y: auto;
    max-width: 50em;
    border-radius: 4px;
    padding: 20px;
    margin: auto;
}

.loginPage-container {
    background-color: #fff;
    padding: 20px;
    overflow: hidden;
}

.login-img {
    height: 5em;
}

.loginPage-footer {
    text-align: center;
    width: 100%;
    padding: 10px;
}

.loginPage-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}