/* ==============================================================
   site-scrollbars.css - subtle modern scrollbars (IA 3.0)
   Token values come from theme.css; fallbacks match dark theme.
   ============================================================== */

:root {
  --scroll-track: rgba(8, 13, 24, 0.6);
  --scroll-thumb-top: rgba(147, 161, 181, 0.4);
  --scroll-thumb-bottom: rgba(147, 161, 181, 0.32);
  --scroll-thumb-top-hover: rgba(44, 224, 199, 0.5);
  --scroll-thumb-bottom-hover: rgba(44, 224, 199, 0.4);
}

html {
  scrollbar-width: thin;
  scrollbar-color: rgba(147, 161, 181, 0.38) transparent;
}

html,
body {
  max-width: 100%;
}

body {
  overflow-x: hidden;
}

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

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

*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--scroll-thumb-top), var(--scroll-thumb-bottom));
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
  min-height: 24px;
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--scroll-thumb-top-hover), var(--scroll-thumb-bottom-hover));
  background-clip: padding-box;
}

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

.sidebar,
.main,
.cosmo-site-messages,
.site-footer,
.site-footer__grid,
.site-footer__legal,
.sidebar-bottom,
.modal,
.modal-content {
  overflow-x: hidden;
}

.dash-tabs {
  flex-wrap: wrap;
}

.nav-item,
.sidebar-section,
.sidebar-bottom,
.stall-name-sidebar,
.topbar-left,
.topbar-right,
.site-footer__column,
.site-footer__legal,
.site-footer__grid {
  min-width: 0;
}

.stall-name-sidebar,
.sidebar-bottom,
.nav-item {
  overflow-wrap: anywhere;
  word-break: break-word;
}