/**
 * Humbrella Layout Fix - Tablet/iPad Centering + Desktop Sidebar
 * Version: 5.1 - Added collapsed sidebar support
 * Date: March 21, 2026
 */
/* =========================================
   DESKTOP (above 1024px)
   Sidebar visible with full width, FAB hidden
   ========================================= */
@media screen and (min-width: 1025px) {
    /* Sidebar styling - ensure full width and text visible */
    .sidebar-navigation {
        display: flex !important;
        flex-direction: column;
        width: 240px !important;
        min-width: 240px !important;
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        z-index: 100;
    }

    /* Collapsed sidebar override */
    .sidebar-navigation.collapsed {
        width: 60px !important;
        min-width: 60px !important;
    }

    /* Ensure nav text is visible */
    .sidebar-text {
        display: inline !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
    }

    /* Hide text when collapsed */
    .sidebar-navigation.collapsed .sidebar-text {
        opacity: 0 !important;
        width: 0 !important;
        overflow: hidden;
    }

    /* Ensure nav links display properly */
    .sidebar-link {
        display: flex !important;
        align-items: center;
        gap: 12px;
        white-space: nowrap;
    }

    /* FAB hidden on desktop */
    .fab-nav-container {
        display: none !important;
    }

    /* Body offset handled by .has-sidebar in layout.css */
    /* Collapsed offset handled by body.sidebar-collapsed in navigation.css */
}
/* =========================================
   TABLET (768px - 1024px)
   Hide sidebar, show FAB, remove body offset
   ========================================= */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    /* Remove body offset since we're hiding the sidebar */
    body.has-sidebar {
        margin-left: 0 !important;
    }

    /* Hide desktop sidebar */
    .sidebar-navigation {
        display: none !important;
    }

    /* Show mobile FAB menu */
    .fab-nav-container {
        display: block !important;
    }

    /* Ensure main content is full width and centered */
    .main-content {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    /* Card grids - 2 columns on tablet */
    .media-grid,
    .spaces-grid,
    .lessons-grid,
    .card-grid,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* =========================================
   MOBILE (below 768px)
   Sidebar hidden, FAB visible
   ========================================= */
@media screen and (max-width: 767px) {
    /* Hide sidebar */
    .sidebar-navigation {
        display: none !important;
    }

    /* Show FAB */
    .fab-nav-container {
        display: block !important;
    }

    /* No body offset on mobile */
    body.has-sidebar {
        margin-left: 0 !important;
    }
}