/* ========================================
   SIDEBAR - simple plain dark, expand on hover
   No fancy gradients / accent bars / scaling.
   ======================================== */

/* Container: solid black, fixed under topbar, expand on hover */
.vertical-menu {
    width: var(--sidebar-width-collapsed) !important;
    position: fixed !important;
    top: var(--topbar-height);
    left: 0;
    bottom: 0;
    background: #15171c !important;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    transition: width 250ms ease;
    z-index: 1000;
    overflow: hidden;
}

.vertical-menu:hover {
    width: 240px !important;
    background: #15171c !important;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.vertical-menu:hover::-webkit-scrollbar { width: 6px; }
.vertical-menu:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 3px; }

.vertical-menu[data-simplebar] { height: 100%; }

#sidebar-menu { padding: 8px 0 24px 0 !important; }

/* Hide the legacy desktop toggle button */
#vertical-menu-btn,
.btn[id="vertical-menu-btn"] { display: none !important; }

/* === LOGO BOX (topbar) === */
.navbar-brand-box {
    width: var(--sidebar-width-collapsed) !important;
    min-width: var(--sidebar-width-collapsed) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    height: var(--topbar-height);
    text-align: center !important;
}
.navbar-brand-box .logo,
.navbar-brand-box .logo-sm {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.navbar-brand-box .logo-sm img { max-height: 30px; width: auto; margin: 0 !important; display: block; }
.navbar-brand-box .logo-lg,
.navbar-brand-box .logo-light .logo-lg,
.navbar-brand-box .logo-dark .logo-lg { display: none !important; }

/* Section labels — same vertical slot collapsed & expanded (prevents jump on hover) */
#sidebar-menu .menu-title {
    display: block !important;
    padding: 14px 18px 6px !important;
    margin: 0 !important;
    min-height: 26px !important;
    box-sizing: border-box !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1 !important;
    color: rgba(255, 255, 255, 0.35) !important;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 120ms ease, visibility 120ms ease;
}
.vertical-menu:not(:hover) #sidebar-menu .menu-title {
    visibility: hidden !important;
    opacity: 0 !important;
    /* keep min-height/padding — do NOT collapse to height:0 */
}
.vertical-menu:hover #sidebar-menu .menu-title {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Override legacy collapsed rules in site.css / modern-components.css that zero-out title height */
body.vertical-collpsed .vertical-menu #sidebar-menu .menu-title,
body.vertical-collapsed .vertical-menu #sidebar-menu .menu-title {
    display: block !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: auto !important;
    min-height: 26px !important;
    padding: 14px 18px 6px !important;
    margin: 0 !important;
    overflow: hidden !important;
}
body.vertical-collpsed .vertical-menu:hover #sidebar-menu .menu-title,
body.vertical-collapsed .vertical-menu:hover #sidebar-menu .menu-title {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Same fixed row height when legacy collapsed body class is active */
body.vertical-collpsed .vertical-menu:not(:hover) #sidebar-menu li > a,
body.vertical-collapsed .vertical-menu:not(:hover) #sidebar-menu li > a {
    min-height: 44px !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: center !important;
}

/* === MENU ITEMS === */
#sidebar-menu .metismenu { list-style: none; padding: 0; margin: 0; }

#sidebar-menu li { position: relative; margin: 0; }

#sidebar-menu li a {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    padding: 11px 18px !important;
    color: rgba(255, 255, 255, 0.65) !important;
    text-decoration: none !important;
    transition: background 150ms ease, color 150ms ease;
    border-radius: 0 !important;
    white-space: nowrap;
    font-weight: 500;
    font-size: 0.85rem;
}
#sidebar-menu li a i {
    font-size: 1.1rem;
    min-width: 22px;
    width: 22px;
    flex-shrink: 0;
    margin-right: 12px;
    text-align: center;
    color: inherit;
}
#sidebar-menu li a span {
    opacity: 0;
    visibility: hidden;
    white-space: nowrap;
    transition: opacity 120ms ease, visibility 120ms ease;
}
.vertical-menu:hover #sidebar-menu li a span {
    opacity: 1;
    visibility: visible;
}

/* Hover */
#sidebar-menu li a:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #ffffff !important;
}

/* === ACTIVE STATE — plain blue text + subtle bg, no purple, no thin left line === */
body[data-sidebar=dark] #sidebar-menu li a.active,
body[data-sidebar=dark] #sidebar-menu li.mm-active > a,
body[data-sidebar=dark] #sidebar-menu li.active > a,
#sidebar-menu li a.active,
#sidebar-menu li.mm-active > a,
#sidebar-menu li.active > a {
    background: rgba(59, 130, 246, 0.10) !important;
    background-image: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
body[data-sidebar=dark] #sidebar-menu li a.active i,
body[data-sidebar=dark] #sidebar-menu li.mm-active > a i,
body[data-sidebar=dark] #sidebar-menu li.active > a i,
#sidebar-menu li a.active i,
#sidebar-menu li.mm-active > a i,
#sidebar-menu li.active > a i { color: #60a5fa !important; }

/* === COLLAPSED: center icons, same row height as expanded === */
.vertical-menu:not(:hover) #sidebar-menu li > a {
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: center !important;
}
.vertical-menu:not(:hover) #sidebar-menu li > a i { margin-right: 0 !important; }
.vertical-menu:not(:hover) #sidebar-menu li > a span {
    /* keep in layout for width stability but invisible — don't display:none (avoids reflow) */
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* === SUB-MENU (children) === */
#sidebar-menu .sub-menu,
#sidebar-menu ul.sub-menu,
#sidebar-menu ul li ul.sub-menu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(0, 0, 0, 0.18);
    max-height: 0;
    overflow: hidden;
    transition: max-height 250ms ease;
}
/* Sub-menu opens only when hovering that category — not when hovering anywhere on sidebar */
.vertical-menu:hover #sidebar-menu li.mm-active:hover > .sub-menu,
.vertical-menu:hover #sidebar-menu li.mm-active:focus-within > .sub-menu {
    max-height: 600px;
}
.vertical-menu:not(:hover) #sidebar-menu .sub-menu { max-height: 0 !important; visibility: hidden; }

#sidebar-menu .sub-menu li { margin: 0 !important; }
#sidebar-menu .sub-menu li::marker { content: '' !important; display: none !important; }

body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li a,
body #sidebar-menu .metismenu .sub-menu li a,
#sidebar-menu ul li ul.sub-menu li a,
#sidebar-menu .sub-menu li a {
    padding: 8px 18px 8px 52px !important;
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.55) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    background: transparent !important;
    border: 0 !important;
}
body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li a:hover,
#sidebar-menu .sub-menu li a:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #ffffff !important;
    padding-left: 52px !important;
}
body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li a.active,
#sidebar-menu .sub-menu li a.active {
    background: rgba(59, 130, 246, 0.10) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Kill any decorative pseudo-element/bullet that other stylesheets paint on sub-menu items */
body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li a::before,
body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li a::after,
body #sidebar-menu .metismenu .sub-menu li a::before,
body #sidebar-menu .metismenu .sub-menu li a::after,
#sidebar-menu ul li ul.sub-menu li a::before,
#sidebar-menu ul li ul.sub-menu li a::after,
#sidebar-menu .sub-menu li a::before,
#sidebar-menu .sub-menu li a::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    border: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* Arrow indicator for parents */
#sidebar-menu li a.has-arrow:after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 16px;
    opacity: 0;
    transition: opacity 200ms ease, transform 200ms ease;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
}
.vertical-menu:hover #sidebar-menu li a.has-arrow:after { opacity: 1; }
.vertical-menu:hover #sidebar-menu li.mm-active > a.has-arrow:after { transform: rotate(180deg); color: #60a5fa; }

/* === MOBILE === */
.mobile-sidebar-header {
    display: none;
    padding: 12px 16px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.sidebar-logo img { max-height: 32px; }
.mobile-sidebar-close {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}
.mobile-sidebar-close:hover { background: rgba(255, 255, 255, 0.05); }

.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
    opacity: 0;
    transition: opacity 200ms ease;
}
.sidebar-overlay.active { display: block; opacity: 1; }

@media (max-width: 992px) {
    .vertical-menu {
        width: 240px !important;
        transform: translateX(-100%);
        transition: transform 250ms ease;
        top: 0;
    }
    .vertical-menu.active { transform: translateX(0); }
    .mobile-sidebar-header { display: flex; }
    .main-content { margin-left: 0; }
    .vertical-menu:hover { width: 240px !important; }
    #sidebar-menu .menu-title,
    #sidebar-menu li a span,
    #sidebar-menu li a.has-arrow:after { opacity: 1; }
    #vertical-menu-btn { display: inline-flex !important; }
}