/* c:\Users\Grupo BYT\Downloads\Projeto MaxZap\WhstaApp Versão Nuvem\public\css\style_v3.css */

/* ==========================================================================
   1. Variáveis Globais (Custom Properties)
   ========================================================================== */
   :root {
    /* Cores Primárias e de Tema */
    --bs-primary: #5D3FD3;        /* Roxo Principal */
    --bs-primary-rgb: 93, 63, 211;
    --bs-primary-hover: #4C32B3; /* Roxo mais escuro para hover */
    --bs-secondary: #6c757d;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success: #198754;        /* Verde Padrão Bootstrap */
    --bs-danger: #dc3545;         /* Vermelho Padrão Bootstrap */
    --bs-warning: #ffc107;         /* Amarelo Padrão Bootstrap */
    --bs-info: #0dcaf0;          /* Azul Claro Padrão Bootstrap */
    --bs-info-rgb: 13, 202, 240; /* RGB para --bs-info */
    --bs-light: #f8f9fa;         /* Cinza muito claro (quase branco) */
    --bs-dark: #212529;          /* Preto suave (para texto e elementos escuros) */
    --bs-dark-rgb: 33, 37, 41;

    /* Cores de Fundo e Texto */
    --bs-body-bg: #ffffff;       /* Fundo geral do body - Branco */
    --bs-body-color: #212529;   /* Cor principal do texto */

    /* Cores de Componentes Específicos */
    --app-sidebar-bg: var(--bs-light);          /* Fundo da Sidebar */
    --app-sidebar-text: var(--bs-dark);         /* Texto da Sidebar */
    --app-sidebar-hover-bg: #e9ecef;           /* Fundo do item da Sidebar no hover */
    --app-sidebar-active-bg: var(--bs-primary); /* Fundo do item ativo da Sidebar */
    --app-sidebar-active-text: #ffffff;         /* Texto do item ativo da Sidebar */

    --app-content-bg: var(--bs-body-bg);         /* Fundo da área de conteúdo principal */
    --card-bg: var(--bs-body-bg);               /* Fundo dos Cards */
    --card-border-color: #dee2e6;               /* Cor da borda dos Cards e Tabelas */
    --card-header-bg: var(--bs-light);          /* Fundo do cabeçalho dos Cards */

    /* Tipografia e Espaçamento */
    --font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --base-font-size: 0.9rem;                  /* Tamanho de fonte base */
    --link-color: var(--bs-primary);
    --border-radius: 0.375rem;                  /* Raio de borda padrão */
    --box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Sombra padrão suave */

    /* Cores específicas do WhatsApp para o Chat */
    --whatsapp-bg: #e5ddd5; /* Fundo principal da área de mensagens (antigo) ou #eae6df (novo) */
    --whatsapp-chat-input-bg: #f0f2f5;
    --whatsapp-sent-bubble-bg: #dcf8c6; /* ou #e7ffdb */
    --whatsapp-received-bubble-bg: #ffffff;
    --whatsapp-text-primary: #111b21;
    --whatsapp-text-secondary: #667781; /* Timestamps, status secundário */
    --whatsapp-icon-color: #54656f;
    --whatsapp-link-color: #0a58ca; /* Azul para links em mensagens */
    --whatsapp-link-color-hover: #084298; /* Azul escuro para hover */
    --whatsapp-unread-badge-bg: #25d366;
    --whatsapp-unread-badge-text: #ffffff;
    --whatsapp-tick-blue: #34b7f1; /* Ou #53bdeb */
    --whatsapp-header-bg: #f0f2f5;
    --whatsapp-chat-area-bg: #efeae2; /* Cor de fundo da área de chat (base) */
}

/* ==========================================================================
   2. Estilos Gerais e Reset
   ========================================================================== */
body {
    font-family: var(--font-family-sans-serif);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: var(--base-font-size);
    display: flex;
    height: 100vh; /* Essencial para que #dashboard-container use a altura total */
    margin: 0; /* Garante que não haja margens padrão do navegador */
}

a {
    color: var(--link-color); /* Usa a cor primária para links */
    text-decoration: none; /* Remove sublinhado padrão */
}

a:hover {
    color: var(--bs-primary-hover);
}

hr {
    border-top: 1px solid var(--card-border-color);
}

/* ==========================================================================
   3. Layout Principal
   ========================================================================== */

/* Overlay de Ativação */
#panel-login-overlay {
    background:
        radial-gradient(circle at top left, rgba(255, 122, 26, 0.22), transparent 30%),
        radial-gradient(circle at top right, rgba(31, 157, 104, 0.24), transparent 26%),
        linear-gradient(180deg, #fff8ee 0%, #f2e8db 100%);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1060; /* Acima do conteúdo, abaixo de modais de alta prioridade */
}

#panel-login-overlay .activation-login-shell {
    width: min(94vw, 460px);
    display: grid;
    gap: 16px;
}

#panel-login-overlay .activation-brand-block {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 252, 246, 0.82);
    border: 1px solid rgba(25, 22, 18, 0.08);
    border-radius: 18px;
    padding: 12px 14px;
    box-shadow: 0 16px 34px rgba(40, 28, 18, 0.08);
}

#panel-login-overlay .activation-brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-grid;
    place-items: center;
    color: #fff;
    font-family: 'Sora', 'Segoe UI', sans-serif;
    font-weight: 800;
    background: linear-gradient(135deg, #1f9d68 0%, #126942 100%);
}

#panel-login-overlay .activation-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

#panel-login-overlay .activation-brand-text strong {
    font-family: 'Sora', 'Segoe UI', sans-serif;
    font-size: 1.06rem;
    color: #191612;
}

#panel-login-overlay .activation-brand-text small {
    font-size: 0.81rem;
    color: #6f675f;
}

#panel-login-overlay .activation-login-card {
    background: rgba(255, 252, 246, 0.88);
    color: #191612;
    border: 1px solid rgba(25, 22, 18, 0.08);
    box-shadow: 0 30px 60px rgba(40, 28, 18, 0.14);
    border-radius: 24px;
    padding: 28px 22px 20px;
}

#panel-login-overlay .activation-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(31, 157, 104, 0.16);
    background: rgba(31, 157, 104, 0.11);
    color: #16784f;
    font-family: 'Sora', 'Segoe UI', sans-serif;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

#panel-login-overlay .activation-title {
    margin-bottom: 8px;
    font-family: 'Sora', 'Segoe UI', sans-serif;
    font-size: clamp(1.5rem, 4vw, 1.9rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

#panel-login-overlay .activation-subtitle {
    color: #6f675f;
    margin-bottom: 18px;
    line-height: 1.55;
}

#panel-login-overlay .activation-field .form-label {
    font-weight: 600;
    font-family: 'Sora', 'Segoe UI', sans-serif;
    font-size: 0.86rem;
    color: #332f2a;
}

#panel-login-overlay .activation-field .form-control {
    border-radius: 13px;
    border: 1px solid rgba(25, 22, 18, 0.14);
    min-height: 47px;
    background: #fffdf8;
}

#panel-login-overlay .activation-field .form-control:focus {
    border-color: #1f9d68;
    box-shadow: 0 0 0 0.22rem rgba(31, 157, 104, 0.18);
}

#panel-login-overlay .activation-submit-btn {
    border: 0;
    border-radius: 999px;
    min-height: 49px;
    color: #fff;
    font-family: 'Sora', 'Segoe UI', sans-serif;
    font-weight: 700;
    background: linear-gradient(135deg, #1f9d68 0%, #126942 100%);
    box-shadow: 0 18px 32px rgba(31, 157, 104, 0.24);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#panel-login-overlay .activation-submit-btn:hover,
#panel-login-overlay .activation-submit-btn:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 20px 34px rgba(31, 157, 104, 0.28);
}

#panel-login-overlay .activation-mode-toggle {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.35rem;
    background: rgba(25, 22, 18, 0.06);
    border-radius: 14px;
}

#panel-login-overlay .activation-mode-btn {
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #5f574f;
    font-weight: 600;
    padding: 0.75rem 1rem;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

#panel-login-overlay .activation-mode-btn.active {
    background: #ffffff;
    color: #191612;
    box-shadow: 0 8px 18px rgba(25, 22, 18, 0.08);
}

#panel-login-overlay .activation-footer-note {
    margin-top: 14px;
    color: #6f675f;
    text-align: center;
    font-size: 0.83rem;
}

#panel-login-overlay #panel-login-error {
    border-radius: 12px;
    border: 1px solid rgba(220, 53, 69, 0.2);
    font-size: 0.88rem;
}

@media (max-width: 576px) {
    #panel-login-overlay .activation-login-shell {
        width: min(95vw, 460px);
    }

    #panel-login-overlay .activation-login-card {
        padding: 24px 18px 18px;
    }

    #panel-login-overlay .activation-mode-toggle {
        grid-template-columns: 1fr;
    }

    .settings-overview-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Container do Dashboard */
#dashboard-container {
    display: flex;
    width: 100%;
    height: 100%; /* Ocupa 100% da altura do body */
    /* 'display: none;' é controlado via JavaScript para visibilidade inicial */
}

/* Sidebar */
.dashboard-sidebar {
    width: 250px; /* Largura fixa para desktop */
    background-color: var(--app-sidebar-bg);
    color: var(--app-sidebar-text);
    box-shadow: 1px 0 5px rgba(0, 0, 0, 0.1);
    transition: width 0.2s ease-in-out;
    border-right: 1px solid var(--card-border-color);
    z-index: 1000;
    overflow-y: auto; /* Permite scroll se os itens da sidebar excederem a altura */
    flex-shrink: 0; /* Impede que a sidebar encolha */
}

/* Remove a faixa cinza entre menu lateral e conteúdo. */
#sidebar-placeholder,
.dashboard-sidebar {
    border-right: 0 !important;
    box-shadow: none !important;
}

.dashboard-sidebar .nav-link {
    color: var(--app-sidebar-text);
    padding: 0.65rem 1.25rem;
    border-radius: var(--border-radius);
    margin-bottom: 0.15rem;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
    font-weight: 500;
    white-space: nowrap;
}

.dashboard-sidebar .nav-link:hover {
    background-color: var(--app-sidebar-hover-bg);
    color: var(--bs-primary);
}

.dashboard-sidebar .nav-link.active {
    background-color: var(--app-sidebar-active-bg);
    color: var(--app-sidebar-active-text);
    font-weight: 600;
}

.dashboard-sidebar .nav-link i {
    width: 22px;
    text-align: center;
    margin-right: 0.75rem !important; /* Mantém !important se for para sobrescrever Bootstrap com alta especificidade */
}

.dashboard-sidebar .sidebar-brand-link {
    flex-shrink: 0;
}

.dashboard-sidebar .sidebar-brand-logo {
    max-width: 44px;
    max-height: 44px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.dashboard-sidebar .sidebar-category-label {
    margin: 0.7rem 0.5rem 0.3rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #7c746c;
    font-weight: 700;
    border-left: 2px solid rgba(31, 157, 104, 0.35);
}

/* Conteúdo Principal do Dashboard */
.dashboard-content {
    flex-grow: 1; /* Ocupa o espaço restante ao lado da sidebar */
    background-color: var(--app-content-bg);
    padding: 2rem;
    overflow-y: auto; /* Permite scroll se o conteúdo do dashboard exceder a altura */
    height: 100%; /* Ocupa 100% da altura do pai (#dashboard-container) */
}

/* Estrutura interna do conteúdo principal precisa ocupar toda a área útil. */
#main-content-placeholder,
#main-content-placeholder .container-fluid,
#main-content-placeholder .container-fluid > .row,
.dashboard-main-content-area {
    min-height: 100%;
    height: auto;
}

.dashboard-main-content-area {
    margin-left: 0 !important;
}

/* Limita largura no desktop largo para o conteúdo não “esticar” na tela inteira */
.dashboard-page-inner,
.app-section-inner {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.section-help-card {
    border: 1px solid rgba(25, 22, 18, 0.09);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(25, 22, 18, 0.05);
}

.section-page-header-row .section-help-card {
    margin-bottom: 0;
}

.section-help-eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6f675f;
}

.section-help-card--steps .section-help-step-list {
    padding-left: 0;
    margin-bottom: 0;
}

.section-help-step {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    font-size: 0.875rem;
    line-height: 1.45;
    margin-bottom: 0.85rem;
}

.section-help-step:last-child {
    margin-bottom: 0;
}

.section-help-step-num {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(25, 135, 84, 0.12);
    color: #157347;
}

.section-help-step-text {
    flex: 1;
    min-width: 0;
    color: #3d3833;
}

/* Conexões: título + cards na mesma coluna do grid (alinhado ao guia à direita) */
#instances-section .instances-two-column-layout .section-header-main {
    min-width: 0;
}

#instances-section .instances-hero-block {
    padding: 0.25rem 0 0.5rem;
}

#instances-section .instances-hero-kicker {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #157347;
    margin-bottom: 0.35rem;
}

#instances-section .instances-hero-title {
    font-size: clamp(1.35rem, 2vw, 1.6rem);
    font-weight: 600;
    color: #1e1b18;
    letter-spacing: -0.02em;
}

#instances-section .instances-hero-lead {
    font-size: 0.94rem;
    line-height: 1.55;
    max-width: 32rem;
}

#instances-section .instances-toolbar .btn-lg {
    font-weight: 600;
}

/* Com md-2 colunas, um único card ocupa a largura inteira da área esquerda */
#instances-section .instances-grid-clean > .col:only-child {
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width: 992px) {
    .section-page-header-row .section-hint-column {
        position: sticky;
        top: 0.75rem;
        align-self: start;
    }
}

.dashboard-getting-started {
    border-left: 4px solid rgba(25, 135, 84, 0.35);
}

.dashboard-getting-started.getting-started-card--complete {
    border-left-color: #198754;
}

.getting-started-step {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem 1rem;
    align-items: start;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(25, 22, 18, 0.08);
}

.getting-started-step:last-child {
    border-bottom: none;
}

.getting-started-step--done .getting-started-body strong {
    color: #157347;
}

.getting-started-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(31, 157, 104, 0.15);
    color: #157347;
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.getting-started-step--done .getting-started-num {
    background: rgba(25, 135, 84, 0.22);
}

.getting-started-done {
    font-size: 1.25rem;
    align-self: center;
}

@media (max-width: 575.98px) {
    .getting-started-step {
        grid-template-columns: auto 1fr auto;
        gap: 0.5rem 0.35rem;
        padding: 0.75rem 0;
    }
}


/* ==========================================================================
   4. Componentes Comuns (Cards, Tabelas, Formulários, etc.)
   ========================================================================== */

/* Cards */
.card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-bottom: 1.5rem;
}

.card .card-body { /* Adicionado para consistência no padding dos cards */
    padding: 1rem;
}

.card-header {
    background-color: var(--card-header-bg);
    border-bottom: 1px solid var(--card-border-color);
    font-weight: 600;
    padding: 0.75rem 1.25rem;
}

.card-subtitle.small { /* Estilo para subtítulos de card */
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Tabelas */
.table {
    border-color: var(--card-border-color);
    font-size: 0.875em;
}

.table th {
    background-color: var(--card-header-bg); /* Consistente com card-header */
    font-weight: 600;
    border-bottom-width: 1px;
    white-space: nowrap;
}

.table td {
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

/* Formulários */
.form-label {
    font-weight: 500;
    margin-bottom: 0.3rem;
    font-size: 0.9em;
}

.form-control,
.form-select {
    font-size: 0.95rem;
}

.form-control-sm,
.form-select-sm {
    font-size: 0.875rem;
}

.form-check-label {
    font-size: 0.95rem;
}

/* Modals */
.modal-header {
    border-bottom-color: var(--card-border-color);
}

.modal-footer {
    border-top-color: var(--card-border-color);
}

/* Toast Container */
#toast-container {
    z-index: 1100;
}

/* ==========================================================================
   5. Componentes Específicos da Aplicação
   ========================================================================== */

/* Card de Instância */
.instance-card .status-alert {
    font-weight: 500;
    font-size: 0.9em;
    display: inline-flex;
    align-items: center;
    border-radius: var(--border-radius);
    border: none;
}

.instance-card .qr-container {
    padding: 1rem 0;
}

.instance-card .qr-container img {
    border: 1px solid var(--card-border-color);
    padding: 4px;
    background-color: var(--card-bg);
    border-radius: calc(var(--border-radius) / 2);
}

.instance-card .connection-message {
    margin-top: auto;
    font-size: 0.8em;
}

.instance-card .instance-actions .btn {
    padding: 0.2rem 0.5rem;
    font-size: 0.9em;
    transition: all 0.2s ease-in-out;
}

.instance-card .instance-actions .btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}

/* Log Panel e Monitor Feed */
#connection-log-panel,
#monitor-feed {
    background-color: var(--bs-light);
    border: 1px solid var(--card-border-color); /* Mantido para distinção visual */
    font-size: 0.875em;
    line-height: 1.5;
    border-radius: var(--border-radius);
}

/* Ajuste para remover bordas internas se o card-body tem p-0 */
.card-body.p-0 > #connection-log-panel,
.card-body.p-0 > #monitor-feed {
    border: none !important;
    border-radius: 0 !important; /* Remove borda do log se o card-body não tem padding */
}

/* Progresso (Validação e Disparo) */
#validation-progress-container .progress,
#progress-container .progress {
    height: 20px;
    font-size: 0.8em;
}

/* Lista de Falhas */
#detailed-failed-list .list-group-item {
    padding: 0.3rem 0.6rem;
}

/* Fluxos */
.flow-step-item {
    border: 1px dashed var(--bs-secondary);
}

.flow-step-item .btn-sm {
    padding: 0.15rem 0.4rem;
    font-size: 0.75em;
}

/* Ajustes CKEditor */
.ck-editor__editable_inline {
    border: 1px solid var(--card-border-color) !important;
    border-top: 0 !important;
    border-radius: 0 0 var(--border-radius) var(--border-radius) !important;
    min-height: 150px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.075);
}

.ck.ck-toolbar {
    border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
    border-color: var(--card-border-color) !important;
    background-color: var(--card-header-bg) !important;
}

/* Cabeçalho do Dashboard */
#greeting-datetime {
    font-size: 0.85em;
}

/* Estilo para destacar item da sidebar no tutorial */
.dashboard-sidebar .nav-link.tutorial-highlight {
    background-color: var(--bs-primary-hover);
    border-left: 3px solid var(--bs-primary);
    font-weight: bold;
}

/* ==========================================================================
   6. Estilos Específicos de Seções (CRM Kanban, Chat, Contatos)
   ========================================================================== */

/* --------------------------------------------------------------------------
   6.1 CRM Kanban
   -------------------------------------------------------------------------- */
.kanban-board-container {
    width: 100%;
    overflow-x: auto; /* Permite scroll horizontal para o quadro Kanban */
}

.kanban-board {
    display: flex; /* Colunas lado a lado */
    gap: 1rem;    /* Espaço entre colunas */
    padding-bottom: 1rem; /* Espaço abaixo do quadro */
    min-width: fit-content; /* Garante que o container interno cresça com as colunas */
}

.kanban-column {
    min-width: 280px; /* Largura mínima da coluna */
    max-width: 320px; /* Largura máxima da coluna */
    flex: 0 0 auto;  /* Impede que as colunas encolham/estiquem demais */
}

.kanban-column .card { /* Card que representa a coluna */
    height: 100%;
    background-color: #f1f3f5; /* Fundo da coluna um pouco mais escuro */
}

.kanban-column .card-header {
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    background-color: #e9ecef; /* Cabeçalho da coluna um pouco mais escuro */
}

.kanban-cards { /* Container dos cards de oportunidade dentro de uma coluna */
    min-height: 400px;
    max-height: calc(100vh - 250px); /* Altura máxima para permitir scroll interno */
    overflow-y: auto;
    background-color: var(--bs-light); /* Fundo da área dos cards */
    padding: 0.75rem;
}

.kanban-card { /* Card de oportunidade individual */
    cursor: grab;
    background-color: var(--card-bg);
    border: 1px solid var(--card-border-color);
    border-radius: var(--border-radius);
    padding: 0.75rem;
    transition: box-shadow 0.2s ease-in-out;
    position: relative; /* Para posicionamento de botões de ação */
    margin-bottom: 0.75rem;
}

.kanban-card:hover {
    box-shadow: var(--box-shadow);
}

.kanban-card-profile-pic {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.kanban-card .btn-group { /* Botões de ação no card */
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    opacity: 0; /* Escondido por padrão */
    transition: opacity 0.2s ease-in-out;
}

.kanban-card:hover .btn-group {
    opacity: 1; /* Visível no hover */
}

.kanban-card-ghost { /* Estilo para o placeholder do SortableJS */
    opacity: 0.4;
    background: #c8ebfb; /* Cor de placeholder */
}

/* Input de Tags Customizado (CRM) */
.deal-tags-input-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    min-height: calc(1.5em + 0.75rem + 2px); /* Altura similar a um form-control */
    cursor: text;
    border: 1px solid var(--card-border-color);
    border-radius: var(--border-radius);
    background-color: var(--card-bg);
}

.deal-tags-input-container .badge {
    margin-right: 0.25rem;
    margin-bottom: 0.25rem; /* Para tags que quebram linha */
    padding: 0.3em 0.6em;
}

.deal-tag-input-field {
    border: none;
    outline: none;
    flex-grow: 1;
    min-width: 100px; /* Para não ficar muito pequeno */
    padding: 0; /* Remove padding interno do input */
    margin-bottom: 0.25rem; /* Alinha com as badges */
    background-color: transparent;
}


/* ==========================================================================
   10. Rebrand UI (Landing-aligned)
   ========================================================================== */

:root {
    --bs-primary: #1f9d68;
    --bs-primary-rgb: 31, 157, 104;
    --bs-primary-hover: #16784f;
    --bs-secondary: #6f675f;
    --bs-light: #fffaf3;
    --bs-dark: #191612;
    --bs-dark-rgb: 25, 22, 18;

    --app-sidebar-bg: rgba(255, 252, 246, 0.92);
    --app-sidebar-text: #2a2621;
    --app-sidebar-hover-bg: rgba(31, 157, 104, 0.1);
    --app-sidebar-active-bg: #1f9d68;
    --app-sidebar-active-text: #ffffff;

    --app-content-bg: transparent;
    --card-bg: rgba(255, 252, 246, 0.92);
    --card-border-color: rgba(25, 22, 18, 0.09);
    --card-header-bg: rgba(255, 255, 255, 0.72);
    --border-radius: 14px;
    --box-shadow: 0 18px 38px rgba(40, 28, 18, 0.1);

    --whatsapp-chat-area-bg: #efe8de;
}

body {
    font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
    background:
        radial-gradient(circle at top left, rgba(255, 122, 26, 0.14), transparent 25%),
        radial-gradient(circle at top right, rgba(31, 157, 104, 0.12), transparent 24%),
        linear-gradient(180deg, #fff8ee 0%, #f2e8db 100%);
}

h1, h2, h3, h4, h5, h6,
.btn,
.form-label,
.dashboard-sidebar .nav-link,
.card-header,
.navbar-brand,
#dashboard-header-title {
    font-family: 'Sora', 'Segoe UI', sans-serif;
}

.navbar {
    background: rgba(25, 22, 18, 0.9) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.navbar .nav-link,
.navbar .navbar-brand {
    color: #fff !important;
}

.navbar-brand img {
    max-height: 28px;
    width: auto;
    object-fit: contain;
}

.navbar .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

.navbar .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.12);
}

.dashboard-sidebar {
    border-right: none;
    box-shadow: none;
}

.dashboard-sidebar .nav-link {
    border-radius: 12px;
    margin-bottom: 0.25rem;
    font-size: 0.88rem;
    letter-spacing: 0.01em;
}

.dashboard-sidebar .nav-link.active {
    box-shadow: 0 10px 20px rgba(31, 157, 104, 0.25);
}

.dashboard-content {
    padding: 1.35rem;
}

.dashboard-section {
    background: rgba(255, 252, 246, 0.72);
    border: 1px solid rgba(25, 22, 18, 0.07);
    border-radius: 18px;
    box-shadow: 0 20px 44px rgba(40, 28, 18, 0.09);
    padding: 1rem;
    margin-bottom: 1rem;
}

.dashboard-section > h3,
.dashboard-section .h2,
#dashboard-header-title {
    letter-spacing: -0.02em;
    color: #191612;
}

.card {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--box-shadow);
}

.card-header {
    border-bottom: 1px solid rgba(25, 22, 18, 0.08);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(246, 255, 251, 0.78));
}

.card-title {
    color: #191612;
}

.form-control,
.form-select,
.input-group-text,
.form-check-input {
    border-radius: 11px;
    border-color: rgba(25, 22, 18, 0.14);
    background-color: #fffdf8;
}

.form-control:focus,
.form-select:focus {
    border-color: #1f9d68;
    box-shadow: 0 0 0 0.2rem rgba(31, 157, 104, 0.16);
}

.btn {
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.btn-primary,
.btn-success {
    background: linear-gradient(135deg, #1f9d68 0%, #126942 100%);
    border-color: #1f9d68;
}

.btn-primary:hover,
.btn-success:hover {
    background: linear-gradient(135deg, #188055 0%, #0f5b39 100%);
    border-color: #188055;
}

.btn-warning {
    color: #191612;
    background: linear-gradient(135deg, #ffc057 0%, #ff9b30 100%);
    border-color: #ffb144;
}

.btn-outline-secondary,
.btn-outline-light,
.btn-outline-primary,
.btn-outline-success,
.btn-outline-danger {
    border-radius: 999px;
}

.table {
    border-radius: 12px;
    overflow: hidden;
}

.table thead th {
    font-family: 'Sora', 'Segoe UI', sans-serif;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6f675f;
}

.table-hover tbody tr:hover {
    background-color: rgba(31, 157, 104, 0.06);
}

.list-group-item {
    border-color: rgba(25, 22, 18, 0.08);
}

.badge.bg-primary {
    background: #1f9d68 !important;
}

.toast {
    border-radius: 12px;
    box-shadow: 0 14px 30px rgba(40, 28, 18, 0.2);
}


.modal-content {
    border-radius: 16px;
    border: 1px solid rgba(25, 22, 18, 0.09);
    box-shadow: 0 26px 54px rgba(40, 28, 18, 0.2);
}

.offcanvas {
    border-left: 1px solid rgba(25, 22, 18, 0.09);
}

@media (max-width: 991px) {
    .dashboard-sidebar {
        width: 230px;
    }

    .dashboard-content {
        padding: 0.8rem;
    }

    .dashboard-section {
        padding: 0.8rem;
    }
}

.kpi-card {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(25, 22, 18, 0.08);
    background: #ffffff;
}

.dashboard-overview-header {
    padding: 0.2rem 0.1rem 0.6rem;
    border-bottom: 1px solid rgba(25, 22, 18, 0.08);
}

.settings-overview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.settings-card {
    border: 1px solid rgba(25, 22, 18, 0.08);
    box-shadow: 0 18px 36px rgba(40, 28, 18, 0.06);
}

.settings-card-eyebrow {
    display: inline-block;
    margin-bottom: 0.65rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a6c45;
}

.settings-checklist {
    padding-left: 1.1rem;
    color: #4d453d;
}

.settings-checklist li + li {
    margin-top: 0.55rem;
}

#settings-section .form-control[readonly] {
    background: rgba(25, 22, 18, 0.04);
    color: #62584f;
}

#settings-section .alert {
    margin-bottom: 1rem;
}

/* Configurações — layout em sessões + navegação lateral */
.settings-page-grid {
    display: grid;
    gap: 1.75rem;
    grid-template-columns: 1fr;
}

@media (min-width: 992px) {
    .settings-page-grid {
        grid-template-columns: minmax(200px, 240px) 1fr;
        align-items: start;
        gap: 2rem;
    }

    .settings-page-nav .settings-section-list {
        position: sticky;
        top: 1rem;
    }
}

.settings-page-main {
    min-width: 0;
}

.settings-nav-item {
    font-size: 0.9rem;
    padding: 0.65rem 1rem;
    border-color: rgba(25, 22, 18, 0.08);
    color: #4d453d;
}

.settings-nav-item:hover {
    background: rgba(138, 108, 69, 0.06);
    color: #2f2923;
}

.settings-session {
    scroll-margin-top: 0.75rem;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(25, 22, 18, 0.08);
}

.settings-session-last {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.settings-session-header {
    margin-bottom: 1.25rem;
}

.settings-session-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #2f2923;
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.settings-session-title-icon {
    display: inline-flex;
    width: 2.35rem;
    height: 2.35rem;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(138, 108, 69, 0.12);
    color: #6b5435;
    font-size: 1rem;
}

.settings-session-desc {
    max-width: 62ch;
    margin-left: 3rem;
}

@media (max-width: 575px) {
    .settings-session-desc {
        margin-left: 0;
    }
}

.settings-section-pills .settings-pill-link {
    white-space: nowrap;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.4rem 0.95rem;
    color: #4d453d;
    border: 1px solid rgba(25, 22, 18, 0.12);
    background: #fff;
}

.settings-section-pills .settings-pill-link:hover {
    border-color: rgba(138, 108, 69, 0.35);
    color: #2f2923;
    background: rgba(138, 108, 69, 0.06);
}

.settings-api-ref-list {
    padding-left: 1.25rem;
    color: #4d453d;
}

.settings-api-ref-list li + li {
    margin-top: 0.55rem;
}

.settings-api-table thead th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: #736a62;
}


.dashboard-overview-subtitle {
    color: #6f675f;
    max-width: 68ch;
}

/* Dashboard inicial — cabeçalho leve + métricas em grade */
.dashboard-hero-slim {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(25, 22, 18, 0.07);
}

.dashboard-quick-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.5rem;
    font-size: 0.9rem;
    line-height: 1.6;
}

.dashboard-quick-link {
    color: #157347;
    text-decoration: none;
    font-weight: 500;
}

.dashboard-quick-link:hover {
    color: #0f5132;
    text-decoration: underline;
}

.dashboard-quick-sep {
    color: #b5aea5;
    user-select: none;
}

.dashboard-metrics-card {
    border-radius: 14px;
    overflow: hidden;
}

.dashboard-metrics-grid {
    border-top: 1px solid rgba(25, 22, 18, 0.06);
}

.dashboard-metric-cell {
    padding: 0.9rem 0.65rem;
    border-bottom: 1px solid rgba(25, 22, 18, 0.06);
    border-right: 1px solid rgba(25, 22, 18, 0.06);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.15rem;
    min-height: 92px;
}

@media (min-width: 992px) {
    .dashboard-metric-cell:nth-child(6n) {
        border-right: none;
    }
}

.dashboard-metric-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7a7168;
}

.dashboard-metric-value {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #191612;
    line-height: 1.2;
}

.dashboard-metric-value--sm {
    font-size: 1rem;
    font-weight: 700;
}

.dashboard-metric-sub {
    font-size: 0.78rem;
    color: #6f675f;
    line-height: 1.25;
}

.dashboard-metric-crm-rows {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    align-items: flex-start;
}

.dashboard-metric-cell--crm .dashboard-metric-crm-block {
    min-width: 0;
    flex: 1 1 72px;
}

.kpi-group-title {
    margin-bottom: 0.8rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6f675f;
}

.kpi-card .card-title {
    margin: 0;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #60574f;
}

.kpi-card .card-text {
    margin: 8px 0 2px;
    letter-spacing: -0.02em;
    color: #191612;
}

.kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.kpi-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-grid;
    place-items: center;
    background: rgba(25, 22, 18, 0.06);
    color: #3f3832;
    font-size: 0.88rem;
}

.kpi-subtext {
    display: block;
    color: #7a7168;
    font-size: 0.82rem;
}

.kpi-footnote {
    margin-top: 8px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.82;
}

.kpi-tone-green {
    border-left: 4px solid #1f9d68;
}

.kpi-tone-emerald {
    border-left: 4px solid #1c8a5f;
}

.kpi-tone-blue {
    border-left: 4px solid #1f89b8;
}

.kpi-tone-teal {
    border-left: 4px solid #228f8b;
}

.kpi-tone-amber {
    border-left: 4px solid #d99a2b;
}

.kpi-tone-slate {
    border-left: 4px solid #66707b;
}

.kpi-tone-rose {
    border-left: 4px solid #cf4b5c;
}

.kpi-tone-light {
    border-left: 4px solid #c0c7ce;
}

.kpi-caption {
    font-size: 0.78rem;
    color: #6f675f;
    margin-top: 6px;
}

#instances-section .instances-grid-clean .instance-card {
    border-radius: 16px;
    border: 1px solid rgba(25, 22, 18, 0.08);
    background: rgba(255, 255, 255, 0.9);
    overflow: hidden;
}

#instances-section .instances-grid-clean {
    align-items: flex-start;
}

#instances-section .instances-toolbar .btn {
    border-radius: 999px;
    padding-inline: 1rem;
    font-weight: 600;
}

#instances-section .instances-empty-state .card {
    border-radius: 16px;
    border: 1px dashed rgba(25, 22, 18, 0.16);
    background: rgba(255, 255, 255, 0.78);
}

#instances-section .instances-empty-state i {
    opacity: 0.65;
}

#instances-section .instances-grid-clean .instance-card .card-header {
    padding: 0.72rem 0.9rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(244, 252, 247, 0.72));
}

#instances-section .instances-grid-clean .instance-card .card-body {
    padding: 0.88rem;
    gap: 0.55rem;
}

#instances-section .instance-header-title {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #635a52;
}

#instances-section .instance-card .status-container {
    margin-bottom: 0.3rem !important;
    gap: 0.35rem;
}

#instances-section .instance-card .status-alert {
    border-radius: 999px;
    font-weight: 600;
}

#instances-section .instance-card .qr-container {
    margin-top: 0.15rem;
    padding: 0.8rem 0.7rem;
    border: 1px dashed rgba(25, 22, 18, 0.14);
    border-radius: 14px;
    background: rgba(250, 249, 246, 0.92);
}

#instances-section .instance-card .qr-container p {
    margin-bottom: 0.55rem;
    font-size: 0.79rem;
}

#instances-section .instance-card .qr-container img {
    max-width: 160px !important;
    border-radius: 10px;
}

#instances-section .instance-card .connection-message {
    margin-top: 0.3rem;
    border-radius: 10px;
    font-size: 0.8rem;
}

#instances-section .instances-loading-copy {
    border: 1px dashed rgba(25, 22, 18, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.7);
}


#mass-send-section .campaign-header-clean,
#test-send-section .campaign-header-clean {
    padding: 0.2rem 0.1rem 0.6rem;
    border-bottom: 1px solid rgba(25, 22, 18, 0.08);
}

#mass-send-section .campaign-layout-wrap {
    max-width: 1240px;
    margin: 0 auto;
}

#mass-send-section .campaign-wizard-indicator {
    margin-inline: 0 !important;
}

#mass-send-section .campaign-step-card,
#test-send-section .campaign-step-card,
#mass-send-section .campaign-monitor-card,
#test-send-section .campaign-monitor-card {
    border-radius: 16px;
    border: 1px solid rgba(25, 22, 18, 0.08);
    background: rgba(255, 255, 255, 0.9);
}

#mass-send-section .campaign-step-label,
#test-send-section .campaign-step-label {
    display: inline-flex;
    margin-bottom: 0.55rem;
    padding: 0.28rem 0.62rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #16784f;
    background: rgba(31, 157, 104, 0.14);
    border: 1px solid rgba(31, 157, 104, 0.2);
}

#mass-send-section .campaign-target-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem 0.8rem;
}

#mass-send-section .campaign-target-grid .form-check {
    margin: 0;
    padding: 0.62rem 0.7rem 0.62rem 2rem;
    border-radius: 12px;
    border: 1px solid rgba(25, 22, 18, 0.1);
    background: rgba(255, 255, 255, 0.82);
}

#mass-send-section .campaign-option-box {
    border: 1px solid rgba(25, 22, 18, 0.09);
    border-radius: 12px;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.72);
}

#mass-send-section .campaign-tips-card {
    border-radius: 14px;
    border: 1px solid rgba(25, 22, 18, 0.1);
    background: rgba(255, 255, 255, 0.94);
    position: sticky;
    top: 84px;
}

#mass-send-section .campaign-tips-card .card-header {
    background: rgba(250, 246, 235, 0.9);
    border-bottom: 1px solid rgba(25, 22, 18, 0.08);
}

#mass-send-section .campaign-tips-list li {
    margin-bottom: 0.45rem;
    color: #5f574f;
}

#mass-send-section .campaign-tips-list li:last-child {
    margin-bottom: 0;
}

#mass-send-section .campaign-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

#mass-send-section .campaign-stat-box {
    border: 1px solid rgba(25, 22, 18, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.76);
    padding: 0.55rem 0.65rem;
}

#mass-send-section .campaign-stat-box span {
    display: block;
    font-size: 0.76rem;
    color: #6f675f;
}

#mass-send-section .campaign-stat-box strong {
    display: block;
    margin-top: 0.1rem;
    font-size: 1.07rem;
    color: #191612;
}

#mass-send-section #detailed-failed-list:empty::before {
    content: "Nenhuma falha registrada.";
    display: block;
    text-align: center;
    color: #7a7168;
    font-size: 0.82rem;
    padding: 0.9rem;
}

#test-send-section .test-checklist {
    border: 1px solid rgba(25, 22, 18, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.78);
    padding: 0.7rem;
    display: grid;
    gap: 0.45rem;
}

#test-send-section .test-checklist-item {
    display: flex;
    align-items: center;
    gap: 0.48rem;
    color: #3f3832;
    font-size: 0.84rem;
}

#test-send-section .test-checklist-item i {
    color: #1f9d68;
}

#contacts-section .contacts-header-clean,
#templates-section .templates-header-clean {
    padding: 0.2rem 0.1rem 0.6rem;
    border-bottom: 1px solid rgba(25, 22, 18, 0.08);
}

#contacts-section .contacts-side-card,
#contacts-section .contacts-main-card,
#contacts-section .contacts-tool-card,
#templates-section .templates-side-card,
#templates-section .templates-main-card {
    border-radius: 16px;
    border: 1px solid rgba(25, 22, 18, 0.08);
    background: rgba(255, 255, 255, 0.9);
}

#contacts-section .contacts-main-card .table thead th,
#templates-section .templates-main-card .table thead th {
    font-size: 0.81rem;
    letter-spacing: 0.04em;
}

#contacts-section #contact-search,
#contacts-section #contact-list-filter {
    min-height: 36px;
}

#contacts-section #contact-actions-dropdown-container .btn {
    width: 100%;
}

#contacts-section #lists-panel .list-group-item {
    padding-top: 0.62rem;
    padding-bottom: 0.62rem;
}

#templates-section .templates-tips-list {
    margin: 0;
    padding-left: 1rem;
    display: grid;
    gap: 0.32rem;
    color: #4d4640;
    font-size: 0.84rem;
}

#templates-section .templates-main-card .table td:nth-child(2) {
    color: #6f675f;
}

#flows-section .flows-header-clean,
#scheduling-section .scheduling-header-clean {
    padding: 0.2rem 0.1rem 0.6rem;
    border-bottom: 1px solid rgba(25, 22, 18, 0.08);
}

#flows-section .flows-side-card,
#flows-section .flows-main-card,
#scheduling-section .scheduling-main-card {
    border-radius: 16px;
    border: 1px solid rgba(25, 22, 18, 0.08);
    background: rgba(255, 255, 255, 0.9);
}

#flows-section .flows-tips-list {
    margin: 0;
    padding-left: 1rem;
    display: grid;
    gap: 0.34rem;
    color: #4d4640;
    font-size: 0.84rem;
}

#flows-section .flows-main-card .table thead th,
#scheduling-section .scheduling-main-card .table thead th {
    font-size: 0.81rem;
    letter-spacing: 0.04em;
}

#scheduling-section .scheduling-inline-help {
    border: 1px dashed rgba(25, 22, 18, 0.12);
    border-radius: 11px;
    padding: 0.42rem 0.65rem;
    background: rgba(255, 255, 255, 0.62);
}

#history-section .history-header-clean,
#validation-section .validation-header-clean {
    padding: 0.2rem 0.1rem 0.6rem;
    border-bottom: 1px solid rgba(25, 22, 18, 0.08);
}

#history-section .history-main-card,
#validation-section .validation-step-card,
#validation-section .validation-monitor-card {
    border-radius: 16px;
    border: 1px solid rgba(25, 22, 18, 0.08);
    background: rgba(255, 255, 255, 0.9);
}

#history-section .history-main-card .table thead th,
#validation-section .validation-monitor-card .table thead th {
    font-size: 0.81rem;
    letter-spacing: 0.04em;
}

#history-section .history-inline-help {
    border: 1px dashed rgba(25, 22, 18, 0.12);
    border-radius: 11px;
    padding: 0.42rem 0.65rem;
    background: rgba(255, 255, 255, 0.62);
}

/* ===== Melhor legibilidade: Agenda, Modelos, Contatos e Histórico ===== */
#scheduling-section .scheduling-main-card,
#templates-section .templates-main-card,
#contacts-section .contacts-main-card,
#history-section .history-main-card {
    max-width: 1320px;
    margin-inline: auto;
}

#scheduling-section .dashboard-overview-subtitle,
#templates-section .dashboard-overview-subtitle,
#contacts-section .dashboard-overview-subtitle,
#history-section .dashboard-overview-subtitle {
    font-size: 0.95rem;
}

#scheduling-section .table,
#templates-section .table,
#contacts-section .table,
#history-section .table {
    font-size: 0.92rem;
    line-height: 1.35;
}

#scheduling-section .table > :not(caption) > * > * ,
#templates-section .table > :not(caption) > * > * ,
#contacts-section .table > :not(caption) > * > * ,
#history-section .table > :not(caption) > * > * {
    padding-top: 0.62rem;
    padding-bottom: 0.62rem;
    vertical-align: middle;
}

#scheduling-section .form-select-sm,
#templates-section .form-select-sm,
#contacts-section .form-select-sm,
#history-section .form-select-sm,
#scheduling-section .form-control-sm,
#templates-section .form-control-sm,
#contacts-section .form-control-sm,
#history-section .form-control-sm {
    min-height: 40px;
    font-size: 0.92rem;
}

#scheduling-section .btn-sm,
#templates-section .btn-sm,
#contacts-section .btn-sm,
#history-section .btn-sm {
    font-size: 0.85rem;
    padding: 0.34rem 0.62rem;
}

#scheduling-section .pagination,
#contacts-section .pagination,
#history-section .pagination {
    gap: 0.2rem;
}

#scheduling-section .pagination .page-link,
#contacts-section .pagination .page-link,
#history-section .pagination .page-link {
    padding: 0.42rem 0.72rem;
    font-size: 0.9rem;
}

#contacts-section #lists-panel .list-group-item {
    font-size: 0.9rem;
}

#templates-section .templates-main-card .table td:nth-child(2),
#history-section .history-inline-help,
#scheduling-section .scheduling-inline-help {
    font-size: 0.9rem;
}

#validation-section .validation-option-box {
    border: 1px solid rgba(25, 22, 18, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.75);
    padding: 0.72rem;
}

#crm-section .crm-header-clean,
#faq-section .faq-header-clean {
    padding: 0.2rem 0.1rem 0.6rem;
    border-bottom: 1px solid rgba(25, 22, 18, 0.08);
}

#crm-section .crm-side-card,
#crm-section .crm-main-card,
#faq-section .faq-side-card,
#faq-section .faq-main-card {
    border-radius: 16px;
    border: 1px solid rgba(25, 22, 18, 0.08);
    background: rgba(255, 255, 255, 0.9);
}

#crm-section .crm-tips-list,
#faq-section .faq-tips-list {
    margin: 0;
    padding-left: 1rem;
    display: grid;
    gap: 0.34rem;
    color: #4d4640;
    font-size: 0.84rem;
}

#crm-section .crm-main-card .input-group-text {
    background: rgba(255, 255, 255, 0.8);
}

#faq-section #faq-content .accordion-item {
    border: 1px solid rgba(25, 22, 18, 0.08);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0.6rem;
}

@media (max-width: 991.98px) {
    #contacts-section #contact-actions-dropdown-container .btn {
        width: auto;
    }
}

@media (max-width: 1199.98px) {
    #mass-send-section .campaign-target-grid {
        grid-template-columns: 1fr;
    }
}

/* Densidade visual adaptativa para Conexões WhatsApp */
@media (min-width: 1500px) {
    #instances-section .dashboard-overview-subtitle {
        font-size: 0.92rem;
    }

    #instances-section .instances-grid-clean {
        gap: 1rem;
    }

    #instances-section .instances-grid-clean .instance-card .card-body {
        padding: 1rem;
    }

    #instances-section .instance-card .qr-container img {
        max-width: 176px !important;
    }

}

@media (max-width: 1366px) and (min-width: 768px) {
    #instances-section .dashboard-overview-header {
        margin-bottom: 0.65rem !important;
    }

    #instances-section .dashboard-overview-subtitle {
        font-size: 0.8rem;
    }

    #instances-section .instances-grid-clean {
        gap: 0.6rem;
    }

    #instances-section .instances-grid-clean .instance-card {
        border-radius: 14px;
    }

    #instances-section .instances-grid-clean .instance-card .card-header {
        padding: 0.58rem 0.7rem;
    }

    #instances-section .instances-grid-clean .instance-card .card-body {
        padding: 0.75rem;
    }

    #instances-section .instance-card .qr-container {
        padding: 0.65rem 0.55rem;
    }

    #instances-section .instance-card .qr-container img {
        max-width: 146px !important;
    }

    #instances-section .instance-header-title {
        font-size: 0.76rem;
        letter-spacing: 0.04em;
    }

    #instances-section .instance-card .status-alert,
    #instances-section .instance-card .connection-message {
        font-size: 0.78rem;
    }

    #instances-section .instance-card .instance-actions .btn {
        padding: 0.15rem 0.4rem;
        font-size: 0.82rem;
    }

}

@media (max-width: 1200px) {
    .dashboard-sidebar {
        width: 86px;
        padding-left: 0.45rem !important;
        padding-right: 0.45rem !important;
    }

    .dashboard-sidebar .nav-link {
        font-size: 0;
        padding: 0.75rem 0.45rem;
        justify-content: center;
        text-align: center;
    }

    .dashboard-sidebar .nav-link i {
        margin-right: 0 !important;
        font-size: 1.05rem;
        width: auto;
    }

    .dashboard-sidebar #app-version,
    .dashboard-sidebar hr,
    .dashboard-sidebar .sidebar-brand-logo,
    .dashboard-sidebar .sidebar-category-label {
        display: none;
    }

    .kpi-group-title {
        font-size: 0.72rem;
    }

    .dashboard-content {
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }
}


/* --------------------------------------------------------------------------
   6.3 Seção Contatos e Listas
   -------------------------------------------------------------------------- */
#lists-panel .list-group-item {
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
    font-size: 0.9em;
    padding: 0.6rem 1rem;
}

#lists-panel .list-group-item:hover {
    background-color: var(--app-sidebar-hover-bg);
}

#lists-panel .list-group-item.active {
    background-color: var(--bs-primary);
    color: var(--app-sidebar-active-text);
    border-color: var(--bs-primary);
}

#contacts-table-body .btn-sm,
#templates-table-body .btn-sm,
#flows-table-body .btn-sm,
#scheduled-campaigns-body .btn-sm,
#campaign-history-body .btn-sm {
    padding: 0.15rem 0.4rem;
    font-size: 0.8em;
}

/* ==========================================================================
   7. Utilitários e Helpers
   ========================================================================== */
.text-muted {
    color: #6c757d !important;
}

pre {
    white-space: pre-wrap;
    word-break: break-all;
    background-color: var(--bs-light);
    color: var(--bs-dark);
    padding: 0.5rem;
    border-radius: calc(var(--border-radius) / 2);
    font-size: 0.9em;
    border: 1px solid var(--card-border-color);
}

.shared-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.5rem;
}

.shared-media-grid .col-4 { /* Se você ainda usa col-4, pode remover se o grid direto for melhor */
    padding: 0; /* Remova se o gap do grid for suficiente */
}

.shared-media-grid a {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
    aspect-ratio: 1 / 1;
    background-color: var(--bs-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary);
}

.shared-media-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   8. Responsividade
   ========================================================================== */
/* Regras para telas menores que o breakpoint md (768px) */
@media (max-width: 767.98px) {

    /* --- Ajustes Gerais de Layout Responsivo --- */
    .dashboard-sidebar {
        width: 100%;
        height: auto; /* Permite que o conteúdo defina a altura em telas pequenas */
        position: static; /* Remove posicionamento fixo/absoluto */
        overflow-y: visible; /* Permite scroll do body se o conteúdo da sidebar for grande */
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); /* Sombra inferior quando empilhado */
        border-right: none; /* Remove borda lateral */
        border-bottom: 1px solid var(--card-border-color); /* Adiciona borda inferior */
    }

    .dashboard-content {
        padding: 1rem; /* Reduz padding em telas menores */
        height: auto; /* Permite que o conteúdo defina a altura */
        overflow-y: visible; /* O scroll principal será no body se necessário */
    }

    /* Ajustes para o Kanban em telas menores */
    .kanban-board {
        flex-direction: column; /* Empilha as colunas */
        overflow-x: hidden; /* Remove scroll horizontal forçado */
        gap: 0.5rem; /* Reduz gap entre colunas empilhadas */
    }

    .kanban-column {
        min-width: 100%; /* Ocupa a largura total */
        max-width: 100%;
        margin-bottom: 0.5rem; /* Espaço entre colunas empilhadas */
    }
     .kanban-cards { /* Container dos cards de oportunidade dentro de uma coluna */
        min-height: 200px; /* Altura mínima reduzida */
        max-height: 300px; /* Altura máxima para permitir scroll interno */
    }



}/* Fim do breakpoint < md (767.98px) */


/* Regras para telas extra pequenas (menores que 576px) */


/* ==========================================================================
   9. Ajustes Finais e Overrides (Usar com Cuidado)
   ========================================================================== */

#dashboard-instance-summary-list .list-group-item {
    padding: 0.5rem 1.25rem;
    font-size: 0.85em;
    border-left: 0;
    border-right: 0;
}

#instance-status-chart-placeholder,
#instance-status-chart {
    display: block;
    box-sizing: border-box;
    height: 180px !important;
    width: 100% !important;
    background-color: #f8f9fa;
    border: 1px dashed #ced4da;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-style: italic;
}
#instance-status-chart-placeholder::before {
    content: "Carregando gráfico...";
}


#dashboard-activity-feed {
    font-size: 0.85em;
    background-color: var(--bs-light);
    border: 1px solid var(--card-border-color);
    border-radius: var(--border-radius);
}

#dashboard-activity-feed p {
    margin-bottom: 0.5rem;
}

#faq-content .accordion-item {
    border-left: 0;
    border-right: 0;
}


/* Estilo para Ícone no Preview da Última Mensagem na Lista de Chats */
.chat-item-last-message .chat-last-message-icon {
    margin-right: 5px;
    font-size: 0.95em; /* Tamanho ligeiramente menor que o texto */
    color: var(--whatsapp-text-secondary); /* Usa a cor secundária */
    vertical-align: baseline; /* Tenta alinhar com a linha de base do texto */
}

mark.chat-search-highlight.chat-search-hit-active {
    background-color: #ffecb3 !important;
    outline: 2px solid rgba(255, 193, 7, 0.6);
}

/* Modal seletor de figurinhas */
.sticker-picker-tabs .btn-pack-tab.active {
    background-color: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
}

.sticker-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 0.5rem;
}

.sticker-picker-item {
    border: 1px solid var(--card-border-color);
    border-radius: var(--border-radius);
    padding: 0.25rem;
    background: var(--bs-light);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.sticker-picker-item:hover {
    transform: scale(1.05);
    box-shadow: var(--box-shadow);
}

.sticker-picker-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: calc(var(--border-radius) - 2px);
}

/* ==========================================================================
   Transição pós-login (GIF + fallback spinner)
   ========================================================================== */

.post-login-transition {
    position: fixed;
    inset: 0;
    z-index: 10850;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
}

.post-login-transition__backdrop {
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(15, 22, 18, 0.72) 0%, rgba(18, 40, 31, 0.85) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.post-login-transition--enter .post-login-transition__backdrop {
    opacity: 1;
}

.post-login-transition__panel {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 2rem 2.25rem;
    border-radius: 22px;
    background: rgba(255, 252, 246, 0.94);
    border: 1px solid rgba(31, 157, 104, 0.18);
    box-shadow:
        0 28px 60px rgba(12, 32, 24, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    max-width: min(340px, 92vw);
    transform: translateY(12px) scale(0.98);
    opacity: 0;
    transition:
        opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.post-login-transition--enter .post-login-transition__panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.post-login-transition--leave .post-login-transition__backdrop {
    opacity: 0;
    transition: opacity 0.45s ease;
}

.post-login-transition--leave .post-login-transition__panel {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
    transition:
        opacity 0.42s ease,
        transform 0.42s ease;
}

.post-login-transition__media {
    position: relative;
    width: 72px;
    height: 72px;
    margin: 0 auto 1rem;
}

.post-login-transition__gif {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 3px 8px rgba(18, 60, 40, 0.2));
}

.post-login-transition__spinner {
    position: absolute;
    inset: 0;
    width: 48px;
    height: 48px;
    margin: auto;
    border-radius: 50%;
    border: 3px solid rgba(31, 157, 104, 0.22);
    border-top-color: #1f9d68;
    animation: post-login-spin 0.82s linear infinite;
    opacity: 1;
    transition: opacity 0.22s ease;
}

.post-login-transition__media--gif-ready .post-login-transition__spinner {
    opacity: 0;
    visibility: hidden;
}

.post-login-transition__media--fallback .post-login-transition__gif {
    display: none;
}

.post-login-transition__media--fallback .post-login-transition__spinner {
    visibility: visible;
    opacity: 1;
}

.post-login-transition__title {
    font-family: 'Sora', 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: #191612;
    margin-bottom: 0.35rem;
}

.post-login-transition__hint {
    color: #6f675f !important;
}

@keyframes post-login-spin {
    to {
        transform: rotate(360deg);
    }
}