/* Backend admin visual tuning aligned with frontend sand/brand palette */

html.dark body {
  background-color: var(--color-base-950) !important;
}

html.dark #main {
  background-color: var(--color-base-900) !important;
}

html.dark #nav-sidebar {
  background-color: var(--color-base-900) !important;
  border-right-color: var(--color-base-800) !important;
}

html.dark #modal-overlay {
  background-color: rgba(12, 8, 5, 0.86) !important;
}

/* Sidebar readability improvements (hover/active states) */
html.dark #nav-sidebar-inner {
  background-color: var(--color-base-900) !important;
}

html.dark #nav-sidebar-inner ol a {
  color: var(--color-font-default-dark);
}

html.dark #nav-sidebar-inner ol a:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--color-primary-300) !important;
}

html.dark #nav-sidebar-inner ol a.font-semibold {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--color-primary-300) !important;
  box-shadow: inset 2px 0 0 var(--color-primary-400);
}

html.dark #nav-sidebar-inner h2:hover,
html.dark #nav-sidebar-inner h2:hover .material-symbols-outlined {
  color: var(--color-primary-300) !important;
}

/* Bottom user panel (language/theme/logout dropdown) */
html.dark #nav-sidebar-inner > div.border-t {
  border-top-color: var(--color-base-800) !important;
}

html.dark #nav-sidebar-inner > div.border-t > div.cursor-pointer {
  color: var(--color-font-default-dark);
}

html.dark #nav-sidebar-inner > div.border-t > div.cursor-pointer:hover {
  background-color: var(--color-base-800) !important;
}

html.dark #nav-sidebar-inner > div.border-t > nav {
  background-color: var(--color-base-800) !important;
  border-color: var(--color-base-700) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

html.dark #nav-sidebar-inner > div.border-t > nav a,
html.dark #nav-sidebar-inner > div.border-t > nav button {
  color: var(--color-base-200);
}

html.dark #nav-sidebar-inner > div.border-t > nav a:hover,
html.dark #nav-sidebar-inner > div.border-t > nav button:hover {
  background-color: var(--color-base-700) !important;
  color: var(--color-base-100) !important;
}

html.dark #nav-sidebar-inner > div.border-t > nav .text-primary-600,
html.dark #nav-sidebar-inner > div.border-t > nav .text-primary-500 {
  color: var(--color-primary-300) !important;
  font-weight: 600;
}

html.dark #nav-sidebar-inner > div.border-t > nav button.text-red-500,
html.dark #nav-sidebar-inner > div.border-t > nav button.text-red-500 .material-symbols-outlined {
  color: #fca5a5 !important;
}

html.dark #nav-sidebar-inner > div.border-t > nav button.text-red-500:hover {
  background-color: rgba(239, 68, 68, 0.2) !important;
  color: #fecaca !important;
}