/* ===================================
   Dark Sidebar Styling for AdTrack Center
   Matches iPrintSource sidebar appearance
   =================================== */

/* Dark background for sidebar */
.aside {
    background-color: #1e1e2d !important;
    width: 125px !important;
}

/* ===================================
   Desktop Layout: Fixed Sidebar + Independent Scrolling
   Override Metronic defaults (265px width, 140px wrapper offset)
   to match our 125px narrow sidebar
   =================================== */
@media (min-width: 992px) {

    /* --- Sidebar width overrides --- */
    .aside {
        width: 125px !important;
    }
    .aside .aside-menu {
        width: 125px !important;
    }

    /* --- Sidebar: fixed position, full viewport height, independent scroll --- */
    /* IMPORTANT: overflow must be 'visible' so hover dropdown popups (position:fixed)
       can extend beyond the 125px sidebar width. The menu wrapper (#kt_aside_menu_wrapper)
       handles vertical scrolling internally via hover-scroll-y class. */
    .aside-fixed .aside {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 125px !important;
        height: 100vh;
        z-index: 101;
        overflow: visible !important;
    }

    /* Override Bootstrap overflow-lg-auto utility class to keep overflow visible.
       Without this, hover popups get clipped at the aside boundary. */
    #kt_aside.aside {
        overflow: visible !important;
    }

    /* The menu wrapper needs hidden horizontal overflow to prevent a scrollbar
       (menu text can be slightly wider than the narrow 125px sidebar).
       Vertical overflow is handled by the hover-scroll-y Metronic class. */
    #kt_aside_menu_wrapper {
        overflow-x: hidden !important;
    }

    /* --- Wrapper: offset by sidebar width so content doesn't go under sidebar --- */
    .aside-enabled.aside-fixed .wrapper {
        padding-left: 125px !important;
    }

    /* --- Header: offset by sidebar width when fixed --- */
    .aside-enabled.aside-fixed.header-fixed .header {
        left: 125px !important;
    }

    /* --- Content area: proper scroll behavior under fixed header --- */
    .aside-enabled.aside-fixed.header-fixed .wrapper {
        padding-top: 65px;
    }

    /* --- Minimized sidebar (future use) --- */
    .aside-enabled.aside-fixed[data-kt-aside-minimize=on] .wrapper {
        padding-left: 75px !important;
    }
    .aside-enabled.aside-fixed.header-fixed[data-kt-aside-minimize=on] .header {
        left: 75px !important;
    }
}

/* ===================================
   Menu text colors for dark sidebar
   =================================== */
.aside .menu-title,
.aside .menu-link {
    color: #9899ac !important;
}

.aside .menu-link:hover,
.aside .menu-link.active {
    color: white !important;
}

/* Icon colors */
.aside .menu-icon i {
    color: #9899ac !important;
}

.aside .menu-link:hover .menu-icon i,
.aside .menu-link.active .menu-icon i {
    color: white !important;
}

/* Quick actions button at bottom */
.aside .btn-custom {
    color: #9899ac;
}

.aside .btn-custom:hover {
    color: white;
}

/* Aside footer styling */
.aside-footer {
    background-color: #1e1e2d;
}

/* ===================================
   Sidebar scrollbar styling (thin, subtle)
   =================================== */
.aside::-webkit-scrollbar {
    width: 4px;
}

.aside::-webkit-scrollbar-track {
    background: transparent;
}

.aside::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

.aside::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* Firefox scrollbar */
.aside {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

/* ===================================
   Hover popup safe zone (prevents mouseout gap)
   When moving the mouse from the sidebar icon to the dropdown popup,
   a diagonal mouse path can briefly exit the hover target, triggering
   Metronic's 200ms mouseout timeout and closing the popup before the
   user can click a menu item. This invisible pseudo-element creates a
   bridge zone between the sidebar icon and the popup to keep the hover
   alive during the transition.
   =================================== */
@media (min-width: 992px) {
    /* Extend the hover zone of each root menu item to bridge to the popup */
    #kt_aside_menu > .menu-item[data-kt-menu-trigger].show::after {
        content: '';
        position: absolute;
        top: 0;
        right: -20px;
        width: 20px;
        height: 100%;
        z-index: 100;
    }
}