/**
 * SBM Admin Bar Enhancements
 * Styles for admin bar toggle functionality
 */

/* Admin menu transition for smooth toggle */
#adminmenumain { 
    transition: all 0.3s ease-in-out; 
}

/* Hide admin menu when toggle is active */
@media screen and (min-width: 783px) {
    .sbm-menu-hidden #adminmenumain { 
        display: none !important; 
    }
}


/* Base styles for all admin pages when menu is hidden */
.sbm-menu-hidden #wpcontent, 
.sbm-menu-hidden #wpfooter { 
    margin-left: 0 !important; 
    padding-left: 0;
}

/* Content styling */
#wpbody {
    padding-left: 30px;
    padding-right: 30px;
    max-width: 1600px;
    margin: 0 auto;
}

#wpbody-content > .wrap {
    padding-top: 10px;
}

/* Ensure containers don't overflow */
.sbm-menu-hidden #wpcontent {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding: 0 !important;
}

/* Fix for post/page screens */
.sbm-menu-hidden.post-new-php .interface-interface-skeleton,
.sbm-menu-hidden.post-php .interface-interface-skeleton { 
    left: 0 !important; 
    max-width: 100% !important;
}

/* Admin bar toggle button styling */
#wp-admin-bar-toggle-admin-menu .ab-icon {
    padding-top: 6px !important;
    margin-right:0;
}

#wp-admin-bar-toggle-admin-menu .ab-icon:before {
    top: 0px;
}

/* Make toggle button more visible when active */
body.sbm-menu-hidden #wp-admin-bar-toggle-admin-menu > .ab-item {
    background-color: #32373c;
    color: #00b9eb;
}

/* Fix for admin bar positioning */
html.wp-toolbar {
    padding-top: 32px !important;
}

/* Ensure admin bar is always visible */
#wpadminbar {
    display: block !important;
}

/* Add divider between items */
@media screen and (min-width: 783px) {
#wpadminbar > #wp-toolbar > ul > li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 8px;
    height: 16px;
    width: 1px;
    background: rgba(255,255,255,0.2);
}
}


/* Menu item padding */
#wpadminbar:not(.mobile) .quicklinks>ul>li>a {
    padding: 0 15px 0 15px;
}

/* Admin bar background */
    #wpadminbar {
        background: linear-gradient(90deg, #0f172a, #4b4e58ff);
        box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    }

    /* Menu item text */
    #wpadminbar .ab-item {
        color: #e5e7eb !important;
        font-weight: 500;
    }

    /* Hover effects */
    #wpadminbar .ab-item:hover,
    #wpadminbar .ab-item:focus {
        background: rgba(255,255,255,0.08) !important;
        color: #fff !important;
    }

    /* Dropdown styling */
    #wpadminbar .ab-sub-wrapper {

        background: #020617;
        border-radius: 6px;
        padding: 6px 0;
    }

    @media screen and (max-width: 782px) {
        #wpadminbar .ab-sub-wrapper {
            top: 100%;
        }
    }
    

    #wpadminbar .ab-icon {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 0px!important;
    }

/* ----------------------------------
   Horizontal scrolling admin bar
----------------------------------- */
/* @media (max-width: 960px) {

    Make toolbar scrollable
    #wpadminbar #wp-toolbar {
        overflow-x: auto;
        overflow-y: visible; 
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    Keep menu items inline
    #wpadminbar #wp-toolbar > ul {
        display: inline-flex;
        align-items: center;
        min-width: max-content;
    }

    #wpadminbar #wp-toolbar > ul > li {
        position: relative;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    Prevent dropdowns from forcing height
    #wpadminbar .ab-sub-wrapper {
        white-space: normal;
    }


} */

/* ----------------------------------
   FIX: Show custom admin bar items on mobile
----------------------------------- */
@media screen and (max-width: 782px) {

    /* Re-enable admin bar items */
    #wpadminbar .quicklinks > ul > li.ab-show-on-mobile {
        display: inline-flex !important;
        float: none !important;
    }

    /* Prevent WordPress mobile collapse */
    #wpadminbar .ab-top-menu > li.ab-show-on-mobile {
        display: inline-flex !important;
    }

    #wpadminbar .ab-show-on-mobile .ab-icon {
        font-size: 30px!important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ----------------------------------
   More menu styling
----------------------------------- */
#ab-more {
    display: none;
}

@media (max-width: 782px) {

    #ab-more {
        display: inline-flex !important;
    }

    #wpadminbar .ab-more-menu > .ab-item {
        font-size: 18px;
        /* padding: 0 14px; */
    }

    #wpadminbar #wp-admin-bar-ab-more .ab-sub-wrapper {
        background: #020617;
        min-width: 180px;
    }
}

.no-show {
    display: none;
}

/* ----------------------------------
   FIX: Remove indentation inside "More"
----------------------------------- */
#wpadminbar #wp-admin-bar-ab-more .ab-sub-wrapper {
    padding-left: 0;
}

#wpadminbar #wp-admin-bar-ab-more .ab-submenu > li > .ab-item {
    padding-left: 12px !important;
    padding-right: 12px;
}

/* Align icons + text nicely */
#wpadminbar #wp-admin-bar-ab-more .ab-item {
    display: flex;
    align-items: center;
    gap: 6px;
}


#wpadminbar .menupop li.hover>.ab-sub-wrapper, #wpadminbar .menupop li:hover>.ab-sub-wrapper {
    margin-left: -100%;
    margin-top: -32px;
}