/* Sidebar UI overrides — Arab Sass */

.app-sidebar,
.erp-sidebar {
  background-color: var(--surface, #ffffff) !important;
  border-right: 1px solid var(--border-subtle, #e2e8f0) !important;
  color: var(--brand-dark, #07152F);
}

.app-sidebar .main-sidebar,
.app-sidebar .main-sidebar-header,
.app-sidebar .main-menu,
.app-sidebar .slide-menu,
.app-sidebar .slide.has-sub .slide-menu {
  background-color: var(--surface, #ffffff) !important;
}

.app-sidebar .main-menu > .slide > .side-menu__item,
.app-sidebar .slide-menu .side-menu__item,
.app-sidebar .side-menu__label {
  color: var(--brand-dark, #07152F) !important;
}

.app-sidebar .side-menu__icon,
.app-sidebar .side-menu__angle {
  color: var(--brand-dark, #07152F) !important;
  fill: var(--brand-dark, #07152F) !important;
}

.app-sidebar .side-menu__item:hover {
  background-color: rgba(var(--primary-rgb), 0.08) !important;
  color: var(--brand-dark, #07152F) !important;
}

.app-sidebar .side-menu__item.active,
.app-sidebar .side-menu__item[aria-current="page"] {
  background-color: var(--brand-teal-light, #B8F2E6) !important;
  color: var(--brand-teal-dark, #007A63) !important;
}

[data-theme-mode="dark"] .app-sidebar,
[data-theme-mode="dark"] .erp-sidebar,
[data-theme-mode="dark"] .app-sidebar .main-sidebar,
[data-theme-mode="dark"] .app-sidebar .main-sidebar-header,
[data-theme-mode="dark"] .app-sidebar .main-menu,
[data-theme-mode="dark"] .app-sidebar .slide-menu {
  background-color: var(--brand-dark, #07152F) !important;
  color: #fff;
}

[data-theme-mode="dark"] .app-sidebar .main-menu > .slide > .side-menu__item,
[data-theme-mode="dark"] .app-sidebar .slide-menu .side-menu__item,
[data-theme-mode="dark"] .app-sidebar .side-menu__label,
[data-theme-mode="dark"] .app-sidebar .side-menu__icon,
[data-theme-mode="dark"] .app-sidebar .side-menu__angle {
  color: #fff !important;
  fill: #fff !important;
}

[data-theme-mode="dark"] .app-sidebar .side-menu__item.active,
[data-theme-mode="dark"] .app-sidebar .side-menu__item[aria-current="page"] {
  background-color: rgba(var(--primary-rgb), 0.18) !important;
  color: var(--brand-primary, #00CFA3) !important;
  box-shadow: inset 3px 0 0 var(--brand-primary, #00CFA3);
}