/* ============================================
   MODERN SIDEBAR OVERRIDE STYLES
   Completely overrides Material Dashboard sidebar
   ============================================ */

/* RESET: Remove all Material Dashboard sidebar styles */
.sidebar:not(.modern-sidebar),
.sidebar:not(.modern-sidebar) *,
.sidebar .sidebar-wrapper,
.sidebar .sidebar-background,
.off-canvas-sidebar,
.sidebar .nav,
.sidebar .logo,
aside.sidebar:not(.modern-sidebar) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

/* Hide old sidebar completely - all variations */
body .wrapper > .sidebar:not(.modern-sidebar),
.wrapper > aside.sidebar:not(.modern-sidebar),
div.sidebar:not(.modern-sidebar),
.sidebar-wrapper:not(.modern-sidebar *) {
    display: none !important;
    visibility: hidden !important;
}

/* Show ONLY modern sidebar */
.modern-sidebar {
    display: flex !important;
}

/* Modern Sidebar - Main Panel Adjustments - Desktop Only */
@media (min-width: 1281px) {
    .wrapper {
        position: relative;
    }

    body .main-panel,
    .wrapper .main-panel {
        margin-left: 260px !important;
        width: calc(100% - 260px) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* When sidebar is collapsed */
    body:has(.modern-sidebar.collapsed) .main-panel,
    .wrapper:has(.modern-sidebar.collapsed) .main-panel {
        margin-left: 72px !important;
        width: calc(100% - 72px) !important;
    }

    /* Desktop - breadcrumb à esquerda com espaço para toggle button */
    .navbar-wrapper {
        justify-content: flex-start !important;
    }

    .modern-breadcrumb {
        margin-left: 58px !important;
        margin-right: auto !important;
        transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* Same spacing when sidebar is collapsed */
    body:has(.modern-sidebar.collapsed) .modern-breadcrumb {
        margin-left: 58px !important;
    }

    /* Toggle button position - adjust with sidebar state */
    .sidebar-toggle-btn {
        left: 270px;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    body:has(.modern-sidebar.collapsed) .sidebar-toggle-btn {
        left: 82px;
    }
}

/* Tablets and Mobile adjustments - Full width layout */
@media (max-width: 1280px) {
    body .main-panel,
    .wrapper .main-panel {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Ensure navbar breadcrumb doesn't overflow on tablets/mobile */
    .navbar-wrapper {
        max-width: 100%;
        overflow: hidden;
        display: flex !important;
        justify-content: flex-end !important;
    }

    .modern-breadcrumb {
        max-width: calc(100vw - 100px);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-left: auto !important;
        margin-right: 0 !important;
    }

    .breadcrumb-nav {
        max-width: 100%;
        overflow: hidden;
        display: flex;
        align-items: center;
    }

    .breadcrumb-link,
    .breadcrumb-current {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Ensure no sidebar toggle button appears on tablets/mobile */
    .sidebar-toggle-btn {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Add spacing at bottom for floating menu button */
    .content {
        padding-bottom: 100px !important;
    }

    /* Force hide old sidebar on mobile */
    .sidebar:not(.modern-sidebar),
    aside.sidebar:not(.modern-sidebar) {
        display: none !important;
        visibility: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
}

/* Remove sidebar-mini effects - Desktop Only */
@media (min-width: 1281px) {
    .sidebar-mini .main-panel,
    .sidebar-mini.sidebar-mini-hide .main-panel {
        margin-left: 260px !important;
        width: calc(100% - 260px) !important;
    }

    .sidebar-mini:has(.modern-sidebar.collapsed) .main-panel {
        margin-left: 72px !important;
        width: calc(100% - 72px) !important;
    }
}

/* Tablets and Mobile - override sidebar-mini */
@media (max-width: 1280px) {
    .sidebar-mini .main-panel,
    .sidebar-mini.sidebar-mini-hide .main-panel {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* Fix content spacing */
.content {
    padding: 30px 15px !important;
}

/* Ensure smooth transitions */
.main-panel {
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Prevent body overflow from sidebar */
body {
    overflow-x: hidden;
}

/* Fix wrapper positioning */
.wrapper {
    position: relative;
    top: 0;
    height: 100vh;
}

/* Material Dashboard compatibility - force hide old sidebar */
.sidebar.collapsed,
.sidebar-mini .sidebar {
    display: none !important;
}

/* Ensure modern sidebar is above everything */
.modern-sidebar {
    z-index: 1030 !important;
}

/* Ensure mobile menu button is visible on tablets/mobile */
@media (max-width: 1280px) {
    .mobile-menu-btn {
        display: flex !important;
        position: fixed;
        top: 16px;
        left: 16px;
        z-index: 998;
    }

    .mobile-menu-btn .material-symbols-rounded {
        pointer-events: none !important;
    }

    /* Hide sidebar by default on mobile, show when mobile-open class is added */
    .modern-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .modern-sidebar.mobile-open {
        transform: translateX(0);
    }
}

/* Fix any margin/padding conflicts */
* {
    box-sizing: border-box;
}

/* Additional Material Dashboard overrides - Desktop Only */
@media (min-width: 1281px) {
    .sidebar-mini .main-panel {
        margin-left: 260px !important;
    }

    .sidebar-mini:has(.modern-sidebar.collapsed) .main-panel {
        margin-left: 72px !important;
    }
}

/* Remove transition from Material Dashboard that conflicts */
.sidebar-mini .main-panel .content {
    padding-left: 15px !important;
}

/* Navbar adjustments for modern sidebar */
.navbar {
    margin-left: 0 !important;
}

/* Hide old minimize button completely */
.navbar-minimize,
#minimizeSidebar {
    display: none !important;
    visibility: hidden !important;
}

/* Hide navbar toggler - we use mobile-menu-btn from sidebar instead */
.navbar-toggler {
    display: none !important;
}

/* Ensure navbar collapse is always visible on desktop */
@media (min-width: 1281px) {
    .navbar-collapse {
        display: flex !important;
    }
}

/* On mobile/tablet, navbar should collapse but mobile-menu-btn handles it */
@media (max-width: 1280px) {
    .navbar-collapse {
        display: flex !important;
    }
}