/* css/Views/Account/account-responsive.css */
/* =============================================================================
   ACCOUNT PAGE - RESPONSIVE STYLES (FIXED)
   Path: /css/views/account/account-responsive.css
   
   Purpose: All media queries, breakpoint-specific adjustments
   Dependencies: 
   - /css/shared/_typography.css (load first)
   - /css/views/account/account-base.css (load second)
   - /css/views/account/account-theme.css (load third)
   
   KEY FIX: The mobile breakpoint MUST override the grid to single column.
   Using !important to ensure it wins over base.css specificity.
   
   Breakpoints:
   - Desktop: >= 992px (two-column layout - from base.css)
   - Tablet: 768px - 991.98px (stacked, full hero)
   - Mobile: < 768px (single column, no hero)
   - Extra Small: < 375px (tighter spacing)
   - Tiny: < 360px (single-column requirements)
   ========================================================================== */

/* =============================================================================
   DESKTOP (>= 992px) - Two Column Layout
   Note: Default two-column layout is defined in account-base.css
   This section reserved for desktop-only overrides if needed
   ========================================================================== */

/* =============================================================================
   TABLET (768px - 991.98px) - Stacked Layout
   ========================================================================== */

@media (min-width: 768px) and (max-width: 991.98px) {
    .auth-container {
        grid-template-columns: 1fr !important; /* FORCE single column */
        gap: 1.25rem;
        max-width: 600px;
    }

    .form-card.hero-card {
        min-height: 460px;
        border-radius: 1.25rem;
        padding: 2.25rem;
    }

        .form-card.hero-card[style*="background-image"]::before {
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.3) 100%);
        }

    .form-card.auth-card {
        border-radius: 1.25rem;
    }

    .hero-header {
        padding: 1.5rem 1.75rem;
    }

        .hero-header h1 {
            font-size: 1.875rem;
        }

        .hero-header p {
            font-size: var(--font-base);
        }
}

/* =============================================================================
   TABLET & BELOW (<= 1023.98px) - Responsive Logo
   ========================================================================== */

@media (max-width: 1023.98px) {
    .form-card.auth-card .logo,
    .logo {
        width: min(60%, 180px) !important;
        height: auto !important;
        margin: 0 auto 0.75rem !important;
        padding: 0.3rem !important;
        border-width: 1px;
    }

        .form-card.auth-card .logo img,
        .logo img {
            display: block;
            max-width: 100% !important;
            height: auto !important;
        }
}

/* =============================================================================
   TABLET & ABOVE (>= 768px) - Reset Password State
   ========================================================================== */

@media (min-width: 768px) {
    .auth-container.state-reset {
        grid-template-columns: minmax(480px, 1fr) minmax(400px, 460px);
        gap: 2rem;
    }

        .auth-container.state-reset .hero-card {
            display: flex !important;
        }
}

/* =============================================================================
   MOBILE (< 768px) - Single Column, No Hero
   
   CRITICAL FIX: This breakpoint MUST force single-column layout
   ========================================================================== */

@media (max-width: 767.98px) {
    /* Page Shell */
    .account-page {
        background: var(--background);
        padding: 0;
        padding-top: calc(env(safe-area-inset-top) + 0.75rem);
        min-height: 100dvh;
        align-items: flex-start;
        justify-content: flex-start;
        overflow-x: hidden;
    }

    /* CRITICAL: Force single column on mobile */
    .auth-container {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        min-height: 100dvh;
    }

    /* CRITICAL: Completely hide hero card on mobile */
    .hero-card,
    .form-card.hero-card,
    .mobile-hide {
        display: none !important;
    }

    /* Auth Card - MUST SHOW on mobile */
    .form-card.auth-card,
    .auth-card {
        display: flex !important;
        flex-direction: column !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        min-height: 100dvh;
        padding: 1.25rem 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
        background: var(--background) !important;
    }

    /* On mobile, hero is hidden so auth card fades up from center (no stagger delay) */
    .account-page.loaded .form-card.auth-card {
        animation: cardFadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    /* =========================================================================
       LOGO - Mobile sizing
       ========================================================================= */

    .logo {
        width: 80px !important;
        height: auto !important;
        margin: 0 auto 0.5rem !important;
        padding: 4px !important;
    }

        .logo img {
            max-width: 100%;
            height: auto;
        }

    /* =========================================================================
       EVENT INFO BELOW LOGO - Mobile Only
       These elements exist in HTML but are hidden on desktop
       ========================================================================= */

    /* Event name below logo */
    .logo-meta {
        display: block !important;
        text-align: center;
        margin-bottom: 0.5rem;
    }

    .logo-title {
        font-family: var(--font-family);
        font-size: var(--font-base) !important;
        font-weight: 700 !important;
        color: var(--text);
        line-height: var(--leading-snug);
    }

    /* Event dates chip */
    .event-chip {
        display: inline-flex !important;
        justify-content: center;
        align-items: center;
        gap: 0.4rem;
        padding: 0.35rem 0.75rem;
        border-radius: 999px;
        background: #f3f4f6;
        border: 1px solid #e5e7eb;
        font-family: var(--font-family);
        font-size: var(--font-xs);
        font-weight: 600;
        color: var(--text-muted);
        margin: 0 auto 1rem;
        width: max-content;
    }

    .chip-icon {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

    .chip-text {
        font-size: var(--font-xs);
    }

    /* Event message banner */
    .event-message--form {
        display: block !important;
        margin-bottom: 1rem;
        padding: 0.875rem;
        border-radius: 10px;
        background: var(--secondary, #764ba2);
        border: none;
        box-shadow: 0 2px 8px rgba(118, 75, 162, 0.2);
    }

        .event-message--form .overlay-text {
            font-size: var(--font-sm);
            line-height: var(--leading-normal);
            color: var(--secondary-text, #ffffff);
            text-align: center;
            text-shadow: none;
            font-weight: 500;
        }

            .event-message--form .overlay-text strong,
            .event-message--form .overlay-text em {
                font-weight: 700;
                color: #fff;
            }

    /* Form Header */
    .form-header {
        margin-bottom: 1rem;
    }

        .form-header h2 {
            font-size: var(--font-lg);
            font-weight: 700;
        }

        .form-header p {
            font-size: var(--font-sm);
        }

    /* Form Elements */
    .form-group {
        margin-bottom: 0.5rem;
        width: 100%;
    }

    label {
        font-size: var(--font-sm);
        margin-bottom: 0.25rem;
        font-weight: 600;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"] {
        padding: 0.625rem 0.75rem;
        font-size: 16px; /* Prevents zoom on iOS */
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        background: var(--background);
        width: 100% !important;
        max-width: 100% !important;
    }

    input::placeholder {
        color: #9ca3af;
        opacity: 0.7;
    }

    /* Submit Button */
    .btn-submit {
        padding: 0.75rem !important;
        font-size: var(--font-sm);
        min-height: 44px !important;
        border-radius: 10px;
        margin-top: 0.375rem;
        font-weight: 600;
        width: 100% !important;
    }

        .btn-submit:hover {
            transform: none;
            box-shadow: none;
        }

        .btn-submit:active {
            transform: scale(0.98);
        }

    /* Checkbox and Links */
    .checkbox-group {
        margin-bottom: 0.5rem;
        font-size: var(--font-sm);
    }

    .footer-link {
        margin-top: 0.875rem;
        padding-top: 0.875rem;
        border-top: 1px solid #e5e7eb;
        font-size: var(--font-sm);
    }

    /* Divider */
    .divider {
        margin: 0.75rem 0;
        display: block !important;
    }

        .divider span {
            font-size: var(--font-xs); /* 12px - minimum allowed */
        }

    /* =========================================================================
       SOCIAL BUTTONS - Mobile Base Styles
       ========================================================================= */

    .social-row {
        display: grid !important;
        gap: 0.5rem;
        grid-template-columns: 1fr;
        margin-top: 0.75rem;
    }

    .social-btn {
        width: 100%;
        padding: 0.5rem 0.75rem;
        font-size: var(--font-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        border-radius: var(--radius-md);
        transition: background 0.2s;
        cursor: pointer;
        font-weight: 500;
        font-family: var(--font-family);
        min-height: 44px; /* Touch target */
    }

    .social-icon {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    /* =========================================================================
       SOCIAL BUTTON VARIANTS - Mobile Icon Fix
       CRITICAL: Ensures icons are visible on colored backgrounds
       ========================================================================= */

    /* Apple button - white text/icon on black background */
    .social-apple {
        background: #000 !important;
        color: #fff !important;
        border: 1px solid #000 !important;
    }

        .social-apple:hover {
            background: #1a1a1a !important;
        }

        .social-apple .social-icon {
            color: #fff;
        }

            .social-apple svg,
            .social-apple .social-icon svg {
                fill: #fff !important;
            }

                .social-apple svg path {
                    fill: #fff !important;
                }

    /* Google button - colorful icon on white background */
    .social-google {
        background: #fff !important;
        color: #3c4043 !important;
        border: 1px solid #dadce0 !important;
    }

        .social-google:hover {
            background: #f9fafb !important;
            border-color: #4285f4 !important;
        }

    /* Microsoft button - colorful icon on white background */
    .social-microsoft {
        background: #fff !important;
        color: #5e5e5e !important;
        border: 1px solid #8c8c8c !important;
    }

        .social-microsoft:hover {
            background: #f9fafb !important;
            border-color: #5e5e5e !important;
        }

    /* Facebook button - white text/icon on blue background */
    .social-facebook {
        background: #1877f2 !important;
        color: #fff !important;
        border: 1px solid #1877f2 !important;
    }

        .social-facebook:hover {
            background: #166fe5 !important;
            border-color: #166fe5 !important;
        }

        .social-facebook .social-icon {
            color: #fff;
        }

            .social-facebook svg,
            .social-facebook .social-icon svg {
                fill: #fff !important;
            }

                .social-facebook svg path {
                    fill: #fff !important;
                }

    /* Validation Messages */
    .field-validation-error,
    span[data-valmsg-for] {
        min-height: 0.75rem;
        font-size: var(--font-xs); /* 12px - minimum */
        line-height: var(--leading-normal);
        margin-top: 0.125rem;
    }

        .field-validation-error:empty,
        span[data-valmsg-for]:empty {
            min-height: 0.375rem;
        }

    /* Success Messages */
    .success-message {
        padding: 1rem;
    }

    .success-icon {
        width: 48px;
        height: 48px;
        padding: 8px;
    }

    .success-message h3 {
        font-size: var(--font-lg);
        margin-bottom: 0.375rem;
    }

    .success-message .success-main-text {
        font-size: var(--font-sm);
        margin-bottom: 0.25rem;
    }

    .success-message .success-sub-text {
        font-size: var(--font-sm);
        margin-bottom: 0.75rem;
    }

    .success-btn {
        padding: 0.625rem 1.25rem;
        font-size: var(--font-sm);
    }

    /* Password Requirements */
    .password-requirements {
        padding: 0.625rem;
        font-size: var(--font-sm);
    }

        .password-requirements.visible {
            padding: 0.625rem;
        }

    .requirements-header {
        font-size: var(--font-sm);
        margin-bottom: 0.375rem;
    }

    .requirements-list {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .requirement-item {
        gap: 0.25rem;
        font-size: var(--font-sm);
    }

    .requirement-icon svg {
        width: 14px;
        height: 14px;
    }

    .requirement-label {
        font-size: var(--font-sm);
    }

    /* Turnstile Widget - Mobile */
    .turnstile-container {
        margin: 0.75rem 0 0.375rem;
    }

    /* =========================================================================
       FORM LOCK OVERLAY - Mobile
       Full-screen lock overlay needs to respect the borderless card
       ========================================================================= */

    .form-lock-overlay {
        border-radius: 0;
    }

    /* Rally4One Branding - Mobile */
    .rally4one-branding {
        margin-top: 1.25rem;
        padding-top: 0.875rem;
        gap: 6px;
    }

    .powered-by-text,
    .rally4one-divider,
    .rally4one-link {
        font-size: var(--font-xs); /* 12px - minimum */
    }

    .rally4one-logo {
        height: 18px;
        max-width: 80px;
    }

    .rally4one-name {
        font-size: var(--font-xs); /* 12px */
    }
}

/* =============================================================================
   EXTRA SMALL (< 375px) - Tighter Spacing
   ========================================================================== */

@media (max-width: 374px) {
    .form-card {
        padding: 1rem 0.875rem;
    }

    .logo {
        width: 56px;
        height: 56px;
        margin-bottom: 0.75rem;
    }

    .form-group {
        margin-bottom: 0.375rem;
    }

    /* Maintain minimum 12px on tiny screens */
    label {
        font-size: var(--font-xs); /* 12px - absolute minimum */
    }

    .footer-link,
    .checkbox-group {
        font-size: var(--font-xs); /* 12px - absolute minimum */
    }

    .divider span {
        font-size: var(--font-xs);
    }

    /* Social buttons at minimum */
    .social-btn {
        padding: 0.45rem 0.625rem;
        font-size: var(--font-xs); /* 12px - minimum */
        min-height: 40px;
    }

    .social-icon {
        width: 14px;
        height: 14px;
    }

    /* Password requirements at minimum */
    .password-requirements {
        padding: 0.5rem;
    }

    .requirements-header {
        font-size: var(--font-xs); /* 12px - minimum */
    }

    .requirement-label {
        font-size: var(--font-xs); /* 12px - minimum */
    }
}

/* =============================================================================
   TINY SCREENS (< 360px) - Single Column Requirements
   ========================================================================== */

@media (max-width: 360px) {
    .requirements-list {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   TOUCH DEVICES - Larger Targets
   ========================================================================== */

@media (pointer: coarse) {
    .btn-submit,
    .social-btn {
        min-height: 48px;
    }

    .password-toggle {
        min-width: 44px;
        min-height: 44px;
        padding: 0.5rem;
    }
}

/* =============================================================================
   HIGH CONTRAST MODE
   ========================================================================== */

@media (prefers-contrast: high) {
    .form-card {
        border-width: 2px;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"] {
        border-width: 2px;
    }

    .btn-submit {
        border: 2px solid currentColor;
    }
}

/* =============================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .account-page {
        opacity: 1 !important;
    }

    .form-card.hero-card,
    .form-card.auth-card {
        opacity: 1 !important;
        animation: none !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Form lock overlay - disable transition */
    .form-lock-overlay {
        transition: none;
    }
}

/* =============================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .account-page {
        background: white;
        min-height: auto;
    }

    .hero-card {
        display: none !important;
    }

    .form-card {
        box-shadow: none;
        border: 1px solid #000;
    }

    .btn-submit,
    .social-row,
    .divider {
        display: none !important;
    }

    /* Hide form lock overlay in print */
    .form-lock-overlay {
        display: none !important;
    }
}