/* 
   MonthMart Responsive Enhancements
   Provides mobile-first adaptations for the admin/provider/customer dashboards
*/

/* =========================================
   Mobile View (Tablets & Phones: < 992px)
   ========================================= */
@media (max-width: 991.98px) {
    
    /* 1. Sidebar Off-Canvas Behavior */
    #sidebar {
        position: fixed;
        top: 0;
        left: -280px; /* Hide by default */
        width: 280px !important;
        height: 100vh;
        z-index: 9999;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 10px 0 30px rgba(0,0,0,0.2) !important;
    }

    #sidebar.show-mobile {
        left: 0 !important; /* Slide in */
    }

    /* Override collapsed state on mobile - it should always be full width when shown */
    #sidebar.collapsed {
        min-width: 280px !important;
    }
    #sidebar.collapsed .nav-link span,
    #sidebar.collapsed h3,
    #sidebar.collapsed .tracking-wider,
    #sidebar.collapsed .mt-auto span {
        display: inline !important;
    }
    #sidebar.collapsed .nav-link {
        text-align: left;
        padding: 0.875rem 1.5rem;
    }
    #sidebar.collapsed .nav-link i {
        margin-right: 0.5rem !important;
    }

    /* 2. Mobile Overlay (Backdrop) */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(3px);
        z-index: 9998;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .sidebar-overlay.show {
        display: block;
        opacity: 1;
    }

    /* 3. Main Content Spacing */
    .main-content {
        padding: 1.5rem !important; /* Reduce massive padding */
        width: 100%;
        overflow-x: hidden;
    }

    /* 4. Header & Top Bar */
    header {
        flex-wrap: wrap;
        gap: 1rem;
        margin-bottom: 2rem !important;
    }
    
    header h1 {
        font-size: 1.5rem !important; /* Smaller titles */
    }

    .sidebar-toggler {
        width: 40px !important;
        height: 40px !important;
        margin-right: 1rem !important;
    }

    /* User Dropdown Profile */
    header .dropdown-menu {
        position: absolute !important;
    }

    /* 5. Stat Cards & Grids */
    /* Ensure rows break properly */
    .row > [class*='col-'] {
        width: 100%; /* Force full width on small screens */
        margin-bottom: 1rem;
    }

    /* Unless specifically asked for grid (e.g. col-6 for 2 items) */
    .row > .col-6 { width: 50%; }

    /* Fix massive numbers inside stat cards */
    .stat-number {
        font-size: 2rem !important;
    }

    /* 6. Tables */
    .table-card-enhanced {
        overflow: hidden;
    }
    
    /* Make tables scroll horizontally */
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 0; /* Reset */
    }
    
    .table td, .table th {
        white-space: nowrap; /* Prevent wrapping in cells causing weird heights */
    }

    /* 7. Quick Actions */
    .quick-action-btn {
        margin-bottom: 1rem;
        width: 100%;
    }
}

/* =========================================
   Small Phones (< 576px)
   ========================================= */
@media (max-width: 575.98px) {
    .main-content {
        padding: 1rem !important;
    }
    
    /* Hide breadcrumbs on very small screens to save space */
    .breadcrumb {
        font-size: 0.75rem;
    }

    header h1 {
        font-size: 1.25rem !important;
    }

    /* Make the top profile button more compact */
    header .dropdown .bg-primary {
        width: 32px !important;
        height: 32px !important;
    }
    header .dropdown .fas.fa-user-circle {
        font-size: 1rem !important;
    }
}