/* Estilos comuns (Toasts, Badges, Cards) */
.fade-in { animation: fadeIn 0.5s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 12px 24px; border-radius: 8px; color: white; z-index: 1050; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); }
.toast.show { opacity: 1; visibility: visible; }
.toast.success { background-color: #28a745; }
.toast.error { background-color: #dc3545; }
.content-panel { background-color: #1f2937; padding: 1.5rem; border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.kpi-card { background-color: #374151; padding: 1rem; border-radius: 0.5rem; border-left: 4px solid #4f46e5; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; }
.kpi-card:hover { transform: translateY(-4px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); }
.kpi-title { font-size: 0.875rem; font-weight: 500; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; }
.kpi-value { margin-top: 0.5rem; font-size: 2.25rem; font-weight: 700; }
.status-badge { padding: 2px 8px; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; display: inline-block; }
.status-ativo { background-color: rgba(16, 185, 129, 0.2); color: #10b981; }
.status-teste { background-color: rgba(245, 158, 11, 0.2); color: #f59e0b; }
.status-pago { background-color: rgba(16, 185, 129, 0.2); color: #10b981; }
.status-pendente { background-color: rgba(234, 179, 8, 0.2); color: #eab308; }


/* ----------------------------------------------------------------------
  ESTILOS DO SUBMENU (WhatsApp) - Global (Mobile e Desktop)
---------------------------------------------------------------------- */
.submenu-container {
    overflow: hidden;
    max-height: 0; /* Começa fechado */
    transition: max-height 0.3s ease-in-out;
    background-color: rgba(0, 0, 0, 0.15); /* Fundo levemente diferente para o submenu */
    padding-left: 1.5rem; /* Indentação para links do submenu */
}

/* Quando a classe .open é adicionada (via JS ou PHP), expande o menu */
.submenu-container.open {
    max-height: 500px; /* Altura máxima suficiente para todos os links */
}


/* ===================================================================
  ESTILOS GLOBAIS DO NAV-LINK (MOBILE-FIRST)
  CORREÇÃO: Movido para fora do @media para aplicar em Mobile e Desktop.
  Isto resolve o problema de layout (lado a lado) e cor no mobile.
  ===================================================================
*/
.nav-link { 
    display: flex; /* Faz os links ficarem um abaixo do outro (block-level flex) */
    align-items: center; 
    padding: 0.65rem 1rem; /* Espaçamento */
    border-radius: 0.375rem; /* Borda arredondada */
    color: #d1d5db; /* (CINZA CLARO) Cor do texto (visível no fundo escuro) */
    font-weight: 500; 
    transition: background-color 0.2s, color 0.2s; 
}

.nav-link:hover { 
    background-color: #374151; /* Fundo hover */
    color: #ffffff; 
}

/* Link ATIVO (página atual) */
.nav-link.active { 
    background-color: #4f46e5; /* Cor principal (Indigo) */
    color: #ffffff; 
    font-weight: 600;
}

/* "PAI" do submenu quando um filho está ativo (ex: Botão WhatsApp) */
.nav-link.active-parent {
    background-color: #374151; 
    color: #ffffff;
}

/* Ícones (Bootstrap Icons) - Global */
.nav-link i { 
    margin-right: 0.75rem; 
    font-size: 1.25rem; /* Tamanho do ícone */
    line-height: 1;
    width: 1.5rem; /* Espaço reservado para o ícone */
    flex-shrink: 0;
    transition: margin 0.3s ease-in-out;
}


/* --- ESTILOS APENAS PARA DESKTOP (Ajustes de layout) --- */
@media (min-width: 768px) {

    /* Transição de largura da sidebar (w-80 para w-20) - Efeito Netuno */
    #sidebar.md\:transition-width {
        transition-property: width;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 300ms;
    }

    /* A maioria dos estilos do .nav-link já foi definida (mobile-first).
      Aqui ficam apenas as regras de RECOLHIMENTO (w-20).
    */

    /* Quando o menu está RECOLHIDO (w-20), remove a margem dos ícones */
    .w-20 .nav-link i {
        margin-right: 0;
    }
    
    /* Quando o menu está RECOLHIDO, os links do submenu ficam iguais aos pais */
    .w-20 .submenu-container {
        padding-left: 0;
        background-color: transparent;
    }

}