/**
 * Car Drive - Correção das Abas/Tabs para Mobile
 * Permite scroll horizontal das abas de período no mobile
 */

/* ============================================
   TABS/ABAS RESPONSIVAS - MOBILE ONLY
============================================ */

@media (max-width: 768px) {
    .orcamentos-tabs,
    .rotas-tabs {
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 0.5rem !important;
        padding: 0.5rem 0 1rem 0 !important;
        margin-bottom: 1.5rem !important;
        -webkit-overflow-scrolling: touch !important;
        /* Garante scroll suave no iOS */
        overscroll-behavior-x: contain !important;
        /* Previne bounce no final do scroll */
        scrollbar-width: thin !important;
        /* Firefox */
    }
    
    /* Estilização da scrollbar - Webkit (Chrome, Safari, Edge) */
    .orcamentos-tabs::-webkit-scrollbar,
    .rotas-tabs::-webkit-scrollbar {
        height: 3px !important;
        background: transparent !important;
    }
    
    .orcamentos-tabs::-webkit-scrollbar-thumb,
    .rotas-tabs::-webkit-scrollbar-thumb {
        background: #007cba !important;
        border-radius: 2px !important;
    }
    
    .orcamentos-tabs::-webkit-scrollbar-track,
    .rotas-tabs::-webkit-scrollbar-track {
        background: #f1f5f9 !important;
        border-radius: 2px !important;
    }
    
    /* Estilização das abas */
    .orcamentos-tabs .tab,
    .rotas-tabs .tab {
        flex-shrink: 0 !important;
        /* Evita que as abas encolham */
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        background: #f8f9fa !important;
        color: #495057 !important;
        text-decoration: none !important;
        border: 1px solid #dee2e6 !important;
        border-radius: 6px !important;
        transition: all 0.2s ease !important;
        min-width: 80px !important;
        /* Largura mínima para touch */
        text-align: center !important;
        white-space: nowrap !important;
        /* Evita quebra de linha */
        user-select: none !important;
        /* Evita seleção de texto durante scroll */
        -webkit-tap-highlight-color: transparent !important;
        /* Remove highlight azul no iOS */
    }
    
    /* Estado ativo */
    .orcamentos-tabs .tab.active,
    .rotas-tabs .tab.active {
        background: #007cba !important;
        color: white !important;
        border-color: #007cba !important;
        font-weight: 700 !important;
    }
    
    /* Estado hover/touch */
    .orcamentos-tabs .tab:hover,
    .rotas-tabs .tab:hover {
        background: #e9ecef !important;
        color: #495057 !important;
        border-color: #adb5bd !important;
        transform: translateY(-1px) !important;
        /* Leve elevação */
    }
    
    .orcamentos-tabs .tab.active:hover,
    .rotas-tabs .tab.active:hover {
        background: #005a87 !important;
        color: white !important;
        border-color: #005a87 !important;
        transform: translateY(-1px) !important;
    }
    
    /* Feedback visual no toque */
    .orcamentos-tabs .tab:active,
    .rotas-tabs .tab:active {
        transform: translateY(0) scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
    
    /* Indicador visual de que é scrollável */
    .orcamentos-tabs::after,
    .rotas-tabs::after {
        content: '' !important;
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 20px !important;
        background: linear-gradient(to left, rgba(255,255,255,0.9) 0%, transparent 100%) !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }
    
    /* Container das abas */
    .orcamentos-tabs,
    .rotas-tabs {
        position: relative !important;
        padding-right: 20px !important;
        /* Espaço para o indicador */
    }
    
    /* Remover separadores que interferem no mobile */
    .orcamentos-tabs .tab:not(:last-child)::after,
    .rotas-tabs .tab:not(:last-child)::after {
        display: none !important;
    }
    
    /* Melhora a área de toque */
    .orcamentos-tabs .tab,
    .rotas-tabs .tab {
        min-height: 44px !important;
        /* Tamanho mínimo recomendado para touch */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ============================================
   INDICADORES DE SCROLL (OPCIONAL)
============================================ */

@media (max-width: 768px) {
    /* Sombras laterais para indicar scroll */
    .orcamentos-tabs,
    .rotas-tabs {
        position: relative !important;
    }
    
    /* Sombra esquerda (quando não está no início) */
    .orcamentos-tabs.has-scroll-left::before,
    .rotas-tabs.has-scroll-left::before {
        content: '' !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 15px !important;
        background: linear-gradient(to right, rgba(0,0,0,0.1) 0%, transparent 100%) !important;
        pointer-events: none !important;
        z-index: 2 !important;
    }
    
    /* Sombra direita (quando não está no fim) */
    .orcamentos-tabs.has-scroll-right::after,
    .rotas-tabs.has-scroll-right::after {
        content: '' !important;
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 15px !important;
        background: linear-gradient(to left, rgba(0,0,0,0.1) 0%, transparent 100%) !important;
        pointer-events: none !important;
        z-index: 2 !important;
    }
}

/* ============================================
   MELHORIAS DE ACESSIBILIDADE
============================================ */

@media (max-width: 768px) {
    /* Estados de foco para acessibilidade */
    .orcamentos-tabs .tab:focus,
    .rotas-tabs .tab:focus {
        outline: 2px solid #007cba !important;
        outline-offset: 2px !important;
        z-index: 3 !important;
    }
    
    /* Redução de movimento para usuários sensíveis */
    @media (prefers-reduced-motion: reduce) {
        .orcamentos-tabs .tab,
        .rotas-tabs .tab {
            transition: none !important;
            transform: none !important;
        }
        
        .orcamentos-tabs,
        .rotas-tabs {
            scroll-behavior: auto !important;
        }
    }
    
    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
        .orcamentos-tabs .tab,
        .rotas-tabs .tab {
            background: #374151 !important;
            color: #f3f4f6 !important;
            border-color: #4b5563 !important;
        }
        
        .orcamentos-tabs .tab:hover,
        .rotas-tabs .tab:hover {
            background: #4b5563 !important;
            color: #f9fafb !important;
        }
        
        .orcamentos-tabs .tab.active,
        .rotas-tabs .tab.active {
            background: #1d4ed8 !important;
            border-color: #1d4ed8 !important;
        }
    }
}