/**
 * Palavi Library - Authentication Pages Layout
 * ------------------------------------------------------------------
 * Built in: Module 4 (Authentication System)
 * ------------------------------------------------------------------
 * Shared layout for register.php, login.php, verify-otp.php,
 * forgot-password.php, reset-password.php, and admin/login.php.
 */

.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.auth-card {
    width: 100%;
    max-width: 440px;
    padding: 1.75rem 2rem;
}

/* Compact sizing for the shared .form-label/.form-control/.mb-3 classes
   used throughout the auth forms - scoped to .auth-card only, not
   these globally-shared classes app-wide, so nothing outside login/
   register/OTP/reset-password is affected. The whole card previously
   ran tall enough to need scrolling on shorter viewports. */
.auth-card .form-label {
    font-size: 0.8rem;
    margin-bottom: 0.3rem;
}

.auth-card .form-control,
.auth-card .form-select {
    font-size: 0.85rem;
    padding: 0.5rem 0.85rem;
}

.auth-card .mb-3 {
    margin-bottom: 0.65rem !important;
}

.auth-card .mb-4 {
    margin-bottom: 0.85rem !important;
}

.auth-card .btn-brand {
    padding: 0.55rem 1.2rem;
    font-size: 0.9rem;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0.85rem;
}

.auth-brand-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--brand-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
}

.auth-brand-name {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--text-primary);
}

/* The real logo (assets/images/logo/Logo.png) already includes the
 * "Palavi Mobile Library" wordmark baked into the image itself, so
 * unlike the old .auth-brand-icon + .auth-brand-name pair, this is
 * used alone - no separate text label needed alongside it. */
.auth-logo-img {
    height: 52px;
    width: auto;
    display: block;
    background: transparent;
    border-radius: 12px;
}

/* The logo's own artwork is dark blue on a transparent background, so
 * it needs a light backing to stay readable against a dark theme -
 * light mode already provides that contrast via the page itself, so
 * no extra background is added there. */
[data-theme="dark"] .auth-logo-img {
    background: #fff;
    padding: 10px;
}

.auth-title {
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 0.2rem;
    color: var(--text-primary);
}

.auth-subtitle {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    font-size: 0.82rem;
}

.auth-footer-link {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.auth-footer-link a {
    color: var(--brand-primary);
    font-weight: 600;
    text-decoration: none;
}

.auth-footer-link a:hover {
    text-decoration: underline;
}

.password-toggle-icon {
    cursor: pointer;
    color: var(--text-muted);
}

.theme-toggle-fixed {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10;
}

/* OTP segmented input boxes */
.otp-input-group {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.otp-digit {
    width: 52px;
    height: 60px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 12px;
    border: 1px solid var(--border-glass);
    background: var(--bg-glass-strong);
    color: var(--text-primary);
}

.otp-digit:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.2rem rgba(30, 90, 168, 0.2);
    outline: none;
}

.otp-resend-timer {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Alert banner (used to render server validation / flash messages) */
.auth-alert {
    border-radius: 12px;
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
}

@media (max-width: 480px) {
    .auth-card {
        padding: 1.75rem;
    }

    .otp-digit {
        width: 44px;
        height: 52px;
        font-size: 1.25rem;
    }
}