/**
 * monitoramento.css
 * Fase 8: CSS comum extraído dos arquivos HTML
 * Estilos compartilhados para modais, animações, tabs e cards
 */

/* ============================================
   MODAIS
   ============================================ */

/* Classe base para modais - usar .modal ao invés de IDs específicos */
.modal {
    display: none !important;
}

.modal.is-open {
    display: flex !important;
}

/* IDs específicos mantidos para compatibilidade (serão removidos gradualmente) */
#modal-classificar-parada,
#modal-editar-evento,
#modal-editar-parada,
#modal-detalhes-parada,
#modal-adicionar-evento {
    display: none !important;
}

#modal-classificar-parada.is-open,
#modal-editar-evento.is-open,
#modal-editar-parada.is-open,
#modal-detalhes-parada.is-open,
#modal-adicionar-evento.is-open {
    display: flex !important;
}

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

.animate-pop-in {
    animation: popIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================
   TABS
   ============================================ */

.tab-btn.active,
.tab-tipo-evento.active,
.tab-parada.active {
    border-color: #8b5cf6;
    color: #8b5cf6;
}

.tab-conteudo-parada.hidden {
    display: none !important;
}

/* ============================================
   CARDS
   ============================================ */

.line-card.active {
    border-color: #8b5cf6;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* ============================================
   ACESSIBILIDADE - MODAIS
   ============================================ */

/* Garantir que modais com role="dialog" sejam acessíveis */
[role="dialog"] {
    outline: none; /* Remover outline padrão, foco será gerenciado via JavaScript */
}

[role="dialog"]:focus {
    outline: 2px solid #8b5cf6;
    outline-offset: 2px;
}

/* Esconder conteúdo quando modal não está aberto (para leitores de tela) */
.modal:not(.is-open) {
    visibility: hidden;
}

.modal.is-open {
    visibility: visible;
}