/**
 * Custom CSS reserved for what Tailwind utilities can't express cleanly:
 * scrollbar styling, focus-visible refinement, and small transitions.
 * Prefer Tailwind utility classes everywhere else.
 */

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 9999px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

#sidebar {
  transition: width 0.2s ease-in-out, transform 0.2s ease-in-out;
}

#sidebar-overlay {
  transition: opacity 0.15s ease-in-out;
}

.hrs-nav-link,
#sidebar-collapse-btn svg {
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, transform 0.2s ease-in-out;
}