/**
 * ============================================================================
 * CUSTOM SCROLLBAR COMPONENT
 * ============================================================================
 *
 * Scrollbar customizada minimalista conforme Figma GALES.
 *
 * ESTADOS:
 * - Padrão: thumb sutil (--color-border), track transparente
 * - Ativo (hover/active): thumb proeminente (--color-text-secondary)
 *
 * SPECS FIGMA:
 * - Largura: 4px
 * - Track: transparente
 * - Thumb border-radius: 10px
 * - Light thumb padrão: #CED3E2 / ativo: #394360
 * - Dark thumb padrão: #2A2F41 / ativo: #A2A8B9
 *
 * FEATURES:
 * - Scrollbars estilizadas (vertical e horizontal)
 * - 3 tamanhos: thin (4px), medium (6px), thick (8px)
 * - Variantes: auto, overlay, always visible
 * - Smooth scrolling
 * - Dark mode automatico via variaveis semanticas
 * - Scroll snap (opcional)
 * - Browser compatibility (Webkit, Firefox)
 *
 * USAGE:
 * <div class="custom-scroll">
 *   <!-- Conteudo com scroll -->
 * </div>
 *
 * @version 2.0.0
 * @date 2026-02-06
 * @author GALES Design System
 */

/* ============================================================================
   1. BASE SCROLLBAR STYLES
   ============================================================================ */

/**
 * Custom Scroll Container
 * Aplica scroll customizado ao elemento
 * Largura padrao: 4px (thin) conforme Figma
 */
.custom-scroll {
    overflow: auto;
    scroll-behavior: smooth;

    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

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

/* Scrollbar track (area de fundo) - transparente conforme Figma */
.custom-scroll::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.custom-scroll::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

/* Scrollbar thumb (a barra que se move) - estado padrao */
.custom-scroll::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 10px;
    transition: background 0.2s ease;
}

/* Scrollbar thumb - estado ativo (hover/drag) */
.custom-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-secondary);
}

.custom-scroll::-webkit-scrollbar-thumb:active {
    background: var(--color-text-secondary);
}

/* Corner (quando tem scroll vertical e horizontal) */
.custom-scroll::-webkit-scrollbar-corner {
    background: transparent;
}

/* ============================================================================
   3. TAMANHOS DE SCROLLBAR
   ============================================================================ */

/**
 * Thin (Fino) - 4px (padrao do Figma)
 */
.custom-scroll-thin,
.scroll-thin {
    scrollbar-width: thin;
}

.custom-scroll-thin::-webkit-scrollbar,
.scroll-thin::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

/**
 * Medium (Medio) - 6px
 */
.custom-scroll-md,
.scroll-md {
    scrollbar-width: thin;
}

.custom-scroll-md::-webkit-scrollbar,
.scroll-md::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

/**
 * Thick (Grosso) - 8px
 */
.custom-scroll-thick,
.scroll-thick {
    scrollbar-width: auto;
}

.custom-scroll-thick::-webkit-scrollbar,
.scroll-thick::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* ============================================================================
   4. VARIANTES DE COMPORTAMENTO
   ============================================================================ */

/* Auto (padrao) - Aparece quando necessario */
.custom-scroll-auto {
    overflow: auto;
}

/* Overlay - Sobrepoe o conteudo */
.custom-scroll-overlay {
    overflow: overlay;
}

.custom-scroll-overlay::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scroll-overlay::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 10px;
}

.custom-scroll-overlay::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-secondary);
}

/* Always Visible - Sempre visivel */
.custom-scroll-always {
    overflow: scroll;
}

/* ============================================================================
   5. DIRECAO DO SCROLL
   ============================================================================ */

/* Apenas vertical */
.scroll-y {
    overflow-y: auto;
    overflow-x: hidden;
}

/* Apenas horizontal */
.scroll-x {
    overflow-x: auto;
    overflow-y: hidden;
}

/* Ambos */
.scroll-both {
    overflow: auto;
}

/* ============================================================================
   6. HIDE SCROLLBAR (esconder mas manter funcionalidade)
   ============================================================================ */

.scroll-hidden,
.hide-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scroll-hidden::-webkit-scrollbar,
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* ============================================================================
   7. SCROLL SNAP
   ============================================================================ */

/* Container com snap */
.scroll-snap {
    scroll-snap-type: both mandatory;
    -webkit-overflow-scrolling: touch;
}

.scroll-snap-x {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.scroll-snap-y {
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
}

/* Snap proximity (menos rigido) */
.scroll-snap-proximity {
    scroll-snap-type: both proximity;
}

.scroll-snap-x-proximity {
    scroll-snap-type: x proximity;
}

.scroll-snap-y-proximity {
    scroll-snap-type: y proximity;
}

/* Item que faz snap */
.scroll-snap-item {
    scroll-snap-align: start;
}

.scroll-snap-item-center {
    scroll-snap-align: center;
}

.scroll-snap-item-end {
    scroll-snap-align: end;
}

/* ============================================================================
   8. SCROLL PADDING
   ============================================================================ */

.scroll-padding-sm {
    scroll-padding: 8px;
}

.scroll-padding-md {
    scroll-padding: 16px;
}

.scroll-padding-lg {
    scroll-padding: 24px;
}

/* ============================================================================
   9. CONTAINERS ESPECIFICOS
   ============================================================================ */

/* Sidebar scroll */
.sidebar-scroll {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.sidebar-scroll::-webkit-scrollbar {
    width: 4px;
}

.sidebar-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 10px;
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-secondary);
}

/* Modal scroll */
.modal-scroll {
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.modal-scroll::-webkit-scrollbar {
    width: 4px;
}

.modal-scroll::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

.modal-scroll::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 10px;
}

.modal-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-secondary);
}

/* Table scroll (horizontal) */
.table-scroll {
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.table-scroll::-webkit-scrollbar {
    height: 4px;
}

.table-scroll::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

.table-scroll::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 10px;
}

.table-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-secondary);
}

/* Code block scroll */
.code-scroll {
    overflow: auto;
    max-height: 400px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.code-scroll::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.code-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.code-scroll::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 10px;
}

.code-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-secondary);
}

/* ============================================================================
   10. DARK MODE
   ============================================================================
   O dark mode funciona automaticamente via variaveis semanticas:

   --color-border:          #CED3E2 (light) -> #2A2F41 (dark)
   --color-text-secondary:  #394360 (light) -> #A2A8B9 (dark)

   Nenhum override dark adicional necessario para o estilo base.
   ============================================================================ */

/* ============================================================================
   11. SCROLL INDICATORS (sombras que indicam mais conteudo)
   ============================================================================ */

.scroll-shadow-top {
    background:
        linear-gradient(var(--color-bg-secondary) 30%, transparent),
        linear-gradient(transparent, var(--color-bg-secondary) 70%) 0 100%,
        radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0)),
        radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0)) 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
    background-attachment: local, local, scroll, scroll;
}

/* Horizontal scroll indicators */
.scroll-indicator {
    position: relative;
}

.scroll-indicator::before,
.scroll-indicator::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.scroll-indicator::before {
    left: 0;
    background: linear-gradient(to right, var(--color-bg-secondary), transparent);
}

.scroll-indicator::after {
    right: 0;
    background: linear-gradient(to left, var(--color-bg-secondary), transparent);
}

.scroll-indicator.has-scroll-left::before {
    opacity: 1;
}

.scroll-indicator.has-scroll-right::after {
    opacity: 1;
}

/* ============================================================================
   12. SMOOTH SCROLL UTILITIES
   ============================================================================ */

html.scroll-smooth,
.scroll-smooth {
    scroll-behavior: smooth;
}

.scroll-auto {
    scroll-behavior: auto;
}

/* ============================================================================
   13. UTILITIES
   ============================================================================ */

/* Previne scroll horizontal */
.no-scroll-x {
    overflow-x: hidden;
}

/* Previne scroll vertical */
.no-scroll-y {
    overflow-y: hidden;
}

/* Previne qualquer scroll */
.no-scroll {
    overflow: hidden;
}

/* Forca scroll mesmo sem conteudo suficiente */
.force-scroll {
    overflow: scroll;
}

/* ============================================================================
   14. RESPONSIVIDADE
   ============================================================================ */

@media (max-width: 768px) {
    .custom-scroll::-webkit-scrollbar {
        width: 3px;
        height: 3px;
    }

    .custom-scroll-thick::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
}

/* ============================================================================
   15. TOUCH DEVICES
   ============================================================================ */

@media (hover: none) and (pointer: coarse) {
    .custom-scroll,
    .scroll-y,
    .scroll-x {
        -webkit-overflow-scrolling: touch;
    }

    /* Scrollbar invisivel por padrao em touch devices */
    .custom-scroll::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    /* Mostra scrollbar ao fazer scroll */
    .custom-scroll:active::-webkit-scrollbar {
        width: 3px;
        height: 3px;
    }
}

/* ============================================================================
   16. PRINT
   ============================================================================ */

@media print {
    .custom-scroll,
    .scroll-y,
    .scroll-x {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }

    .scroll-hidden {
        overflow: visible !important;
    }
}

/* ============================================================================
   17. ACESSIBILIDADE
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .scroll-smooth {
        scroll-behavior: auto;
    }
}

@media (forced-colors: active) {
    .custom-scroll::-webkit-scrollbar-thumb {
        background: ButtonText;
    }
}