/* Base Styles */
html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: var(--bels-text);
}

/* Horizontal overflow is handled per-container (.table-responsive, etc.);
   a global overflow-x: hidden here would break position: sticky headers. */

/* Smooth transitions for theme changes */
.card,
.btn,
.nav-link,
.alert,
.dropdown-item,
.form-control,
.form-select {
  transition: background-color var(--transition-base),
    color var(--transition-base), border-color var(--transition-base);
}

/* Focus styles. :focus-visible shows the ring for keyboard users without
   putting a box around everything clicked with a mouse. */
:focus-visible {
  outline: 2px solid var(--bels-focus-color);
  outline-offset: 2px;
}

/* Selection styles */
::selection {
  background-color: var(--bels-accent);
  color: white;
}

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

::-webkit-scrollbar-track {
  background: var(--bels-light-bg);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb {
  background: var(--bels-primary);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bels-olive);
}

/* Turbo Drive navigation progress indicator. Turbo injects its default blue
   bar at the end of <head>, so this selector is deliberately more specific
   to win regardless of stylesheet order. */
body .turbo-progress-bar {
  background-color: var(--bels-primary);
}