body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
}

dialog {
  animation: pop-in 0.15s ease-out;
}

@keyframes pop-in {
  from { opacity: 0; transform: translateY(4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Collapsed sidebar — desktop only. The mobile drawer always shows full
   width + labels regardless of this preference, since it's a temporary
   overlay, not persistent chrome (see app.js for the class toggle). */
@media (min-width: 768px) {
  html.sidebar-collapsed .sidebar {
    width: 5rem !important;
  }
  html.sidebar-collapsed .nav-label {
    display: none;
  }
  html.sidebar-collapsed .nav-item {
    justify-content: center;
  }
  html.sidebar-collapsed .sidebar-brand {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
}
html.sidebar-collapsed [data-collapse-icon] {
  transform: rotate(180deg);
}

/* Mobile drawer open state. */
.sidebar.mobile-open {
  transform: translateX(0);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.35);
  border-radius: 9999px;
}