/* ==========================================================================
   Responsive Design System for Marquardt India IMS
   Optimized for Smaller Devices & Mobile Screens (<= 768px & <= 480px)
   Large screens remain expansive, spacious, and premium as designed.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Mobile Hamburger Menu Button & Header Layout
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    /* Sleek, proportional floating hamburger button on the left */
    #openSidebarBtn {
        position: fixed !important;
        top: 0.625rem !important;
        left: 0.625rem !important;
        right: auto !important;
        padding: 0.45rem 0.6rem !important;
        border-radius: 0.625rem !important;
        background-color: #ffffff !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important;
        border: 1px solid rgba(226, 232, 240, 0.8) !important;
        z-index: 60 !important;
    }

    #openSidebarBtn svg {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }

    /* Floating notification bell on the far right - strictly separated, never colliding */
    #mobileNotificationBtn {
        position: fixed !important;
        top: 0.625rem !important;
        right: 0.625rem !important;
        left: auto !important;
        padding: 0.45rem 0.65rem !important;
        border-radius: 0.625rem !important;
        background-color: #ffffff !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important;
        border: 1px solid rgba(226, 232, 240, 0.8) !important;
        z-index: 60 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Safe header clearance so hamburger button (left) and notification button (right) never cover titles */
    main > div.flex-shrink-0:first-child {
        padding-left: 3.75rem !important;
        padding-right: 3.75rem !important;
    }
}

/* --------------------------------------------------------------------------
   2. Boxes, Cards, & Metrics for Mobile Devices (<= 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Content scroll area padding */
    main > div.flex-1 {
        padding: 0.625rem !important;
    }

    /* Top fixed header section */
    main > div.flex-shrink-0:first-child {
        padding-top: 0.625rem !important;
        padding-bottom: 0.625rem !important;
        padding-right: 0.75rem !important;
    }

    /* Page title on mobile */
    main > div.flex-shrink-0:first-child h1 {
        font-size: 1.125rem !important;
        line-height: 1.375rem !important;
    }

    /* Metric & KPI Stat Cards: Compact, sleek, proportional */
    .grid.grid-cols-2 > div,
    .grid.grid-cols-4 > div,
    .grid.lg\:grid-cols-4 > div {
        padding: 0.5rem 0.625rem !important;
        border-radius: 0.75rem !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    }

    /* KPI numbers: proportional to small screen */
    .grid.grid-cols-2 h3,
    .grid.grid-cols-4 h3,
    .grid.lg\:grid-cols-4 h3 {
        font-size: 1.125rem !important;
        line-height: 1.375rem !important;
        margin-top: 0.125rem !important;
    }

    /* KPI uppercase labels */
    .grid.grid-cols-2 p.uppercase,
    .grid.grid-cols-4 p.uppercase,
    .grid.lg\:grid-cols-4 p.uppercase {
        font-size: 0.625rem !important;
        letter-spacing: 0.04em !important;
    }

    /* Icon box containers in cards */
    .grid.grid-cols-2 .w-10.h-10,
    .grid.grid-cols-4 .w-10.h-10,
    .grid.lg\:grid-cols-4 .w-10.h-10 {
        width: 1.875rem !important;
        height: 1.875rem !important;
        border-radius: 0.5rem !important;
    }

    .grid.grid-cols-2 .w-10.h-10 i,
    .grid.grid-cols-4 .w-10.h-10 i,
    .grid.lg\:grid-cols-4 .w-10.h-10 i {
        font-size: 0.75rem !important;
    }

    /* Workspace Navigation & Feature cards (e.g. My Products, Bookings) */
    .grid.grid-cols-1 > a.group,
    .grid.sm\:grid-cols-2 > a.group,
    .grid.lg\:grid-cols-3 > a.group {
        padding: 0.75rem !important;
        border-radius: 0.75rem !important;
    }

    .grid.grid-cols-1 > a.group .w-12.h-12,
    .grid.sm\:grid-cols-2 > a.group .w-12.h-12,
    .grid.lg\:grid-cols-3 > a.group .w-12.h-12 {
        width: 2rem !important;
        height: 2rem !important;
        border-radius: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .grid.grid-cols-1 > a.group .w-12.h-12 i,
    .grid.sm\:grid-cols-2 > a.group .w-12.h-12 i,
    .grid.lg\:grid-cols-3 > a.group .w-12.h-12 i {
        font-size: 0.875rem !important;
    }

    .grid.grid-cols-1 > a.group h4,
    .grid.sm\:grid-cols-2 > a.group h4,
    .grid.lg\:grid-cols-3 > a.group h4 {
        font-size: 0.875rem !important;
    }

    .grid.grid-cols-1 > a.group p,
    .grid.sm\:grid-cols-2 > a.group p,
    .grid.lg\:grid-cols-3 > a.group p {
        font-size: 0.75rem !important;
        line-height: 1.05rem !important;
    }

    .grid.grid-cols-1 > a.group .mt-4,
    .grid.sm\:grid-cols-2 > a.group .mt-4,
    .grid.lg\:grid-cols-3 > a.group .mt-4 {
        margin-top: 0.5rem !important;
        padding-top: 0.375rem !important;
        font-size: 0.75rem !important;
    }

    /* Big Card Containers & Table Shells */
    .bg-white.rounded-2xl {
        border-radius: 0.75rem !important;
    }

    /* Stock Page Micro-Metrics Pills Bar */
    .overflow-x-auto.text-xs {
        font-size: 0.6875rem !important;
        gap: 0.375rem !important;
    }

    .overflow-x-auto.text-xs > div {
        padding: 0.2rem 0.5rem !important;
        border-radius: 0.5rem !important;
    }

    /* Category Navigation Pills */
    #categoryPillContainer {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
        gap: 0.25rem !important;
    }

    .cat-pill {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.6875rem !important;
        border-radius: 0.5rem !important;
    }

    /* View Mode Switcher Toolbar (Stock by Product vs All Serialized Units) */
    #tab-products,
    #tab-units {
        padding: 0.3rem 0.55rem !important;
        font-size: 0.7rem !important;
        border-radius: 0.5rem !important;
    }

    /* Stock Search Inputs & Buttons */
    #search-input {
        padding-top: 0.375rem !important;
        padding-bottom: 0.375rem !important;
        font-size: 0.75rem !important;
        border-radius: 0.625rem !important;
    }

    #search-btn {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.7rem !important;
        border-radius: 0.375rem !important;
    }

    /* Tables: Compact cell padding on smaller screens */
    table th {
        padding: 0.4rem 0.5rem !important;
        font-size: 0.6875rem !important;
    }

    table td {
        padding: 0.4rem 0.5rem !important;
        font-size: 0.75rem !important;
    }

    /* Product icon in table rows */
    table td .w-10.h-10,
    table td .w-9.h-9 {
        width: 1.75rem !important;
        height: 1.75rem !important;
        border-radius: 0.375rem !important;
    }

    table td .w-10.h-10 i,
    table td .w-9.h-9 i {
        font-size: 0.75rem !important;
    }

    /* Action buttons in tables */
    table td button,
    table td .request-btn {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.6875rem !important;
        border-radius: 0.375rem !important;
    }

    /* Serialized Units Accordion Drawer Box */
    table tr[id^="drawer-"] td {
        padding: 0.5rem !important;
    }

    table tr[id^="drawer-"] .bg-white.rounded-xl {
        padding: 0.5rem !important;
        border-radius: 0.625rem !important;
    }

    /* Individual serialized unit cards inside drawers */
    table tr[id^="drawer-"] .grid > div {
        padding: 0.4rem 0.5rem !important;
    }

    /* Floating Chatbot Toggle: Compact & out of the way */
    #chatToggle {
        width: 2.5rem !important;
        height: 2.5rem !important;
        bottom: 1rem !important;
        right: 1rem !important;
        padding: 0 !important;
        box-shadow: 0 4px 14px rgba(0, 154, 154, 0.4) !important;
    }

    #chatToggle i {
        font-size: 0.95rem !important;
    }

    /* Floating Chat Window on Mobile */
    #chatWindow {
        width: calc(100vw - 1.5rem) !important;
        max-width: 380px !important;
        height: 65vh !important;
        bottom: 4rem !important;
        right: 0.75rem !important;
        border-radius: 0.875rem !important;
    }

    /* Modal Boxes: Perfectly scaled for mobile screens */
    #requestModal > div,
    .fixed.inset-0 .relative.w-full {
        max-width: calc(100vw - 1.5rem) !important;
        margin: 0.75rem !important;
        border-radius: 0.875rem !important;
    }

    #requestModal .p-6,
    .fixed.inset-0 .p-6 {
        padding: 0.875rem !important;
    }

    #requestModal .px-6.py-4,
    .fixed.inset-0 .px-6.py-4 {
        padding: 0.625rem 0.875rem !important;
    }
}

/* --------------------------------------------------------------------------
   Global Print Styles
   Ensure floating widgets, navigation, and background overlays are hidden
   -------------------------------------------------------------------------- */
@media print {
    #chatToggle,
    #chatWindow,
    #ai-assistant-widget,
    .no-print,
    .resize-handle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}