/* Modern Mini Sidebar Styles - Unified V4 */

:root {
    --sidebar-width-full: 240px;
    --sidebar-width-mini: 80px;
}

/* Sidebar Transition & Background */
.zSidebar {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), left 0.3s ease !important;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important; 
    z-index: 1050 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    direction: rtl !important; /* Move scrollbar to left edge */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.zSidebar-inner {
    direction: ltr !important; /* Restore content direction */
    width: 100%;
    height: auto;
    min-height: 100%;
}

/* Custom Premium Scrollbar - Left Side "Slider Strip" */
.zSidebar::-webkit-scrollbar {
    width: 4px !important;
}

.zSidebar::-webkit-scrollbar-track {
    background: transparent !important;
}

.zSidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 20px !important;
    border: 1px solid transparent !important;
    transition: all 0.3s ease !important;
}

.zSidebar:hover::-webkit-scrollbar-thumb {
    background: var(--primary-color, #2563eb) !important;
    box-shadow: 0 0 10px var(--primary-color, #2563eb);
}

.zSidebar:focus {
    outline: none !important;
}

/* Robust Icon Sizing for Binary SVGs (img tags) */
.zSidebar-menu li a img,
.zSidebar-menu li a svg {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

/* Sub-menu Icon Specific Sizing & Spacing */
.zSidebar-submenu li a img,
.zSidebar-submenu li a svg {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    margin-right: 12px !important;
    margin-top: 3px !important; /* Align with first line of wrapped text */
    flex-shrink: 0 !important;
}

/* Sub-menu Icon Specific Sizing & Spacing (Global) */
.zSidebar-submenu li a img,
.zSidebar-submenu li a svg {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    margin-right: 12px !important;
    margin-top: 3px !important;
    flex-shrink: 0 !important;
}

/* Sub-menu Link Flex Alignment & Wrapping (Global) */
.zSidebar-submenu li a {
    display: flex !important;
    align-items: flex-start !important;
    text-decoration: none !important;
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    transition: all 0.2s ease !important;
    white-space: normal !important;
    line-height: 1.4 !important;
}

/* Full Sidebar Mode - Reduced Indentation (ONLY for expanded mode) */
body:not(.zSidebar-mini-active) .zSidebar-submenu {
    padding: 0 !important;
    margin: 0 !important;
}

body:not(.zSidebar-mini-active) .zSidebar-submenu li a {
    padding: 8px 10px 8px 45px !important; /* Precisely aligned with main title */
}

body:not(.zSidebar-mini-active) .zSidebar-submenu li a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    padding-left: 50px !important;
}

.zMainContent {
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Base Layout Overrides */
body.zSidebar-mini-active .zSidebar {
    width: var(--sidebar-width-mini) !important;
}

body.zSidebar-mini-active .zMainContent {
    left: var(--sidebar-width-mini) !important;
    width: calc(100% - var(--sidebar-width-mini)) !important;
}

/* Mini Mode Element Styles (Icons, Text hiding, etc) */
body.zSidebar-mini-active .zSidebar-menu {
    padding: 0 !important;
    margin: 0 !important;
}

body.zSidebar-mini-active .zSidebar-menu > li {
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 2px !important; 
    position: relative;
}

/* Hide Logo & Text in Mini Mode */
body.zSidebar-mini-active .zSidebar .mx-26.mb-27,
body.zSidebar-mini-active .zSidebar-menu > li > a span {
    display: none !important;
}

/* Center Icons */
body.zSidebar-mini-active .zSidebar-menu > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important; 
    height: 40px;
    margin: 0 10px !important; 
    width: 60px !important; 
    border-radius: 8px !important; 
    position: relative;
}

body.zSidebar-mini-active .zSidebar-menu > li > a svg,
body.zSidebar-mini-active .zSidebar-menu > li > a img {
    margin: 0 !important;
    min-width: 22px;
    max-width: 22px;
    height: auto;
    object-fit: contain;
}

/* Indicators and Carats for Expanded Mode */
.zSidebar-menu > li > a.has-subMenu-arrow::after {
    content: ""; 
    position: absolute;
    right: 15px !important; /* Standard right-alignment for expanded mode */
    left: auto !important;  /* Force move from left edge if inherited */
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    width: 6px;
    height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='rgba(255,255,255,0.5)' d='M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
    display: block !important;
}

/* Rotate caret when expanded in full mode */
.zSidebar-menu > li > a.has-subMenu-arrow:not(.collapsed)::after {
    transform: translateY(-50%) rotate(90deg);
}

/* Ensure mini-mode overrides take precedence */
body.zSidebar-mini-active .zSidebar-menu > li > a.has-subMenu-arrow::after {
    right: 12px !important; /* Explicitly move to right of icon */
    left: auto !important;  
    width: 5px;
    height: 9px;
    transform: translateY(-50%) rotate(0deg);
    display: block !important;
}

body.zSidebar-mini-active .zSidebar-menu > li.floating-active > a.has-subMenu-arrow::after {
    transform: translateY(-50%) rotate(90deg);
}


/* Footer / Logout */
body.zSidebar-mini-active .zSidebar-fixed > ul:last-child p,
body.zSidebar-mini-active .zSidebar-fixed > ul:last-child li {
    display: none !important;
}

body.zSidebar-mini-active .zSidebar-fixed > ul:last-child a {
    justify-content: center !important;
    padding: 10px 0 !important;
    margin: 0 10px !important;
    width: 60px !important;
    display: flex !important;
}

/* Floating Sub-menu (Slide out) */
body.zSidebar-mini-active .zSidebar-menu > li > .collapse {
    display: none !important;
}

body.zSidebar-mini-active .zSidebar-menu > li > .collapse.show-floating {
    display: block !important;
    position: fixed !important;
    left: 80px !important;
    width: 200px !important;
    background: #1e293b;
    border-radius: 0 8px 8px 0;
    box-shadow: 10px 5px 25px rgba(0,0,0,0.5);
    z-index: 99999 !important;
    padding: 5px 0;
    border-left: 2px solid var(--primary-color, #2563eb);
    height: auto !important;
    animation: slideInRightPanelMini 0.2s ease-out;
}

body.zSidebar-mini-active .zSidebar-submenu {
    padding-left: 0 !important;
    list-style: none !important;
}

body.zSidebar-mini-active .zSidebar-submenu li a {
    padding: 8px 20px !important;
    font-size: 13px !important;
    color: rgba(255,255,255,0.8) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none;
    transition: all 0.2s ease;
}

body.zSidebar-mini-active .zSidebar-submenu li a svg,
body.zSidebar-mini-active .zSidebar-submenu li a img {
    width: 14px !important;
    height: 14px !important;
    stroke-width: 2;
    flex-shrink: 0;
    object-fit: contain;
}

body.zSidebar-mini-active .zSidebar-submenu li a svg path,
body.zSidebar-mini-active .zSidebar-submenu li a svg circle,
body.zSidebar-mini-active .zSidebar-submenu li a svg rect {
    stroke: rgba(255,255,255,0.5);
    fill: none;
}

body.zSidebar-mini-active .zSidebar-submenu li a:hover svg path,
body.zSidebar-mini-active .zSidebar-submenu li a.active svg path {
    stroke: var(--primary-color) !important;
}

body.zSidebar-mini-active .zSidebar-submenu li a:hover {
    background: rgba(255,255,255,0.1);
    color: #fff !important;
    padding-left: 25px !important;
}

body.zSidebar-mini-active .zSidebar-submenu li a.active {
    color: var(--primary-color, #2563eb) !important;
    background: rgba(255,255,255,0.05);
}

}

body.zSidebar-mini-active .sidebar-divider {
    display: block !important;
    width: 100% !important;
    background: transparent !important;
    margin: 15px 0 !important;
    padding: 0 !important;
    border: none !important;
    text-align: center !important;
}

body.zSidebar-mini-active .sidebar-divider p {
    display: block !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2px !important;
    color: rgba(255,255,255,0.7) !important;
    text-align: center !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    margin: 0 auto !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    width: 50px !important;
}

/* Mobile-Specific Refinement (Prevent drawer logic) */
@media screen and (max-width: 1023px) {
    .zSidebar {
        left: 0 !important; /* Always visible on mobile as mini-strip */
        width: var(--sidebar-width-mini) !important;
    }
    
    .zMainContent {
        left: var(--sidebar-width-mini) !important;
        width: calc(100% - var(--sidebar-width-mini)) !important;
    }

    /* Force all elements to look like mini-mode regardless of class on mobile */
    .zSidebar .mx-26.mb-27,
    .zSidebar-menu > li > a span {
        display: none !important;
    }

    .sidebar-divider {
        display: block !important;
        width: 100% !important;
        background: transparent !important;
        margin: 15px 0 !important;
        padding: 0 !important;
        border: none !important;
        text-align: center !important;
    }

    .sidebar-divider p {
        display: block !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.2px !important;
        color: rgba(255,255,255,0.7) !important;
        text-align: center !important;
        line-height: 1.2 !important;
        padding: 0 !important;
        margin: 0 auto !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        width: 50px !important;
    }

    .zSidebar-menu > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important; 
        height: 40px;
        margin: 0 10px !important; 
        width: 60px !important; 
        border-radius: 8px !important; 
        position: relative;
    }

    /* Force hide all legacy markers/indicators on mobile */
    .zSidebar-menu > li > a::before,
    .zSidebar-submenu li a::before,
    .zSidebar-menu > li > a::after {
        display: none !important;
    }

    /* Re-show our specific SVG caretaker on mobile */
    .zSidebar-menu > li > a.has-subMenu-arrow::after {
        display: block !important;
        right: 12px !important;
        width: 5px;
        height: 9px;
    }

    
    /* Hide redundant mobile menu toggle */
    .mobileMenu {
        display: none !important;
    }
}

/* Global Cleanups */
.zSidebar-submenu li a::before,
.zSidebar-menu > li > a::before {
    display: none !important;
}

/* Toggle Button Styling */
#sidebarToggle {
    cursor: pointer;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f8fafc;
}

@keyframes slideInRightPanelMini {
    from { transform: translateX(-10px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Tooltip Customization */
.tooltip-inner {
    background-color: var(--primary-color, #2563eb) !important;
    font-weight: 500;
}

/* Mini-Brand Icons - Only visible in collapsed sidebar mode */
#sidebarMenu li.mini-brand-only {
    display: none !important;
}

body.zSidebar-mini-active #sidebarMenu li.mini-brand-only {
    display: block !important;
}

body.zSidebar-mini-active #sidebarMenu li.mini-brand-only.sidebar-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin: 5px 15px 15px 15px !important;
    height: 1px !important;
    background: transparent !important;
}

.mini-brand-img {
    width: 24px !important;
    height: 24px !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}