/* ============================================ */
/* Login Page Styles - CSPT                    */
/* ============================================ */

/* Main layout */
.login-layout {
    background: url('../images/login.jpg');
    background-size: cover;
    background-attachment: fixed;
    min-height: 100vh;
}

/* Body container - center on desktop */
.login-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* Card container - flex column to stack card and footer */
.login-card-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 900px;
}

/* Card styling */
.login-card {
    overflow: visible !important;
    width: 100%;
}

/* Form column */
.login-form-section {
    padding: 2rem;
    overflow: visible !important;
}

/* Brand column */
.login-brand-section {
    background-image: radial-gradient(circle at 4rem 4rem, var(--rz-primary) 0%, var(--rz-primary-darker) 80%);
    padding: 2rem;
}

/* Footer text - always below card and centered */
.login-footer {
    width: 100%;
    text-align: center;
    padding: 1rem 0;
    margin-top: 1rem;
}

/* ============================================ */
/* MOBILE: Full width card                     */
/* ============================================ */
@media (max-width: 576px) {
    .login-body {
        padding: 0;
        align-items: stretch;
        min-height: 100vh;
    }

    .login-card-wrapper {
        width: 100%;
        max-width: 100%;
        min-height: 100vh;
    }

    .login-card {
        flex: 1;
        border-radius: 0 !important;
        box-shadow: none !important;
        display: flex;
        flex-direction: column;
    }

    /* Make the row a flex column on mobile */
    .login-card .rz-row {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .login-card .rz-col,
    .login-card [class*="rz-col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }

    .login-brand-section {
        padding: 1.5rem;
        flex: none;
    }

    .login-form-section {
        padding: 1.5rem;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    /* Smaller logo on mobile */
    .login-brand-section img {
        width: 80px !important;
    }

    /* Footer at bottom */
    .login-footer {
        padding: 1rem;
        margin-top: 0;
    }
}

/* ============================================ */
/* Tablet adjustments                          */
/* ============================================ */
@media (min-width: 577px) and (max-width: 768px) {
    .login-body {
        padding: 1rem;
    }

    .login-card-wrapper {
        max-width: 95%;
    }
}

/* ============================================ */
/* DARK MODE: Login Page                       */
/* ============================================ */

/* Dark mode: Login form section background */
[data-theme="dark"] .login-form-section,
.rz-dark .login-form-section,
.dark-mode .login-form-section {
    background-color: #1a1a1a !important;
}

/* Dark mode: Login card */
[data-theme="dark"] .login-card,
.rz-dark .login-card,
.dark-mode .login-card {
    background-color: #1a1a1a !important;
}

/* Dark mode: All text in login form */
[data-theme="dark"] .login-form-section,
[data-theme="dark"] .login-form-section *,
[data-theme="dark"] .login-form-section label,
[data-theme="dark"] .login-form-section span,
[data-theme="dark"] .login-form-section p,
[data-theme="dark"] .login-form-section h1,
[data-theme="dark"] .login-form-section h2,
[data-theme="dark"] .login-form-section h3,
[data-theme="dark"] .login-form-section .rz-text,
.rz-dark .login-form-section,
.rz-dark .login-form-section *,
.rz-dark .login-form-section label,
.rz-dark .login-form-section span,
.rz-dark .login-form-section p,
.rz-dark .login-form-section h1,
.rz-dark .login-form-section h2,
.rz-dark .login-form-section h3,
.rz-dark .login-form-section .rz-text,
.dark-mode .login-form-section,
.dark-mode .login-form-section *,
.dark-mode .login-form-section label,
.dark-mode .login-form-section span,
.dark-mode .login-form-section p,
.dark-mode .login-form-section .rz-text {
    color: #e0e0e0 !important;
}

/* Dark mode: Login title */
[data-theme="dark"] .login-form-section h3,
[data-theme="dark"] .login-form-section .rz-text-h3,
.rz-dark .login-form-section h3,
.rz-dark .login-form-section .rz-text-h3,
.dark-mode .login-form-section h3,
.dark-mode .login-form-section .rz-text-h3 {
    color: #CFB53B !important;
}

/* Dark mode: Switch/Toggle text (Keep me logged in) */
[data-theme="dark"] .rz-switch-label,
[data-theme="dark"] .rz-switch + span,
[data-theme="dark"] .rz-switch ~ span,
[data-theme="dark"] .rz-switch-text,
[data-theme="dark"] .rz-chkbox-label,
[data-theme="dark"] .rz-checkbox-label,
.rz-dark .rz-switch-label,
.rz-dark .rz-switch + span,
.rz-dark .rz-switch ~ span,
.rz-dark .rz-switch-text,
.rz-dark .rz-chkbox-label,
.rz-dark .rz-checkbox-label,
.dark-mode .rz-switch-label,
.dark-mode .rz-switch + span,
.dark-mode .rz-switch ~ span,
.dark-mode .rz-switch-text,
.dark-mode .rz-chkbox-label,
.dark-mode .rz-checkbox-label {
    color: #e0e0e0 !important;
}

/* Dark mode: Form field labels */
[data-theme="dark"] .login-form-section .rz-form-field label,
[data-theme="dark"] .login-form-section label,
.rz-dark .login-form-section .rz-form-field label,
.rz-dark .login-form-section label,
.dark-mode .login-form-section .rz-form-field label,
.dark-mode .login-form-section label {
    color: #e0e0e0 !important;
}

/* Dark mode: Input fields */
[data-theme="dark"] .login-form-section .rz-textbox,
[data-theme="dark"] .login-form-section .rz-inputtext,
[data-theme="dark"] .login-form-section input,
.rz-dark .login-form-section .rz-textbox,
.rz-dark .login-form-section .rz-inputtext,
.rz-dark .login-form-section input,
.dark-mode .login-form-section .rz-textbox,
.dark-mode .login-form-section .rz-inputtext,
.dark-mode .login-form-section input {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #555 !important;
}

/* Dark mode: Links */
[data-theme="dark"] .login-form-section a,
[data-theme="dark"] .login-form-section .rz-link,
.rz-dark .login-form-section a,
.rz-dark .login-form-section .rz-link,
.dark-mode .login-form-section a,
.dark-mode .login-form-section .rz-link {
    color: #CFB53B !important;
}

/* Dark mode: "Don't have an account" section */
[data-theme="dark"] .login-form-section .rz-border-top,
[data-theme="dark"] .login-form-section [class*="border"],
.rz-dark .login-form-section .rz-border-top,
.rz-dark .login-form-section [class*="border"],
.dark-mode .login-form-section .rz-border-top,
.dark-mode .login-form-section [class*="border"] {
    border-color: #444 !important;
}

/* Dark mode: Footer text */
[data-theme="dark"] .login-footer,
[data-theme="dark"] .login-footer *,
.rz-dark .login-footer,
.rz-dark .login-footer *,
.dark-mode .login-footer,
.dark-mode .login-footer * {
    color: #999 !important;
}