/* ------------------------------------------------------------------------------------
   Logisti admin - dark sidebar rail.
   Mirrors the provider portal's sidebar (provider-theme.css): near-black rail, muted
   grey labels, white on hover, solid red pill for the selected item. Loaded after
   redesign.css, so every rule here deliberately re-states the sidebar colours that
   file fixes with !important; layout, spacing and behaviour are left untouched.
   ------------------------------------------------------------------------------------ */

:root {
  --lg-rail-bg: #0b0c0f;
  --lg-rail-border: #17191e;
  --lg-rail-fg: #9aa3b0;
  --lg-rail-hover: #181b21;
  --lg-rail-muted: #6b7280;
  --lg-rail-heading: #5c6470;
  --lg-rail-badge: #2a2e36;
  --lg-rail-rule: #262a32;
  --lg-rail-active: #e8112d;
  --lg-rail-active-shadow: 0 8px 20px rgba(232, 17, 45, 0.3);
}

/* rail ------------------------------------------------------------------------------ */
.app-sidebar,
.sidebar-mini.sidebar-collapse .app-sidebar {
  background-color: var(--lg-rail-bg) !important;
  border-right: 0;
  border-inline-end: 1px solid var(--lg-rail-border);
}

.app-sidebar .sidebar-brand {
  background-color: var(--lg-rail-bg) !important;
  border-bottom: 1px solid var(--lg-rail-border);
}

/* the shared logo is drawn for a light background; the provider rail whitens it the same way */
.app-sidebar .sidebar-brand .brand-image {
  filter: invert(1) hue-rotate(180deg) saturate(0);
}

/* command-palette trigger ---------------------------------------------------------- */
.app-sidebar .lg-search-btn {
  background: var(--lg-rail-hover);
  border-color: var(--lg-rail-border);
  color: var(--lg-rail-fg);
}

.app-sidebar .lg-search-btn:hover {
  border-color: var(--lg-rail-badge);
  color: #ffffff;
}

.app-sidebar .lg-search-btn .lg-kbd {
  background: var(--lg-rail-badge);
  color: var(--lg-rail-fg);
}

/* section label ------------------------------------------------------------------- */
.app-sidebar .lg-sidebar-label {
  color: var(--lg-rail-heading);
  font-size: 10px;
  letter-spacing: 0.09em;
}

/* menu items ---------------------------------------------------------------------- */
.app-sidebar .nav-link,
.app-sidebar .sidebar-menu > .nav-item > .nav-link {
  color: var(--lg-rail-fg) !important;
  transition: background-color 160ms ease, color 160ms ease;
}

.app-sidebar .nav-icon {
  color: var(--lg-rail-fg);
}

.app-sidebar .nav-link:hover,
.app-sidebar .sidebar-menu > .nav-item > .nav-link:hover {
  background-color: var(--lg-rail-hover) !important;
  color: #ffffff !important;
}

.app-sidebar .nav-link:hover .nav-icon,
.app-sidebar .nav-link:hover .nav-arrow {
  color: #ffffff;
}

.app-sidebar .nav-link:focus-visible {
  outline: 2px solid rgba(232, 17, 45, 0.7);
  outline-offset: 2px;
}

/* selected item: solid red pill (replaces the soft pill + left marker) ------------- */
.app-sidebar .sidebar-menu .nav-item > .nav-link.active,
.app-sidebar .sidebar-menu .nav-item.menu-open > .nav-link.active:not(:hover) {
  background-color: var(--lg-rail-active) !important;
  color: #ffffff !important;
  font-weight: 650;
  box-shadow: var(--lg-rail-active-shadow);
}

.app-sidebar .sidebar-menu .nav-item > .nav-link.active .nav-icon,
.app-sidebar .sidebar-menu .nav-item > .nav-link.active .nav-arrow {
  color: #ffffff;
}

.app-sidebar .sidebar-menu > .nav-item > .nav-link.active::before {
  display: none;
}

/* submenu tree: no grey container on a dark rail; the selected leaf is white text
   with a red bullet, nested levels hang off a dark rule --------------------------- */
.sidebar-wrapper .sidebar-menu.sidebar-structured .nav-treeview {
  background: transparent;
  padding: 2px 0;
}

.sidebar-wrapper .sidebar-menu.sidebar-structured .nav-treeview .nav-link {
  color: var(--lg-rail-fg) !important;
  font-size: 12.5px;
}

.sidebar-wrapper .nav-treeview > .nav-item > .nav-link.active,
.sidebar-wrapper .sidebar-menu.sidebar-structured .nav-treeview .nav-treeview .nav-link.active,
.app-sidebar .sidebar-menu .nav-treeview .nav-item.menu-open > .nav-link.active:not(:hover) {
  background-color: transparent !important;
  color: #ffffff !important;
  font-weight: 650;
  box-shadow: none;
}

.sidebar-wrapper .nav-treeview .nav-link.active:hover {
  background-color: var(--lg-rail-hover) !important;
}

.sidebar-wrapper .sidebar-menu.sidebar-structured .nav-treeview .nav-treeview {
  border-inline-start-color: var(--lg-rail-rule);
}

.sidebar-wrapper .sidebar-menu.sidebar-structured .nav-icon.nav-bullet::before {
  background-color: #3a3f48;
}

.app-sidebar .nav-link.active .nav-bullet::before {
  background-color: var(--lg-rail-active) !important;
}

.app-sidebar .nav-arrow {
  color: var(--lg-rail-muted);
}

/* pending-count badges: red on the rail, translucent white inside the selected pill */
.app-sidebar .badge,
.app-sidebar .badge-red,
.app-sidebar .lg-nav-badge {
  color: #ffffff;
  background-color: var(--lg-rail-active) !important;
}

.app-sidebar .nav-link.active .badge,
.app-sidebar .nav-link.active .lg-nav-badge {
  background-color: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff;
}

/* footer -------------------------------------------------------------------------- */
.lg-sidebar-footer {
  background: var(--lg-rail-bg);
  border-top-color: var(--lg-rail-border);
}

.lg-sidebar-signout {
  color: var(--lg-rail-muted) !important;
}

.lg-sidebar-signout i {
  color: var(--lg-rail-muted);
}

.lg-sidebar-signout:hover {
  background: var(--lg-rail-hover);
  color: #ffffff !important;
}

.lg-sidebar-signout:hover i {
  color: #ffffff;
}

/* scrollbar on the rail ----------------------------------------------------------- */
.app-sidebar .sidebar-wrapper {
  scrollbar-width: thin;
  scrollbar-color: var(--lg-rail-badge) transparent;
}

.app-sidebar .sidebar-wrapper::-webkit-scrollbar {
  width: 6px;
}

.app-sidebar .sidebar-wrapper::-webkit-scrollbar-thumb {
  background: var(--lg-rail-badge);
  border-radius: 999px;
}