/**
 * ============================================================================
 * CUSTOM SCROLLBAR COMPONENT
 * ============================================================================
 *
 * Sistema de scrollbars customizadas para o Design System SIDASP.
 *
 * FEATURES:
 * - Scrollbars estilizadas (vertical e horizontal)
 * - 3 variantes: Auto, Overlay, Always Visible
 * - 3 tamanhos: Thin, Medium, Thick
 * - Smooth scrolling
 * - Dark mode otimizado
 * - Scroll snap (opcional)
 * - Hide scrollbar (opcional)
 * - Browser compatibility (Webkit, Firefox)
 *
 * USAGE:
 * <div class="custom-scroll">
 *   <!-- Conteúdo com scroll -->
 * </div>
 *
 * @version 1.0.0
 * @author SIDASP Design System
 */

/* ============================================================================
   BASE SCROLLBAR STYLES
   ============================================================================ */

/**
 * Custom Scroll Container
 * Aplica scroll customizado ao elemento
 */
.custom-scroll {
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-neutral-400) #F8F9FB;
}

/* Smooth scrolling */
.custom-scroll,
.scroll-smooth {
    scroll-behavior: smooth;
}

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

/* Scrollbar track (área de fundo) */
.custom-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-scroll::-webkit-scrollbar-track {
    background: #F8F9FB;
    border-radius: 4px;
}

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

.custom-scroll::-webkit-scrollbar-thumb:hover {
    background: #9CA3B8;
}

.custom-scroll::-webkit-scrollbar-thumb:active {
    background: #747A8F;
}

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

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

.custom-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--color-neutral-400) #F8F9FB;
}

/* ============================================================================
   TAMANHOS DE SCROLLBAR
   ============================================================================ */

/* Thin (Fino) - 6px */
.custom-scroll-thin,
.scroll-thin {
    scrollbar-width: thin;
}

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

/* Medium (Médio) - 8px (padrão) */
.custom-scroll-md,
.scroll-md {
    scrollbar-width: thin;
}

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

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

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

.custom-scroll-thick::-webkit-scrollbar-thumb,
.scroll-thick::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    background-clip: padding-box;
}

/* ============================================================================
   VARIANTES DE COMPORTAMENTO
   ============================================================================ */

/* Auto (padrão) - Aparece quando necessário */
.custom-scroll-auto {
    overflow: auto;
}

/* Overlay - Sobrepõe o conteúdo */
.custom-scroll-overlay {
    overflow: overlay;
}

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

.custom-scroll-overlay::-webkit-scrollbar-thumb {
    background: rgba(116, 122, 143, 0.5);
    border: 2px solid transparent;
    background-clip: padding-box;
}

.custom-scroll-overlay::-webkit-scrollbar-thumb:hover {
    background: rgba(116, 122, 143, 0.7);
    background-clip: padding-box;
}

/* Always Visible - Sempre visível */
.custom-scroll-always {
    overflow: scroll;
}

/* ============================================================================
   DIREÇÃO 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;
}

/* ============================================================================
   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;
}

/* ============================================================================
   SCROLL SNAP (scroll com snap points)
   ============================================================================ */

/* 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 rígido) */
.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;
}

/* ============================================================================
   SCROLL PADDING (espaço ao fazer scroll)
   ============================================================================ */

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

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

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

/* ============================================================================
   VARIANTES COLORIDAS
   ============================================================================ */

/* Primary */
.custom-scroll-primary::-webkit-scrollbar-thumb {
    background: var(--color-accent-300);
}

.custom-scroll-primary::-webkit-scrollbar-thumb:hover {
    background: #2D4FD9;
}

.custom-scroll-primary {
    scrollbar-color: var(--color-accent-300) #F8F9FB;
}

/* Success */
.custom-scroll-success::-webkit-scrollbar-thumb {
    background: #47B881;
}

.custom-scroll-success::-webkit-scrollbar-thumb:hover {
    background: #3A9B6D;
}

.custom-scroll-success {
    scrollbar-color: #47B881 #F8F9FB;
}

/* Warning */
.custom-scroll-warning::-webkit-scrollbar-thumb {
    background: #F7B500;
}

.custom-scroll-warning::-webkit-scrollbar-thumb:hover {
    background: #D99F00;
}

.custom-scroll-warning {
    scrollbar-color: #F7B500 #F8F9FB;
}

/* Error */
.custom-scroll-error::-webkit-scrollbar-thumb {
    background: var(--color-red-400);
}

.custom-scroll-error::-webkit-scrollbar-thumb:hover {
    background: #C72E26;
}

.custom-scroll-error {
    scrollbar-color: var(--color-red-400) #F8F9FB;
}

/* ============================================================================
   SCROLLBAR COM TRACK INVISÍVEL
   ============================================================================ */

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

.custom-scroll-minimal::-webkit-scrollbar-thumb {
    background: rgba(200, 205, 219, 0.5);
    border-radius: 10px;
}

.custom-scroll-minimal::-webkit-scrollbar-thumb:hover {
    background: rgba(200, 205, 219, 0.8);
}

.custom-scroll-minimal {
    scrollbar-color: rgba(200, 205, 219, 0.5) transparent;
}

/* ============================================================================
   SCROLLBAR COM BORDA ARREDONDADA
   ============================================================================ */

.custom-scroll-rounded::-webkit-scrollbar-thumb {
    border-radius: 10px;
}

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

/* ============================================================================
   CONTAINERS ESPECÍFICOS
   ============================================================================ */

/* Sidebar scroll */
.sidebar-scroll {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

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

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

.sidebar-scroll::-webkit-scrollbar-thumb {
    background: rgba(200, 205, 219, 0.4);
    border-radius: 3px;
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(200, 205, 219, 0.6);
}

/* Modal scroll */
.modal-scroll {
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
}

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

.modal-scroll::-webkit-scrollbar-track {
    background: #F8F9FB;
    border-radius: 3px;
}

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

/* Table scroll (horizontal) */
.table-scroll {
    overflow-x: auto;
    overflow-y: visible;
}

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

.table-scroll::-webkit-scrollbar-track {
    background: #F8F9FB;
    border-radius: 4px;
}

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

/* Code block scroll */
.code-scroll {
    overflow: auto;
    max-height: 400px;
}

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

.code-scroll::-webkit-scrollbar-track {
    background: #1A1D29;
}

.code-scroll::-webkit-scrollbar-thumb {
    background: #3A3D4A;
    border-radius: 4px;
}

.code-scroll::-webkit-scrollbar-thumb:hover {
    background: #4A4D5A;
}

/* ============================================================================
   SMOOTH SCROLL UTILITIES
   ============================================================================ */

/* Scroll suave */
html.scroll-smooth,
.scroll-smooth {
    scroll-behavior: smooth;
}

/* Scroll instantâneo (desabilita smooth) */
.scroll-auto {
    scroll-behavior: auto;
}

/* ============================================================================
   DARK MODE
   ============================================================================ */

.dark .custom-scroll {
    scrollbar-color: #4A4D5A #2A2D3A;
}

.dark .custom-scroll::-webkit-scrollbar-track {
    background: #2A2D3A;
}

.dark .custom-scroll::-webkit-scrollbar-thumb {
    background: #4A4D5A;
}

.dark .custom-scroll::-webkit-scrollbar-thumb:hover {
    background: #5A5D6A;
}

.dark .custom-scroll::-webkit-scrollbar-thumb:active {
    background: #6A6D7A;
}

.dark .custom-scroll::-webkit-scrollbar-corner {
    background: #2A2D3A;
}

/* Overlay dark */
.dark .custom-scroll-overlay::-webkit-scrollbar-track {
    background: transparent;
}

.dark .custom-scroll-overlay::-webkit-scrollbar-thumb {
    background: rgba(74, 77, 90, 0.5);
}

.dark .custom-scroll-overlay::-webkit-scrollbar-thumb:hover {
    background: rgba(74, 77, 90, 0.7);
}

/* Minimal dark */
.dark .custom-scroll-minimal::-webkit-scrollbar-thumb {
    background: rgba(74, 77, 90, 0.5);
}

.dark .custom-scroll-minimal::-webkit-scrollbar-thumb:hover {
    background: rgba(74, 77, 90, 0.8);
}

.dark .custom-scroll-minimal {
    scrollbar-color: rgba(74, 77, 90, 0.5) transparent;
}

/* Sidebar dark */
.dark .sidebar-scroll::-webkit-scrollbar-thumb {
    background: rgba(74, 77, 90, 0.4);
}

.dark .sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(74, 77, 90, 0.6);
}

/* Modal dark */
.dark .modal-scroll::-webkit-scrollbar-track {
    background: #2A2D3A;
}

.dark .modal-scroll::-webkit-scrollbar-thumb {
    background: #4A4D5A;
}

/* Table dark */
.dark .table-scroll::-webkit-scrollbar-track {
    background: #2A2D3A;
}

.dark .table-scroll::-webkit-scrollbar-thumb {
    background: #4A4D5A;
}

/* Primary dark */
.dark .custom-scroll-primary::-webkit-scrollbar-thumb {
    background: var(--color-accent-300);
}

.dark .custom-scroll-primary::-webkit-scrollbar-thumb:hover {
    background: #6BA7F7;
}

.dark .custom-scroll-primary {
    scrollbar-color: var(--color-accent-300) #2A2D3A;
}

/* ============================================================================
   SCROLL INDICATORS (sombras que indicam mais conteúdo)
   ============================================================================ */

.scroll-shadow-top {
    background:
        linear-gradient(white 30%, rgba(255, 255, 255, 0)),
        linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%,
        radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),
        radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), 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;
}

.dark .scroll-shadow-top {
    background:
        linear-gradient(#1A1D29 30%, rgba(26, 29, 41, 0)),
        linear-gradient(rgba(26, 29, 41, 0), #1A1D29 70%) 0 100%,
        radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)),
        radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.3), 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, rgba(255, 255, 255, 0.9), transparent);
}

.scroll-indicator::after {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.9), transparent);
}

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

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

.dark .scroll-indicator::before {
    background: linear-gradient(to right, rgba(26, 29, 41, 0.9), transparent);
}

.dark .scroll-indicator::after {
    background: linear-gradient(to left, rgba(26, 29, 41, 0.9), transparent);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
    /* Scrollbars mais finas em mobile */
    .custom-scroll::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

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

/* ============================================================================
   TOUCH DEVICES
   ============================================================================ */

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

    /* Scrollbar invisível por padrão em touch devices */
    .custom-scroll::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

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

/* ============================================================================
   PRINT
   ============================================================================ */

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

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

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/* Respeita preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    .scroll-smooth {
        scroll-behavior: auto;
    }
}

/* Alto contraste */
@media (prefers-contrast: high) {
    .custom-scroll::-webkit-scrollbar-thumb {
        background: #000000;
        border: 1px solid var(--color-text-light);
    }

    .dark .custom-scroll::-webkit-scrollbar-thumb {
        background: var(--color-text-light);
        border: 1px solid #000000;
    }
}

/* ============================================================================
   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;
}

/* Força scroll mesmo sem conteúdo suficiente */
.force-scroll {
    overflow: scroll;
}

/* ============================================================================
   ANIMAÇÕES
   ============================================================================ */

/* Fade in ao aparecer scrollbar */
@keyframes scrollbar-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.custom-scroll-animated::-webkit-scrollbar-thumb {
    animation: scrollbar-fade-in 0.3s ease;
}