/*!
 * FILE: public/assets/ui/css/50-ui-responsive-scroll.css
 *
 * PURPOSE / ZWECK:
 * - Kontrollierte Scroll-Flächen innerhalb von Komponenten.
 * - Verhindert Seitenüberlauf, erlaubt aber eine sichtbare interne Topbar-Navigation.
 *
 * SCOPE / DOM-VERTRÄGE:
 * - html/body, .ev-shell, .ev-main, .ev-topbar.evh-topbar und .ev-footer.
 * - .ev-nav, .evh-actions und .ev-mobile-more__panel als Scroll-Container.
 *
 * THEME / RESPONSIVE:
 * - Die Aktions-Scrollbar ist bis 1099 px sichtbar, touchfähig und themebasiert.
 * - Desktop, Tablet und Handy behalten eine Seitenbreite von höchstens 100 %.
 *
 * WARTUNG / ABGRENZUNG:
 * - Horizontales Scrollen gehört nur in .evh-actions, niemals auf html/body.
 * - Keine Fachseiten-, Scheduling-, Datenbank- oder JavaScript-Logik.
 */

html,
body,
body.ui-app,
.ev-shell,
.ev-main,
.ev-topbar,
.evh-topbar,
.ev-footer {
  max-width: 100%;
}

.ev-shell,
.ev-main,
.ev-topbar > *,
.evh-topbar > *,
.ev-footer__inner > * {
  min-width: 0;
}

.ev-nav,
.evh-actions,
.ev-mobile-more__panel {
  overscroll-behavior: contain;
}

.ev-nav::-webkit-scrollbar {
  width: 6px;
}

.ev-nav::-webkit-scrollbar-track {
  background: transparent;
}

.ev-nav::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--ev-muted) 42%, transparent);
}

@media (max-width: 1099.98px) {
  .ev-topbar,
  .evh-topbar {
    max-width: 100vw;
  }

  .evh-left,
  .evh-search,
  .evh-actions {
    max-width: 100%;
  }

  .evh-actions {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    touch-action: pan-x;
  }

  .evh-actions > * {
    flex: 0 0 auto;
  }

  .evh-actions::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}