/*
 * ERROR404 Custom Page Scrollbar
 *
 * Ersetzt ausschließlich die Scrollbar der gesamten Seite.
 * Scrollbare Bereiche innerhalb der Seite bleiben unverändert.
 */

/* Native Seiten-Scrollbar vollständig verbergen */
html.error404-custom-scrollbar,
html.error404-custom-scrollbar body {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

html.error404-custom-scrollbar::-webkit-scrollbar,
html.error404-custom-scrollbar body::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Gesamtes Scrollbar-Modul */
#error404PageScrollbar {
    position: fixed;
    z-index: 2147483646;

    top: 5px;
    right: 2px;
    bottom: 5px;

    width: 5px;

    pointer-events: none;
    user-select: none;
    touch-action: none;

    opacity: 1;
    transition: opacity 180ms ease;

    contain: strict;
}

/* Wird ausgeblendet, wenn die Seite nicht scrollbar ist */
#error404PageScrollbar[hidden] {
    display: none !important;
}

/* Unsichtbarer, aber anklickbarer Track */
#error404PageScrollbarTrack {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    background: transparent;
    border: 0;
    border-radius: 999px;

    pointer-events: auto;
    cursor: pointer;
}

/* Beweglicher Farbverlaufs-Thumb */
#error404PageScrollbarThumb {
    position: absolute;

    top: 0;
    left: 0px;

    width: 5px;
    min-height: 30px;

    border: 0;
    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            #19f3ff 0%,
            #26d8ff 22%,
            #936eff 56%,
            #ff5cef 100%
        );

    box-shadow:
        0 0 4px rgba(25, 243, 255, 0.65),
        0 0 5px rgba(255, 92, 239, 0.45);

    pointer-events: auto;
    cursor: grab;

    transform: translate3d(0, 0, 0);
    will-change: transform, height;

    transition:
        width 140ms ease,
        left 140ms ease,
        box-shadow 140ms ease,
        filter 140ms ease;
}

/* Leicht stärker beim Darüberfahren */
#error404PageScrollbarThumb:hover {
    left: 0;
    width: 5px;

    filter: brightness(1.12);

    box-shadow:
        0 0 7px rgba(25, 243, 255, 0.85),
        0 0 8px rgba(255, 92, 239, 0.72);
}

/* Zustand während des Ziehens */
#error404PageScrollbar.is-dragging #error404PageScrollbarThumb {
    left: 0;
    width: 5px;

    cursor: grabbing;
    filter: brightness(1.18);

    box-shadow:
        0 0 9px rgba(25, 243, 255, 0.95),
        0 0 10px rgba(255, 92, 239, 0.85);
}

/* Auf kleinen Geräten etwas breitere Berührungsfläche */
@media (pointer: coarse) {
    #error404PageScrollbar {
        right: 1px;
        width: 13px;
    }

    #error404PageScrollbarThumb {
        left: 0px;
    }

    #error404PageScrollbarThumb:hover,
    #error404PageScrollbar.is-dragging #error404PageScrollbarThumb {
        left: 2px;
    }
}

/* Bei reduziertem Bewegungswunsch keine Übergänge */
@media (prefers-reduced-motion: reduce) {
    #error404PageScrollbar,
    #error404PageScrollbarThumb {
        transition: none !important;
    }
}


/*
 * ERROR404 – Sidebar-Scrollbar
 *
 * Kein grauer Hintergrund, keine Pfeile und maximal schmal.
 */

.portal-sidebar,
.portal-sidebar-nav,
.sidebar,
.sidebar-nav {
    scrollbar-width: thin !important;
    scrollbar-color: #19f3ff transparent !important;
}

.portal-sidebar::-webkit-scrollbar,
.portal-sidebar-nav::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar {
    width: 5px !important;
    height: 5px !important;
    background: transparent !important;
}

.portal-sidebar::-webkit-scrollbar-track,
.portal-sidebar-nav::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track,
.sidebar-nav::-webkit-scrollbar-track {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.portal-sidebar::-webkit-scrollbar-thumb,
.portal-sidebar-nav::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.sidebar-nav::-webkit-scrollbar-thumb {
    background-color: #19f3ff !important;
    background-image: linear-gradient(
        180deg,
        #19f3ff 0%,
        #936eff 55%,
        #ff5cef 100%
    ) !important;

    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

.portal-sidebar::-webkit-scrollbar-button,
.portal-sidebar-nav::-webkit-scrollbar-button,
.sidebar::-webkit-scrollbar-button,
.sidebar-nav::-webkit-scrollbar-button,
.portal-sidebar::-webkit-scrollbar-button:single-button,
.portal-sidebar-nav::-webkit-scrollbar-button:single-button,
.sidebar::-webkit-scrollbar-button:single-button,
.sidebar-nav::-webkit-scrollbar-button:single-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

.portal-sidebar::-webkit-scrollbar-corner,
.portal-sidebar-nav::-webkit-scrollbar-corner,
.sidebar::-webkit-scrollbar-corner,
.sidebar-nav::-webkit-scrollbar-corner {
    background: transparent !important;
}


/* error404-portal-single-scrollbar-v1 */
html body .portal-sidebar[data-error404-shared-sidebar]
.error404-sidebar-scroll-track {
  display: none !important;
}

html body .portal-sidebar[data-error404-shared-sidebar]
.portal-sidebar-nav {
  scrollbar-width: thin !important;
  scrollbar-color: #00dcff #07101c !important;
}

@supports selector(::-webkit-scrollbar) {
  html body .portal-sidebar[data-error404-shared-sidebar]
  .portal-sidebar-nav {
    scrollbar-width: auto !important;
    scrollbar-color: auto !important;
  }

  html body .portal-sidebar[data-error404-shared-sidebar]
  .portal-sidebar-nav::-webkit-scrollbar {
    display: block !important;
    width: 9px !important;
    height: 9px !important;
  }

  html body .portal-sidebar[data-error404-shared-sidebar]
  .portal-sidebar-nav::-webkit-scrollbar-track {
    background: #07101c !important;
    border-radius: 12px !important;
  }

  html body .portal-sidebar[data-error404-shared-sidebar]
  .portal-sidebar-nav::-webkit-scrollbar-thumb {
    background: linear-gradient(
      180deg, #00dcff 0%, #9760ff 50%, #ff00f2 100%
    ) !important;
    border: 2px solid #07101c !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }
}