/* =========================================================
   App-specific overrides on top of theme/css/style.css
   ========================================================= */

/* ── Sidebar section UL spacing ───────────────────────────
   The theme adds margin-bottom:16px / padding-bottom:8px /
   border-bottom to ALL nested sidebar ULs, creating large
   gaps between sections when a submenu is open.
   Reduce to compact spacing.
   --------------------------------------------------------- */
.sidebar .sidebar-menu > ul > li > ul,
.sidebars .sidebar-menu > ul > li > ul {
    margin-bottom: 4px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

/* ── Child item vertical spacing ─────────────────────────
   With class="submenu", the theme overrides child anchor
   padding from 4px 8px to 8px 8px 8px 40px (twice as tall).
   Restore the compact values from the old treeview style.
   --------------------------------------------------------- */
.sidebar .sidebar-menu > ul > li.submenu ul li a,
.sidebars .sidebar-menu > ul > li.submenu ul li a {
    padding: 4px 8px !important;
    font-size: 12px !important;
}

/* ── Child item left indent ──────────────────────────────
   The .submenu > ul li a rule adds padding-left:30px and a
   ::before vertical connector line at left:20px.
   Match old compact left alignment by removing them.
   --------------------------------------------------------- */
.sidebar .sidebar-menu > ul li .submenu > ul li a,
.sidebars .sidebar-menu > ul li .submenu > ul li a {
    padding: 4px 8px !important;
}

.sidebar .sidebar-menu > ul li .submenu > ul li a::before,
.sidebars .sidebar-menu > ul li .submenu > ul li a::before {
    display: none !important;
}

/* ── Parent toggle anchor: remove subdrop highlight ───────
   The theme highlights the toggle <a> with background +
   border-left when it has class="subdrop". We only want
   the child items highlighted, not the parent toggle.
   --------------------------------------------------------- */
.sidebar .sidebar-menu > ul > li.submenu > a.subdrop,
.sidebar .sidebar-menu > ul li .submenu > a.subdrop,
.sidebars .sidebar-menu > ul > li.submenu > a.subdrop,
.sidebars .sidebar-menu > ul li .submenu > a.subdrop {
    background: transparent !important;
    border-left: none !important;
    border-radius: 0 !important;
}

/* ── Parent icon & text color when submenu is active ─────
   .sidebar-menu > ul > li.active a { color: var(--white) }
   makes ALL anchors inside an active <li> white — so the
   toggle icon becomes invisible on the light sidebar.
   Restore a visible color for the parent toggle only.
   --------------------------------------------------------- */
.sidebar .sidebar-menu > ul > li.submenu.active > a > i,
.sidebars .sidebar-menu > ul > li.submenu.active > a > i {
    color: var(--menu-item-color) !important;
}

.sidebar .sidebar-menu > ul > li.submenu.active > a > span:not(.menu-arrow),
.sidebars .sidebar-menu > ul > li.submenu.active > a > span:not(.menu-arrow) {
    color: var(--menu-item-heading) !important;
}