/* ============================================
   CORREÇÃO COMPLETA DO LAYOUT MOBILE DA ABA PIPELINE
   Corrige o bug do botão "Adicionar" que fica "mexendo" no mobile
   ============================================ */

/* Correções para telas pequenas (mobile) */
@media (max-width: 768px) {
    
    /* ===== CORREÇÃO DO BOTÃO ADICIONAR ===== */
    /* Este é o principal problema - o botão precisa ser estável */
    .pipeline-add-btn {
        width: 100% !important;
        padding: 14px 12px !important;
        background: #2a2a2a !important;
        border: 2px dashed #3a3a3a !important;
        border-radius: 8px !important;
        color: #999999 !important;
        cursor: pointer !important;
        font-size: 14px !important;
        margin-top: 12px !important;
        margin-bottom: 0 !important;
        
        /* CORREÇÕES CRÍTICAS PARA EVITAR "MEXER" */
        display: block !important;
        position: static !important;
        transform: none !important;
        transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
        
        /* Desabilitar animações que causam o bug */
        animation: none !important;
        
        /* Garantir que não haja margin/padding flutuante */
        box-sizing: border-box !important;
        
        /* Touch melhorado */
        -webkit-tap-highlight-color: rgba(255, 140, 66, 0.2) !important;
        touch-action: manipulation !important;
        
        /* Área de toque maior */
        min-height: 48px !important;
    }
    
    /* Efeito ao tocar (sem transformações que causam bugs) */
    .pipeline-add-btn:active {
        background: #252525 !important;
        border-color: #ff8c42 !important;
        color: #ff8c42 !important;
        /* NÃO usar transform aqui - causa o bug */
    }
    
    /* Remover hover no mobile */
    .pipeline-add-btn:hover {
        /* No mobile, hover não funciona bem */
        background: #2a2a2a !important;
        border-color: #3a3a3a !important;
        color: #999999 !important;
    }
    
    /* ===== CORREÇÃO DA PIPELINE STAGE ===== */
    /* Container das etapas precisa ser estável */
    .pipeline-stage {
        position: relative !important;
        margin-bottom: 16px !important;
        padding: 12px !important;
        border-radius: 12px !important;
        
        /* Evitar que a stage "pule" */
        min-height: auto !important;
        overflow: visible !important;
    }
    
    /* Header da stage */
    .stage-header {
        margin-bottom: 12px !important;
        padding-bottom: 10px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    /* ===== CARDS DO PIPELINE ===== */
    .pipeline-card {
        padding: 12px !important;
        margin-bottom: 12px !important;
        border-radius: 10px !important;
        background: #1e1e1e !important;
        border: 1px solid #2a2a2a !important;
        
        /* Estabilidade do card */
        position: relative !important;
        transform: none !important;
        transition: box-shadow 0.2s ease !important;
    }
    
    /* Remover animações de hover que causam bugs no mobile */
    .pipeline-card:hover {
        transform: none !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    }
    
    /* ===== HEADER DO CARD ===== */
    .pipeline-card-header {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        align-items: stretch !important;
    }
    
    /* Área de conteúdo (nome, empresa, valor) */
    .pipeline-card-header > div:first-child {
        width: 100% !important;
        flex: none !important;
    }
    
    /* ===== BOTÕES DE AÇÃO DO CARD ===== */
    .pipeline-card-actions {
        order: 10 !important;
        opacity: 1 !important;
        display: flex !important;
        width: 100% !important;
        gap: 8px !important;
        padding-top: 10px !important;
        margin-top: 8px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Estilo dos botões de ação no mobile */
    .pipeline-card-actions .icon-btn {
        flex: 1 !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
        min-height: 44px !important;
        border-radius: 8px !important;
        background: #2a2a2a !important;
        border: 1px solid #3a3a3a !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        white-space: nowrap !important;
        
        /* Transição suave sem bugs */
        transition: background 0.2s ease, border-color 0.2s ease !important;
        
        /* Touch otimizado */
        -webkit-tap-highlight-color: rgba(255, 140, 66, 0.2) !important;
        touch-action: manipulation !important;
    }
    
    /* Efeito ao tocar no botão de ação */
    .pipeline-card-actions .icon-btn:active {
        background: #3a3a3a !important;
        border-color: #ff8c42 !important;
        /* NÃO usar transform scale - causa bugs */
    }
    
    /* Adicionar texto aos botões no mobile */
    .pipeline-card-actions .icon-btn[title*="Editar"]::after {
        content: " Editar" !important;
        font-size: 12px !important;
        font-weight: 500 !important;
    }
    
    .pipeline-card-actions .icon-btn[title*="Excluir"]::after {
        content: " Excluir" !important;
        font-size: 12px !important;
        font-weight: 500 !important;
    }
    
    /* ===== INFORMAÇÕES DE CONTATO ===== */
    .pipeline-card > div:last-child {
        font-size: 11px !important;
        padding: 6px 0 !important;
        margin-top: 6px !important;
    }
    
    /* ===== TEXTOS DO CARD ===== */
    /* Nome do cliente/empresa */
    .pipeline-card-header > div:first-child > div:first-child {
        font-size: 15px !important;
        line-height: 1.3 !important;
        margin-bottom: 4px !important;
    }
    
    /* Nome da empresa (se houver) */
    .pipeline-card-header > div:first-child > div:nth-child(2) {
        font-size: 12px !important;
        margin-bottom: 4px !important;
    }
    
    /* Valor */
    .pipeline-card-header > div:first-child > div:last-child {
        font-size: 16px !important;
        font-weight: 700 !important;
    }
    
    /* ===== CORREÇÕES PARA DRAG AND DROP NO MOBILE ===== */
    /* Desabilitar drag no mobile para evitar conflitos com scroll */
    .pipeline-card[draggable="true"] {
        -webkit-user-drag: none !important;
        user-drag: none !important;
        cursor: default !important;
    }
    
    /* ===== STAGE COUNT (contador de itens) ===== */
    .stage-count {
        padding: 4px 10px !important;
        border-radius: 12px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
    }
}

/* ===== CORREÇÕES PARA TELAS MUITO PEQUENAS ===== */
@media (max-width: 480px) {
    
    .pipeline-card {
        padding: 10px !important;
    }
    
    .pipeline-add-btn {
        padding: 12px 10px !important;
        font-size: 13px !important;
        min-height: 46px !important;
    }
    
    .pipeline-card-actions .icon-btn {
        padding: 8px 10px !important;
        font-size: 13px !important;
        min-height: 42px !important;
    }
    
    .pipeline-card-actions .icon-btn[title*="Editar"]::after,
    .pipeline-card-actions .icon-btn[title*="Excluir"]::after {
        font-size: 11px !important;
    }
    
    .stage-header {
        font-size: 14px !important;
    }
}

/* ===== CORREÇÃO PARA LANDSCAPE NO MOBILE ===== */
@media (max-width: 768px) and (orientation: landscape) {
    .pipeline-add-btn {
        min-height: 44px !important;
        padding: 10px 12px !important;
    }
    
    .pipeline-card-actions .icon-btn {
        min-height: 40px !important;
        padding: 8px 10px !important;
    }
}

/* ===== MELHORIAS GERAIS DE PERFORMANCE NO MOBILE ===== */
@media (max-width: 768px) {
    /* Otimizar animações para melhor performance */
    * {
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Desabilitar transições complexas que podem causar lag */
    .pipeline-stage,
    .pipeline-card,
    .pipeline-add-btn,
    .icon-btn {
        will-change: auto !important;
    }
}