/* ============================================
   CMA OMBESSA - Login Page Responsive Enhancements
   Mobile-first approach with enhanced touch targets
   ============================================ */

/* ============================================
   HIDE NAVIGATION ELEMENTS ON LOGIN PAGE
   No sidebar/menu needed when not logged in
   ============================================ */

/* Hide sidebar toggle button when login page is visible (auth-section without .hidden class) */
body:has(#auth-section:not(.hidden)) .sidebar-toggle {
    display: none !important;
}

/* Hide sidebar overlay when login page is visible */
body:has(#auth-section:not(.hidden)) .sidebar-overlay {
    display: none !important;
}

/* ============================================
   BASE MOBILE STYLES (< 480px)
   Default styles for smallest screens
   Split-screen: Hero on top, Form below
   ============================================ */

/* Ensure full viewport usage on mobile */
#auth-section {
    min-height: -webkit-fill-available; /* iOS Safari fix */
    min-height: 100vh;
}

.login-container {
    min-height: -webkit-fill-available;
    min-height: 100vh;
    flex-direction: column;
}

/* ----------------------------------------
   Hero Section (Right panel) - TOP on mobile
   ---------------------------------------- */
.login-right {
    display: flex !important;
    order: -1; /* Move to top */
    width: 100%;
    min-height: 200px;
    max-height: 35vh;
    position: relative;
    overflow: hidden;
    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
}

/* Compact hero shape for mobile */
.login-hero-shape {
    width: 140px;
    height: 160px;
}

/* Scale down hero image */
.login-hero-image {
    width: 100px;
    max-width: 100px;
}

/* Mobile stats badge - compact and repositioned */
.login-stats-badge {
    top: auto;
    bottom: 12px;
    right: 12px;
    left: auto;
    transform: scale(0.7);
    transform-origin: bottom right;
}

/* Mobile feature card - compact and repositioned */
.login-feature-card {
    top: 12px;
    left: 12px;
    bottom: auto;
    right: auto;
    transform: scale(0.65);
    transform-origin: top left;
    max-width: 180px;
}

/* Floating dots - reduce density on mobile */
.login-floating-dots {
    opacity: 0.4;
}

/* ----------------------------------------
   Form Section (Left panel) - BELOW on mobile
   ---------------------------------------- */
.login-left {
    flex: 1 1 auto;
    order: 1; /* After hero */
    width: 100%;
    padding: var(--space-5) var(--space-4);
    padding-top: var(--space-6);
    justify-content: flex-start;
}

/* Center brand on mobile */
.login-brand {
    justify-content: center;
    margin-bottom: var(--space-5);
}

/* Smaller logo on mobile since hero is visible */
.login-brand .login-logo {
    width: 44px;
    height: 44px;
}

.login-brand .login-brand-name {
    font-size: var(--text-lg);
}

/* Form wrapper full width */
.login-form-wrapper {
    max-width: 100%;
    width: 100%;
}

/* Center text on mobile */
.login-title {
    text-align: center;
    font-size: var(--text-xl);
}

.login-subtitle {
    text-align: center;
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
}

/* Enhanced touch-friendly inputs */
.login-form .form-group {
    margin-bottom: var(--space-4);
}

.input-with-icon .form-input {
    height: 52px;
    font-size: 16px; /* Prevents iOS zoom on focus */
    padding-left: calc(var(--space-4) + 28px);
    padding-right: var(--space-4);
    border-radius: var(--radius-lg);
}

/* Larger touch target for password toggle */
.password-toggle {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Stack login options vertically on small screens */
.login-options {
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
    margin-bottom: var(--space-5);
}

/* Larger checkbox touch target */
.checkbox-label {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: var(--space-2) 0;
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
}

/* Enhanced button for touch */
.login-btn {
    height: 56px;
    font-size: var(--text-base);
    border-radius: var(--radius-lg);
    touch-action: manipulation; /* Prevent double-tap zoom */
}

/* Footer repositioned for mobile */
.login-footer {
    position: relative;
    bottom: auto;
    left: auto;
    margin-top: var(--space-8);
    text-align: center;
    padding-bottom: var(--space-4);
}

/* Help text spacing */
.login-help {
    margin-top: var(--space-5);
    font-size: var(--text-sm);
}

/* ============================================
   LARGER MOBILE (480px and up)
   ============================================ */
@media (min-width: 480px) {
    /* Hero section - slightly taller */
    .login-right {
        min-height: 220px;
        max-height: 38vh;
    }

    .login-hero-shape {
        width: 180px;
        height: 200px;
    }

    .login-hero-image {
        width: 130px;
        max-width: 130px;
    }

    .login-stats-badge {
        transform: scale(0.8);
        bottom: 16px;
        right: 16px;
    }

    .login-feature-card {
        transform: scale(0.75);
        top: 16px;
        left: 16px;
    }

    /* Form section adjustments */
    .login-left {
        padding: var(--space-6) var(--space-5);
        padding-top: var(--space-6);
    }

    .login-brand {
        margin-bottom: var(--space-6);
    }

    .login-brand .login-logo {
        width: 48px;
        height: 48px;
    }

    .login-brand .login-brand-name {
        font-size: var(--text-xl);
    }

    .login-title {
        font-size: var(--text-2xl);
    }

    .login-subtitle {
        font-size: var(--text-base);
    }

    /* Horizontal login options on larger mobile */
    .login-options {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .login-form-wrapper {
        max-width: 400px;
        margin: 0 auto;
    }
}

/* ============================================
   LANDSCAPE MOBILE
   Hero becomes side panel in landscape
   ============================================ */
@media (max-width: 767px) and (orientation: landscape) {
    .login-container {
        flex-direction: row;
    }

    /* Hero as side panel in landscape */
    .login-right {
        order: unset;
        width: 35%;
        flex: 0 0 35%;
        min-height: 100vh;
        max-height: none;
        border-radius: 0;
    }

    .login-hero-shape {
        width: 100px;
        height: 120px;
    }

    .login-hero-image {
        width: 80px;
    }

    .login-stats-badge {
        display: none; /* Too cramped in landscape */
    }

    .login-feature-card {
        display: none; /* Too cramped in landscape */
    }

    /* Form takes remaining space */
    .login-left {
        order: unset;
        flex: 1;
        width: 65%;
        padding: var(--space-4);
        padding-top: var(--space-4);
    }

    .login-brand {
        margin-bottom: var(--space-3);
        justify-content: flex-start;
    }

    .login-brand .login-logo {
        width: 36px;
        height: 36px;
    }

    .login-brand .login-brand-name {
        font-size: var(--text-base);
    }

    .login-title {
        text-align: left;
        font-size: var(--text-lg);
    }

    .login-subtitle {
        text-align: left;
        margin-bottom: var(--space-3);
    }

    .login-form .form-group {
        margin-bottom: var(--space-3);
    }

    .input-with-icon .form-input {
        height: 44px;
    }

    .login-btn {
        height: 48px;
    }

    .login-footer {
        margin-top: var(--space-3);
    }
}

/* ============================================
   TABLET (768px and up)
   Restore side-by-side layout
   ============================================ */
@media (min-width: 768px) {
    .login-container {
        flex-direction: row;
    }

    /* Reset order for side-by-side layout */
    .login-left {
        flex: 0 0 50%;
        width: 50%;
        order: unset;
        padding: var(--space-6);
        justify-content: center;
        min-height: 100vh;
    }

    .login-right {
        display: flex;
        flex: 0 0 50%;
        order: unset;
        min-height: 100vh;
        max-height: none;
        border-radius: 0;
    }

    .login-brand {
        justify-content: flex-start;
        margin-bottom: var(--space-8);
    }

    /* Reset brand sizing */
    .login-brand .login-logo {
        width: 52px;
        height: 52px;
    }

    .login-brand .login-brand-name {
        font-size: var(--text-xl);
    }

    .login-form-wrapper {
        max-width: 380px;
        margin: 0;
    }

    .login-title,
    .login-subtitle {
        text-align: left;
    }

    .login-subtitle {
        font-size: var(--text-base);
    }

    .login-footer {
        position: absolute;
        bottom: var(--space-6);
        left: var(--space-6);
        margin-top: 0;
        text-align: left;
    }

    /* Adjust hero elements for tablet */
    .login-hero-shape {
        width: 280px;
        height: 320px;
    }

    .login-hero-image {
        width: 200px;
        max-width: none;
    }

    .login-stats-badge {
        top: 15%;
        bottom: auto;
        right: 10%;
        left: auto;
        transform: scale(0.9);
        transform-origin: center;
    }

    .login-feature-card {
        top: auto;
        bottom: 12%;
        left: 8%;
        right: auto;
        transform: scale(0.9);
        transform-origin: center;
        max-width: 240px;
    }

    .login-floating-dots {
        opacity: 1;
    }
}

/* ============================================
   DESKTOP (1024px and up)
   ============================================ */
@media (min-width: 1024px) {
    .login-left {
        flex: 0 0 45%;
        padding: var(--space-8);
    }

    .login-right {
        flex: 0 0 55%;
    }

    .login-hero-shape {
        width: 320px;
        height: 360px;
    }

    .login-hero-image {
        width: 240px;
    }

    .login-stats-badge,
    .login-feature-card {
        transform: scale(1);
    }

    .login-stats-badge {
        top: 18%;
        right: 12%;
    }

    .login-feature-card {
        bottom: 14%;
        left: 8%;
        max-width: 280px;
    }
}

/* ============================================
   LARGE DESKTOP (1200px and up)
   ============================================ */
@media (min-width: 1200px) {
    .login-left {
        flex: 0 0 42%;
        padding: var(--space-8) var(--space-10);
    }

    .login-right {
        flex: 0 0 58%;
    }

    .login-hero-shape {
        width: 380px;
        height: 420px;
    }

    .login-hero-image {
        width: 320px;
    }

    .login-stats-badge {
        top: 20%;
        right: 15%;
    }

    .login-feature-card {
        bottom: 15%;
        left: 10%;
        max-width: 300px;
    }
}

/* ============================================
   EXTRA LARGE SCREENS (1400px and up)
   ============================================ */
@media (min-width: 1400px) {
    .login-left {
        padding: var(--space-10) var(--space-12);
    }

    .login-form-wrapper {
        max-width: 420px;
    }
}

/* ============================================
   ACCESSIBILITY & REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .login-hero-shape {
        animation: none;
    }

    .login-stats-badge,
    .login-feature-card {
        animation: none;
    }

    .login-btn {
        transition: none;
    }
}

/* ============================================
   HIGH CONTRAST MODE SUPPORT
   ============================================ */
@media (prefers-contrast: high) {
    .input-with-icon .form-input {
        border-width: 3px;
    }

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

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects that don't work well on touch */
    .login-btn:hover {
        transform: none;
    }

    /* Ensure adequate spacing between interactive elements */
    .login-options {
        gap: var(--space-4);
    }
}