/* Sidebar collapse styles */
.myIcons{
    fill: transparent !important;
  }

body[data-sidebar="hidden"] .app-sidebar-menu {
    width: 70px !important;
}

body[data-sidebar="hidden"] .content-page {
    margin-left: 70px !important;
}

body[data-sidebar="hidden"] .topbar-custom {
    left: 70px !important;
}

/* Hide text and show only icons in collapsed state */
body[data-sidebar="hidden"] #sidebar-menu > ul > li > a span:not(.menu-arrow) {
    display: none !important;
}

body[data-sidebar="hidden"] #sidebar-menu > ul > li > a {
    padding: 15px 20px;
    text-align: center;
}

body[data-sidebar="hidden"] #sidebar-menu > ul > li > a i,
body[data-sidebar="hidden"] #sidebar-menu > ul > li > a svg {
    margin: 0 !important;
    width: 25px !important;
    height: 25px !important;
}

/* Hide submenus and other elements in collapsed state */
body[data-sidebar="hidden"] #sidebar-menu > ul > li > div.collapse {
    display: none !important;
}

body[data-sidebar="hidden"] #sidebar-menu > ul > li > a .menu-arrow,
body[data-sidebar="hidden"] #sidebar-menu .menu-title {
    display: none !important;
}

/* Hide logo in collapsed state */
body[data-sidebar="hidden"] .logo-box {
    display: none !important;
}

#sidebar-menu {
    width: 250px !important;
    padding: 0px 9px !important;
    position: relative !important;
    height: 100% !important;
    overflow: visible !important;
    transition: none !important; /* Prevent menu from transitioning */
}

/* Remove any overflow hidden from parent containers */
body, #wrapper, .content-page {
    overflow-x: visible !important;
}

/* Ensure the simplebar scroll wrapper doesn't hide content */
.simplebar-wrapper,
.simplebar-mask,
.simplebar-offset,
.simplebar-content-wrapper,
.simplebar-content {
    overflow: visible !important;
}

/* Base sidebar styles */
.app-sidebar-menu {
    position: fixed !important;
    overflow: visible !important;
    transition: width 0.2s ease !important;
    width: 250px !important;
    z-index: 1099 !important;
}

/* Sidebar collapse button styles */
.sidebar-collapse-btn {
    position: absolute !important;
    top: 50vh !important;
    transform: translateY(-50%) !important;
    right: -12px !important;
    z-index: 1099 !important;
    width: 24px !important;
    height: 24px !important;
    background: #fff !important;
    border: 1px solid var(--border) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;
    padding: 0 !important;
}

.sidebar-collapse-btn:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.16) !important;
    background-color: #f8f9fa !important;
}

/* Force sidebar container width change on button hover */
.button-toggle-menu.sidebar-collapse-btn:hover ~ .app-sidebar-menu {
    width: 250px !important;
}

/* Keep menu width constant when sidebar shrinks */
.button-toggle-menu.sidebar-collapse-btn:hover ~ .app-sidebar-menu #sidebar-menu,
.button-toggle-menu.sidebar-collapse-btn:hover ~ .app-sidebar-menu .simplebar-content #sidebar-menu {
    width: 260px !important;
    min-width: 260px !important;
}

/* Content transitions */
.content-page {
    position: relative !important;
    z-index: 1 !important;
    margin-left: 260px !important;
    transition: margin-left 0.2s ease !important;
}

.topbar-custom {
    transition: left 0.2s ease !important;
    left: 250px !important;
}

/* Collapsed state */
body[data-sidebar="hidden"] .app-sidebar-menu {
    width: 70px !important;
}

body[data-sidebar="hidden"] .content-page {
    margin-left: 70px !important;
}

body[data-sidebar="hidden"] .topbar-custom {
    left: 70px !important;
}

body[data-sidebar="hidden"] .sidebar-collapse-btn {
    right: -12px !important;
}

body[data-sidebar="hidden"] .sidebar-collapse-btn svg {
    transform: rotate(180deg) !important;
}

/* Ensure proper overflow handling */
.simplebar-wrapper,
.simplebar-mask,
.simplebar-offset,
.simplebar-content-wrapper,
.simplebar-content {
    overflow: visible !important;
}

/* Additional styles to maintain menu width */
.app-sidebar-menu .simplebar-content {
    width: 260px !important;
}

.app-sidebar-menu .simplebar-content-wrapper {
    width: 260px !important;
}

/* Hide elements in collapsed state */
body[data-sidebar="hidden"] #sidebar-menu > ul > li > a span:not(.menu-arrow),
body[data-sidebar="hidden"] #sidebar-menu > ul > li > a .menu-arrow,
body[data-sidebar="hidden"] #sidebar-menu .menu-title,
body[data-sidebar="hidden"] .logo-box {
    display: none !important;
}

body[data-sidebar="hidden"] #sidebar-menu > ul > li {
    position: relative !important;
    width: 55px !important;
}

body[data-sidebar="hidden"] #sidebar-menu > ul > li > a {
    padding: 15px 0 !important;
    width: 55px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    pointer-events: none !important; /* Disable click events */
}

body[data-sidebar="hidden"] #sidebar-menu > ul > li > a i,
body[data-sidebar="hidden"] #sidebar-menu > ul > li > a svg {
    margin: 0 !important;
    width: 25px !important;
    height: 25px !important;
}

body[data-sidebar="hidden"] #sidebar-menu > ul > li > div.collapse {
    display: none !important;
}

/* Ensure proper overflow handling */
.app-sidebar-menu,
#sidebar-menu,
.simplebar-wrapper,
.simplebar-mask,
.simplebar-offset,
.simplebar-content-wrapper,
.simplebar-content {
    overflow: visible !important;
}

/* Collapsed sidebar hover menu styles */
body[data-sidebar="hidden"] #sidebar-menu > ul > li {
    position: relative;
    width: 55px !important;
    margin: 0 auto !important;
}

body[data-sidebar="hidden"] #sidebar-menu > ul > li > a {
    padding: 15px 0 !important;
    width: 55px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Hide collapse by default in collapsed state */
body[data-sidebar="hidden"] #sidebar-menu > ul > li > .collapse {
    display: none !important;
    position: absolute !important;
    left: 70px !important;
    top: 0 !important;
    width: 150px !important;
    background: #fff !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08) !important;
    border-radius: 8px !important;
    padding: 0 0 !important;
    z-index: 1100 !important;
    border: 1px solid var(--border);
}

/* Show collapse only on hover */
body[data-sidebar="hidden"] #sidebar-menu > ul > li:hover > .collapse {
    display: block !important;
}

/* Enable pointer events for submenu items */
body[data-sidebar="hidden"] #sidebar-menu > ul > li > .collapse .nav-second-level {
    padding: 0 !important;
    pointer-events: auto !important;
    z-index: 1100 !important;
}

body[data-sidebar="hidden"] #sidebar-menu > ul > li > .collapse .nav-second-level li a {
    padding: 8px 15px !important;
    display: block !important;
    color: #2f384f !important;
    transition: all 0.3s ease !important;
    pointer-events: auto !important;
}

body[data-sidebar="hidden"] #sidebar-menu > ul > li > .collapse .nav-second-level li a:hover {
    color: #537aef !important;
    background-color: rgba(83, 122, 239, 0.1) !important;
}

/* Center icons in collapsed state */
body[data-sidebar="hidden"] #sidebar-menu {
    width: 70px !important;
    padding: 0 !important;
}

body[data-sidebar="hidden"] #sidebar-menu > ul {
    width: 70px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Create hover bridge */
body[data-sidebar="hidden"] #sidebar-menu > ul > li::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 15px;
    height: 100%;
    background: transparent;
}

body[data-sidebar="hidden"] #sidebar-menu > ul > li > .collapse::before {
    content: '';
    position: absolute;
    left: -15px;
    top: 0;
    width: 15px;
    height: 100%;
    background: transparent;
}

/* Mobile styles */
@media (max-width: 570px) {
    /* Reset sidebar width and position for mobile */
    body[data-sidebar="hidden"] .app-sidebar-menu {
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        width: 260px !important;
        z-index: 1060 !important;
        background: #fff !important;
    }

    /* Force full menu view on mobile regardless of data-sidebar state */
    body[data-sidebar="hidden"] #sidebar-menu {
        width: 100% !important;
    }

    body[data-sidebar="hidden"] #sidebar-menu > ul > li {
        width: 100% !important;
    }

    body[data-sidebar="hidden"] #sidebar-menu > ul > li > a {
        padding: 12px 20px !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        color: #2f384f !important;
    }

    /* Always show menu text on mobile */
    body[data-sidebar="hidden"] #sidebar-menu > ul > li > a span {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        margin-left: 10px !important;
        font-size: 0.938rem !important;
    }

    /* Style icons */
    body[data-sidebar="hidden"] #sidebar-menu > ul > li > a svg,
    body[data-sidebar="hidden"] #sidebar-menu > ul > li > a i {
        width: 20px !important;
        height: 20px !important;
        margin-right: 5px !important;
        opacity: 1 !important;
    }

    /* Style submenu */
    body[data-sidebar="hidden"] #sidebar-menu > ul > li > .collapse {
        position: static !important;
        width: 100% !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding-left: 45px !important;
    }

    body[data-sidebar="hidden"] #sidebar-menu > ul > li > .collapse .nav-second-level li a {
        padding: 8px 0 !important;
        color: #2f384f !important;
    }

    /* Hide collapse button on mobile */
    body[data-sidebar="hidden"] .sidebar-collapse-btn {
        display: none !important;
    }

    /* When menu is open */
    body[data-sidebar="hidden"].sidebar-mobile-open .app-sidebar-menu {
        transform: translateX(0) !important;
        box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15) !important;
    }

    /* Add overlay when menu is open */
    body[data-sidebar="hidden"].sidebar-mobile-open::before {
        content: '';
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1050;
    }

    /* Reset content margin */
    body[data-sidebar="hidden"] .content-page {
        margin-left: 0 !important;
    }

    /* Reset topbar position */
    body[data-sidebar="hidden"] .topbar-custom {
        left: 0 !important;
    }

    /* Hide the arrow toggle button */
    .button-toggle-menu.sidebar-collapse-btn {
        display: none !important;
    }

    .mobile-menu-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px !important;
        margin-left: 10px !important;
        cursor: pointer !important;
        z-index: 1060 !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        position: relative !important;
        width: 40px !important;
        height: 40px !important;
        transition: all 0.3s ease !important;
    }

    .mobile-menu-btn.active {
        background-color: rgba(83, 122, 239, 0.1) !important;
        border-radius: 8px !important;
    }

    .mobile-menu-btn.active svg {
        color: #537aef !important;
    }

    .mobile-menu-btn:hover {
        background-color: rgba(83, 122, 239, 0.1) !important;
        border-radius: 8px !important;
    }

    .mobile-menu-btn svg {
        width: 24px !important;
        height: 24px !important;
        color: #2f384f !important;
        transition: color 0.3s ease !important;
    }

    .mobile-menu-btn:hover svg {
        color: #537aef !important;
    }

    /* Ensure the button is always visible */
    .topbar-custom .mobile-menu-btn {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* Mobile menu button styles */
.mobile-menu-btn {
    display: none !important; /* Hidden by default */
}

@media (max-width: 570px) {
    .mobile-menu-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px !important;
        margin-left: 10px !important;
        cursor: pointer !important;
        z-index: 1060 !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        position: relative !important;
        width: 40px !important;
        height: 40px !important;
    }

    .mobile-menu-btn:hover {
        background-color: rgba(83, 122, 239, 0.1) !important;
        border-radius: 8px !important;
    }

    .mobile-menu-btn svg {
        width: 24px !important;
        height: 24px !important;
        color: #2f384f !important;
    }

    .mobile-menu-btn:hover svg {
        color: #537aef !important;
    }

    /* Ensure the button is always visible */
    .topbar-custom .mobile-menu-btn {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* ... rest of the mobile styles ... */
}

.blink-text {
    color: #ff4444;
    font-size: 1rem;
    font-weight: 500;
}