/* ============================================================
   SCROLLBARS INVISÍVEIS COM SETAS VISÍVEIS - GLOBAL
   Oculta as barras de rolagem VERTICAIS em toda a plataforma,
   mantendo apenas as setas de navegação visíveis.
   Scrollbars HORIZONTAIS ficam visíveis em cinza claro.
   ============================================================ */

/* === WEBKIT (Chrome, Safari, Edge) === */

/* Configuração da barra de rolagem */
*::-webkit-scrollbar {
    width: 16px !important;  /* Vertical */
    height: 10px !important; /* Horizontal - visível */
}

/* Track - transparente para vertical, visível para horizontal */
*::-webkit-scrollbar-track {
    background: transparent !important;
    border: none !important;
}

*::-webkit-scrollbar-track:horizontal {
    background: #f0f0f0 !important;
    border-radius: 5px !important;
}

/* Thumb (barra) - invisível para vertical, visível para horizontal */
*::-webkit-scrollbar-thumb {
    background: transparent !important;
    border: 3px solid transparent !important;
    border-radius: 0 !important;
}

*::-webkit-scrollbar-thumb:horizontal {
    background: #bbb !important;
    border-radius: 5px !important;
    border: 2px solid #f0f0f0 !important;
}

*::-webkit-scrollbar-thumb:horizontal:hover {
    background: #999 !important;
}

*::-webkit-scrollbar-thumb:horizontal:active {
    background: #777 !important;
}

*::-webkit-scrollbar-thumb:hover {
    background: transparent !important;
}

*::-webkit-scrollbar-thumb:active {
    background: transparent !important;
}

/* Botões de seta - VISÍVEIS apenas para vertical */
*::-webkit-scrollbar-button:vertical {
    width: 16px !important;
    height: 16px !important;
    background: rgba(99, 147, 166, 0.4) !important;
    color: #d3e8ed !important;
    border: none !important;
}

*::-webkit-scrollbar-button:vertical:hover {
    background: rgba(99, 147, 166, 0.7) !important;
}

*::-webkit-scrollbar-button:vertical:active {
    background: rgba(99, 147, 166, 0.9) !important;
}

/* Botões de seta horizontal - ocultos */
*::-webkit-scrollbar-button:horizontal {
    display: none !important;
}

/* Canto (corner) transparente */
*::-webkit-scrollbar-corner {
    background: transparent !important;
}

/* === FIREFOX === */

/* Firefox - scrollbar vertical invisível, horizontal visível */
* {
    scrollbar-width: auto !important;
    scrollbar-color: #bbb #f0f0f0 !important;
}

/* === ELEMENTOS ESPECÍFICOS - GARANTIR TRANSPARÊNCIA === */

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: transparent !important;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background: transparent !important;
}

/* Para elementos com overflow */
div[style*="overflow"],
div[style*="scroll"],
section,
main,
article,
.container,
.content,
.modal-body,
.scrollable,
textarea,
select {
    scrollbar-width: auto !important;
    scrollbar-color: #bbb #f0f0f0 !important;
}

div[style*="overflow"]::-webkit-scrollbar,
div[style*="scroll"]::-webkit-scrollbar,
section::-webkit-scrollbar,
main::-webkit-scrollbar,
article::-webkit-scrollbar,
.container::-webkit-scrollbar,
.content::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.scrollable::-webkit-scrollbar,
textarea::-webkit-scrollbar,
select::-webkit-scrollbar {
    width: 16px !important;
    height: 10px !important;
}

div[style*="overflow"]::-webkit-scrollbar-track,
div[style*="scroll"]::-webkit-scrollbar-track,
section::-webkit-scrollbar-track,
main::-webkit-scrollbar-track,
article::-webkit-scrollbar-track,
.container::-webkit-scrollbar-track,
.content::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.scrollable::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track,
select::-webkit-scrollbar-track {
    background: transparent !important;
}

div[style*="overflow"]::-webkit-scrollbar-track:horizontal,
div[style*="scroll"]::-webkit-scrollbar-track:horizontal,
section::-webkit-scrollbar-track:horizontal,
main::-webkit-scrollbar-track:horizontal,
article::-webkit-scrollbar-track:horizontal,
.container::-webkit-scrollbar-track:horizontal,
.content::-webkit-scrollbar-track:horizontal,
.modal-body::-webkit-scrollbar-track:horizontal,
.scrollable::-webkit-scrollbar-track:horizontal,
textarea::-webkit-scrollbar-track:horizontal,
select::-webkit-scrollbar-track:horizontal {
    background: #f0f0f0 !important;
    border-radius: 5px !important;
}

div[style*="overflow"]::-webkit-scrollbar-thumb,
div[style*="scroll"]::-webkit-scrollbar-thumb,
section::-webkit-scrollbar-thumb,
main::-webkit-scrollbar-thumb,
article::-webkit-scrollbar-thumb,
.container::-webkit-scrollbar-thumb,
.content::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.scrollable::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb,
select::-webkit-scrollbar-thumb {
    background: transparent !important;
}

div[style*="overflow"]::-webkit-scrollbar-thumb:horizontal,
div[style*="scroll"]::-webkit-scrollbar-thumb:horizontal,
section::-webkit-scrollbar-thumb:horizontal,
main::-webkit-scrollbar-thumb:horizontal,
article::-webkit-scrollbar-thumb:horizontal,
.container::-webkit-scrollbar-thumb:horizontal,
.content::-webkit-scrollbar-thumb:horizontal,
.modal-body::-webkit-scrollbar-thumb:horizontal,
.scrollable::-webkit-scrollbar-thumb:horizontal,
textarea::-webkit-scrollbar-thumb:horizontal,
select::-webkit-scrollbar-thumb:horizontal {
    background: #bbb !important;
    border-radius: 5px !important;
    border: 2px solid #f0f0f0 !important;
}

div[style*="overflow"]::-webkit-scrollbar-thumb:horizontal:hover,
div[style*="scroll"]::-webkit-scrollbar-thumb:horizontal:hover,
section::-webkit-scrollbar-thumb:horizontal:hover,
main::-webkit-scrollbar-thumb:horizontal:hover,
article::-webkit-scrollbar-thumb:horizontal:hover,
.container::-webkit-scrollbar-thumb:horizontal:hover,
.content::-webkit-scrollbar-thumb:horizontal:hover,
.modal-body::-webkit-scrollbar-thumb:horizontal:hover,
.scrollable::-webkit-scrollbar-thumb:horizontal:hover,
textarea::-webkit-scrollbar-thumb:horizontal:hover,
select::-webkit-scrollbar-thumb:horizontal:hover {
    background: #999 !important;
}

/* === DICA VISUAL: MOSTRAR SETA AO FAZER HOVER === */

*::-webkit-scrollbar-button:vertical {
    background: linear-gradient(135deg, rgba(99, 147, 166, 0.2), rgba(99, 147, 166, 0.3)) !important;
    transition: all 0.3s ease !important;
    border: 1px solid rgba(211, 232, 237, 0.1) !important;
}

*::-webkit-scrollbar-button:vertical:hover {
    background: linear-gradient(135deg, rgba(99, 147, 166, 0.5), rgba(99, 147, 166, 0.7)) !important;
    box-shadow: inset 0 0 4px rgba(241, 196, 15, 0.3) !important;
}

*::-webkit-scrollbar-button:vertical:active {
    background: linear-gradient(135deg, rgba(99, 147, 166, 0.8), rgba(99, 147, 166, 0.9)) !important;
    box-shadow: inset 0 0 6px rgba(241, 196, 15, 0.5) !important;
}

/* === SETAS ESPECÍFICAS DO WEBKIT === */

/* Up arrow */
*::-webkit-scrollbar-button:start:increment,
*::-webkit-scrollbar-button:end:decrement {
    display: block !important;
}

/* Down arrow */
*::-webkit-scrollbar-button:start:decrement,
*::-webkit-scrollbar-button:end:increment {
    display: block !important;
}
