/* iPad Adaptation Override CSS */

/* 1. Global Adaptation */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    /* Touch Target Size Optimization */
    button, input, select, a, .clickable {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Scrollbar Optimization */
    ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
}

/* 2. Login Page Adaptation */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    /* Login Form Container Wrapper (#app) - Force align to left ONLY for login page */
    .login-page #app {
        left: 40px !important; /* Move closer to left edge (overriding Tailwind classes) */
        right: auto !important;
        transform: none !important;
        max-width: 420px !important; /* Limit container width */
        width: 100% !important;
    }

    /* Login Form Card */
    #login-card {
        max-width: 100% !important; 
        width: 100% !important; 
        margin-left: 0 !important; /* Align left inside #app */
    }

    /* Password Visibility for iPad */
    /* When class .ipad-secure-input is present, use text-security */
    .ipad-secure-input {
        -webkit-text-security: disc !important;
    }
    .ipad-secure-input.visible {
        -webkit-text-security: none !important;
    }
}

/* 3. Order Page Adaptation (index.html) */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    /* Product Grid - Dynamic by default */
    .ipad-product-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
        gap: 0 !important; /* Remove gap between cards */
    }
}

/* iPad Landscape Specific - Force 5 columns */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    .ipad-product-grid {
        grid-template-columns: repeat(5, 1fr) !important;
    }
    
    /* Ensure card width fits with gap */
    /* 5 columns with gap-3 (12px) is handled by grid layout automatically */
}

/* Product Card Styling */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .product-card-image {
        aspect-ratio: 1 / 1 !important; /* Change to square for better fit */
        object-fit: contain !important; /* Ensure full image is visible */
        width: 100% !important;
        height: auto !important; /* Override fixed height */
        padding: 4px; /* Optional: Add some padding */
    }
    
    .product-name-clamp {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.4;
        height: 2.8em; /* 2 lines approx */
    }
}

/* 4. Batch Assign Interface Optimization */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    /* Scale the modal content */
    .batch-assign-modal-content {
        transform: scale(calc(100vw / 1200));
        transform-origin: top center;
        width: 1200px !important; /* Base width */
        max-width: none !important;
        height: calc(95vh * (1200 / 100vw)) !important; /* Adjust height to fit scaled view */
        position: absolute;
        top: 2.5%;
        left: 50%;
        margin-left: -600px; /* Center 1200px width */
    }

    /* Horizontal Scroll for Table */
    .batch-table-scroll-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    
    /* Hide original button location if needed, or style them to be in the toolbar */
    .batch-header-buttons {
        display: none !important;
    }
}

/* 4. iPad Touch Behavior Control */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    /* Prevent double-tap to zoom */
    * {
        touch-action: manipulation;
    }
    
    /* Try to prevent swipe gestures for back navigation */
    body {
        overscroll-behavior-x: none;
        overscroll-behavior-y: contain;
    }
}

/* 5. Filter Button Styling */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    /* Ensure filter buttons have consistent green background when active */
    .bg-green-600.text-white.border-green-600 {
        background-color: #15803d !important;
        border-color: #15803d !important;
        color: white !important;
    }
    
    /* Ensure consistent white background when inactive */
    .bg-white.text-gray-700.border-gray-300 {
        background-color: white !important;
        border-color: #d1d5db !important;
        color: #374151 !important;
    }
    
    /* Specific fix for category buttons */
    button[v-for="cat in filters['大类']"] {
        transition: all 0.2s ease-in-out !important;
    }
    
    button[v-for="cat in filters['大类']"].bg-green-600 {
        background-color: #15803d !important;
        border-color: #15803d !important;
        color: white !important;
    }
}

/* 6. Bottom Padding Optimization */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    /* Reduce bottom padding for product grid */
    .ipad-product-grid {
        padding-bottom: 2rem !important;
    }
}