/* ============================================
   GLOBAL SCROLLBAR STYLES
   Modern scrollbar styling for light and dark modes
   ============================================ */

/* ============================================
   WEBKIT BROWSERS (Chrome, Safari, Edge)
   ============================================ */

/* Scrollbar width */
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Scrollbar track */
*::-webkit-scrollbar-track {
    background: var(--system-gray6);
    border-radius: 5px;
}

/* Scrollbar thumb (the draggable part) */
*::-webkit-scrollbar-thumb {
    background: var(--system-gray4);
    border-radius: 5px;
    border: 2px solid var(--system-gray6);
    transition: background-color 0.2s ease;
}

/* Scrollbar thumb on hover */
*::-webkit-scrollbar-thumb:hover {
    background: var(--border-color);
}

/* Scrollbar thumb when active/dragging */
*::-webkit-scrollbar-thumb:active {
    background: var(--text-secondary);
}

/* Corner where horizontal and vertical scrollbars meet */
*::-webkit-scrollbar-corner {
    background: var(--system-gray6);
}

/* ============================================
   DARK MODE - WEBKIT BROWSERS
   ============================================ */

[data-theme="dark"] *::-webkit-scrollbar-track {
    background: var(--system-background);
}

[data-theme="dark"] *::-webkit-scrollbar-thumb {
    background: var(--system-gray4);
    border-color: var(--system-background);
}

[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
    background: var(--system-gray5);
}

[data-theme="dark"] *::-webkit-scrollbar-thumb:active {
    background: var(--border-color);
}

[data-theme="dark"] *::-webkit-scrollbar-corner {
    background: var(--system-background);
}

/* ============================================
   FIREFOX BROWSERS
   ============================================ */

/* Light mode */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--system-gray4) var(--system-gray6);
}

/* Dark mode */
[data-theme="dark"] * {
    scrollbar-color: var(--system-gray4) var(--system-background);
}

/* ============================================
   SPECIFIC OVERRIDES FOR SMALLER SCROLLBARS
   (For compact areas like dropdowns)
   ============================================ */

.compact-scroll::-webkit-scrollbar,
.custom-deal-dropdown::-webkit-scrollbar,
.custom-deal-panel-dropdown::-webkit-scrollbar,
.participant-dropdown-list::-webkit-scrollbar,
.model-selector-dropdown::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.compact-scroll::-webkit-scrollbar-thumb,
.custom-deal-dropdown::-webkit-scrollbar-thumb,
.custom-deal-panel-dropdown::-webkit-scrollbar-thumb,
.participant-dropdown-list::-webkit-scrollbar-thumb,
.model-selector-dropdown::-webkit-scrollbar-thumb {
    border-width: 1px;
}

/* ============================================
   THIN SCROLLBARS FOR INPUT FIELDS
   ============================================ */

textarea::-webkit-scrollbar,
.input-field::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

textarea::-webkit-scrollbar-thumb,
.input-field::-webkit-scrollbar-thumb {
    background: var(--system-gray4);
    border-radius: 3px;
    border: 1px solid transparent;
}

textarea::-webkit-scrollbar-thumb:hover,
.input-field::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Dark mode for textareas */
[data-theme="dark"] textarea::-webkit-scrollbar-thumb,
[data-theme="dark"] .input-field::-webkit-scrollbar-thumb {
    background: var(--system-gray5);
}

[data-theme="dark"] textarea::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .input-field::-webkit-scrollbar-thumb:hover {
    background: var(--border-color);
}