/* =============================================================================
   Admin sidebar — brand shell, white labels (light + dark)
   Scoped ONLY to #app-sidebar — does not affect page content.
   ============================================================================= */

html[data-theme="light"] #app-sidebar.side-bar {
    --sb-primary: var(--primary);
    --sb-bg: #ffffff;
    --sb-text: #0f172a;
    --sb-muted: #334155;
    --sb-icon: var(--primary);
    --sb-line: #e2e8f0;
    --sb-hover: rgba(var(--primary-rgb), 0.10);
}

html[data-theme="dark"] #app-sidebar.side-bar {
    --sb-primary: var(--primary);
    --sb-bg: #0b2433;
    --sb-text: #ffffff;
    --sb-muted: rgba(255, 255, 255, 0.92);
    --sb-icon: #ffffff;
    --sb-line: rgba(255, 255, 255, 0.16);
    --sb-hover: rgba(255, 255, 255, 0.12);
}

/* ── Shell ── */
html[data-theme] #app-sidebar.side-bar {
    background: var(--sb-bg) !important;
    border-right: 1px solid var(--sb-line) !important;
    box-shadow: none !important;
    color: var(--sb-text) !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

html[data-theme] #app-sidebar.side-bar .side-bar-logo {
    padding: 0.5rem 0.75rem !important;
    min-height: 120px !important;
    height: 120px !important;
    max-height: 120px !important;
    background: var(--sb-bg) !important;
    border-bottom: 1px solid var(--sb-line) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    position: relative !important;
    top: auto !important;
    z-index: 40 !important;
    flex: 0 0 120px !important;
    backdrop-filter: none !important;
    isolation: isolate !important;
}

html[data-theme] #app-sidebar.side-bar .side-bar-logo a {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
}

html[data-theme] #app-sidebar.side-bar .side-bar-logo img {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 108px !important;
    object-fit: contain !important;
}

html[data-theme] #app-sidebar.side-bar .side-bar-manu {
    padding: 0 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
}

/* Ensure menu scroll area is always usable even if flex fails */
html[data-theme] #app-sidebar.side-bar .side-bar-manu.sidebar-nav {
    max-height: calc(100vh - 120px) !important;
}

html[data-theme] #app-sidebar.side-bar .side-bar-manu ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Kill tree decorations from legacy CSS */
html[data-theme] #app-sidebar.side-bar .side-bar-manu li::before,
html[data-theme] #app-sidebar.side-bar .side-bar-manu li::after,
html[data-theme] #app-sidebar.side-bar .side-bar-manu li > a::before,
html[data-theme] #app-sidebar.side-bar .side-bar-manu li > a::after {
    display: none !important;
    content: none !important;
}

/* ── Every link: full width row + divider ── */
html[data-theme] #app-sidebar.side-bar .side-bar-manu a {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    padding: 0.5rem 0.875rem !important;
    min-height: 34px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sb-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--sb-text) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    transition: color 0.12s ease, background 0.12s ease !important;
    position: relative !important;
}

/* Submenu rows — color only on hover (never change margin/padding/width) */
html[data-theme] #app-sidebar.side-bar .side-bar-manu li.dropdown > ul > li > a:hover,
html[data-theme] #app-sidebar.side-bar .side-bar-manu li.dropdown > ul li.dropdown > a:hover,
html[data-theme] #app-sidebar.side-bar .side-bar-manu li.stock-items-nav > a:hover,
html[data-theme] #app-sidebar.side-bar .side-bar-manu li.stock-items-nav__section > a:hover,
html[data-theme] #app-sidebar.side-bar .side-bar-manu .sidebar-leaf-link:hover {
    background: var(--sb-primary) !important;
    color: #ffffff !important;
    transform: none !important;
}

/* No movement on any sidebar link */
html[data-theme] #app-sidebar.side-bar .side-bar-manu a,
html[data-theme] #app-sidebar.side-bar .side-bar-manu a:hover,
html[data-theme] #app-sidebar.side-bar .side-bar-manu a:active,
html[data-theme] #app-sidebar.side-bar .side-bar-manu a .sidebar-icon,
html[data-theme] #app-sidebar.side-bar .side-bar-manu a:hover .sidebar-icon {
    transform: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   TOP-LEVEL main menu — primary background on hover & selected (no jump)
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li > a {
    margin: 0 !important;
    width: 100% !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
}

html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li > a:hover,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li.active > a,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li > a.active,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li.dropdown.active > a {
    background: var(--sb-primary) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-bottom: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    border-radius: 4px !important;
}

html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li > a:hover .sidebar-icon svg,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li > a:hover .sidebar-icon svg path,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li > a:hover .sidebar-icon i,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li > a:hover .sidebar-dropdown-arrow,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li > a:hover .sidebar-dropdown-arrow i,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li.active > a .sidebar-icon svg,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li.active > a .sidebar-icon svg path,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li.active > a .sidebar-icon i,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li.active > a .sidebar-dropdown-arrow,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li.active > a .sidebar-dropdown-arrow i,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li > a.active .sidebar-icon svg,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li > a.active .sidebar-icon svg path,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li > a.active .sidebar-icon i,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li.dropdown.active > a .sidebar-icon svg,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li.dropdown.active > a .sidebar-icon svg path,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li.dropdown.active > a .sidebar-icon i,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li.dropdown.active > a .sidebar-dropdown-arrow,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li.dropdown.active > a .sidebar-dropdown-arrow i {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li > a:hover .sidebar-icon svg path,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li.active > a .sidebar-icon svg path,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li > a.active .sidebar-icon svg path,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li.dropdown.active > a .sidebar-icon svg path {
    fill: #ffffff !important;
}

html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li > a:hover .sidebar-icon img,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li.active > a .sidebar-icon img,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li > a.active .sidebar-icon img,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li.dropdown.active > a .sidebar-icon img {
    filter: brightness(0) invert(1) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   NESTED rows — NEVER blue background (fixes stacked blue boxes bug)
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme] #app-sidebar.side-bar .side-bar-manu li.dropdown > ul li.dropdown.active > a,
html[data-theme] #app-sidebar.side-bar .side-bar-manu li.stock-items-nav.active > a,
html[data-theme] #app-sidebar.side-bar .side-bar-manu li.stock-items-nav.is-open > a,
html[data-theme] #app-sidebar.side-bar .side-bar-manu .stock-items-nav__section.active > a,
html[data-theme] #app-sidebar.side-bar .side-bar-manu .stock-items-nav__section.is-open > a {
    background: var(--sb-primary) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    margin: 0 !important;
    width: 100% !important;
    border-radius: 4px !important;
    border-bottom: 1px solid transparent !important;
}

html[data-theme] #app-sidebar.side-bar .side-bar-manu li.dropdown > ul li.dropdown.active > a:hover,
html[data-theme] #app-sidebar.side-bar .side-bar-manu li.stock-items-nav.active > a:hover,
html[data-theme] #app-sidebar.side-bar .side-bar-manu li.stock-items-nav.is-open > a:hover,
html[data-theme] #app-sidebar.side-bar .side-bar-manu .stock-items-nav__section.active > a:hover,
html[data-theme] #app-sidebar.side-bar .side-bar-manu .stock-items-nav__section.is-open > a:hover {
    background: var(--primary) !important;
    color: #ffffff !important;
}

/* Current page link — primary fill + white text */
html[data-theme] #app-sidebar.side-bar .side-bar-manu li .dropdown-menu a.active,
html[data-theme] #app-sidebar.side-bar .side-bar-manu .sidebar-leaf-link.active,
html[data-theme] #app-sidebar.side-bar .side-bar-manu li.dropdown > ul a.active {
    background: var(--sb-primary) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    margin: 0 !important;
    width: 100% !important;
    border-radius: 4px !important;
}

/* ── Submenu indent + inner padding (text not flush to blue edge) ── */
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li.dropdown > ul > li > a {
    padding: 0.5rem 0.875rem 0.5rem 1.25rem !important;
    color: var(--sb-muted) !important;
}

html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li.dropdown > ul > li.dropdown > ul > li > a,
html[data-theme] #app-sidebar.side-bar .side-bar-manu .stock-items-nav > a {
    padding: 0.5rem 0.875rem 0.5rem 1.5rem !important;
}

html[data-theme] #app-sidebar.side-bar .side-bar-manu .stock-items-nav__section > a {
    padding: 0.5rem 0.875rem 0.5rem 1.75rem !important;
}

html[data-theme] #app-sidebar.side-bar .side-bar-manu .sidebar-leaf-link {
    padding: 0.5rem 0.875rem 0.5rem 2rem !important;
    color: var(--sb-text) !important;
    font-size: 0.8125rem !important;
    min-height: 32px !important;
}

html[data-theme] #app-sidebar.side-bar .side-bar-manu .sidebar-leaf-link__text {
    color: var(--sb-text) !important;
    opacity: 1 !important;
}

html[data-theme] #app-sidebar.side-bar .side-bar-manu .sidebar-leaf-count {
    color: var(--sb-muted) !important;
    background: transparent !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}

/* ── Top-level icons — unified size & filled style ── */
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li > a .sidebar-icon {
    width: 1.25rem !important;
    min-width: 1.25rem !important;
    max-width: 1.25rem !important;
    height: 1.25rem !important;
    min-height: 1.25rem !important;
    max-height: 1.25rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    transition: none !important;
    overflow: visible !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
}

html[dir="rtl"][data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li > a .sidebar-icon {
    margin-right: 0.55rem !important;
    margin-left: 0 !important;
}

html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li > a .sidebar-icon svg {
    width: 1.125rem !important;
    height: 1.125rem !important;
    min-width: 1.125rem !important;
    min-height: 1.125rem !important;
    max-width: 1.125rem !important;
    max-height: 1.125rem !important;
    display: block !important;
    flex-shrink: 0 !important;
}

html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li > a .sidebar-icon svg,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li > a .sidebar-icon svg path {
    fill: currentColor !important;
    stroke: none !important;
}

html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li > a .sidebar-icon img {
    width: 1.125rem !important;
    height: 1.125rem !important;
    min-width: 1.125rem !important;
    min-height: 1.125rem !important;
    max-width: 1.125rem !important;
    max-height: 1.125rem !important;
    object-fit: contain !important;
    display: block !important;
    filter: brightness(0) saturate(100%) invert(29%) sepia(45%) saturate(748%) hue-rotate(166deg) brightness(92%) contrast(89%) !important;
}

html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li > a .sidebar-icon i {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    display: inline-block !important;
    color: currentColor !important;
    font-size: 1.0625rem !important;
    line-height: 1 !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li > a {
    color: var(--sb-text) !important;
}

html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li > a .sidebar-icon {
    color: var(--sb-icon) !important;
}

html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li > a:hover,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li.active > a,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li > a.active,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li.dropdown.active > a {
    color: #ffffff !important;
}

html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li > a:hover .sidebar-icon,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li.active > a .sidebar-icon,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li > a.active .sidebar-icon,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li.dropdown.active > a .sidebar-icon {
    color: #ffffff !important;
}

html[data-theme] #app-sidebar.side-bar .side-bar-manu li .dropdown-menu .submenu-ico,
html[data-theme] #app-sidebar.side-bar .side-bar-manu .submenu-ico,
html[data-theme] #app-sidebar.side-bar .side-bar-manu .submenu-ico--leaf {
    display: inline-flex !important;
}

/* ── Carets — primary color, no boxes ── */
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li.dropdown > a {
    padding-right: 2rem !important;
}

html[data-theme] #app-sidebar.side-bar .side-bar-manu .sidebar-dropdown-arrow {
    position: absolute !important;
    right: 0.875rem !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--sb-primary) !important;
    font-size: 0.5625rem !important;
    line-height: 1 !important;
    opacity: 0.9 !important;
    pointer-events: none !important;
    transition: transform 0.18s ease !important;
}

/* Nested carets on the left */
html[data-theme] #app-sidebar.side-bar .side-bar-manu li.dropdown > ul li.dropdown > a,
html[data-theme] #app-sidebar.side-bar .side-bar-manu li.stock-items-nav > a,
html[data-theme] #app-sidebar.side-bar .side-bar-manu .stock-items-nav__section > a {
    padding-left: 1.75rem !important;
    padding-right: 0.875rem !important;
}

html[data-theme] #app-sidebar.side-bar .side-bar-manu li.dropdown > ul li.dropdown > a .sidebar-dropdown-arrow,
html[data-theme] #app-sidebar.side-bar .side-bar-manu li.stock-items-nav > a .sidebar-dropdown-arrow,
html[data-theme] #app-sidebar.side-bar .side-bar-manu .stock-items-nav__section > a .sidebar-dropdown-arrow {
    left: 0.625rem !important;
    right: auto !important;
    color: var(--sb-primary) !important;
}

html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li.dropdown.active > a .sidebar-dropdown-arrow {
    color: #ffffff !important;
    transform: translateY(-50%) rotate(90deg) !important;
}

html[data-theme] #app-sidebar.side-bar .side-bar-manu li.dropdown > ul li.dropdown.active > a .sidebar-dropdown-arrow,
html[data-theme] #app-sidebar.side-bar .side-bar-manu li.stock-items-nav.active > a .sidebar-dropdown-arrow,
html[data-theme] #app-sidebar.side-bar .side-bar-manu li.stock-items-nav.is-open > a .sidebar-dropdown-arrow,
html[data-theme] #app-sidebar.side-bar .side-bar-manu .stock-items-nav__section.active > a .sidebar-dropdown-arrow,
html[data-theme] #app-sidebar.side-bar .side-bar-manu .stock-items-nav__section.is-open > a .sidebar-dropdown-arrow {
    transform: translateY(-50%) rotate(90deg) !important;
    color: var(--sb-primary) !important;
}

html[data-theme="dark"] #app-sidebar.side-bar .side-bar-manu .sidebar-dropdown-arrow,
html[data-theme="dark"] #app-sidebar.side-bar .side-bar-manu .sidebar-dropdown-arrow i {
    color: #7ec8e8 !important;
}

/* ── Dropdown panels ── */
html[data-theme] #app-sidebar.side-bar .side-bar-manu li.dropdown.active > ul,
html[data-theme] #app-sidebar.side-bar .side-bar-manu li.dropdown > ul.menu-open {
    display: block !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    pointer-events: auto !important;
    background: transparent !important;
}

html[data-theme] #app-sidebar.side-bar .side-bar-manu li.dropdown:not(.active) > ul:not(.menu-open) {
    display: none !important;
    max-height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

html[data-theme] #app-sidebar.side-bar li.stock-items-nav:not(.active):not(.is-open) > ul {
    display: none !important;
}

html[data-theme] #app-sidebar.side-bar li.stock-items-nav.active > ul,
html[data-theme] #app-sidebar.side-bar li.stock-items-nav.is-open > ul {
    display: block !important;
}

html[data-theme] #app-sidebar.side-bar .side-bar-manu .sidebar-leaf-list__label {
    display: none !important;
}

html[data-theme] #app-sidebar.side-bar .order-count-badge {
    margin-left: auto !important;
}

html[data-theme] #app-sidebar.side-bar .sidebar-leaf-count {
    margin-left: auto !important;
}

html[data-theme="dark"] #app-sidebar.side-bar .side-bar-manu > ul > li > a:hover,
html[data-theme="dark"] #app-sidebar.side-bar .side-bar-manu > ul > li.active > a,
html[data-theme="dark"] #app-sidebar.side-bar .side-bar-manu > ul > li > a.active,
html[data-theme="dark"] #app-sidebar.side-bar .side-bar-manu > ul > li.dropdown.active > a {
    background: var(--sb-primary) !important;
    color: #ffffff !important;
}

html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li > a:hover .order-count-badge,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li.active > a .order-count-badge,
html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li.dropdown.active > a .order-count-badge {
    background: #ffffff !important;
    color: var(--sb-primary) !important;
}

html[data-theme="light"] #app-sidebar.side-bar .side-bar-manu > ul > li.dropdown > ul > li > a,
html[data-theme="light"] #app-sidebar.side-bar .side-bar-manu li.dropdown > ul a,
html[data-theme="light"] #app-sidebar.side-bar .side-bar-manu .stock-items-nav > a,
html[data-theme="light"] #app-sidebar.side-bar .side-bar-manu .stock-items-nav__section > a {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}

html[data-theme="light"] #app-sidebar.side-bar .side-bar-manu > ul > li > a .sidebar-icon {
    width: 1.25rem !important;
    min-width: 1.25rem !important;
    height: 1.25rem !important;
}

html[data-theme="light"] #app-sidebar.side-bar .side-bar-manu > ul > li > a .sidebar-icon svg {
    width: 1.125rem !important;
    height: 1.125rem !important;
}

html[data-theme="light"] #app-sidebar.side-bar .side-bar-manu > ul > li > a .sidebar-icon i {
    width: auto !important;
    height: auto !important;
    font-size: 1rem !important;
    display: inline-block !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}
[dir="rtl"] html[data-theme] #app-sidebar.side-bar .side-bar-manu > ul > li.dropdown > a .sidebar-dropdown-arrow {
    right: auto !important;
    left: 0.875rem !important;
}