/**
 * Responsive Design Styles - Al Paso Billar POS
 * Mobile-first approach with progressive enhancement
 * 
 * Viewport Support: 320px to 1920px
 * Touch Targets: Minimum 44×44px
 * No horizontal scrolling
 * 
 * Validates: Requirements 9.4
 */

/* ========================================
   MOBILE-FIRST BASE STYLES (320px+)
   ======================================== */

/* Prevent horizontal scrolling at the root level */
html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

/* Ensure all containers respect viewport bounds */
*,
*::before,
*::after {
    box-sizing: border-box;
    max-width: 100vw;
}

/* ========================================
   TOUCH TARGET SIZING (Minimum 44×44px)
   WCAG 2.5.5 Target Size (Enhanced)
   ======================================== */

/* Base touch target sizing for interactive elements */
button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"],
input[type="range"],
select,
a,
[tabindex]:not([tabindex="-1"]) {
    /* Minimum touch target size */
    min-width: 44px;
    min-height: 44px;
}

/* Ensure buttons have adequate padding for touch targets */
button,
[role="button"],
.btn {
    padding: 12px 16px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Form inputs - touch-friendly sizing */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="url"],
textarea,
select {
    min-height: 44px;
    padding: 12px 16px;
    font-size: 16px; /* Prevents iOS zoom on focus */
}

/* Checkbox and radio buttons - larger touch area */
input[type="checkbox"],
input[type="radio"] {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    margin: 10px; /* Creates 44px total touch target */
}

/* Links in navigation and lists */
nav a,
.navbar a,
.menu-item {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 12px 16px;
}

/* Card components - touch-friendly */
.card {
    min-height: 44px;
}

.card-button,
.card-action {
    min-width: 44px;
    min-height: 44px;
    padding: 12px;
}

/* FAB (Floating Action Button) */
.fab {
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icon buttons */
.icon-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Search results and list items */
.list-item,
.search-result {
    min-height: 44px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
}

/* ========================================
   MOBILE LAYOUT (320px - 480px)
   Default styles, no media query needed
   ======================================== */

/* Root container - full width mobile */
.app-container {
    width: 100%;
    max-width: 100%;
    padding: 0 16px;
    margin: 0 auto;
}

/* Fixed navbar - mobile optimized */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    padding: 0 16px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Main content area - accounts for fixed navbar */
.main-content {
    padding-top: 56px;
    min-height: 100vh;
}

/* Fullscreen modal - 100% viewport */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2000;
    overflow-y: auto;
    overflow-x: hidden;
}

.modal-content {
    min-height: 100vh;
    padding: 16px;
    padding-top: 72px; /* Account for navbar */
}

/* Card grid - single column on mobile */
.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
}

/* Home cards - 2 column grid on mobile */
.home-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 16px;
}

.home-card {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    gap: 12px;
    min-height: 120px;
}

.home-card-icon {
    width: 48px;
    height: 48px;
}

.home-card-label {
    font-size: 14px;
    text-align: center;
}

/* Form layouts - stacked on mobile */
.form-group {
    margin-bottom: 16px;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

/* Tables - horizontal scroll on mobile */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-wrapper table {
    min-width: 500px; /* Ensure table doesn't collapse too much */
}

/* Product list - compact on mobile */
.product-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.product-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    min-height: 44px;
}

.product-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
}

/* Account cards */
.account-card {
    padding: 16px;
    margin-bottom: 12px;
}

/* ========================================
   SMALL TABLETS (481px - 768px)
   ======================================== */

@media (min-width: 481px) {
    /* Wider container */
    .app-container {
        padding: 0 24px;
    }
    
    /* More spacious card grid */
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 20px;
    }
    
    /* Home cards can be larger */
    .home-card-grid {
        gap: 20px;
        padding: 20px;
    }
    
    .home-card {
        min-height: 140px;
    }
    
    .home-card-icon {
        width: 56px;
        height: 56px;
    }
    
    /* Form rows can be side-by-side for some fields */
    .form-row-inline {
        flex-direction: row;
    }
    
    /* Modal with some padding from edges */
    .modal-content {
        padding: 24px;
        padding-top: 80px;
    }
    
    /* Form actions side-by-side */
    .form-actions {
        flex-direction: row;
        justify-content: flex-end;
    }
    
    .form-actions button {
        flex: 0 0 auto;
    }
}

/* ========================================
   TABLETS (769px - 1024px)
   ======================================== */

@media (min-width: 769px) {
    /* Center content with max-width */
    .app-container {
        max-width: 800px;
        padding: 0 32px;
    }
    
    /* Navbar can be slightly taller */
    .navbar {
        height: 64px;
    }
    
    .main-content {
        padding-top: 64px;
    }
    
    /* Three column card grid */
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        padding: 24px;
    }
    
    /* Home cards - still 2x2 but larger */
    .home-card-grid {
        max-width: 400px;
        margin: 0 auto;
    }
    
    .home-card {
        min-height: 160px;
    }
    
    .home-card-icon {
        width: 64px;
        height: 64px;
    }
    
    /* Modal with centered content */
    .modal-content {
        max-width: 600px;
        margin: 0 auto;
        padding: 32px;
        padding-top: 96px;
    }
    
    /* Product list with larger images */
    .product-image {
        width: 80px;
        height: 80px;
    }
}

/* ========================================
   SMALL DESKTOPS (1025px - 1440px)
   ======================================== */

@media (min-width: 1025px) {
    /* Wider container for desktop */
    .app-container {
        max-width: 1000px;
    }
    
    /* Four column card grid */
    .card-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* Home cards - 4 columns on desktop */
    .home-card-grid {
        grid-template-columns: repeat(4, 1fr);
        max-width: 100%;
        gap: 24px;
    }
    
    .home-card {
        min-height: 180px;
    }
    
    /* Modal can have fixed max-width */
    .modal-content {
        max-width: 700px;
    }
    
    /* Tables don't need horizontal scroll */
    .table-wrapper {
        overflow-x: visible;
    }
    
    .table-wrapper table {
        min-width: auto;
    }
}

/* ========================================
   LARGE DESKTOPS (1441px - 1920px)
   ======================================== */

@media (min-width: 1441px) {
    /* Max container width for large screens */
    .app-container {
        max-width: 1200px;
    }
    
    /* Larger navbar for better spacing */
    .navbar {
        height: 72px;
        padding: 0 32px;
    }
    
    .main-content {
        padding-top: 72px;
    }
    
    /* Five column card grid for large displays */
    .card-grid {
        grid-template-columns: repeat(5, 1fr);
    }
    
    /* Larger modal for better readability */
    .modal-content {
        max-width: 800px;
        padding: 40px;
        padding-top: 104px;
    }
    
    /* Larger product images */
    .product-image {
        width: 100px;
        height: 100px;
    }
}

/* ========================================
   LANDSCAPE MOBILE OPTIMIZATIONS
   ======================================== */

@media (max-height: 500px) and (orientation: landscape) {
    /* Reduce navbar height in landscape */
    .navbar {
        height: 48px;
    }
    
    .main-content {
        padding-top: 48px;
    }
    
    /* Compact modals in landscape */
    .modal-content {
        padding: 16px;
        padding-top: 56px;
    }
    
    /* Reduce home card sizes */
    .home-card {
        min-height: 100px;
    }
    
    .home-card-icon {
        width: 40px;
        height: 40px;
    }
    
    /* Compact forms in landscape */
    .form-group {
        margin-bottom: 12px;
    }
    
    .form-actions {
        margin-top: 16px;
    }
}

/* ========================================
   TOUCH DEVICE OPTIMIZATIONS
   ======================================== */

@media (hover: none) and (pointer: coarse) {
    /* Remove hover states on touch devices */
    button:hover,
    [role="button"]:hover,
    .card:hover,
    a:hover {
        transform: none;
        box-shadow: inherit;
    }
    
    /* Add active states instead */
    button:active,
    [role="button"]:active,
    .card:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
    
    /* Larger touch targets for all interactive elements */
    .list-item:active,
    .search-result:active {
        background-color: rgba(0, 0, 0, 0.05);
    }
    
    /* Remove double-tap zoom on iOS */
    button,
    [role="button"],
    input,
    select,
    textarea {
        touch-action: manipulation;
    }
}

/* ========================================
   HIGH DPI SCREENS
   ======================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ensure crisp borders and dividers */
    .navbar,
    .card,
    .list-item,
    .modal-content {
        border-width: 0.5px;
    }
}

/* ========================================
   ACCESSIBILITY - REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

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

@media print {
    /* Hide navigation and non-essential elements */
    .navbar,
    .fab,
    .modal-backdrop,
    button,
    .btn {
        display: none !important;
    }
    
    /* Remove fixed positioning */
    .modal {
        position: static;
        width: 100%;
        height: auto;
    }
    
    .modal-content {
        padding: 0;
        min-height: auto;
    }
    
    .main-content {
        padding-top: 0;
    }
    
    /* Ensure content fits page */
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    /* Avoid page breaks inside elements */
    .card,
    .list-item {
        break-inside: avoid;
    }
}

/* ========================================
   SAFE AREA INSETS (Notched Devices)
   ======================================== */

@supports (padding: env(safe-area-inset-bottom)) {
    /* Account for notch/Dynamic Island */
    .navbar {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
    
    /* Bottom safe area for fixed elements */
    .modal-content {
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
    
    /* FAB safe positioning */
    .fab-container {
        bottom: max(16px, env(safe-area-inset-bottom));
        right: max(16px, env(safe-area-inset-right));
    }
}

/* ========================================
   UTILITY CLASSES FOR RESPONSIVENESS
   ======================================== */

/* Hide on specific breakpoints */
.hide-mobile {
    display: none;
}

.hide-tablet {
    display: none;
}

.hide-desktop {
    display: none;
}

@media (min-width: 481px) {
    .hide-mobile {
        display: block;
    }
    
    .show-mobile-only {
        display: none;
    }
}

@media (min-width: 769px) {
    .hide-tablet {
        display: block;
    }
    
    .show-tablet-only {
        display: none;
    }
}

@media (min-width: 1025px) {
    .hide-desktop {
        display: block;
    }
    
    .show-desktop-only {
        display: none;
    }
}

/* Responsive text sizing */
.text-mobile {
    font-size: 14px;
}

@media (min-width: 481px) {
    .text-mobile {
        font-size: 16px;
    }
}

@media (min-width: 769px) {
    .text-mobile {
        font-size: 18px;
    }
}

/* Responsive spacing */
.spacing-mobile {
    padding: 16px;
}

@media (min-width: 481px) {
    .spacing-mobile {
        padding: 24px;
    }
}

@media (min-width: 769px) {
    .spacing-mobile {
        padding: 32px;
    }
}

@media (min-width: 1025px) {
    .spacing-mobile {
        padding: 40px;
    }
}