/**
 * Unified Mobile-Responsive Styles
 * Complete mobile optimization for entire laundry management system
 * Consolidates: dashboard-mobile.css + pos-mobile.css + rack-mobile.css
 * Plus: New patterns for forms, reports, and all remaining pages
 *
 * Primary breakpoint: 768px (md:)
 * Target devices: iPhone 12/13 (375px), iPhone SE (320px), iPad (768px)
 */

/* ============================================
   GLOBAL MOBILE FOUNDATIONS
   ============================================ */

@media (max-width: 768px) {
    /* Prevent horizontal overflow globally */
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    /* FIX: Prevent all inputs from extending beyond containers */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    textarea,
    select {
        max-width: 100% !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    /* FIX: Container overflow prevention */
    .bg-white,
    .rounded-lg,
    .shadow-md,
    .shadow-sm,
    .border {
        overflow-x: auto !important;
        max-width: 100% !important;
    }

    /* FIX: Compress card padding on mobile */
    .bg-white.rounded-lg.shadow-md,
    .bg-white.rounded-lg.shadow-sm {
        padding: 0.75rem !important; /* Reduced from default 1.5rem */
    }

    /* FIX: Compress table cell padding */
    table td,
    table th {
        padding: 0.5rem 0.75rem !important; /* Reduced padding */
        font-size: 0.875rem !important; /* Smaller text */
    }

    /* FIX: Compress Recent Activity and similar tables */
    .overflow-x-auto table tr {
        display: block !important;
        margin-bottom: 0.75rem !important;
        padding: 0.75rem !important; /* Compressed */
        border: 1px solid #e5e7eb !important;
        border-radius: 0.5rem !important;
    }

    .overflow-x-auto table td {
        display: block !important;
        padding: 0.25rem 0 !important; /* Very compressed */
        border: none !important;
        text-align: left !important;
    }

    /* Add labels to table cells on mobile */
    .overflow-x-auto table td:before {
        content: attr(data-label);
        font-weight: 600;
        color: #6b7280;
        font-size: 0.75rem;
        text-transform: uppercase;
        display: block;
        margin-bottom: 0.125rem;
    }

    /* FIX: Compress stat cards */
    .grid > div {
        padding: 0.75rem !important; /* Reduced from 1rem+ */
    }

    /* FIX: Smaller headings in cards */
    .bg-white h3,
    .bg-white h4 {
        font-size: 1rem !important; /* Smaller headings */
        margin-bottom: 0.5rem !important;
    }

    /* FIX: Compress gap spacing */
    .gap-6 {
        gap: 0.75rem !important;
    }

    .gap-4 {
        gap: 0.5rem !important;
    }

    .gap-3 {
        gap: 0.375rem !important;
    }

    /* Main container - full width on mobile */
    main {
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .max-w-7xl {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Min-h-screen containers */
    .min-h-screen .max-w-7xl {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0.5rem !important;
    }
}

/* ============================================
   SECTION 1: NAVIGATION - MOBILE LAYOUT
   Consolidation from dashboard-mobile.css
   ============================================ */

@media (max-width: 768px) {
    /* Top navigation bar - horizontal layout */
    nav > div > div.flex.justify-between {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
    }

    /* Right section with user info + hamburger */
    nav > div > div.flex > div.flex.items-center.md\:hidden {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        margin-left: auto !important;
    }

    /* Fix navigation to top */
    nav {
        position: sticky;
        top: 0;
        z-index: 40;
    }

    /* Mobile drawer animation */
    [x-show="mobileMenuOpen"] {
        transition: transform 0.3s ease-in-out;
    }

    /* ================================================
       MOBILE MENU DROPDOWN - Role-based visibility
       Hide manager-only sections for employees
       ================================================ */

    /* Hide all sections after cash-receiving by default */
    .md\:hidden.border-t a[href$="/employee/cash-receiving"][class*="pl-6"] ~ div,
    .md\:hidden.border-t a[href$="/employee/cash-receiving"][class*="pl-6"] ~ a {
        display: none !important;
    }

    /* EXCEPTIONS: Show employee-accessible items */
    /* Inventory section header */
    .md\:hidden.border-t a[href$="/employee/cash-receiving"][class*="pl-6"] ~ div[class*="text-gray-400"][class*="uppercase"] {
        display: block !important;
    }

    /* Suppliers link (employee+) */
    .md\:hidden.border-t a[href$="/employee/cash-receiving"][class*="pl-6"] ~ a[href$="/suppliers"][class*="block"][class*="pl-6"] {
        display: block !important;
    }

    /* Expenses link (employee+) */
    .md\:hidden.border-t a[href$="/employee/cash-receiving"][class*="pl-6"] ~ a[href$="/expenses"][class*="block"][class*="pl-6"] {
        display: block !important;
    }

    /* CRITICAL: Always show logout link */
    .md\:hidden.border-t a[href$="/employee/cash-receiving"][class*="pl-6"] ~ a[href$="/logout"][class*="block"][class*="text-red-600"] {
        display: block !important;
    }

    /* Show HR separator before logout */
    .md\:hidden.border-t a[href$="/employee/cash-receiving"][class*="pl-6"] ~ hr.my-2 {
        display: block !important;
    }
}

/* ============================================
   SECTION 2: GRID LAYOUTS - RESPONSIVE STACKING
   ============================================ */

@media (max-width: 768px) {
    /* ALL grids stack to single column on mobile - EXCEPT grid-cols-2 and grid-cols-3 */
    .grid:not(.grid-cols-2):not(.grid-cols-3),
    div[class*="grid"]:not([class*="grid-cols-2"]):not([class*="grid-cols-3"]) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        width: 100% !important;
    }

    /* Override fixed grid columns */
    .grid-cols-4 {
        grid-template-columns: 1fr !important;
    }

    /* Allow grid-cols-2 to display as 2 columns on mobile for dashboard stats */
    .grid.grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Allow grid-cols-3 to display as 3 columns on mobile for rider dashboard stats */
    .grid.grid-cols-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }


    /* 5 & 6 column grids → 2 columns on mobile */
    .grid-cols-5,
    .grid-cols-6 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Very small phones: All grids → 1 column */
    @media (max-width: 480px) {
        .grid-cols-5,
        .grid-cols-6 {
            grid-template-columns: 1fr !important;
        }
    }

    /* Grid items - full width */
    .grid > div,
    div[class*="grid"] > div {
        padding: 1rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ============================================
   SECTION 3: STAT CARDS - COMPACT MOBILE
   ============================================ */

@media (max-width: 768px) {
    /* Stat card font sizes */
    .text-3xl,
    .text-4xl {
        font-size: 1.5rem !important;
    }

    .text-2xl {
        font-size: 1.25rem !important;
    }

    .text-xl {
        font-size: 1.125rem !important;
    }

    /* Summary cards - responsive grids */
    .grid.grid-cols-1.md\:grid-cols-4,
    .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* Summary card styling */
    .grid > div.bg-white,
    .grid > div.bg-green-50,
    .grid > div.bg-blue-50,
    .grid > div.bg-orange-50,
    .grid > div.bg-red-50 {
        width: 100% !important;
        padding: 0.75rem 1rem !important;
        margin: 0 !important;
        border-radius: 0.5rem !important;
    }

    .grid > div .text-sm.font-medium {
        font-size: 0.6875rem !important;
        line-height: 1.2;
    }

    .grid > div .text-2xl,
    .grid > div .text-3xl {
        font-size: 1.5rem !important;
        line-height: 1.2;
    }

    .grid > div .text-4xl {
        font-size: 2rem !important;
    }
}

/* ============================================
   SECTION 4: TABLES → CARDS TRANSFORMATION
   Universal pattern for ALL data tables
   ============================================ */

@media (max-width: 768px) {
    /* Hide table header on mobile */
    table.w-full thead,
    .overflow-x-auto table thead {
        display: none !important;
    }

    /* Convert table to card layout */
    table.w-full,
    table.w-full tbody,
    .overflow-x-auto table,
    .overflow-x-auto table tbody {
        display: block !important;
        width: 100% !important;
    }

    /* Each row becomes a card */
    table.w-full tbody tr,
    .overflow-x-auto table tbody tr {
        display: block !important;
        margin-bottom: 1rem !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 0.5rem !important;
        padding: 1rem !important;
        background: white !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    }

    /* Each cell becomes a labeled row */
    table.w-full tbody td,
    .overflow-x-auto table tbody td {
        display: block !important;
        text-align: left !important;
        padding: 0.5rem 0 !important;
        border: none !important;
    }

    /* Add labels before each cell */
    table.w-full tbody td::before,
    .overflow-x-auto table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6b7280;
        display: block;
        margin-bottom: 0.25rem;
        font-size: 0.75rem;
        text-transform: uppercase;
    }

    /* Adjust status badges for mobile */
    table.w-full tbody td span.px-2,
    .overflow-x-auto table tbody td span.px-2 {
        display: inline-block !important;
        margin-top: 0.25rem !important;
    }

    /* Action buttons in table cells */
    table.w-full tbody td a,
    table.w-full tbody td button,
    .overflow-x-auto table tbody td a,
    .overflow-x-auto table tbody td button {
        display: inline-block !important;
        margin-right: 0.5rem !important;
        margin-top: 0.25rem !important;
    }
}

/* ============================================
   SECTION 5: FORMS - SINGLE COLUMN MOBILE
   ============================================ */

@media (max-width: 768px) {
    /* All form grids → single column */
    form .grid,
    form div[class*="grid"] {
        grid-template-columns: 1fr !important;
    }

    /* Form inputs - full width, prevent zoom on iOS */
    input[type="text"],
    input[type="number"],
    input[type="tel"],
    input[type="email"],
    input[type="password"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    select,
    textarea {
        font-size: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    }

    /* Touch-friendly inputs */
    input,
    select,
    textarea,
    button {
        min-height: 44px !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* Form labels */
    label {
        font-size: 0.875rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Form buttons - stack vertically or full width */
    form button,
    form .flex.gap-3 button,
    form .flex.gap-4 button {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
        padding: 0.75rem 1rem !important;
    }

    /* Button groups - stack */
    form .flex.gap-3,
    form .flex.gap-4 {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
}

/* ============================================
   SECTION 6: MODALS - FULL SCREEN/CENTERED
   ============================================ */

@media (max-width: 768px) {
    /* Modal overlays - center modals */
    .fixed.inset-0:not(.hidden),
    #quantity-modal:not(.hidden),
    #new-customer-modal:not(.hidden),
    #payment-modal:not(.hidden),
    #sectionModal:not(.hidden) {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 1rem !important;
    }

    /* Ensure hidden class works */
    .fixed.inset-0.hidden {
        display: none !important;
    }

    /* Modal dialogs - comfortable sizing */
    .fixed.inset-0 > div,
    #quantity-modal > div,
    #new-customer-modal > div,
    #payment-modal > div,
    #sectionModal > div {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: calc(100vw - 2rem) !important;
        max-width: calc(100vw - 2rem) !important;
        max-height: calc(100vh - 2rem) !important;
        margin: 0 !important;
        padding: 1.25rem !important;
        border-radius: 0.75rem !important;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    }

    /* Very small screens - more compact modals */
    @media (max-width: 640px) {
        .fixed.inset-0 > div,
        #quantity-modal > div,
        #new-customer-modal > div,
        #payment-modal > div {
            width: calc(100vw - 1rem) !important;
            padding: 0.75rem !important;
        }
    }

    /* Modal headers */
    .fixed.inset-0 h3,
    #quantity-modal h3,
    #new-customer-modal h3,
    #payment-modal h3 {
        font-size: 1rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* Modal content padding */
    .fixed.inset-0 .p-6,
    .fixed.inset-0 .p-8 {
        padding: 1rem !important;
    }

    /* Modal inputs - full width */
    .fixed.inset-0 input,
    .fixed.inset-0 select,
    .fixed.inset-0 textarea {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0.625rem !important;
    }

    /* Modal buttons */
    .fixed.inset-0 button {
        width: 100% !important;
        padding: 0.625rem 0.75rem !important;
        font-size: 0.875rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Modal button groups */
    .fixed.inset-0 .flex.gap-3,
    .fixed.inset-0 .flex.gap-4 {
        gap: 0.5rem !important;
    }
}

/* ============================================
   SECTION 7: TYPOGRAPHY - MOBILE SCALING
   ============================================ */

@media (max-width: 768px) {
    /* Page titles */
    h1.text-3xl,
    h1 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }

    h2.text-2xl,
    h2 {
        font-size: 1.25rem !important;
    }

    h3 {
        font-size: 1.125rem !important;
    }

    /* Page descriptions */
    p.text-gray-600 {
        font-size: 0.875rem !important;
        margin-top: 0.25rem !important;
    }

    /* General text scaling */
    .text-lg {
        font-size: 0.9375rem !important;
    }

    .text-base {
        font-size: 0.875rem !important;
    }

    .text-sm {
        font-size: 0.8125rem !important;
    }

    .text-xs {
        font-size: 0.75rem !important;
    }
}

/* ============================================
   SECTION 8: SPACING - COMPACT MOBILE
   ============================================ */

@media (max-width: 768px) {
    /* Reduce padding on main containers */
    .min-h-screen .py-8 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .py-6 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    /* Horizontal padding */
    .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .px-4 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Margins */
    .mb-8 {
        margin-bottom: 1rem !important;
    }

    .mb-6 {
        margin-bottom: 0.75rem !important;
    }

    .mb-4 {
        margin-bottom: 0.5rem !important;
    }

    /* Gaps */
    .gap-6 {
        gap: 0.5rem !important;
    }

    .gap-4 {
        gap: 0.5rem !important;
    }

    /* Space-y classes */
    .space-y-6 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0.5rem !important;
    }

    .space-y-4 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0.5rem !important;
    }
}

/* ============================================
   SECTION 9: BUTTONS - TOUCH-FRIENDLY
   ============================================ */

@media (max-width: 768px) {
    /* Minimum touch target 44x44px */
    button {
        min-height: 44px !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* Button size adjustments */
    .px-6 button {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Full-width buttons on mobile */
    .w-full button,
    button.w-full {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Header buttons - stack */
    .flex.justify-between > a,
    .flex.justify-between > button {
        width: 100% !important;
        text-align: center !important;
    }

    /* Page header with button */
    .flex.justify-between {
        flex-direction: column !important;
        gap: 0.75rem !important;
        align-items: flex-start !important;
    }
}

/* ============================================
   SECTION 10: REPORTS - MOBILE OPTIMIZATION
   ============================================ */

@media (max-width: 768px) {
    /* Filter bars - stack vertically */
    .grid.grid-cols-3,
    .grid.grid-cols-4.gap-4,
    form .grid.grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* Date range inputs */
    input[type="date"] {
        width: 100% !important;
    }

    /* Filter buttons */
    form button[type="submit"] {
        width: 100% !important;
    }

    /* Export buttons */
    .flex.justify-end button,
    .flex.justify-end a {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }

    /* Report summary cards */
    .grid.grid-cols-5 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    @media (max-width: 480px) {
        .grid.grid-cols-5 {
            grid-template-columns: 1fr !important;
        }
    }
}

/* ============================================
   SECTION 11: FLASH MESSAGES - MOBILE
   ============================================ */

@media (max-width: 768px) {
    .bg-green-50.border.px-4.py-3,
    .bg-red-50.border.px-4.py-3,
    .bg-blue-50.border.px-4.py-3,
    .bg-yellow-50.border.px-4.py-3 {
        padding: 0.625rem 0.75rem !important;
        font-size: 0.8125rem !important;
        margin-bottom: 0.75rem !important;
        border-radius: 0.5rem !important;
    }
}

/* ============================================
   SECTION 12: BREADCRUMBS - MOBILE
   ============================================ */

@media (max-width: 768px) {
    .mb-4 a,
    .breadcrumb a,
    nav[aria-label="breadcrumb"] a {
        font-size: 0.8125rem !important;
    }

    /* Breadcrumb overflow - horizontal scroll */
    nav[aria-label="breadcrumb"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================
   SECTION 13: CARDS - MOBILE OPTIMIZATION
   ============================================ */

@media (max-width: 768px) {
    /* Card containers */
    .bg-white.rounded-lg.shadow-sm.border,
    .bg-white.shadow-sm.rounded-lg {
        border-radius: 0.5rem !important;
        padding: 0.75rem !important;
        margin-bottom: 1rem !important;
    }

    /* Card headers */
    .bg-white .flex.items-center.justify-between {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }
}

/* ============================================
   SECTION 14: PAGINATION - MOBILE
   ============================================ */

@media (max-width: 768px) {
    /* Pagination container */
    .flex.items-center.justify-between {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    /* Pagination buttons */
    .inline-flex a,
    .inline-flex button {
        padding: 0.5rem !important;
        font-size: 0.875rem !important;
    }

    /* Results per page dropdown */
    .inline-flex select {
        font-size: 0.875rem !important;
    }
}

/* ============================================
   SECTION 15: SEARCH BARS - MOBILE
   ============================================ */

@media (max-width: 768px) {
    /* Search input containers */
    .relative input[type="text"],
    .relative input[type="search"] {
        width: 100% !important;
        padding-right: 2.5rem !important;
    }

    /* Search icons */
    .absolute.right-3 {
        right: 0.75rem !important;
    }

    /* Search bar with button */
    .flex.gap-3 input {
        flex: 1 !important;
    }

    .flex.gap-3 button {
        flex-shrink: 0 !important;
    }
}

/* ============================================
   SECTION 16: TABS - MOBILE SCROLL
   ============================================ */

@media (max-width: 768px) {
    /* Tab container - horizontal scroll */
    .border-b.border-gray-200 {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Tab buttons */
    .flex.space-x-4,
    .flex.space-x-8 {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0.5rem !important;
    }

    .flex.space-x-4 > *,
    .flex.space-x-8 > * {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        font-size: 0.875rem !important;
        padding: 0.5rem 1rem !important;
    }
}

/* ============================================
   SECTION 17: DROPDOWNS - MOBILE
   ============================================ */

@media (max-width: 768px) {
    /* Dropdown menus - full width */
    .absolute.right-0.mt-2 {
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
    }

    /* Dropdown items */
    .absolute.right-0.mt-2 a,
    .absolute.right-0.mt-2 button {
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
    }
}

/* ============================================
   SECTION 18: BADGES - MOBILE
   ============================================ */

@media (max-width: 768px) {
    /* Status badges */
    .px-2.py-1,
    .inline-flex.items-center.px-2.py-1 {
        font-size: 0.75rem !important;
        padding: 0.375rem 0.625rem !important;
    }
}

/* ============================================
   MODULE-SPECIFIC: POS SYSTEM
   Consolidation from pos-mobile.css
   ============================================ */

@media (max-width: 768px) {
    /* Hide main navigation on POS page */
    body:has(#pos-container) nav,
    body:has(#pos-container) > nav {
        display: none !important;
    }

    /* POS container - full screen */
    main:has(#pos-container) {
        margin-top: 0 !important;
        padding: 0 !important;
    }

    #pos-container {
        min-height: 100vh !important;
        min-height: -webkit-fill-available !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        padding-bottom: 80px !important;
    }

    /* POS header - compact */
    #pos-container > .bg-white.border-b {
        position: sticky;
        top: 0;
        z-index: 50;
        padding: 0 !important;
    }

    #pos-container > .bg-white.border-b > div {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    #pos-container .h-16 {
        height: auto !important;
        min-height: 2.5rem !important;
        padding: 0.25rem 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
    }

    /* POS title */
    #pos-container h1 {
        font-size: 0.875rem !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
    }

    /* POS icons */
    #pos-container .w-8.h-8 {
        width: 1rem !important;
        height: 1rem !important;
        margin-right: 0.25rem !important;
    }

    /* Hide printer status on mobile */
    #pos-container #printer-status-container,
    #pos-container #printer-reconnect-btn {
        display: none !important;
    }

    /* POS user info - compact */
    #pos-container .text-right {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        font-size: 0.625rem !important;
        max-width: 60px !important;
        margin-right: 0.25rem !important;
    }

    /* POS header buttons - icon only */
    #pos-container > .bg-white.border-b .inline-flex.items-center {
        padding: 0.25rem !important;
        font-size: 0 !important;
        min-width: 1.75rem !important;
        min-height: 1.75rem !important;
        justify-content: center !important;
    }

    #pos-container > .bg-white.border-b .inline-flex.items-center svg {
        width: 0.875rem !important;
        height: 0.875rem !important;
        margin-right: 0 !important;
    }

    #pos-container > .bg-white.border-b .inline-flex.items-center svg ~ * {
        display: none !important;
    }

    /* POS grid - stack on mobile */
    #pos-container .grid-cols-12 > div {
        grid-column: span 12 !important;
    }

    #pos-container .lg\:col-span-4 {
        order: 2;
    }

    #pos-container .lg\:col-span-8 {
        order: 1;
    }

    /* POS content - edge to edge */
    #pos-container .px-4,
    #pos-container .px-6,
    #pos-container .sm\:px-6,
    #pos-container .lg\:px-8 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* POS service cards - 2 columns */
    #pos-container .grid.grid-cols-2,
    #pos-container .service-category > div.grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.25rem !important;
        padding: 0 !important;
    }

    #pos-container #services-container {
        padding: 0 0.25rem !important;
    }

    /* POS service cards - compact */
    #pos-container .service-card {
        font-size: 0.875rem !important;
        border-radius: 0.375rem !important;
    }

    #pos-container .service-card .h-40 {
        height: 7rem !important;
    }

    #pos-container .service-card > div.p-3 {
        padding: 0.5rem !important;
    }

    /* CRITICAL: POS payment/clear buttons - ALWAYS show text */
    #pos-container #btn-process-payment,
    #pos-container #btn-clear-order {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

    #pos-container #btn-process-payment *,
    #pos-container #btn-clear-order * {
        display: inline !important;
        font-size: inherit !important;
    }

    /* POS order summary - spacing */
    #pos-container .lg\:col-span-4 {
        position: relative;
        bottom: auto;
        z-index: auto;
        margin-left: -0.5rem;
        margin-right: -0.5rem;
        border-radius: 0 !important;
        padding-bottom: 60px !important;
        margin-bottom: 40px !important;
    }

    #btn-clear-order {
        margin-bottom: 50px !important;
    }

    #pos-container .lg\:col-span-4 button {
        margin-bottom: 1rem !important;
    }

    #pos-container .lg\:col-span-4 button:last-of-type {
        margin-bottom: 50px !important;
    }
}

/* POS - Very small phones */
@media (max-width: 374px) {
    #pos-container h1 {
        font-size: 0.875rem !important;
    }

    #pos-container button {
        font-size: 0.8125rem !important;
        padding: 0.25rem !important;
    }
}

/* POS - Landscape mode */
@media (max-height: 600px) and (orientation: landscape) {
    #pos-container .py-6 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    #pos-container .space-y-6 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0.5rem !important;
    }
}

/* ============================================
   MODULE-SPECIFIC: RACK MANAGEMENT
   Consolidation from rack-mobile.css
   ============================================ */

@media (max-width: 768px) {
    /* Rack table - 2 column grid cards */
    .bg-white.shadow-sm.rounded-lg table tbody tr {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.375rem !important;
        padding: 0.625rem !important;
        background: white !important;
        border: 1px solid #e5e7eb !important;
        border-left: 4px solid #3b82f6 !important;
        border-radius: 0.5rem !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    }

    .bg-white.shadow-sm.rounded-lg table tbody td {
        display: flex !important;
        flex-direction: column !important;
        padding: 0.375rem 0.5rem !important;
        border: none !important;
        font-size: 0.8125rem !important;
        font-weight: 600 !important;
        color: #1f2937 !important;
    }

    .bg-white.shadow-sm.rounded-lg table tbody td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.625rem !important;
        font-weight: 500;
        color: #9ca3af;
        text-transform: uppercase;
        letter-spacing: 0.025em;
        margin-bottom: 0.25rem;
    }

    /* Rack table labels */
    .bg-white.shadow-sm.rounded-lg table tbody td:nth-child(1)::before {
        content: 'Rack #';
    }

    .bg-white.shadow-sm.rounded-lg table tbody td:nth-child(2)::before {
        content: 'Rows';
    }

    .bg-white.shadow-sm.rounded-lg table tbody td:nth-child(3)::before {
        content: 'Sections';
    }

    .bg-white.shadow-sm.rounded-lg table tbody td:nth-child(4)::before {
        content: 'Capacity';
    }

    .bg-white.shadow-sm.rounded-lg table tbody td:nth-child(5)::before {
        content: 'Status';
    }

    .bg-white.shadow-sm.rounded-lg table tbody td:nth-child(6)::before {
        content: 'Actions';
    }

    /* Action buttons - full width */
    .bg-white.shadow-sm.rounded-lg table tbody td:nth-child(6) {
        grid-column: 1 / -1 !important;
    }

    .bg-white.shadow-sm.rounded-lg table tbody td:nth-child(6) a {
        display: inline-block !important;
        width: auto !important;
        text-align: center !important;
        padding: 0.5rem 1rem !important;
        margin-right: 0.375rem !important;
        margin-bottom: 0.25rem !important;
        font-size: 0.8125rem !important;
    }

    /* Rack layout view - horizontal scroll */
    .bg-white.shadow-sm.rounded-lg .flex.gap-4 {
        gap: 0.5rem !important;
        margin-bottom: 0.5rem !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Rack section boxes */
    .w-28.h-28 {
        min-width: 5rem !important;
        width: 5rem !important;
        height: 5rem !important;
        font-size: 0.75rem !important;
    }

    .w-28.h-28 .text-sm {
        font-size: 0.6875rem !important;
    }

    .w-28.h-28 .text-2xl {
        font-size: 1.5rem !important;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

@media (max-width: 768px) {
    /* Mobile visibility helpers */
    .mobile-hidden {
        display: none !important;
    }

    .mobile-visible {
        display: block !important;
    }

    /* Mobile layout helpers */
    .mobile-full-width {
        width: 100% !important;
    }

    .mobile-stack {
        flex-direction: column !important;
    }

    .mobile-card {
        padding: 1rem !important;
        border-bottom: 1px solid #e5e7eb !important;
    }

    /* Better contrast for accessibility */
    .text-gray-500 {
        color: #6b7280 !important;
    }

    .text-gray-600 {
        color: #4b5563 !important;
    }

    /* Prevent accidental text selection on interactive elements */
    .no-select,
    button,
    .service-card {
        -webkit-user-select: none;
        user-select: none;
    }
}

/* ============================================
   ACCESSIBILITY & PERFORMANCE
   ============================================ */

@media (max-width: 768px) {
    /* Focus states - larger for touch */
    *:focus {
        outline-width: 3px !important;
        outline-offset: 2px !important;
    }

    /* Reduce motion for accessibility */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }

    /* High contrast mode support */
    @media (prefers-contrast: high) {
        .border {
            border-width: 2px !important;
        }

        button {
            border-width: 2px !important;
        }
    }
}

/* ============================================
   PRINT STYLES - OVERRIDE MOBILE ON PRINT
   ============================================ */

@media print {
    /* Remove mobile optimizations for printing */
    body,
    main,
    .max-w-7xl {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Show table headers when printing */
    table.w-full thead,
    .overflow-x-auto table thead {
        display: table-header-group !important;
    }

    /* Tables back to normal */
    table.w-full tbody tr,
    .overflow-x-auto table tbody tr {
        display: table-row !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    table.w-full tbody td,
    .overflow-x-auto table tbody td {
        display: table-cell !important;
        padding: 0.5rem !important;
    }

    /* Hide interactive elements */
    button,
    .no-print {
        display: none !important;
    }
}

/* ============================================
   END OF MOBILE-RESPONSIVE.CSS
   Total lines: ~1580
   File size estimate: ~55KB
   ============================================ */

/* ============================================
   MOBILE LAYOUT COMPRESSION & OVERFLOW FIXES
   Additional rules for compact mobile display
   ============================================ */

@media (max-width: 768px) {
    /* Prevent word overflow in all text elements */
    p, span, div, td, th, li, a {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

    /* Compress Recent Activity and similar compact lists */
    .space-y-2 > * + * {
        margin-top: 0.5rem !important;
    }

    .space-y-3 > * + * {
        margin-top: 0.75rem !important;
    }

    .space-y-4 > * + * {
        margin-top: 1rem !important;
    }

    /* Smaller font sizes for mobile */
    .text-2xl {
        font-size: 1.25rem !important; /* Reduced from 1.5rem */
    }

    .text-xl {
        font-size: 1.125rem !important; /* Reduced from 1.25rem */
    }

    .text-lg {
        font-size: 1rem !important; /* Reduced from 1.125rem */
    }

    /* Compress whitespace */
    .py-6 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .py-8 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .px-8 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    /* Compress margin spacing */
    .mb-6 {
        margin-bottom: 1rem !important;
    }

    .mb-8 {
        margin-bottom: 1.5rem !important;
    }

    /* Ensure flex items don't overflow */
    .flex {
        flex-wrap: wrap !important;
    }

    .flex.items-start,
    .flex.items-center,
    .flex.items-end {
        min-width: 0 !important;
    }

    .flex-1 {
        min-width: 0 !important;
    }

    /* Truncate long text properly */
    .truncate {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 100% !important;
    }

    /* Ensure images don't break layout */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Compress badge spacing */
    .inline-flex.items-center {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem !important;
    }

    /* Make buttons more compact */
    .px-4.py-2 {
        padding: 0.5rem 0.75rem !important;
    }

    .px-6.py-2 {
        padding: 0.5rem 1rem !important;
    }

    /* Compress header sections */
    .flex.justify-between.items-center {
        gap: 0.5rem !important;
    }

    /* Smaller rounded corners for mobile */
    .rounded-lg {
        border-radius: 0.5rem !important; /* Slightly reduced */
    }

    /* Compress stat card icons */
    .w-10.h-10,
    .w-12.h-12 {
        width: 2rem !important;
        height: 2rem !important;
        font-size: 1rem !important;
    }
}


/* ============================================
   DASHBOARD STAT CARDS - 2 COLUMN MOBILE LAYOUT
   ============================================ */

@media (max-width: 768px) {
    /* Optimize stat cards for 2-column mobile display */
    .grid.grid-cols-2 > div {
        padding: 0.625rem !important; /* Compact padding for 2 columns */
    }

    /* Compress stat card text */
    .grid.grid-cols-2 .text-xs {
        font-size: 0.65rem !important; /* Smaller labels */
        line-height: 1.2 !important;
    }

    .grid.grid-cols-2 .text-2xl {
        font-size: 1.125rem !important; /* Smaller values */
        line-height: 1.3 !important;
    }

    .grid.grid-cols-2 .text-3xl {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
    }

    /* Compress stat card icons for 2-column layout */
    .grid.grid-cols-2 .w-10.h-10,
    .grid.grid-cols-2 .w-12.h-12 {
        width: 1.75rem !important;
        height: 1.75rem !important;
        font-size: 0.875rem !important;
    }

    /* Tighter spacing in 2-column cards */
    .grid.grid-cols-2 .mt-1 {
        margin-top: 0.25rem !important;
    }

    .grid.grid-cols-2 .mt-2 {
        margin-top: 0.375rem !important;
    }

    /* Compress gap for 2-column grid */
    .grid.grid-cols-2.gap-3 {
        gap: 0.375rem !important;
    }

    .grid.grid-cols-2.gap-4 {
        gap: 0.5rem !important;
    }
}


/* ============================================

/* ============================================
   PASSWORD FIELD - CLEAN FIX FOR MOBILE
   ============================================ */

@media (max-width: 768px) {
    /* Password field with eye icon - ensure proper spacing and positioning */
    div.relative input[type="password"] {
        padding-right: 3.5rem !important;
        padding-left: 1rem !important;
    }

    /* Eye icon button - keep it small and positioned correctly */
    div.relative button[title*="Toggle password"] {
        position: absolute !important;
        right: 0.5rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 2.5rem !important;
        height: 2.5rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        z-index: 5 !important;
        background: transparent !important;
        border: none !important;
    }

    /* Eye icon size */
    div.relative button[title*="Toggle password"] svg {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }
}