/* ========================================
   CORREÇÕES DE UI/UX - PADRONIZAÇÃO COMPLETA
   ======================================== */

/* ========================================
   1. CORREÇÃO Z-INDEX - Cards não ficarem atrás do header
   ======================================== */
.navbar {
    z-index: 1050 !important;
}

.sidebar {
    z-index: 1040 !important;
}

.main-content {
    position: relative;
    z-index: 1 !important;
}

.main-content .card {
    position: relative;
    z-index: auto !important;
}

/* Remover animação verde do topo de TODOS os cards (exceto home) */
.card::before,
.main-content .card::before,
#connect::before,
#connect .card::before,
#message::before,
#message .card::before,
#contacts::before,
#contacts .card::before,
#settings::before,
#settings .card::before,
#downloads::before,
#downloads .card::before,
#logs::before,
#logs .card::before,
#profile::before,
#profile .card::before,
#webhook::before,
#webhook .card::before,
#check-number::before,
#check-number .card::before,
#greeting-config::before,
#greeting-config .card::before,
.session-card::before,
.contact-card::before,
.chatbot-card::before,
.example-chatbot-card::before {
    display: none !important;
    opacity: 0 !important;
    content: none !important;
}

/* Remover hover da linha verde em TODOS os cards (exceto home) */
.card:hover::before,
.main-content .card:hover::before,
#connect:hover::before,
#connect .card:hover::before,
#message:hover::before,
#message .card:hover::before,
#contacts:hover::before,
#contacts .card:hover::before,
#settings:hover::before,
#settings .card:hover::before,
#downloads:hover::before,
#downloads .card:hover::before,
#logs:hover::before,
#logs .card:hover::before,
#profile:hover::before,
#profile .card:hover::before,
#webhook:hover::before,
#webhook .card:hover::before,
#check-number:hover::before,
#check-number .card:hover::before,
#greeting-config:hover::before,
#greeting-config .card:hover::before,
.session-card:hover::before,
.contact-card:hover::before,
.chatbot-card:hover::before,
.example-chatbot-card:hover::before {
    display: none !important;
    opacity: 0 !important;
    content: none !important;
}

/* MANTER animações APENAS nos feature cards da página inicial */
#home .feature-card::before {
    display: block !important;
}

#home .feature-card:hover::before {
    display: block !important;
    opacity: 1 !important;
}

/* ========================================
   2. PADRONIZAÇÃO DE BOTÕES - ALTURA CONSISTENTE
   ======================================== */

/* Garantir que TODOS os botões tenham a mesma altura base */
.btn, 
button.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-success {
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 1.5rem !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    transition: all 0.3s ease !important;
    border: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* Botões de ícone apenas (sem texto) */
.btn-icon,
button[aria-label] {
    width: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
}

/* ========================================
   3. BOTÕES NA SEÇÃO DE SESSÕES - MESMO TAMANHO
   ======================================== */

/* Container de botões no topo da seção de sessões */
#connect > div:first-of-type > div:last-child {
    display: flex;
    gap: 0.75rem;
    align-items: stretch !important;
}

#connect > div:first-of-type > div:last-child .btn {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 1.5rem !important;
}

/* ========================================
   4. BOTÕES DE AÇÃO NAS SESSÕES CONECTADAS - LAYOUT MELHORADO
   ======================================== */

/* Container de ações das sessões - Alinhado à DIREITA */
.session-card > div:last-child,
.session-actions {
    display: flex !important;
    gap: 0.75rem !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin-top: 1.25rem !important;
    padding-top: 1.25rem !important;
    border-top: 1px solid var(--border) !important;
    height: 48px !important;
    min-height: 48px !important;
}

/* Botões de ação minimalistas nas sessões - SEM BACKGROUND - OVERRIDE FORTE */
.session-card > div:last-child button,
.session-card .session-actions button,
.session-card button[onclick*="pauseSession"],
.session-card button[onclick*="deleteSession"],
.session-card button[onclick*="logout"] {
    background: transparent !important;
    border: 2px solid var(--border) !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    display: grid !important;
    place-items: center !important;
    place-content: center !important;
    border-radius: 12px !important;
    position: relative !important;
    overflow: hidden !important;
}

.session-card > div:last-child button:hover,
.session-card .session-actions button:hover,
.session-card button[onclick*="pauseSession"]:hover,
.session-card button[onclick*="deleteSession"]:hover,
.session-card button[onclick*="logout"]:hover {
    transform: translateY(-1px) !important;
    background: rgba(0, 0, 0, 0.02) !important;
    box-shadow: none !important;
}

.session-card > div:last-child button:active,
.session-card .session-actions button:active,
.session-card button[onclick*="pauseSession"]:active,
.session-card button[onclick*="deleteSession"]:active,
.session-card button[onclick*="logout"]:active {
    transform: translateY(0) !important;
}

/* Ícones dos botões de sessão - TÉCNICA GRID PARA CENTRALIZAÇÃO ABSOLUTA - OVERRIDE FORTE */
.session-card > div:last-child button i,
.session-card .session-actions button i,
.session-card button[onclick*="pauseSession"] i,
.session-card button[onclick*="deleteSession"] i,
.session-card button[onclick*="logout"] i {
    font-size: 1.4rem !important;
    line-height: 1 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    vertical-align: baseline !important;
}

/* Garantir que o pseudo-elemento do ícone também fique centrado */
.session-card > div:last-child button i::before,
.session-card .session-actions button i::before,
.session-card button[onclick*="pauseSession"] i::before,
.session-card button[onclick*="deleteSession"] i::before,
.session-card button[onclick*="logout"] i::before {
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
    vertical-align: baseline !important;
    line-height: 1 !important;
    position: static !important;
}

/* Cores dos ÍCONES apenas (sem background) */

/* Botão PAUSAR - Ícone Laranja */
.session-card button[onclick*="pauseSession"] i {
    color: #f59e0b !important;
}

.session-card button[onclick*="pauseSession"]:hover {
    border-color: #f59e0b !important;
    background: transparent !important;
}

.session-card button[onclick*="pauseSession"]:hover i {
    color: #f59e0b !important;
}

/* Botão DELETAR - Ícone Vermelho */
.session-card button[onclick*="deleteSession"] i {
    color: #ef4444 !important;
}

.session-card button[onclick*="deleteSession"]:hover {
    border-color: #ef4444 !important;
    background: transparent !important;
}

.session-card button[onclick*="deleteSession"]:hover i {
    color: #ef4444 !important;
}

/* Botão LOGOUT - Ícone Azul */
.session-card button[onclick*="logout"] i {
    color: #3b82f6 !important;
}

.session-card button[onclick*="logout"]:hover {
    border-color: #3b82f6 !important;
    background: transparent !important;
}

.session-card button[onclick*="logout"]:hover i {
    color: #3b82f6 !important;
}

/* ========================================
   5. BOTÕES NA SEÇÃO DE DOWNLOADS - ALINHAMENTO
   ======================================== */

.downloads-controls {
    display: flex !important;
    gap: 0.75rem !important;
    align-items: stretch !important;
    flex-wrap: wrap !important;
    margin-bottom: 2rem !important;
}

.downloads-controls .form-select {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 1rem !important;
    flex: 0 1 auto !important;
}

.downloads-controls .btn {
    height: 42px !important;
    min-height: 42px !important;
    flex: 0 1 auto !important;
}

/* ========================================
   6. INPUT GROUPS - ALINHAMENTO PERFEITO
   ======================================== */

.input-group {
    display: flex !important;
    gap: 0 !important;
    align-items: stretch !important;
}

.input-group .form-control,
.input-group input[type="url"],
.input-group input[type="text"] {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 8px 0 0 8px !important;
    flex: 1 !important;
    border-right: none !important;
}

.input-group .btn {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 0 8px 8px 0 !important;
    padding: 0 1.5rem !important;
    flex: 0 0 auto !important;
}

.input-group-text {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 1rem !important;
    display: flex !important;
    align-items: center !important;
    background: var(--bg-secondary) !important;
    border: 2px solid var(--border) !important;
    color: var(--text) !important;
}

/* ========================================
   7. BOTÕES EM GRUPOS - CONSISTÊNCIA
   ======================================== */

.button-group,
.btn-group {
    display: flex !important;
    gap: 0.75rem !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

.button-group .btn,
.btn-group .btn {
    height: 42px !important;
    min-height: 42px !important;
}

/* ========================================
   8. BOTÕES DE FORMULÁRIO - CONSISTÊNCIA
   ======================================== */

.form-group .btn,
.accordion-body .btn,
.modal-body .btn {
    height: 42px !important;
    min-height: 42px !important;
}

/* ========================================
   9. SELECT E INPUT - MESMA ALTURA DOS BOTÕES
   ======================================== */

.form-select,
select.form-control,
select {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 1rem !important;
    border-radius: 10px !important;
    border: 2px solid var(--border) !important;
    background: var(--card) !important;
    color: var(--text) !important;
}

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
textarea {
    min-height: 42px !important;
    padding: 0.65rem 1rem !important;
    border-radius: 10px !important;
    border: 2px solid var(--border) !important;
    background: var(--card) !important;
    color: var(--text) !important;
}

textarea.form-control {
    min-height: 120px !important;
    height: auto !important;
    padding: 1rem !important;
}

/* ========================================
   10. CORREÇÃO DE ESPAÇAMENTO - CARDS
   ======================================== */

.main-content {
    margin-top: 70px !important;
    padding-top: 2rem !important;
    padding-bottom: 4rem !important;
}

.main-content .card {
    margin-bottom: 2rem !important;
    margin-top: 0 !important;
}

/* Garantir que cards não fiquem cortados quando sidebar abre */
.main-content.menu-open {
    margin-left: 300px !important;
    width: calc(100vw - 300px) !important;
}

/* ========================================
   11. RESPONSIVIDADE - MOBILE
   ======================================== */

@media (max-width: 768px) {
    /* Garantir que no mobile os botões se ajustem */
    .button-group,
    .btn-group,
    .downloads-controls,
    #connect > div:first-of-type > div:last-child {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .button-group .btn,
    .btn-group .btn,
    .downloads-controls .btn,
    #connect .btn {
        width: 100% !important;
    }
    
    /* No mobile, sidebar não deve afetar o conteúdo */
    .main-content.menu-open {
        margin-left: 0 !important;
        width: 100vw !important;
    }
    
    /* Ajustar tamanho dos botões de ação das sessões no mobile */
    .session-card button {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }
    
    .session-card button i {
        font-size: 1.3rem !important;
    }
}

/* ========================================
   12. HOVER STATES - CONSISTÊNCIA
   ======================================== */

.btn:hover:not(:disabled) {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.btn:active:not(:disabled) {
    transform: translateY(0) !important;
}

.btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* ========================================
   13. CORES DOS BOTÕES - PADRONIZAÇÃO
   ======================================== */

.btn-primary {
    background: linear-gradient(135deg, #00a884, #008f72) !important;
    color: white !important;
}

.btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #008f72, #007a5f) !important;
    box-shadow: 0 4px 12px rgba(0, 168, 132, 0.3) !important;
}

.btn-success {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
}

.btn-success:hover:not(:disabled) {
    background: linear-gradient(135deg, #059669, #047857) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
}

.btn-danger:hover:not(:disabled) {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}

.btn-secondary,
.btn-outline-secondary {
    background: var(--card) !important;
    color: var(--text) !important;
    border: 2px solid var(--border) !important;
}

.btn-secondary:hover:not(:disabled),
.btn-outline-secondary:hover:not(:disabled) {
    background: var(--hover) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* ========================================
   14. CORREÇÃO ESPECÍFICA - STATS E CONTADORES
   ======================================== */

.stat-card,
.stats-card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* ========================================
   15. GARANTIR LEGIBILIDADE EM TEMAS
   ======================================== */

.dark .btn-secondary,
.dark .btn-outline-secondary {
    background: var(--card) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

.dark .form-control,
.dark .form-select,
.dark input,
.dark select,
.dark textarea {
    background: var(--card) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* ========================================
   16. ANIMAÇÕES SUAVES
   ======================================== */

* {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ========================================
   17. SCROLL SUAVE
   ======================================== */

html {
    scroll-behavior: smooth !important;
    scroll-padding-top: 90px !important;
}

/* Garantir que o scroll não seja cortado pelo header fixo */
.main-content > * {
    scroll-margin-top: 90px !important;
}