/**
 * Login Page Styles
 *
 * Styles specific to the authentication login form.
 *
 * Design constraints (intentional — do not add dependencies):
 *  - Zero Font Awesome dependency: all icons are inline SVG via .login-icon classes.
 *  - Zero Bootstrap JS dependency: alert dismiss uses vanilla JS (login.js) with
 *    .login-alert--dismissing CSS transition, not Bootstrap's data-bs-dismiss.
 *  - Bootstrap 5 CSS is loaded globally for grid, form-control, btn, alert, card, etc.
 *    Bootstrap 4 classes (form-group, btn-block) must not be used — see login.php.
 *  - Fallback-safe: styles apply gracefully to both full template markup AND the
 *    minimal fallback HTML emitted by LoginController's catch block (plain form,
 *    label, input[type="email"], input[type="password"], button[type="submit"]).
 */

/* ==========================================================================
   Auth card layout — scoped to login context
   ========================================================================== */

/* Centering wrapper — works with Bootstrap .row but also standalone */
.login-page-wrapper,
.row.justify-content-center {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
}

/* Login card styling */
.card {
    border: none;
    border-radius: 10px;
    max-width: 460px;
    width: 100%;
}

.card-body {
    padding: 2rem;
}

/* Card shadow depth — subtle elevation for the auth card */
.card.shadow {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
}

/* Login heading */
#loginForm ~ h2,
.card-body > h2,
form[action="/login"] ~ h2,
h2 {
    font-weight: 700;
    color: #1a1a2e;
    letter-spacing: -0.02em;
}

/* ==========================================================================
   Form controls — scoped to #loginForm or fallback form[action="/login"]
   ========================================================================== */

#loginForm .form-control,
form[action="/login"] input[type="email"],
form[action="/login"] input[type="password"] {
    height: 45px;
    font-size: 16px;
    border-radius: 6px;
    border: 1px solid #ced4da;
    padding: 0.5rem 0.75rem;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Focus state — keyboard-accessible ring */
#loginForm .form-control:focus,
form[action="/login"] input[type="email"]:focus,
form[action="/login"] input[type="password"]:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    outline: none;
}

/* Focus-visible — distinct high-contrast ring for keyboard navigation only */
#loginForm .form-control:focus-visible,
form[action="/login"] input:focus-visible {
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.35);
    outline: 2px solid transparent;
}

/* Fallback form labels — spacing when Bootstrap is unavailable */
form[action="/login"] label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.35rem;
    font-size: 0.9375rem;
    color: #374151;
}

/* Fallback form field groups — consistent vertical rhythm */
form[action="/login"] div {
    margin-bottom: 1rem;
}

/* Form labels inside Bootstrap markup */
#loginForm .form-label {
    font-weight: 600;
    color: #374151;
    font-size: 0.9375rem;
}

/* ==========================================================================
   Button styling
   ========================================================================== */

/* Primary submit — width: 100% mirrors Bootstrap 5's w-100 utility applied
   in login.php. btn-block (Bootstrap 4) was removed in BS5. */
#loginForm .btn-primary,
form[action="/login"] button[type="submit"] {
    height: 45px;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    background-color: #0d6efd;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

#loginForm .btn-primary:hover,
form[action="/login"] button[type="submit"]:hover {
    background-color: #0b5ed7;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
}

#loginForm .btn-primary:active,
form[action="/login"] button[type="submit"]:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Focus-visible ring for submit button (keyboard users) */
#loginForm .btn-primary:focus-visible,
form[action="/login"] button[type="submit"]:focus-visible {
    outline: 3px solid rgba(13, 110, 253, 0.5);
    outline-offset: 2px;
}

/* Disabled state — used during form submission to prevent double-submit */
#loginForm .btn-primary:disabled,
form[action="/login"] button[type="submit"]:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ==========================================================================
   Field error / validation styles
   ========================================================================== */

/* Invalid field border — matches Bootstrap is-invalid but extends to fallback */
#loginForm .form-control.is-invalid,
#loginForm .form-control[aria-invalid="true"],
form[action="/login"] input[aria-invalid="true"] {
    border-color: #dc3545;
    box-shadow: none;
}

#loginForm .form-control.is-invalid:focus,
#loginForm .form-control[aria-invalid="true"]:focus,
form[action="/login"] input[aria-invalid="true"]:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* Inline error messages — shown by JS alongside aria-describedby */
.login-field-error {
    display: block;
    font-size: 0.8125rem;
    color: #dc3545;
    margin-top: 0.25rem;
    line-height: 1.4;
}

/* Bootstrap invalid-feedback — ensure it displays when sibling has is-invalid */
#loginForm .form-control.is-invalid ~ .invalid-feedback,
#loginForm .form-control[aria-invalid="true"] ~ .invalid-feedback {
    display: block;
}

/* Help text — consistent with error text sizing */
.login-help-text,
.form-text {
    font-size: 0.8125rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

/* ==========================================================================
   Alert styling
   ========================================================================== */

.alert {
    border-radius: 6px;
    font-size: 14px;
}

/* Vanilla-JS dismissible alert — no Bootstrap JS required.
   .login-alert provides positioning for the SVG close button.
   .login-alert--dismissing triggers the fade-out transition that
   login.js waits for (300 ms) before calling .remove(). */
.login-alert {
    position: relative;
    padding-right: 2.5rem;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.login-alert--dismissing {
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
}

/* Close button — styled with vanilla JS / SVG, no Bootstrap JS */
.login-alert__close {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.25rem;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    border-radius: 3px;
    transition: opacity 0.15s ease;
}

.login-alert__close:hover,
.login-alert__close:focus {
    opacity: 1;
}

.login-alert__close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ==========================================================================
   Inline SVG icons — replace Font Awesome for self-contained rendering
   ========================================================================== */

.login-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
}

.login-icon--alert {
    margin-right: 8px;
}

.login-icon--btn {
    margin-right: 4px;
}

.login-icon--spinner {
    animation: login-spin 1s linear infinite;
}

@keyframes login-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   Form check / remember me
   ========================================================================== */

.form-check-input {
    margin-top: 0.3rem;
}

.form-check-input:focus-visible {
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.35);
}

/* ==========================================================================
   Links
   ========================================================================== */

a.text-muted:hover {
    color: #0d6efd !important;
    text-decoration: underline;
}

a.text-muted:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
    border-radius: 2px;
}

/* ==========================================================================
   Loading / double-submit state
   ========================================================================== */

/* .loading class applied by login.js disables the button and dims it.
   The spinner SVG is injected by JS (login-icon--spinner + @keyframes above).
   No ::after CSS spinner — avoids double-spinner when both CSS and JS active. */
#loginForm.loading .btn-primary,
form[action="/login"].loading button[type="submit"] {
    opacity: 0.65;
    pointer-events: none;
    cursor: not-allowed;
}

/* ==========================================================================
   Responsive adjustments
   ========================================================================== */

@media (max-width: 576px) {
    .card-body {
        padding: 1.25rem;
    }

    .card-body.p-5 {
        padding: 1.25rem !important;
    }

    h2 {
        font-size: 1.5rem;
    }

    #loginForm .form-control,
    form[action="/login"] input[type="email"],
    form[action="/login"] input[type="password"] {
        height: 48px;
        font-size: 16px; /* prevent iOS zoom on focus */
    }

    #loginForm .btn-primary,
    form[action="/login"] button[type="submit"] {
        height: 48px;
        font-size: 16px;
    }
}

@media (max-width: 400px) {
    /* Very small screens — tighter spacing */
    .login-page-wrapper,
    .row.justify-content-center {
        min-height: auto;
        padding-top: 2rem;
        padding-bottom: 2rem;
        align-items: flex-start;
    }

    .card {
        border-radius: 0;
        box-shadow: none;
    }

    .card.shadow {
        box-shadow: none;
    }
}

/* Reduced motion — respect user preference */
@media (prefers-reduced-motion: reduce) {
    #loginForm .btn-primary,
    form[action="/login"] button[type="submit"],
    .login-alert,
    .login-icon--spinner {
        transition: none;
        animation: none;
    }
}