:root {
  --sidebar-radius: 3px;
  --sidebar-bg: var(--color-background-primary, #ffffff);
  --sidebar-panel: rgba(255, 255, 255, 0.78);
  --sidebar-panel-open: rgba(124, 58, 237, 0.055);
  --sidebar-text: var(--color-text-primary, #2f2750);
  --sidebar-muted: var(--color-text-secondary, #6f6593);
  --sidebar-border: rgba(124, 58, 237, 0.16);
  --sidebar-border-strong: rgba(124, 58, 237, 0.30);
  --sidebar-hover: rgba(124, 58, 237, 0.065);
  --sidebar-active-bg: rgba(124, 58, 237, 0.14);
  --sidebar-active-text: var(--color-text-info, #6d28d9);
  --sidebar-icon-bg: rgba(124, 58, 237, 0.09);
  --sidebar-soft-shadow: none;
}

.theme-dark {
  --sidebar-text: #ffffff;
  --sidebar-muted: rgba(255, 255, 255, 0.82);
  --sidebar-active-text: #ffffff;
  --sidebar-panel: rgba(255, 255, 255, 0.035);
  --sidebar-panel-open: rgba(167, 139, 250, 0.10);
  --sidebar-border: rgba(167, 139, 250, 0.16);
  --sidebar-border-strong: rgba(167, 139, 250, 0.34);
  --sidebar-hover: rgba(167, 139, 250, 0.10);
  --sidebar-active-bg: rgba(167, 139, 250, 0.16);
  --sidebar-icon-bg: rgba(167, 139, 250, 0.13);
}

.theme-navy {
  --sidebar-text: #ffffff;
  --sidebar-muted: rgba(255, 255, 255, 0.82);
  --sidebar-active-text: #ffffff;
  --sidebar-panel: rgba(15, 34, 56, 0.56);
  --sidebar-panel-open: rgba(56, 189, 248, 0.10);
  --sidebar-border: rgba(125, 211, 252, 0.18);
  --sidebar-border-strong: rgba(125, 211, 252, 0.36);
  --sidebar-hover: rgba(56, 189, 248, 0.11);
  --sidebar-active-bg: rgba(56, 189, 248, 0.17);
  --sidebar-active-text: #ffffff;
  --sidebar-icon-bg: rgba(56, 189, 248, 0.13);
}

.theme-neon-rose {
  --sidebar-text: #ffffff;
  --sidebar-muted: rgba(255, 255, 255, 0.84);
  --sidebar-active-text: #ffffff;
  --sidebar-panel: rgba(255, 255, 255, 0.045);
  --sidebar-panel-open: rgba(236, 72, 153, 0.11);
  --sidebar-border: rgba(244, 114, 182, 0.18);
  --sidebar-border-strong: rgba(244, 114, 182, 0.38);
  --sidebar-hover: rgba(236, 72, 153, 0.12);
  --sidebar-active-bg: rgba(236, 72, 153, 0.18);
  --sidebar-active-text: #ffffff;
  --sidebar-icon-bg: rgba(236, 72, 153, 0.14);
}

/* Desktop sidebar corporate spacing */
@media (min-width: 901px) {
  body:not(.layout-top-header-index) .hdr {
    box-shadow: none !important;
    border-inline-end: 1px solid var(--color-border-tertiary, rgba(124,58,237,.12)) !important;
  }

  body:not(.layout-top-header-index) .hdr-inner {
    padding: 14px 8px 12px !important;
    gap: 8px !important;
  }

  body:not(.layout-top-header-index) .hdr-logo {
    width: calc(100% - 8px) !important;
    margin: 0 4px 8px !important;
    padding: 8px 8px 10px !important;
    border-bottom: 1px solid var(--color-border-tertiary, rgba(124,58,237,.12)) !important;
  }

  body:not(.layout-top-header-index) .hdr-logo-icon,
  body:not(.layout-top-header-index) .hdr-logo-icon img {
    border-radius: var(--sidebar-radius) !important;
  }

  body:not(.layout-top-header-index) .hdr-sep {
    margin: 2px 4px 4px !important;
    opacity: .75 !important;
  }

  body:not(.layout-top-header-index) .hdr-nav {
    gap: 6px !important;
    padding: 6px 4px 6px 2px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(124, 58, 237, 0.32) transparent;
  }

  body:not(.layout-top-header-index) .hdr-nav::-webkit-scrollbar,
  body:not(.layout-top-header-index) .hdr-nav-submenu::-webkit-scrollbar {
    width: 6px;
  }

  body:not(.layout-top-header-index) .hdr-nav::-webkit-scrollbar-track,
  body:not(.layout-top-header-index) .hdr-nav-submenu::-webkit-scrollbar-track {
    background: transparent;
  }

  body:not(.layout-top-header-index) .hdr-nav::-webkit-scrollbar-thumb,
  body:not(.layout-top-header-index) .hdr-nav-submenu::-webkit-scrollbar-thumb {
    background: rgba(124, 58, 237, 0.28);
    border-radius: var(--sidebar-radius);
  }

  .theme-dark:not(.layout-top-header-index) .hdr-nav::-webkit-scrollbar-thumb,
  .theme-dark:not(.layout-top-header-index) .hdr-nav-submenu::-webkit-scrollbar-thumb {
    background: rgba(167, 139, 250, 0.30);
  }

  body:not(.layout-top-header-index) .hdr-nav-group {
    width: 100% !important;
    margin: 0 0 6px !important;
    border: 1px solid var(--sidebar-border) !important;
    border-radius: var(--sidebar-radius) !important;
    background: var(--sidebar-panel) !important;
    box-shadow: var(--sidebar-soft-shadow) !important;
    overflow: hidden !important;
  }

  body:not(.layout-top-header-index) .hdr-nav-group.open,
  body:not(.layout-top-header-index) .hdr-nav-group.active {
    border-color: var(--sidebar-border-strong) !important;
    background: var(--sidebar-panel-open) !important;
  }

  body:not(.layout-top-header-index) .hdr-nav-item,
  body:not(.layout-top-header-index) .hdr-nav-parent {
    min-height: 38px !important;
    border-radius: var(--sidebar-radius) !important;
    padding: 8px 10px !important;
    font-size: 12.7px !important;
    font-weight: 700 !important;
    color: var(--sidebar-text) !important;
    box-shadow: none !important;
    background: transparent !important;
    line-height: 1.45 !important;
  }

  body:not(.layout-top-header-index) .hdr-nav > .hdr-nav-item {
    margin: 0 0 6px !important;
    border: 1px solid var(--sidebar-border) !important;
    background: var(--sidebar-panel) !important;
  }

  body:not(.layout-top-header-index) .hdr-nav-item:hover,
  body:not(.layout-top-header-index) .hdr-nav-parent:hover {
    background: var(--sidebar-hover) !important;
    color: var(--sidebar-text) !important;
    transform: none !important;
  }

  body:not(.layout-top-header-index) .hdr-nav-item.active,
  body:not(.layout-top-header-index) .hdr-nav-parent.active,
  body:not(.layout-top-header-index) .hdr-nav-group.active > .hdr-nav-parent {
    background: var(--sidebar-active-bg) !important;
    color: var(--sidebar-active-text) !important;
    box-shadow: none !important;
    font-weight: 800 !important;
  }

  body:not(.layout-top-header-index) .hdr-nav-icon,
  body:not(.layout-top-header-index) .hdr-nav-subitem-icon,
  body:not(.layout-top-header-index) .hdr-mobile-menu-item-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    border-radius: var(--sidebar-radius) !important;
    background: var(--sidebar-icon-bg) !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }

  body:not(.layout-top-header-index) .hdr-nav-title {
    font-size: 12.7px !important;
    font-weight: 700 !important;
  }

  body:not(.layout-top-header-index) .hdr-nav-caret {
    font-size: 11px !important;
    opacity: .72 !important;
  }

  body:not(.layout-top-header-index) .hdr-nav-submenu {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: 245px !important;
    margin: 0 !important;
    padding: 4px !important;
    border: 0 !important;
    border-top: 1px solid var(--sidebar-border) !important;
    border-radius: 0 !important;
    background: color-mix(in srgb, var(--sidebar-bg) 46%, transparent) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
  }

  body:not(.layout-top-header-index) .hdr-nav-subitem {
    min-height: 34px !important;
    margin: 0 0 3px !important;
    padding: 7px 9px !important;
    border-radius: var(--sidebar-radius) !important;
    color: var(--sidebar-muted) !important;
    font-size: 12.3px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    text-decoration: none !important;
    box-shadow: none !important;
  }

  body:not(.layout-top-header-index) .hdr-nav-subitem:last-child {
    margin-bottom: 0 !important;
  }

  body:not(.layout-top-header-index) .hdr-nav-subitem:hover {
    background: var(--sidebar-hover) !important;
    color: var(--sidebar-text) !important;
    transform: none !important;
  }

  body:not(.layout-top-header-index) .hdr-nav-subitem.active {
    background: var(--sidebar-active-bg) !important;
    color: var(--sidebar-active-text) !important;
    font-weight: 800 !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sidebar-border-strong) 75%, transparent) !important;
  }


  /* Force readable white sidebar text in dark-like themes.
     This covers Dark, Navy and Neon Rose even when previous rules set
     the menu title/subtitle color through older dark-purple variables. */
  .theme-dark:not(.layout-top-header-index) .hdr-nav-item,
  .theme-dark:not(.layout-top-header-index) .hdr-nav-parent,
  .theme-dark:not(.layout-top-header-index) .hdr-nav-title,
  .theme-dark:not(.layout-top-header-index) .hdr-nav-caret,
  .theme-dark:not(.layout-top-header-index) .hdr-theme-btn,
  .theme-dark:not(.layout-top-header-index) .hdr-theme-option,
  .theme-dark:not(.layout-top-header-index) .hdr-user-name,
  .theme-dark:not(.layout-top-header-index) .hdr-user-role,
  .theme-dark:not(.layout-top-header-index) .hdr-logo-text,
  .theme-dark:not(.layout-top-header-index) .hdr-logo-sub,
  .theme-dark:not(.layout-top-header-index) .hdr-logout,
  .theme-navy:not(.layout-top-header-index) .hdr-nav-item,
  .theme-navy:not(.layout-top-header-index) .hdr-nav-parent,
  .theme-navy:not(.layout-top-header-index) .hdr-nav-title,
  .theme-navy:not(.layout-top-header-index) .hdr-nav-caret,
  .theme-navy:not(.layout-top-header-index) .hdr-theme-btn,
  .theme-navy:not(.layout-top-header-index) .hdr-theme-option,
  .theme-navy:not(.layout-top-header-index) .hdr-user-name,
  .theme-navy:not(.layout-top-header-index) .hdr-user-role,
  .theme-navy:not(.layout-top-header-index) .hdr-logo-text,
  .theme-navy:not(.layout-top-header-index) .hdr-logo-sub,
  .theme-navy:not(.layout-top-header-index) .hdr-logout,
  .theme-neon-rose:not(.layout-top-header-index) .hdr-nav-item,
  .theme-neon-rose:not(.layout-top-header-index) .hdr-nav-parent,
  .theme-neon-rose:not(.layout-top-header-index) .hdr-nav-title,
  .theme-neon-rose:not(.layout-top-header-index) .hdr-nav-caret,
  .theme-neon-rose:not(.layout-top-header-index) .hdr-theme-btn,
  .theme-neon-rose:not(.layout-top-header-index) .hdr-theme-option,
  .theme-neon-rose:not(.layout-top-header-index) .hdr-user-name,
  .theme-neon-rose:not(.layout-top-header-index) .hdr-user-role,
  .theme-neon-rose:not(.layout-top-header-index) .hdr-logo-text,
  .theme-neon-rose:not(.layout-top-header-index) .hdr-logo-sub,
  .theme-neon-rose:not(.layout-top-header-index) .hdr-logout {
    color: #ffffff !important;
  }

  .theme-dark:not(.layout-top-header-index) .hdr-nav-subitem,
  .theme-navy:not(.layout-top-header-index) .hdr-nav-subitem,
  .theme-neon-rose:not(.layout-top-header-index) .hdr-nav-subitem {
    color: rgba(255, 255, 255, 0.82) !important;
  }

  .theme-dark:not(.layout-top-header-index) .hdr-nav-subitem:hover,
  .theme-dark:not(.layout-top-header-index) .hdr-nav-subitem.active,
  .theme-navy:not(.layout-top-header-index) .hdr-nav-subitem:hover,
  .theme-navy:not(.layout-top-header-index) .hdr-nav-subitem.active,
  .theme-neon-rose:not(.layout-top-header-index) .hdr-nav-subitem:hover,
  .theme-neon-rose:not(.layout-top-header-index) .hdr-nav-subitem.active {
    color: #ffffff !important;
  }

  body:not(.layout-top-header-index) .hdr-right {
    gap: 7px !important;
    padding: 8px 4px 0 !important;
    margin-top: 8px !important;
    border-top: 1px solid var(--color-border-tertiary, rgba(124,58,237,.12)) !important;
  }

  body:not(.layout-top-header-index) .hdr-theme-switcher,
  body:not(.layout-top-header-index) .hdr-theme-btn,
  body:not(.layout-top-header-index) .hdr-theme-menu,
  body:not(.layout-top-header-index) .hdr-theme-option,
  body:not(.layout-top-header-index) .hdr-user,
  body:not(.layout-top-header-index) .hdr-logout {
    border-radius: var(--sidebar-radius) !important;
  }

  body:not(.layout-top-header-index) .hdr-theme-btn,
  body:not(.layout-top-header-index) .hdr-user,
  body:not(.layout-top-header-index) .hdr-logout {
    border: 1px solid var(--sidebar-border) !important;
    box-shadow: none !important;
  }

  body:not(.layout-top-header-index) .hdr-theme-btn {
    min-height: 36px !important;
    padding: 7px 10px !important;
    background: var(--sidebar-panel) !important;
  }

  body:not(.layout-top-header-index) .hdr-theme-menu {
    border: 1px solid var(--sidebar-border) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  body:not(.layout-top-header-index) .hdr-theme-option {
    min-height: 32px !important;
    padding: 7px 9px !important;
    margin: 2px 0 !important;
  }

  body:not(.layout-top-header-index) .hdr-user {
    min-height: 46px !important;
    padding: 7px 8px !important;
    background: var(--sidebar-panel) !important;
  }

  body:not(.layout-top-header-index) .hdr-user-name {
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  body:not(.layout-top-header-index) .hdr-user-role {
    margin-top: 3px !important;
  }

  body:not(.layout-top-header-index) .hdr-user-role span {
    border-radius: var(--sidebar-radius) !important;
    padding: 2px 7px !important;
    font-size: 10.5px !important;
  }

  body:not(.layout-top-header-index) .hdr-logout {
    min-height: 36px !important;
    padding: 8px 10px !important;
    background: transparent !important;
    color: var(--sidebar-text) !important;
  }

  body:not(.layout-top-header-index) .hdr-logout:hover {
    background: rgba(239, 68, 68, 0.08) !important;
    color: var(--color-text-danger, #dc2626) !important;
  }
}

/* Mobile navigation keeps the same logic with a cleaner corporate look. */
@media (max-width: 900px) {
  .hdr-hamburger,
  .hdr-mobile-menu-content,
  .hdr-mobile-menu-header,
  .hdr-mobile-menu-item,
  .hdr-mobile-menu-item-icon,
  .hdr-mobile-group,
  .hdr-mobile-group summary,
  .hdr-mobile-submenu,
  .hdr-mobile-submenu .hdr-mobile-menu-item,
  .hdr-theme-btn,
  .hdr-theme-menu,
  .hdr-theme-option,
  .hdr-user,
  .hdr-logout {
    border-radius: var(--sidebar-radius) !important;
  }

  .hdr-mobile-menu-item,
  .hdr-mobile-submenu .hdr-mobile-menu-item {
    margin: 3px 0 !important;
    padding: 10px 12px !important;
    box-shadow: none !important;
  }

  .hdr-mobile-group {
    margin: 4px 0 !important;
    border: 1px solid var(--sidebar-border) !important;
    overflow: hidden !important;
  }

  .hdr-mobile-group summary {
    min-height: 38px !important;
    padding: 10px 12px !important;
  }

  .hdr-mobile-submenu {
    padding: 4px !important;
    border-top: 1px solid var(--sidebar-border) !important;
  }
}