/* ==========================================================================
   GGZ AI Platform - Centralized Scrollbar System & Preset Architecture
   Handles browser root & container scrollbars with dynamic theme tokens.
   ========================================================================== */

:root {
    --sb-thumb-color: #d4a32a;
    --sb-thumb-hover-color: #f59e0b;
    --sb-track-color: rgba(15, 23, 42, 0.65);
    --sb-border-radius: 8px;
    --sb-width: 10px;
    --sb-height: 10px;
    --sb-glow-shadow: 0 0 10px rgba(212, 163, 42, 0.5);
    --sb-glow-color: rgba(212, 163, 42, 0.5);
    --sb-transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

/* Firefox Centralized Compatibility */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
}

/* Base Webkit Scrollbars (Chrome, Edge, Safari, Opera) */
::-webkit-scrollbar {
    width: var(--sb-width, 10px) !important;
    height: var(--sb-height, 10px) !important;
}

::-webkit-scrollbar-track {
    background: var(--sb-track-color, rgba(15, 23, 42, 0.65)) !important;
    border-radius: var(--sb-border-radius, 8px) !important;
}

::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color, #d4a32a) !important;
    border-radius: var(--sb-border-radius, 8px) !important;
    border: 2px solid transparent !important;
    background-clip: padding-box !important;
    transition: var(--sb-transition) !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--sb-thumb-hover-color, #f59e0b) !important;
    box-shadow: var(--sb-glow-shadow, 0 0 10px rgba(212, 163, 42, 0.5)) !important;
    background-clip: padding-box !important;
}

::-webkit-scrollbar-corner {
    background: var(--sb-track-color, rgba(15, 23, 42, 0.65)) !important;
}

/* Target Specific Containers Across Platform */
html, 
body, 
.admin-sidebar, 
.sidebar-nav, 
.chat-messages, 
.modal-body, 
.glass-modal, 
.table-responsive, 
textarea, 
pre, 
code, 
.custom-scrollbar, 
[data-scrollbar] {
    scrollbar-width: thin;
    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
}

/* Base Webkit Scrollbar Controls */
::-webkit-scrollbar {
    width: var(--sb-width, 10px) !important;
    height: var(--sb-height, 10px) !important;
}
::-webkit-scrollbar-track {
    background: var(--sb-track-color) !important;
    border-radius: var(--sb-border-radius) !important;
}
::-webkit-scrollbar-thumb {
    background-color: var(--sb-thumb-color) !important;
    border-radius: var(--sb-border-radius) !important;
    transition: background-color 0.25s ease, box-shadow 0.25s ease !important;
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--sb-thumb-hover-color) !important;
    box-shadow: var(--sb-glow-shadow) !important;
}
::-webkit-scrollbar-corner {
    background: var(--sb-track-color) !important;
}

/* Auto-Hide Idle Animation Rules (Invisible/Hidden Preset Method) */
.sb-auto-hide:not(.sb-active)::-webkit-scrollbar,
body.sb-auto-hide:not(.sb-active)::-webkit-scrollbar,
html.sb-auto-hide:not(.sb-active)::-webkit-scrollbar {
    display: none !important;
    width: 0px !important;
    height: 0px !important;
}

.sb-auto-hide:not(.sb-active),
body.sb-auto-hide:not(.sb-active),
html.sb-auto-hide:not(.sb-active) {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.sb-auto-hide.sb-active::-webkit-scrollbar,
body.sb-auto-hide.sb-active::-webkit-scrollbar,
html.sb-auto-hide.sb-active::-webkit-scrollbar {
    display: block !important;
    width: var(--sb-width) !important;
    height: var(--sb-height) !important;
}

.sb-auto-hide.sb-active {
    scrollbar-width: thin !important;
}

/* Visual Theme Presets for Live Preview & Custom Container Targeting */

/* Glassmorphic Preset */
.sb-preset-glassmorphic {
    --sb-thumb-color: rgba(212, 163, 42, 0.45) !important;
    --sb-thumb-hover-color: rgba(212, 163, 42, 0.85) !important;
    --sb-track-color: rgba(15, 23, 42, 0.3) !important;
    --sb-glow-shadow: 0 0 12px rgba(212, 163, 42, 0.6) !important;
}

/* Minimal Thin Preset */
.sb-preset-minimal {
    --sb-width: 6px !important;
    --sb-height: 6px !important;
    --sb-border-radius: 20px !important;
    --sb-track-color: transparent !important;
    --sb-thumb-color: rgba(148, 163, 184, 0.35) !important;
    --sb-thumb-hover-color: rgba(248, 250, 252, 0.85) !important;
    --sb-glow-shadow: none !important;
}

/* Cyber Neon Preset */
.sb-preset-neon_cyber {
    --sb-thumb-color: #00c7be !important;
    --sb-thumb-hover-color: #38bdf8 !important;
    --sb-track-color: rgba(10, 15, 30, 0.85) !important;
    --sb-glow-shadow: 0 0 14px rgba(0, 199, 190, 0.8) !important;
}

/* Gold Amber Preset */
.sb-preset-gold_amber {
    --sb-thumb-color: #d4a32a !important;
    --sb-thumb-hover-color: #fbbf24 !important;
    --sb-track-color: rgba(24, 18, 10, 0.8) !important;
    --sb-glow-shadow: 0 0 14px rgba(251, 191, 36, 0.7) !important;
}

/* Hidden Scrollbar Preset */
.sb-preset-hidden,
.sb-preset-hidden * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
.sb-preset-hidden::-webkit-scrollbar,
.sb-preset-hidden *::-webkit-scrollbar {
    display: none !important;
    width: 0px !important;
    height: 0px !important;
}