/*
 * Globale Scrollbars
 * ------------------
 * Ersetzt die Default-Scrollbar des Browsers ueberall durch eine schlanke,
 * abgerundete Variante ohne Track-Rahmen und ohne Pfeil-Buttons.
 *
 * Wird als letztes Stylesheet im Layout geladen. Element-spezifische Regeln
 * (z.B. `.foo::-webkit-scrollbar { width: 8px }`) sind spezifischer und
 * gewinnen weiterhin bei der Breite - Farbe und Form kommen aber von hier,
 * solange die Regel keinen eigenen Thumb definiert.
 *
 * Farben ueber die Variablen unten anpassbar, auch pro Container:
 *   .mein_dunkler_block { --dv-scrollbar-thumb: rgba(255,255,255,.28); }
 */

:root {
    --dv-scrollbar-size: 8px;
    --dv-scrollbar-radius: 3px;
    --dv-scrollbar-track: transparent;
    /* Wie die Rahmen im UI: Border-Ton, im Hover eine Stufe dunkler */
    --dv-scrollbar-thumb: #dde2ec;
    --dv-scrollbar-thumb-hover: #b4bbcb;
    --dv-scrollbar-thumb-active: #949bae;
}

::-webkit-scrollbar {
    width: var(--dv-scrollbar-size);
    height: var(--dv-scrollbar-size);
    background: var(--dv-scrollbar-track);
}

/* Kein Rahmen, kein grauer Kasten hinter dem Griff */
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece {
    background: var(--dv-scrollbar-track);
    border: 0;
    box-shadow: none;
}

::-webkit-scrollbar-thumb {
    background-color: var(--dv-scrollbar-thumb);
    border-radius: var(--dv-scrollbar-radius);
    min-height: 32px;
    transition: background-color 0.15s ease;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--dv-scrollbar-thumb-hover);
}

::-webkit-scrollbar-thumb:active {
    background-color: var(--dv-scrollbar-thumb-active);
}

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

/* Die alten Hoch-/Runter-Pfeile abschalten */
::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

/*
 * Firefox kennt keine ::-webkit-scrollbar-Pseudoelemente, dafuer die
 * Standard-Properties. In Chrome duerfen die NICHT gesetzt werden: sobald
 * scrollbar-width/-color greift, ignoriert Chrome ab v121 alle Regeln oben.
 * Deshalb hinter einem Firefox-only-Gate.
 */
@supports (-moz-appearance: none) {
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--dv-scrollbar-thumb) transparent;
    }
}

/*
 * Helfer: Scrollbar erst beim Hovern einblenden. Der Platz bleibt reserviert,
 * damit der Inhalt nicht springt.
 */
.scrollbar-on-hover {
    scrollbar-gutter: stable;
}

.scrollbar-on-hover::-webkit-scrollbar-thumb {
    background-color: transparent;
}

.scrollbar-on-hover:hover::-webkit-scrollbar-thumb,
.scrollbar-on-hover:focus-within::-webkit-scrollbar-thumb {
    background-color: var(--dv-scrollbar-thumb);
}

.scrollbar-on-hover:hover::-webkit-scrollbar-thumb:hover {
    background-color: var(--dv-scrollbar-thumb-hover);
}

/* Fuer dunkle Panels */
.dv-scrollbar-dark {
    --dv-scrollbar-thumb: rgba(255, 255, 255, 0.28);
    --dv-scrollbar-thumb-hover: rgba(255, 255, 255, 0.45);
    --dv-scrollbar-thumb-active: rgba(255, 255, 255, 0.60);
}