/* ==========================================================================
   GLOBAL CUSTOM MODERN SCROLLBARS FOR UNFOLD ADMIN & ALL WIDGETS
   ========================================================================== */

/* Standard Firefox & Modern CSS */
html, body, *, *::before, *::after {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(156, 163, 175, 0.5) transparent !important;
}

html.dark, html.dark body, .dark, .dark * {
    scrollbar-color: rgba(100, 116, 139, 0.5) transparent !important;
}

/* WebKit / Blink (Chrome, Edge, Safari, Opera) */
::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
    background: transparent !important;
}

::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.4) !important;
    border-radius: 9999px !important;
    border: none !important;
}

::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
    background: rgba(107, 114, 128, 0.7) !important;
}

/* Hide native arrow buttons completely */
::-webkit-scrollbar-button,
*::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner {
    background: transparent !important;
}

/* Dark Mode WebKit Scrollbars */
.dark ::-webkit-scrollbar-track,
.dark *::-webkit-scrollbar-track,
html.dark ::-webkit-scrollbar-track,
html.dark *::-webkit-scrollbar-track {
    background: transparent !important;
}

.dark ::-webkit-scrollbar-thumb,
.dark *::-webkit-scrollbar-thumb,
html.dark ::-webkit-scrollbar-thumb,
html.dark *::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.45) !important;
    border-radius: 9999px !important;
}

.dark ::-webkit-scrollbar-thumb:hover,
.dark *::-webkit-scrollbar-thumb:hover,
html.dark ::-webkit-scrollbar-thumb:hover,
html.dark *::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.75) !important;
}

/* ==========================================================================
   WIDGET-SPECIFIC SCROLLBAR OVERRIDES
   ========================================================================== */

/* Select2 / Autocomplete dropdown results list (all themes) */
.select2-results__options,
.select2-results,
.select2-dropdown,
.unfold-admin-autocomplete,
.admin-autocomplete {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(156, 163, 175, 0.5) transparent !important;
}

.dark .select2-results__options,
.dark .select2-results,
.dark .select2-dropdown,
.select2-container--admin-autocomplete .select2-results__options {
    scrollbar-color: rgba(100, 116, 139, 0.5) transparent !important;
}

.select2-results__options::-webkit-scrollbar,
.select2-dropdown::-webkit-scrollbar,
.select2-container--admin-autocomplete .select2-results__options::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

.select2-results__options::-webkit-scrollbar-track,
.select2-dropdown::-webkit-scrollbar-track,
.select2-container--admin-autocomplete .select2-results__options::-webkit-scrollbar-track {
    background: transparent !important;
}

.select2-results__options::-webkit-scrollbar-thumb,
.select2-dropdown::-webkit-scrollbar-thumb,
.select2-container--admin-autocomplete .select2-results__options::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.45) !important;
    border-radius: 9999px !important;
}

.select2-results__options::-webkit-scrollbar-thumb:hover,
.select2-dropdown::-webkit-scrollbar-thumb:hover,
.select2-container--admin-autocomplete .select2-results__options::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.75) !important;
}

.select2-results__options::-webkit-scrollbar-button,
.select2-dropdown::-webkit-scrollbar-button,
.select2-container--admin-autocomplete .select2-results__options::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Textareas, Native Selects, Dialogs, and Inlines */
textarea,
select,
dialog,
[role="dialog"],
.overflow-x-auto,
.overflow-y-auto,
.overflow-auto,
.table-container,
[class*="overflow-"] {
    scrollbar-width: thin !important;
}


.select2-hidden-accessible {
    width: 1px !important;
    height: 1px !important;
    position: absolute !important;
}


/* ==========================================================================
   FIX AP ENGINE MODAL DIALOGS IN UNFOLD
   Unfold 0.108+ applies Tailwind CSS translate: -50% -50% to all <dialog>
   elements. Since AP Engine centers dialogs via inset: 0; margin: auto;,
   the Unfold translate property shifts them up and left by 50% of their size,
   pushing the header, close button, and left side off-screen.
   ========================================================================== */
dialog.universal-dialog,
.universal-dialog {
    translate: none !important;
    transform: none !important;
    position: fixed !important;
    inset: 0 !important;
    margin: auto !important;
    max-width: calc(100vw - 2rem) !important;
    max-height: calc(100vh - 2rem) !important;
    box-sizing: border-box !important;
}