/* ========================================
   Auth Pages - Mobile-optimized Styles
   Login & Register shared mobile styles
   ======================================== */

/* === Mobile (< 768px) === */
@media (max-width: 767.98px) {
    /* Card base */
    .auth-card {
        margin: 1rem !important;
        border-radius: 1rem !important;
    }

    .auth-card--login {
        max-width: none !important;
        width: calc(100% - 2rem) !important;
    }

    .auth-card--login .card-body {
        padding: 2rem 1.5rem !important;
    }

    .auth-card--register .card-body {
        padding: 1.5rem !important;
    }

    /* Input - iOS zoom prevention + touch-friendly */
    .auth-input {
        font-size: 16px !important;
        padding: 0.75rem 1rem !important;
        border-radius: 0.75rem !important;
        min-height: 48px !important;
    }

    /* Button - touch-friendly */
    .auth-btn {
        padding: 0.875rem 1.5rem !important;
        font-size: 1.05rem !important;
        border-radius: 0.75rem !important;
        min-height: 50px !important;
        font-weight: 600 !important;
    }

    /* Form labels */
    .auth-card .form-label {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
        font-weight: 600 !important;
    }

    /* Alert boxes */
    .auth-alert {
        padding: 1rem !important;
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        border-radius: 0.75rem !important;
        margin-bottom: 1.5rem !important;
    }

    .auth-alert--warning {
        font-size: 0.85rem !important;
    }

    .auth-alert--warning small {
        font-size: inherit !important;
    }

    .auth-alert ul {
        padding-left: 1.2rem !important;
        margin-top: 0.5rem !important;
    }

    .auth-alert li {
        margin-bottom: 0.3rem !important;
    }

    /* Helper text */
    .auth-form-text {
        font-size: 0.85rem !important;
        margin-top: 0.3rem !important;
        line-height: 1.3 !important;
    }

    /* Button container */
    .auth-btn-container {
        gap: 0.75rem !important;
        margin-top: 1.5rem !important;
    }

    /* Scoped Bootstrap utility overrides (login) */
    .auth-card--login .mb-4 {
        margin-bottom: 1.5rem !important;
    }

    .auth-card--login .mt-5 {
        margin-top: 2rem !important;
    }

    .auth-card--login .mt-4 {
        margin-top: 1.5rem !important;
    }

    .auth-card--login .gap-3 {
        gap: 1rem !important;
    }

    /* Scoped Bootstrap utility overrides (register) */
    .auth-card--register .mb-3 {
        margin-bottom: 1.25rem !important;
    }

    /* Validation styles */
    .auth-card .is-valid {
        border-color: var(--success-green) !important;
    }

    .auth-card .is-invalid {
        border-color: #dc3545 !important;
    }

    /* Error messages */
    .auth-card #form-errors {
        margin-bottom: 1rem !important;
        padding: 1rem !important;
        border-radius: 0.75rem !important;
        font-size: 0.9rem !important;
    }

    .auth-card #form-errors ul {
        padding-left: 1.2rem !important;
        margin-bottom: 0 !important;
    }

    .auth-card #form-errors li {
        margin-bottom: 0.3rem !important;
    }
}

/* === Very small screens (≤374px) === */
@media (max-width: 374px) {
    .auth-card {
        margin: 0.5rem !important;
    }

    .auth-card--login {
        width: calc(100% - 1rem) !important;
    }

    .auth-card--login .card-body {
        padding: 1.5rem 1rem !important;
    }

    .auth-card--register .card-body {
        padding: 1rem !important;
    }

    .auth-input {
        font-size: 16px !important;
        padding: 0.625rem 0.875rem !important;
        min-height: 46px !important;
    }

    .auth-btn {
        font-size: 1rem !important;
        padding: 0.75rem 1rem !important;
        min-height: 48px !important;
    }

    .auth-alert {
        padding: 0.875rem !important;
        font-size: 0.85rem !important;
    }

    .auth-form-text {
        font-size: 0.8rem !important;
    }
}

/* === Landscape mode === */
@media (max-width: 767.98px) and (orientation: landscape) {
    .auth-card {
        margin: 0.5rem auto !important;
        max-height: 95vh !important;
        overflow-y: auto !important;
    }

    .auth-card--login .card-body {
        padding: 1.5rem !important;
    }

    .auth-card--register .card-body {
        padding: 1rem !important;
    }

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

    .auth-card--login .mt-5 {
        margin-top: 1.5rem !important;
    }

    .auth-card--login .mt-4 {
        margin-top: 1rem !important;
    }

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

    .auth-alert {
        margin-bottom: 1rem !important;
        padding: 0.75rem !important;
        font-size: 0.85rem !important;
    }

    .auth-btn-container {
        margin-top: 1rem !important;
    }
}

/* === Keyboard visible (register only) === */
@media (max-width: 767.98px) and (max-height: 500px) {
    .auth-card--register {
        margin: 0.25rem auto !important;
    }

    .auth-card--register .card-body {
        padding: 0.75rem !important;
    }

    .auth-card--register .auth-alert:first-child {
        display: none !important;
    }

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

    .auth-alert--warning {
        margin-bottom: 0.75rem !important;
        padding: 0.5rem !important;
        font-size: 0.8rem !important;
    }
}