/* Mobile Layout for Screen Width <= 800px */
@media screen and (max-width: 800px) {

    /* Update Body Layout */
    body {
        flex-direction: column !important;
        overflow: auto !important;
        /* Allow scrolling if needed, or keep hidden if individual sections scroll */
    }

    /* Transform Sidebar to Top Navigation Bar */
    aside#mainSidebar {
        width: 100% !important;
        height: auto !important;
        min-height: 60px;
        /* Minimum touch target height */
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding: 0 1rem !important;
        gap: 0.5rem !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        position: relative !important;
        z-index: 50 !important;
        /* Ensure it stays on top */

        /* Reset transitions that might look weird when resizing */
        transition: none !important;
    }

    /* Ensure sidebar is not affected by collapsed/expanded classes */
    aside#mainSidebar.sidebar-collapsed,
    aside#mainSidebar.sidebar-expanded {
        width: 100% !important;
    }

    /* Hide Sidebar Header (Logo/Brand & Toggle Button) */
    aside#mainSidebar>div.mb-8 {
        display: none !important;
    }

    /* Hide Welcome/Profile Box (The blue box with initial) */
    aside#mainSidebar .my-4 {
        display: none !important;
    }

    /* Navigation Container Styling */
    aside#mainSidebar nav {
        flex-direction: row !important;
        width: auto !important;
        flex: none !important;
        justify-content: flex-start !important;
        /* Distribute icons evenly */
        align-items: center !important;
        gap: 0.5rem !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Reset spacing between nav items */
    aside#mainSidebar nav>*+* {
        margin-top: 0 !important;
        margin-left: 0 !important;
        /* Add horizontal spacing instead */
    }

    /* Nav Items Styling */
    .sidebar-nav-item {
        padding: 0.75rem !important;
        justify-content: center !important;
        border-radius: 0.5rem !important;
        margin: 0 !important;
        background-color: transparent !important;
        /* Remove background to avoid clutter */
        box-shadow: none !important;
        color: #9ca3af !important;
        /* Default gray-400 equivalent */
    }

    /* Active State Styling */
    .sidebar-nav-item.bg-blue-600 {
        color: #2563eb !important;
        /* Blue-600 text */
        background-color: #eff6ff !important;
        /* Blue-50 bg */
    }

    .sidebar-nav-item:hover {
        background-color: #1f2937 !important;
        /* Darker gray on hover */
        color: white !important;
    }

    /* Hide Text Labels */
    .sidebar-text {
        display: none !important;
    }

    /* Hide the 'Logout' button explicitly (it's not in the requested list) */
    #btnLogout {
        display: none !important;
    }

    /* User Profile Area (Used for 'Bug & Idea') */
    #userProfileArea {
        /* Removed display: flex !important to respect JS visibility toggling */
        flex-direction: row !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
    }

    /* However, ensure 'Bug & Idea' link is visible if it's there */
    /* If #userProfileArea is hidden by JS, we might not see it. 
       But assuming layout allows it: */

    /* Main Content Area Adjustment */
    main {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        flex: 1 !important;
        padding-bottom: 60px;
        /* Add padding for bottom pagination or safe area */
    }

    /* Adjust page-specific headers if needed */
    section[id^="page-"] header {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Fix dashboard stats grid to 1 column on mobile */
    /* Exception: Calendar grid should remain 7 columns */
    .grid-cols-7 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    /* Override: Calendar grid and header must remain 7 columns */
    #calendarGrid.grid-cols-7,
    #calendarSection .grid.grid-cols-7:not(#calendarGrid) {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    }

    .md\:col-span-3,
    .md\:col-span-4 {
        grid-column: span 1 / span 1 !important;
    }

    /* Force equipment stats and asset stats grids to 2 columns on mobile */
    #equipStatsGrid,
    #assetStatsGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Additional adjustments for specifically requested "Only show Icons" */
    /* We successfully hid text with .sidebar-text */

    /* Hide Pagination Page Numbers on Mobile */
    #machinesPageNumbers,
    #assetsPageNumbers {
        display: none !important;
    }

    /* Mobile Asset Detail Drawer: Full Page View */
    #page-assets #detailDrawer {
        width: 100% !important;
        max-width: 100% !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100% !important;
        border-radius: 0 !important;
    }

    /* Dashboard Cards: Increase height on mobile for better visibility */
    /* Fix for 설비 반출 현황 and other status cards */
    /* Target the parent grid container inside #overviewGrid that contains the status cards */
    #overviewGrid>.grid.grid-rows-2 {
        height: auto !important;
        grid-template-rows: none !important;
    }

    /* Set fixed height of 200px for dashboard status cards */
    #maintenanceCard,
    #equipCheckoutCard,
    #equipIssueCard,
    #assetCheckoutCard,
    #assetIssueCard {
        height: 250px !important;
        min-height: 250px !important;
    }

    /* Ensure the data container can scroll properly */
    #equipCheckoutDataContainer,
    #equipIssueDataContainer,
    #assetCheckoutDataContainer,
    #assetIssueDataContainer {
        min-height: 0 !important;
    }

    /* Calendar: Mobile Layout Adjustments */
    /* Calendar container: Remove fixed height on mobile, allow natural flow */
    #calendarSection .bg-white.rounded-2xl {
        height: auto !important;
        min-height: auto !important;
    }

    /* Calendar grid: Ensure 7 columns are maintained and use 5 rows on mobile */
    #calendarGrid {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
        min-height: 300px !important;
    }


    /* Calendar grid area: Remove flex-1 to allow natural height */
    #calendarSection .flex-1.p-6 {
        flex: none !important;
    }

    /* Side panel: Remove left border on mobile, add top border instead */
    #calendarSection .border-l.border-gray-200 {
        border-left: none !important;
        border-top: 1px solid #e5e7eb !important;
    }

    /* Side panel: Full width on mobile */
    #calendarSection .w-full.lg\:w-80 {
        width: 100% !important;
    }
}