/* ========================================
   MOBILE AUTH PAGES - PROFESSIONAL FIX
   Consistent layout for Login/Signup/Forgot Password
   ======================================== */

@media (max-width: 768px) {

    /* ========================================
       AUTH PAGE CONTAINER
       ======================================== */
    .auth-page {
        min-height: 100vh;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    /* ========================================
       AUTH CONTAINER - UNIFIED
       ======================================== */
    .auth-container {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .auth-box {
        background: white;
        border-radius: 1rem;
        padding: 1.5rem;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    /* ========================================
       AUTH HEADER
       ======================================== */
    .auth-header {
        text-align: center;
        margin-bottom: 1.5rem;
    }

    .auth-header h2 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
        color: #1e293b;
        font-weight: 700;
    }

    .auth-header p {
        font-size: 0.875rem;
        color: #64748b;
        margin: 0;
    }

    /* ========================================
       AUTH FORM
       ======================================== */
    .auth-form {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .form-group {
        margin-bottom: 0;
    }

    .form-group label {
        display: block;
        font-size: 0.875rem;
        font-weight: 600;
        color: #334155;
        margin-bottom: 0.4rem;
    }

    .form-control {
        width: 100%;
        padding: 0.875rem;
        font-size: 16px !important;
        /* Prevents iOS zoom */
        border: 2px solid #e2e8f0;
        border-radius: 0.5rem;
        transition: all 0.2s;
        background: white;
        color: #1e293b;
    }

    .form-control:focus {
        outline: none;
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

    select.form-control {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23334155' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.875rem center;
        padding-right: 2.5rem;
    }

    /* ========================================
       BUTTONS
       ======================================== */
    .btn-large {
        width: 100%;
        padding: 1rem;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 0.5rem;
        border: none;
        cursor: pointer;
        transition: all 0.2s;
        margin-top: 0.5rem;
    }

    .btn-primary {
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        color: white;
    }

    .btn-primary:hover,
    .btn-primary:active {
        transform: translateY(-1px);
        box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);
    }

    .btn-outline {
        background: transparent;
        border: 2px solid #e2e8f0;
        color: #334155;
    }

    .btn-outline:hover,
    .btn-outline:active {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

    /* ========================================
       SOCIAL LOGIN
       ======================================== */
    .social-login {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin: 1rem 0;
    }

    .btn-social {
        width: 100%;
        padding: 0.875rem;
        border: 2px solid #e2e8f0;
        border-radius: 0.5rem;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .btn-social:active {
        transform: scale(0.98);
        background: #f8fafc;
    }

    .btn-social i {
        font-size: 1.25rem;
    }

    .btn-google {
        color: #DB4437;
    }

    .btn-github {
        color: #333;
    }

    /* ========================================
       DIVIDER
       ======================================== */
    .divider {
        display: flex;
        align-items: center;
        text-align: center;
        margin: 1.25rem 0;
        color: #94a3b8;
        font-size: 0.875rem;
    }

    .divider::before,
    .divider::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #e2e8f0;
    }

    .divider::before {
        margin-right: 0.75rem;
    }

    .divider::after {
        margin-left: 0.75rem;
    }

    /* ========================================
       AUTH FOOTER
       ======================================== */
    .auth-footer {
        text-align: center;
        margin-top: 1.5rem;
        font-size: 0.875rem;
        color: #64748b;
    }

    .auth-footer a {
        color: #6366f1;
        text-decoration: none;
        font-weight: 600;
    }

    .auth-footer a:active {
        color: #4f46e5;
    }

    /* ========================================
       BACK BUTTON
       ======================================== */
    .back-to-login {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        color: #6366f1;
        text-decoration: none;
        font-size: 0.875rem;
        font-weight: 600;
        margin-bottom: 1rem;
    }

    .back-to-login:active {
        color: #4f46e5;
    }

    /* ========================================
       FORGOT PASSWORD SPECIFIC
       ======================================== */
    #forgotPasswordPage .auth-box {
        max-width: 100%;
    }

    #forgotPasswordPage .auth-header p {
        font-size: 0.8rem;
    }

    /* ========================================
       REMOVE PASSWORD RECOVERY CONTAINER
       Hide the password recovery section on mobile
       ======================================== */
    .password-recovery-container {
        display: none !important;
    }

    /* ========================================
       DASHBOARD AFTER LOGIN FIX
       Ensure dashboard displays correctly
       ======================================== */
    #dashboardPage.active {
        display: block !important;
        width: 100%;
        height: 100vh;
        overflow-y: auto;
    }

    /* Hide auth pages when dashboard is active */
    #dashboardPage.active~.auth-page {
        display: none !important;
    }

    /* ========================================
       LOADING STATE
       ======================================== */
    .btn-large:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .btn-large i.fa-spinner {
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    /* ========================================
       ERROR MESSAGES
       ======================================== */
    .error-message {
        background: #fee2e2;
        border: 1px solid #fecaca;
        color: #991b1b;
        padding: 0.75rem;
        border-radius: 0.5rem;
        font-size: 0.875rem;
        margin-bottom: 1rem;
        display: none;
    }

    .error-message.show {
        display: block;
    }

    /* ========================================
       SUCCESS MESSAGES
       ======================================== */
    .success-message {
        background: #d1fae5;
        border: 1px solid #a7f3d0;
        color: #065f46;
        padding: 0.75rem;
        border-radius: 0.5rem;
        font-size: 0.875rem;
        margin-bottom: 1rem;
        display: none;
    }

    .success-message.show {
        display: block;
    }

    /* ========================================
       CONSISTENT SPACING
       ======================================== */
    .auth-page .container {
        padding: 0;
    }

    /* ========================================
       PREVENT LAYOUT SHIFT
       ======================================== */
    .page {
        min-height: 100vh;
    }

    .page.active {
        display: block !important;
    }

    .page:not(.active) {
        display: none !important;
    }

    /* ========================================
       SMOOTH TRANSITIONS
       ======================================== */
    .auth-box,
    .form-control,
    .btn-large,
    .btn-social {
        transition: all 0.2s ease;
    }

    /* ========================================
       LANDSCAPE MODE ADJUSTMENTS
       ======================================== */
    @media (orientation: landscape) and (max-height: 500px) {
        .auth-page {
            padding: 0.5rem;
            align-items: flex-start;
        }

        .auth-box {
            padding: 1rem;
            margin: 0.5rem auto;
        }

        .auth-header {
            margin-bottom: 1rem;
        }

        .auth-header h2 {
            font-size: 1.25rem;
        }

        .auth-form {
            gap: 0.75rem;
        }

        .form-control {
            padding: 0.75rem;
        }

        .btn-large {
            padding: 0.875rem;
        }
    }

    /* ========================================
       VERY SMALL SCREENS (< 360px)
       ======================================== */
    @media (max-width: 360px) {
        .auth-box {
            padding: 1.25rem;
        }

        .auth-header h2 {
            font-size: 1.35rem;
        }

        .form-control {
            padding: 0.75rem;
        }

        .btn-large {
            padding: 0.875rem;
            font-size: 0.95rem;
        }
    }
}

/* ========================================
   TABLET ADJUSTMENTS (768px - 1024px)
   ======================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    .auth-container {
        max-width: 500px;
    }

    .auth-box {
        padding: 2rem;
    }
}