html, body { height: 100%; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.25); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.4); }

.dark ::-webkit-scrollbar-thumb { background: rgba(71, 85, 105, 0.4); }
.dark ::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.6); }

/* ── Sidebar collapsible ───────────────────────────────────────────────── */
.sidebar { width: 240px; }
.sidebar.is-collapsed { width: 72px; }

/* On mobile, sidebar is the same width when open (drawer); collapse only on desktop */
@media (max-width: 1023px) {
  .sidebar { width: 240px; }
  .sidebar.is-collapsed { width: 240px; }
}

#sidebar.is-open { transform: translateX(0); }

.sidebar.is-collapsed .sidebar-label,
.sidebar.is-collapsed .sidebar-separator + .sidebar-label {
  display: none;
}
.sidebar.is-collapsed .sidebar-separator { display: block; }

.sidebar.is-collapsed .sidebar-brand {
  flex-direction: column;
  gap: 8px;
  padding-left: 0;
  padding-right: 0;
  align-items: center;
}

.sidebar.is-collapsed .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }

.sidebar .sidebar-icon-expanded { display: inline-block; }
.sidebar .sidebar-icon-collapsed { display: none; }
.sidebar.is-collapsed .sidebar-icon-expanded { display: none; }
.sidebar.is-collapsed .sidebar-icon-collapsed { display: inline-block; }

/* When collapsed, the user card at bottom centers the avatar */
.sidebar.is-collapsed .sidebar-label { display: none; }