/* ================================================
   RESPONSIVE OVERRIDE - Final cascade layer
   Loaded last to override inline CSS with highest specificity
   ================================================ */

/* ================================================
   CENTER PAGE TITLES IN NAVBAR
   ================================================ */

/* Center the page title in navbar header */
.navbar-top {
    justify-content: center !important;
    position: relative !important;
}

.navbar-top .navbar-brand {
    margin: 0 auto !important;
}

.topbar-right {
    position: absolute !important;
    right: 26px !important;
}

/* Force sidebar and main-content to respect responsive behavior */

/* Mobile (≤768px) - Icon sidebar (60px) ALWAYS */
@media (max-width: 768px) {
    .wrapper .sidebar {
        width: 60px !important;
    }
    
    /* Hide text labels on mobile - show only icons */
    .sidebar .brand-text,
    .sidebar .nav-section-label,
    .sidebar .sidebar-menu span:not(.icon),
    .sidebar .nav-footer div:not(:first-child) {
        display: none !important;
    }
    
    .sidebar .brand {
        justify-content: center !important;
        padding: 10px 0 18px !important;
    }
    
    .sidebar .sidebar-menu a {
        justify-content: center !important;
    }
    
    .sidebar .sidebar-menu a i {
        margin: 0 !important;
    }
    
    .sidebar .nav-footer {
        text-align: center !important;
    }
    
    /* Main content with 60px margin */
    .wrapper .main-content {
        margin-left: 60px !important;
    }
    
    /* Hide toggle button on mobile */
    .sidebar-toggle {
        display: none !important;
    }
    
    /* Dashboard Grids - Stack on mobile */
    .grid-main {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .grid-bottom {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

/* Medium Mobile to Small Tablet (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    /* Dashboard Grids - Stack on larger mobile too */
    .grid-main {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .grid-bottom {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

/* Tablet & Small Desktop (769px - 1100px) - Icon sidebar (70px) ALWAYS */
@media (min-width: 769px) and (max-width: 1100px) {
    .wrapper .sidebar {
        width: 70px !important;
    }
    
    /* Hide text labels on tablet - show only icons */
    .sidebar .brand-text,
    .sidebar .nav-section-label,
    .sidebar .sidebar-menu span:not(.icon),
    .sidebar .nav-footer div:not(:first-child) {
        display: none !important;
    }
    
    .sidebar .brand {
        justify-content: center !important;
        padding: 10px 0 18px !important;
    }
    
    .sidebar .sidebar-menu a {
        justify-content: center !important;
    }
    
    .sidebar .sidebar-menu a i {
        margin: 0 !important;
    }
    
    .sidebar .nav-footer {
        text-align: center !important;
    }
    
    /* Dashboard Grids - Stack on tablet too */
    .grid-main {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .grid-bottom {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .wrapper .main-content {
        margin-left: 70px !important;
    }
    
    /* Hide toggle button on tablet */
    .sidebar-toggle {
        display: none !important;
    }
}

/* Large Desktop (>1100px) - Full sidebar (250px) ALWAYS */
@media (min-width: 1101px) {
    .wrapper .sidebar {
        width: 250px !important;
    }
    
    .wrapper .main-content {
        margin-left: 250px !important;
    }
    
    /* Hide toggle button on desktop - no collapse needed */
    .sidebar-toggle {
        display: none !important;
    }
}

/* ================================================
   DESKTOP SIDEBAR FIX - Ensure fixed positioning
   ================================================ */

/* Force sidebar to be fixed and not scroll with content */
.wrapper .sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100vh !important;
    overflow-y: auto;
}

/* Ensure main content doesn't overlap with fixed sidebar */
.wrapper .main-content {
    min-height: 100vh;
}

/* ================================================
   MOBILE TABLE FIX - Force horizontal scrolling
   ================================================ */

/* Override inline overflow:hidden on mobile */
@media (max-width: 768px) {
    .table-container {
        overflow-x: auto !important;
        overflow-y: visible !important;
        display: block !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Force table to be wider than container */
    .table-container table {
        min-width: 800px !important;
    }
}