/* DJ Wunsch – gemeinsames Modal-, Close-Button- und Scrollbar-System */
:root {
  --djw-scroll-track: #111111;
  --djw-scroll-thumb: #525252;
  --djw-scroll-thumb-hover: #737373;
  --djw-modal-surface: #171717;
  --djw-modal-border: rgba(255,255,255,.10);
  --djw-modal-close-bg: #262626;
  --djw-modal-close-bg-hover: #333333;
  --djw-modal-close-border: #404040;
  --djw-modal-close-fg: #d4d4d4;
}

/* Eine ruhige, überall identische Scrollbar im Dark-UI. */
html { scrollbar-gutter: stable; }

* {
  scrollbar-width: thin;
  scrollbar-color: var(--djw-scroll-thumb) var(--djw-scroll-track);
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--djw-scroll-track); }
*::-webkit-scrollbar-thumb {
  background: var(--djw-scroll-thumb);
  border-radius: 999px;
  border: 2px solid var(--djw-scroll-track);
}
*::-webkit-scrollbar-thumb:hover { background: var(--djw-scroll-thumb-hover); }
*::-webkit-scrollbar-corner { background: var(--djw-scroll-track); }

/* Solange mindestens ein Modal offen ist, scrollt die Seite dahinter niemals. */
html.djw-modal-open,
body.djw-modal-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

/* Modal-Oberflächen bewusst deckend – kein Durchscheinen beim Scrollen. */
.djw-modal-panel {
  background: var(--djw-modal-surface) !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.djw-modal-body,
.djw-privacy-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.djw-modal-header {
  position: relative;
  z-index: 30;
  flex: 0 0 auto;
  background: var(--djw-modal-surface) !important;
  border-bottom: 1px solid var(--djw-modal-border);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

/* Einheitlicher X-Button für jedes Popup. */
.djw-modal-close {
  box-sizing: border-box;
  display: inline-flex !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  flex: 0 0 40px !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border-radius: 12px !important;
  border: 1px solid var(--djw-modal-close-border) !important;
  background: var(--djw-modal-close-bg) !important;
  color: var(--djw-modal-close-fg) !important;
  line-height: 1 !important;
  font-size: 0 !important;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.djw-modal-close:hover,
.djw-modal-close:focus-visible {
  background: var(--djw-modal-close-bg-hover) !important;
  color: #fff !important;
  border-color: #525252 !important;
  outline: none;
}
.djw-modal-close:active { transform: scale(.96); }
.djw-modal-close svg { width: 20px; height: 20px; display: block; pointer-events: none; }

/* Kürzere bestehende Popups dürfen bei kleinen Viewports intern scrollen. */
#eventActionsPanel,
#confirmPanel,
#notifyPanel,
#pwPanel,
#invitePanel,
#printPanel,
#requestPanel,
#wishDelPanel,
#searchPanel,
#genreAddPanel,
#genreSimilarPanel,
#genreQuickAddPanel,
#genreQuickSimilarPanel {
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

#lightboxPanel {
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* Native Dialoge gehören ebenfalls in dasselbe Modal-System. */
dialog[data-djw-modal="true"] {
  scrollbar-color: var(--djw-scroll-thumb) var(--djw-scroll-track);
}
dialog[data-djw-modal="true"]::backdrop {
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(3px);
}

@media (max-width: 640px) {
  *::-webkit-scrollbar { width: 8px; height: 8px; }
  .djw-modal-close {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    flex-basis: 36px !important;
    border-radius: 11px !important;
  }
  .djw-modal-close svg { width: 19px; height: 19px; }
}