/* Global visual polish that used to come from MUI's <CssBaseline>/<GlobalStyles>
   in themes/index.js (ThemeCustomization). Kept as plain CSS now that every
   page runs on Astryx — see root CLAUDE.md §6.6. Astryx's own reset
   (@astryxdesign/core/reset.css, imported in index.js) covers the base
   element resets; this file only carries the two enterprise-polish touches
   that reset doesn't: crisp font rendering and a thin, unobtrusive scrollbar. */

body {
  /* Astryx sets --font-family-body on :root (from themes/astryx.js's
     typography config) but nothing was applying it to the document, and
     MUI's <CssBaseline> — which used to do this — is no longer mounted.
     The result was a body computing to "Times New Roman": Astryx components
     rendered correctly because they set their own font, but every plain
     element and any text outside a <Text> inherited the browser serif
     default. Verified in the browser on /login before and after. */
  font-family: var(--font-family-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Scrollbars are chrome, not content — they should recede until used.
   The thumb was rgba(0,0,0,0.26) at 10px, which drew a solid dark bar down the
   right edge of every scrollable table and read as a heavy border rather than
   as a scrollbar. Lightened and narrowed; it still darkens on hover so it stays
   findable. */
* {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(0, 0, 0, 0.16) transparent;
}

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

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

*::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.16);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.34);
}

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