/* ============================================================
   Avocati BeXa3 — Estilos Globais
   ============================================================
   GUIA PARA O DESIGNER
   ============================================================

   VARIAVEIS DE TEMA (editar aqui muda o sistema inteiro):
   --------------------------------------------------------
   Todas as variaveis ficam no bloco :root abaixo.
   Para mudar a identidade visual, ajuste apenas este bloco.

   ESTRUTURA DO ARQUIVO:
   --------------------------------------------------------
   1.  :root — Variaveis de tema (cores, fontes, espacamentos)
   2.  Layout global — body, main wrapper
   3.  Sidebar / Menu lateral
   4.  Topbar / Header
   5.  Mega Menu
   6.  Cards KPI (indicadores de dashboard)
   7.  Tabelas
   8.  Formularios
   9.  Badges de status
   10. Botoes extras
   11. Componentes por modulo (Financeiro, Agenda, CRM, etc.)
   12. Dark Mode — todas as sobrescritas de tema escuro
   13. Responsivo — breakpoints mobile/tablet

   COMO MUDAR CORES:
   --------------------------------------------------------
   - Cor principal (azul): --color-primary
   - Cor de fundo das paginas: --color-bg-page
   - Cor da sidebar: --color-bg-sidebar
   - Texto principal: --color-text-primary
   - Bordas: --color-border

   FONTES:
   --------------------------------------------------------
   - Fonte do sistema: --font-base
   - Tamanho base: --font-size-base (afeta tudo proporcionalmente)

   ============================================================ */

:root {
    /* --------------------------------------------------
       CORES PRINCIPAIS
       Mudar --color-primary troca o azul em todo o sistema
    -------------------------------------------------- */
    --color-primary:        #0e7490;   /* Turquesa — botoes, links ativos, destaques */
    --color-primary-dark:   #0891b2;   /* Turquesa mais vivo — hover */
    --color-primary-light:  #ecfeff;   /* Turquesa claro — fundos de destaque suave */

    --color-success:        #10b981;   /* Verde — status ativo, pago, concluido */
    --color-warning:        #f59e0b;   /* Amarelo — alertas, pendente */
    --color-danger:         #ef4444;   /* Vermelho — erros, vencido, inadimplente */
    --color-info:           #06b6d4;   /* Ciano — em andamento, informativo */
    --color-purple:         #8b5cf6;   /* Roxo — cobranca negociacao, audiencias */

    /* --------------------------------------------------
       CORES DE FUNDO  (tema dia claro)
    -------------------------------------------------- */
    --color-bg-page:        #f0f4f8;   /* Cinza azulado claro */
    --color-bg-card:        #ffffff;   /* Branco */
    --color-bg-sidebar:     #ffffff;   /* Sidebar branca */
    --color-bg-header:      #0f3460;   /* Header escuro (gradiente turquesa no CSS) */
    --color-bg-input:       #ffffff;   /* Inputs brancos */

    /* --------------------------------------------------
       CORES DE TEXTO
    -------------------------------------------------- */
    --color-text-primary:   #1e293b;   /* Texto principal escuro */
    --color-text-secondary: #475569;   /* Texto secundario */
    --color-text-muted:     #94a3b8;   /* Texto desbotado */
    --color-text-inverse:   #ffffff;   /* Texto sobre fundos escuros */

    /* --------------------------------------------------
       BORDAS E SOMBRAS
    -------------------------------------------------- */
    --color-border:         #e2e8f0;   /* Bordas suaves */
    --color-border-light:   #f1f5f9;   /* Bordas mais suaves */
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.10);   /* Sombra leve — cards normais */
    --shadow-md:  0 4px 12px rgba(0,0,0,0.15);  /* Sombra media — hover de cards */
    --shadow-lg:  0 8px 24px rgba(0,0,0,0.18);  /* Sombra forte — modais, dropdowns */

    /* --------------------------------------------------
       TIPOGRAFIA
    -------------------------------------------------- */
    --font-base:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono:        "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --font-size-base:   0.95rem;   /* Tamanho base — aumentar/diminuir afeta tudo */
    --font-size-sm:     0.85rem;
    --font-size-xs:     0.75rem;

    /* --------------------------------------------------
       ESPACAMENTOS E BORDAS
    -------------------------------------------------- */
    --radius-sm:    0.375rem;  /* Border-radius pequeno — badges, inputs */
    --radius-md:    0.75rem;   /* Border-radius medio — cards, paineis */
    --radius-lg:    1rem;      /* Border-radius grande — modais, containers */

    /* --------------------------------------------------
       LAYOUT
    -------------------------------------------------- */
    --sidebar-width:    220px;   /* Largura da sidebar */
    --header-height:    56px;    /* Altura do topbar */

    /* Atalho para compatibilidade com codigo existente */
    --primary:          var(--color-primary);
    --primary-dark:     var(--color-primary-dark);
    --sidebar-bg:       var(--color-bg-sidebar);
}

/* ============================================================
   2. LAYOUT GLOBAL — Tema Dia (claro, com acentos turquesa)
   ============================================================ */
body {
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    background-color: #f0f4f8;
    color: #1e293b;
    min-height: 100vh;
}

/* Cards e paineis — dia: fundo branco limpo */
.card, .mod-panel, .table-container, .form-container, .kpi-card {
    background-color: #ffffff;
    border-color: #e2e8f0;
    color: #1e293b;
}

/* Tabelas — dia */
.table {
    --bs-table-bg:             transparent;
    --bs-table-color:          #1e293b;
    --bs-table-border-color:   #e2e8f0;
    --bs-table-striped-bg:     #f8fafc;
    --bs-table-striped-color:  #1e293b;
    --bs-table-hover-bg:       #e0f7fa;
    --bs-table-hover-color:    #1e293b;
    color: #1e293b;
    border-color: #e2e8f0;
}

.table > :not(caption) > * > * {
    background-color: var(--bs-table-bg);
    color: var(--bs-table-color);
    border-bottom-color: var(--bs-table-border-color);
}

.table thead th,
.table thead td {
    color: #0e7490;
    background-color: #ecfeff;
    border-bottom-color: #a5f3fc;
    font-weight: 600;
}

/* Inputs — dia */
.form-control, .form-select {
    background-color: #ffffff;
    border-color: #cbd5e1;
    color: #1e293b;
}

.form-control:focus, .form-select:focus {
    background-color: #ffffff;
    border-color: #06b6d4;
    color: #1e293b;
    box-shadow: 0 0 0 0.2rem rgba(6,182,212,.2);
}

.form-control::placeholder {
    color: #94a3b8;
}

.input-group-text {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
    color: #64748b;
}

.list-group-item {
    background-color: #ffffff;
    border-color: #e2e8f0;
    color: #1e293b;
}

/* ============================================================
   3. SIDEBAR / MENU LATERAL
   ============================================================ */
.sidebar {
    min-height: calc(100vh - 56px);
    border-right: 1px solid var(--color-border);
    width: var(--sidebar-width);
    background-color: var(--color-bg-sidebar);
}

.sidebar .nav-link {
    color: var(--color-text-secondary);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    margin-bottom: 2px;
    font-size: 0.9rem;
}

.sidebar .nav-link:hover {
    background-color: #ecfeff;
    color: var(--color-primary);
}

.sidebar .nav-link.active {
    background-color: var(--color-primary);
    color: #ffffff;
    font-weight: 600;
}

.sidebar .nav-link i {
    margin-right: 0.5rem;
    width: 1.2rem;
    text-align: center;
}

.sidebar .menu-section {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding: 0.75rem 1rem 0.25rem;
    letter-spacing: 0.05em;
}

/* ============================================================
   6. CARDS KPI — indicadores de dashboard
   Uso: <div class="card kpi-card text-center p-3">
          <div class="kpi-icon text-primary">...</div>
          <div class="kpi-value">42</div>
          <div class="kpi-label">Processos ativos</div>
        </div>
   ============================================================ */
.kpi-card {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.kpi-card .kpi-icon {
    font-size: 2rem;
    opacity: 0.7;
}

.kpi-card .kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
}

.kpi-card .kpi-label {
    font-size: 0.85rem;
    color: #6c757d;
}

/* ============================================================
   7. TABELAS
   Uso: <div class="table-container"><table class="table">...
   ============================================================ */
.table-container {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
}

/* ===== Responsividade de tabelas (todas) =====
   Problema: em telas onde a tabela e mais larga que o container, a barra de
   rolagem aparecia na PAGINA inteira. Aqui garantimos que o scroll horizontal
   fique LOCAL na tabela (so quando necessario), e que tabelas sem o wrapper
   .table-responsive (ex: listagem de clientes em card-body) tambem rolem local. */

/* 1. .table-responsive: Bootstrap so ativa overflow em viewport < 576px.
   Forcamos overflow-x: auto em qualquer largura. */
.table-responsive {
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

/* 2. Tabela DIRETA dentro de um card-body (sem wrapper .table-responsive):
   o proprio card-body passa a rolar local. :has tem suporte amplo (2023+);
   onde nao houver, a tabela apenas estica como antes (degrada sem quebrar). */
.card-body:has(> table),
.card-body:has(> #tabelaClientes),
.card-body:has(> div > table) {
    overflow-x: auto;
}

/* 3. Tabelas de dados nao encolhem abaixo do necessario para os cabecalhos —
   evita colunas espremidas e ilegiveis. min-width pequeno; cresce com o card. */
.table-responsive > .table,
.card-body > .table,
#tabelaClientes > .table {
    min-width: 100%;
    margin-bottom: 0;
}

/* 4. Tabela de IMPORTACAO/STAGING (#nmStagingTable): 6 colunas (checkbox, Nome,
   Origem, Classificacao, Status, Acoes). A coluna Nome concentra nome + cpf/email
   + grupo + avisos longos ("Ja existe como terceiro: ...") que antes esticavam a
   celula e empurravam a tabela alem da tela. Layout fixo + quebra de texto na
   coluna Nome = cabe na largura do dispositivo, sem scroll horizontal no desktop. */
#nmStagingTable {
    table-layout: fixed;
    width: 100%;
}
/* Coluna Nome: maior peso; concentra os detalhes abaixo do nome com quebra. */
#nmStagingTable th:nth-child(2),
#nmStagingTable td:nth-child(2) {
    width: 42%;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}
/* Avisos/detalhes abaixo do nome: badges e small viram bloco que quebra linha
   em vez de esticar. Largura limitada ao da coluna, com leve respiro. */
#nmStagingTable td:nth-child(2) .badge,
#nmStagingTable td:nth-child(2) small {
    display: inline-block;
    white-space: normal;
    text-align: left;
    max-width: 100%;
    margin-top: 2px;
    line-height: 1.25;
}
/* Coluna Acoes: nao encolhe demais (botoes precisam caber). */
#nmStagingTable th:last-child,
#nmStagingTable td:last-child {
    width: 130px;
    white-space: nowrap;
}

/* Em telas estreitas (tablet/celular), a tabela de staging nao tenta caber as 6
   colunas: rola LOCAL dentro do wrapper .table-responsive (ja aplicado) com um
   min-width minimo legivel. Comportamento responsivo: scroll fica na tabela,
   nao na pagina. */
@media (max-width: 992px) {
    #nmStagingTable {
        table-layout: auto;
        min-width: 720px;
    }
}

.table thead th {
    border-bottom: 2px solid var(--primary);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: #6c757d;
}

/* ============================================================
   9. BADGES DE STATUS
   Uso: <span class="badge badge-ativo">Ativo</span>
   Cores definidas pelas variaveis acima (--color-success, etc.)
   ============================================================ */
/* Badges de status */
.badge-ativo, .badge-ativa { background-color: #10b981; }
.badge-inativo { background-color: #ef4444; }
.badge-pendente { background-color: #f59e0b; }
.badge-concluida { background-color: #10b981; }
.badge-em_andamento { background-color: #3b82f6; }
.badge-cancelada, .badge-cancelado { background-color: #6b7280; }

/* Cobrancas - status badges */
.badge-negociacao { background-color: #8b5cf6; }
.badge-acordo_firmado, .badge-vigente { background-color: #06b6d4; }
.badge-paga, .badge-quitado { background-color: #10b981; }
.badge-juridico { background-color: #dc2626; }
.badge-inadimplente { background-color: #ef4444; }
.badge-renegociado { background-color: #f97316; }
.badge-proposta { background-color: #eab308; }

/* Cobrancas - tipo badges */
.badge-amigavel { background-color: #10b981; }
.badge-pre_juridica { background-color: #f59e0b; }
.badge-juridica { background-color: #ef4444; }
.badge-executiva { background-color: #7c2d12; }

/* Cobrancas - priority */
.badge-alta { background-color: #ef4444; }
.badge-normal { background-color: #3b82f6; }
.badge-baixa { background-color: #6b7280; }
.badge-urgente { background-color: #7c2d12; }

/* Cobrancas - timeline */
.timeline-event {
    border-left: 3px solid var(--primary);
    padding-left: 1rem;
    margin-bottom: 1rem;
    position: relative;
}

.timeline-event::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 4px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid white;
}

.timeline-event .timeline-date {
    font-size: 0.8rem;
    color: #6c757d;
}

/* Cobrancas - lembrete atrasado */
.lembrete-atrasado {
    border-left: 3px solid #ef4444;
    background-color: #fef2f2;
}

/* Cobrancas - simulacao acordo */
.simulacao-box {
    background-color: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 0.5rem;
    padding: 1rem;
}

/* Template cards */
.template-card {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    transition: box-shadow 0.2s;
}

.template-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ============================================================
   8. FORMULARIOS E PAINEIS
   .form-container  — card branco com sombra, padding interno
   .mod-panel       — painel de modulo (header + tabs + conteudo)
   ============================================================ */
.form-container {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
}

/* Painel de modulo — wrapper unico que envolve header + tabs + conteudo */
.mod-panel {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
}
.mod-panel .mod-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.mod-panel .mod-header h4 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}
/* Tabs dentro do painel: sem margem extra, linha separadora suave */
.mod-panel .nav-tabs {
    border-bottom-color: #e5e7eb;
    margin-bottom: 1.25rem;
}
/* Conteudo interno: sem box extra desnecessario */
.mod-panel .table-container,
.mod-panel .form-container {
    box-shadow: none;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

/* Botoes */
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

/* Loading */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Kanban Board */
.kanban-card {
    transition: transform 0.15s, box-shadow 0.15s;
    border-left: 3px solid transparent;
}

.kanban-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.kanban-card.border-danger {
    border-left-color: #dc3545;
}

.bg-orange {
    background-color: #f97316 !important;
    color: white;
}

/* Financeiro - Tabs */
.nav-tabs .nav-link {
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
}

.nav-tabs .nav-link.active {
    font-weight: 600;
}

/* Financeiro - Modal Baixa */
.modal.show {
    display: block;
}

/* Agenda - Calendario */
.agenda-calendar {
    table-layout: fixed;
}

.agenda-cal-cell {
    height: 110px;
    vertical-align: top;
    padding: 4px !important;
    cursor: pointer;
    transition: background 0.15s;
}

.agenda-cal-cell:hover {
    background-color: #f0f4ff;
}

.agenda-cal-empty {
    background-color: #f9fafb;
    cursor: default;
}

.agenda-cal-empty:hover {
    background-color: #f9fafb;
}

.agenda-cal-hoje {
    background-color: #eff6ff !important;
    border: 2px solid var(--primary) !important;
}

.agenda-cal-num {
    font-size: 0.85rem;
    margin-bottom: 2px;
}

.agenda-cal-events {
    overflow: hidden;
}

.agenda-cal-evt {
    font-size: 0.7rem;
    color: white;
    padding: 1px 4px;
    border-radius: 3px;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Agenda - Dots */
.agenda-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.agenda-dot-lg {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

/* Agenda - Evento card */
.agenda-evento-card {
    transition: box-shadow 0.15s;
}

.agenda-evento-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Processos - Andamento timeline */
.processo-andamento {
    position: relative;
    transition: background 0.15s;
    padding: 0.75rem 1rem;
    border-radius: 0 0.375rem 0.375rem 0;
}

.processo-andamento:hover {
    background-color: #f8f9fa;
}

/* Processos - Status badges */
.badge-aberto { background-color: #10b981; }
.badge-em-andamento { background-color: #3b82f6; }
.badge-suspenso { background-color: #f59e0b; }
.badge-finalizado { background-color: #6b7280; }
.badge-arquivado { background-color: #374151; }

/* CRM - Pipeline Kanban */
.crm-pipeline-container {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 1rem;
    min-height: 400px;
}

.crm-pipeline-col {
    min-width: 260px;
    max-width: 280px;
    flex-shrink: 0;
    background: #f8f9fa;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
}

.crm-pipeline-header {
    color: white;
    padding: 0.6rem 0.75rem;
    border-radius: 0.5rem 0.5rem 0 0;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.crm-pipeline-body {
    padding: 0.5rem;
    flex: 1;
    overflow-y: auto;
    max-height: 500px;
}

.crm-lead-card {
    background: white;
    border-radius: 0.375rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.15s;
    border-left: 3px solid transparent;
}

.crm-lead-card:hover {
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}

.crm-temp-badge {
    font-size: 0.65rem;
    padding: 2px 6px;
}

/* CRM - Score bar */
.crm-score-bar {
    width: 50px;
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
}

.crm-score-bar-lg {
    width: 100%;
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
}

.crm-score-fill {
    height: 100%;
    background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981);
    border-radius: 3px;
    transition: width 0.3s;
}

/* CRM - Dot indicator */
.crm-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

/* CRM - Timeline */
.crm-timeline-item {
    border-left: 3px solid #dee2e6;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    margin-left: 0.5rem;
    transition: background 0.15s;
}

.crm-timeline-item:hover {
    background-color: #f8f9fa;
}

/* ============================================================
   Documentos
   ============================================================ */
.badge-rascunho { background-color: #6b7280; }
.badge-final { background-color: #10b981; }
.badge-revisao { background-color: #f59e0b; }
.badge-assinado { background-color: #2563eb; }
.badge-arquivado_doc { background-color: #374151; }

.doc-icon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    background-color: #eff6ff;
    color: var(--primary);
}

/* ============================================================
   Contratos
   ============================================================ */
.badge-vigente { background-color: #10b981; }
.badge-encerrado { background-color: #6b7280; }
.badge-rescindido { background-color: #ef4444; }
.badge-renovado { background-color: #2563eb; }
.badge-honorarios { background-color: #8b5cf6; }
.badge-prestacao_servicos { background-color: #06b6d4; }
.badge-confidencialidade { background-color: #f97316; }
.badge-parceria { background-color: #84cc16; }

.contrato-valor {
    font-size: 1.1rem;
    font-weight: 600;
    color: #059669;
}

/* ============================================================
   Audiencias
   ============================================================ */
.badge-agendada { background-color: #3b82f6; }
.badge-confirmada { background-color: #10b981; }
.badge-realizada { background-color: #6b7280; }
.badge-adiada { background-color: #f59e0b; }
.badge-instrucao { background-color: #8b5cf6; }
.badge-conciliacao { background-color: #06b6d4; }
.badge-inicial { background-color: #3b82f6; }
.badge-julgamento { background-color: #dc2626; }
.badge-pericia { background-color: #f97316; }

.audiencia-data-box {
    text-align: center;
    padding: 0.5rem;
    background: #eff6ff;
    border-radius: 0.5rem;
    min-width: 60px;
}

.audiencia-data-box .dia {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}

.audiencia-data-box .mes {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #6c757d;
}

/* ============================================================
   Orcamentos
   ============================================================ */
.badge-enviado { background-color: #3b82f6; }
.badge-aprovado { background-color: #10b981; }
.badge-recusado { background-color: #ef4444; }
.badge-expirado { background-color: #6b7280; }

.orcamento-numero {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: var(--primary);
}

.orcamento-total {
    font-size: 1.25rem;
    font-weight: 700;
    color: #059669;
}

.orcamento-item-row {
    transition: background 0.1s;
}

.orcamento-item-row:hover {
    background-color: #f8f9fa;
}

/* ============================================================
   Timesheet
   ============================================================ */
.badge-faturavel { background-color: #10b981; }
.badge-nao_faturavel { background-color: #6b7280; }
.badge-aprovado_ts { background-color: #10b981; }
.badge-rejeitado { background-color: #ef4444; }

.timesheet-horas {
    font-size: 1.1rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
}

.timesheet-bar {
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}

.timesheet-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s;
}

.timesheet-bar-fill.faturavel {
    background: linear-gradient(90deg, #10b981, #059669);
}

.timesheet-bar-fill.nao-faturavel {
    background: linear-gradient(90deg, #9ca3af, #6b7280);
}

/* ============================================================
   RH / Gestao de Pessoas
   ============================================================ */
.badge-clt { background-color: #3b82f6; }
.badge-pj { background-color: #8b5cf6; }
.badge-estagiario { background-color: #06b6d4; }
.badge-socio { background-color: #f59e0b; }
.badge-freelancer { background-color: #84cc16; }
.badge-ferias_aprovada { background-color: #10b981; }
.badge-ferias_pendente { background-color: #f59e0b; }
.badge-ferias_rejeitada { background-color: #ef4444; }
.badge-ferias_gozando { background-color: #3b82f6; }

.rh-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    color: white;
}

.rh-salario {
    font-weight: 600;
    color: #059669;
}

/* ============================================================
   Relatorios
   ============================================================ */
.relatorio-card {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 1.25rem;
}

.relatorio-card h6 {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #6c757d;
    margin-bottom: 1rem;
}

.relatorio-barra {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0.5rem;
}

.relatorio-barra-label {
    min-width: 120px;
    font-size: 0.85rem;
    color: #374151;
}

.relatorio-barra-fill {
    height: 20px;
    border-radius: 4px;
    min-width: 4px;
    transition: width 0.5s ease;
}

.relatorio-barra-valor {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6c757d;
    min-width: 40px;
    text-align: right;
}

/* ============================================================
   Mensagens / Chat
   ============================================================ */
.msg-container {
    display: flex;
    height: 500px;
    border: 1px solid #dee2e6;
    border-radius: 0.75rem;
    overflow: hidden;
    background: white;
}

.msg-sidebar {
    width: 280px;
    border-right: 1px solid #dee2e6;
    overflow-y: auto;
    flex-shrink: 0;
}

.msg-conversa-item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.15s;
}

.msg-conversa-item:hover {
    background-color: #f0f4ff;
}

.msg-conversa-item.active {
    background-color: #eff6ff;
    border-left: 3px solid var(--primary);
}

.msg-conversa-nome {
    font-weight: 600;
    font-size: 0.9rem;
}

.msg-conversa-preview {
    font-size: 0.8rem;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-unread-badge {
    background: var(--primary);
    color: white;
    border-radius: 50%;
    font-size: 0.7rem;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.msg-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.msg-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
    background: #f8f9fa;
}

.msg-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    background: #f5f5f5;
}

.msg-bubble {
    max-width: 70%;
    padding: 0.6rem 0.9rem;
    border-radius: 1rem;
    margin-bottom: 0.5rem;
    position: relative;
    word-wrap: break-word;
}

.msg-bubble-mine {
    background: var(--primary);
    color: white;
    margin-left: auto;
    border-bottom-right-radius: 4px;
}

.msg-bubble-other {
    background: white;
    color: #1f2937;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.msg-bubble-sender {
    font-size: 0.7rem;
    font-weight: 600;
    margin-bottom: 2px;
    color: #6c757d;
}

.msg-bubble-mine .msg-bubble-sender {
    color: rgba(255,255,255,0.8);
}

.msg-bubble-time {
    font-size: 0.65rem;
    margin-top: 4px;
    opacity: 0.7;
}

.msg-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid #dee2e6;
    background: white;
}

.msg-footer .input-group {
    border-radius: 1.5rem;
    overflow: hidden;
}

/* ============================================================
   Rentabilidade
   ============================================================ */
.rent-positivo {
    color: #059669;
    font-weight: 600;
}

.rent-negativo {
    color: #dc2626;
    font-weight: 600;
}

.rent-margem-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.rent-margem-alta {
    background-color: #d1fae5;
    color: #065f46;
}

.rent-margem-media {
    background-color: #fef3c7;
    color: #92400e;
}

.rent-margem-baixa {
    background-color: #fee2e2;
    color: #991b1b;
}

.rent-margem-negativa {
    background-color: #fecaca;
    color: #7f1d1d;
}

.rent-progress {
    height: 10px;
    background: #e9ecef;
    border-radius: 5px;
    overflow: hidden;
}

.rent-progress-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.5s ease;
}

/* ============================================================
   Pacotes / Servicos
   ============================================================ */
.badge-fixo { background-color: #3b82f6; }
.badge-variavel { background-color: #8b5cf6; }
.badge-hibrido { background-color: #06b6d4; }

.pacote-tab {
    cursor: pointer;
    padding: 0.6rem 1.2rem;
    border-bottom: 2px solid transparent;
    font-weight: 500;
    color: #6c757d;
    transition: all 0.2s;
}

.pacote-tab:hover {
    color: var(--primary);
}

.pacote-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}

.servico-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
    transition: box-shadow 0.15s;
}

.servico-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.servico-valor {
    font-size: 1.1rem;
    font-weight: 700;
    color: #059669;
}

.pacote-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1.25rem;
    transition: box-shadow 0.2s, transform 0.2s;
}

.pacote-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.pacote-card-valor {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

.pacote-card-desconto {
    text-decoration: line-through;
    color: #9ca3af;
    font-size: 0.85rem;
}

/* ============================================================
   Utilitarios extras
   ============================================================ */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cursor-pointer {
    cursor: pointer;
}

.fs-tiny {
    font-size: 0.75rem;
}

/* Responsivo */
@media (max-width: 768px) {
    .sidebar {
        display: none !important;
    }
    main {
        margin-left: 0 !important;
    }
    .crm-pipeline-container {
        flex-direction: column;
    }
    .crm-pipeline-col {
        min-width: 100%;
        max-width: 100%;
    }
    .msg-container {
        flex-direction: column;
        height: auto;
    }
    .msg-sidebar {
        width: 100%;
        max-height: 200px;
        border-right: none;
        border-bottom: 1px solid #dee2e6;
    }
    .msg-body {
        min-height: 300px;
    }
    .audiencia-data-box {
        min-width: 50px;
    }
}

/* ============================================================
   MODULO: TEMPLATES JURIDICOS
   ============================================================ */
.tpl-var-tag {
    display: inline-block;
    padding: 2px 6px;
    margin: 2px;
    background: #e8f4f8;
    border: 1px solid #b8daff;
    border-radius: 3px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.2s;
}
.tpl-var-tag:hover {
    background: #b8daff;
}

/* ============================================================
   MODULO: CALCULADORA DE PRAZOS
   ============================================================ */
.calc-result-box {
    padding: 20px;
    text-align: center;
}
.prazo-card {
    transition: transform 0.2s, box-shadow 0.2s;
}
.prazo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.prazo-card.border-warning {
    border-width: 2px !important;
}

/* ============================================================
   MODULO: CONSULTA DE PROCESSOS
   ============================================================ */
#consultaResultado table.table-sm td {
    padding: 4px 8px;
}
#consultaResultado .alert {
    margin-bottom: 10px;
}

/* ============================================================
   MODULO: WHATSAPP
   ============================================================ */
.wa-instance-card {
    transition: transform 0.2s, box-shadow 0.2s;
    border-left: 4px solid #25D366;
}
.wa-instance-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37,211,102,0.15);
}

/* ============================================================
   MODULO: IA ASSISTENTE
   ============================================================ */
.ia-chat-card {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 250px);
    min-height: 400px;
}
.ia-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}
.ia-msg-user .ia-msg-content {
    border-left: 3px solid #0d6efd;
}
.ia-msg-assistant .ia-msg-content {
    border-left: 3px solid #198754;
}
.ia-analysis-result {
    max-height: 500px;
    overflow-y: auto;
    line-height: 1.6;
}
#iaChatMsgs::-webkit-scrollbar {
    width: 6px;
}
#iaChatMsgs::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

/* ============================================================
   MODULO: PERFIL DO USUARIO
   ============================================================ */
.perfil-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #dee2e6;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.perfil-avatar-placeholder {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 700;
    border: 3px solid #dee2e6;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.perfil-atividade-item {
    border-left: 3px solid #dee2e6;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    margin-left: 0.5rem;
    transition: background 0.15s;
}

.perfil-atividade-item:hover {
    background-color: #f8f9fa;
}

/* ============================================================
   MODULO: PERFIS DE ACESSO
   ============================================================ */
.perfis-card {
    transition: transform 0.15s, box-shadow 0.15s;
}

.perfis-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* ============================================================
   MODULO: GESTAO DE PERMISSOES
   ============================================================ */
.permissoes-matrix th {
    font-size: 0.8rem;
    text-align: center;
    vertical-align: middle;
    padding: 0.4rem;
}

.permissoes-matrix td {
    text-align: center;
    vertical-align: middle;
    padding: 0.4rem;
}

.permissoes-matrix .form-check-input {
    margin: 0 auto;
    cursor: pointer;
}

.permissoes-modulo-nome {
    font-weight: 500;
    text-align: left !important;
    white-space: nowrap;
}

/* ============================================================
   MODULO: PLANOS DE ACESSO
   ============================================================ */
.plano-card {
    transition: transform 0.2s, box-shadow 0.2s;
    border-radius: 0.75rem;
}

.plano-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.plano-preco {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

.plano-modulos-checklist .form-check {
    padding: 0.3rem 0;
}

/* ============================================================
   MODULO: PARAMETROS DO SISTEMA
   ============================================================ */
.param-grupo-header {
    background-color: #f0f4ff;
    padding: 0.5rem 1rem;
    font-weight: 600;
    color: var(--primary);
    border-bottom: 2px solid var(--primary);
    font-size: 0.9rem;
}

.param-row {
    transition: background 0.15s;
}

.param-row:hover {
    background-color: #f8f9fa;
}

.param-chave {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: #374151;
}

.param-valor-input {
    max-width: 300px;
}

/* ============================================================
   MODULO: CONTAS BANCARIAS
   ============================================================ */
.conta-saldo {
    font-size: 1.1rem;
    font-weight: 700;
}

.conta-saldo.positivo {
    color: #059669;
}

.conta-saldo.negativo {
    color: #dc2626;
}

.conta-banco-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    color: white;
}

/* ============================================================
   MODULO: PLANO DE CONTAS
   ============================================================ */
.plano-contas-tree {
    font-size: 0.9rem;
}

.plano-contas-tree .nivel-0 { padding-left: 0; font-weight: 700; }
.plano-contas-tree .nivel-1 { padding-left: 1.5rem; font-weight: 600; }
.plano-contas-tree .nivel-2 { padding-left: 3rem; }
.plano-contas-tree .nivel-3 { padding-left: 4.5rem; }
.plano-contas-tree .nivel-4 { padding-left: 6rem; }

.plano-contas-row {
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
}

.plano-contas-row:hover {
    background-color: #f0f4ff;
}

.plano-contas-codigo {
    font-family: 'Courier New', monospace;
    color: #6b7280;
    min-width: 80px;
    display: inline-block;
}

.badge-receita { background-color: #10b981; }
.badge-despesa { background-color: #ef4444; }

/* ============================================================
   MODULO: CENTROS DE CUSTO
   ============================================================ */
.centro-custo-orcamento {
    font-weight: 600;
    color: var(--primary);
}

/* ============================================================
   MODULO: LEADS / PIPELINE
   ============================================================ */
.leads-pipeline-container {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 1rem;
}

.leads-pipeline-col {
    min-width: 200px;
    max-width: 260px;
    flex-shrink: 0;
}

.badge-novo { background-color: #3b82f6; }
.badge-contato { background-color: #06b6d4; }
.badge-convertido { background-color: #10b981; }
.badge-perdido { background-color: #ef4444; }

/* ============================================================
   MODULO: ASSINATURA DIGITAL
   ============================================================ */
#assinaturaCanvas {
    border: 2px dashed #dee2e6;
    background: #fafafa;
    cursor: crosshair;
    touch-action: none;
}

#assinaturaCanvas:hover {
    border-color: var(--primary);
}

.assinatura-pendente-card {
    transition: transform 0.15s, box-shadow 0.15s;
}

.assinatura-pendente-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.badge-assinado_digital { background-color: #10b981; }

/* ============================================================
   MODULO: TOKENS API
   ============================================================ */
.token-preview {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: #6b7280;
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 3px;
}

.token-gerado-display {
    font-family: 'Courier New', monospace;
    font-size: 0.95rem;
    word-break: break-all;
    background: #f8f9fa;
    padding: 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid #dee2e6;
}

/* ============================================================
   MODULO: ONBOARDING
   ============================================================ */
.onboarding-etapa-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
    transition: all 0.3s;
}

.onboarding-etapa-circle.completed {
    background: #10b981;
    border-color: #10b981;
    color: white;
}

.onboarding-etapa-circle.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

.onboarding-etapa-circle.pending {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #9ca3af;
}

.onboarding-connector {
    height: 3px;
    flex: 1;
    margin-top: 24px;
    transition: background 0.3s;
}

.onboarding-connector.completed {
    background: #10b981;
}

.onboarding-connector.pending {
    background: #dee2e6;
}

.onboarding-step-card {
    transition: border-color 0.3s;
}

.onboarding-step-card.active {
    border-left: 3px solid var(--primary) !important;
}

.onboarding-step-card.completed {
    border-left: 3px solid #10b981 !important;
}

/* ============================================================
   RESPONSIVE: NOVOS MODULOS
   ============================================================ */
@media (max-width: 768px) {
    .ia-chat-card {
        height: auto;
        min-height: 300px;
    }
    .ia-chat-messages {
        max-height: 300px !important;
    }
    .wa-instance-card {
        margin-bottom: 10px;
    }
    .calc-result-box h3 {
        font-size: 1.5rem;
    }
    .leads-pipeline-container {
        flex-direction: column;
    }
    .leads-pipeline-col {
        min-width: 100%;
        max-width: 100%;
    }
    .perfil-avatar,
    .perfil-avatar-placeholder {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }
    .permissoes-matrix th,
    .permissoes-matrix td {
        font-size: 0.7rem;
        padding: 0.25rem;
    }
    .msg-container {
        flex-direction: column;
        height: auto;
    }
    .msg-sidebar {
        width: 100%;
        max-height: 200px;
        border-right: none;
        border-bottom: 1px solid #dee2e6;
    }
    .msg-body {
        min-height: 300px;
    }
    .onboarding-etapa-circle {
        width: 36px;
        height: 36px;
        font-size: 0.8rem;
    }
}

/* ============================================================
   DARK MODE
   Ativado via <html data-theme="dark"> pelo toggle da navbar
   ============================================================ */

/* ============================================================
   DARK MODE
   Ativado via <html data-theme="dark"> pelo toggle da navbar
   O tema "dark" agora alinha com a paleta do login:
   fundo  #0f2027 / #1a3a4a / #0f3460  +  amber #f59e0b
   ============================================================ */

[data-theme="dark"] {
    --primary:      #f59e0b;
    --primary-dark: #d97706;
    --sidebar-bg:   #1a3a4a;
    color-scheme: dark;
}

[data-theme="dark"] body {
    background-color: #0f2027;
    color: #f1f5f9;
}

[data-theme="dark"] .navbar {
    background: linear-gradient(90deg, #0f3460 0%, #0e7490 50%, #06b6d4 100%) !important;
    border-bottom: 1px solid rgba(6,182,212,0.2);
}

[data-theme="dark"] .sidebar {
    background-color: #1a3a4a !important;
    border-right-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .sidebar .nav-link {
    color: #94a3b8;
}

[data-theme="dark"] .sidebar .nav-link:hover {
    background-color: rgba(245,158,11,0.15);
    color: #f59e0b;
}

[data-theme="dark"] .sidebar .nav-link.active {
    background-color: #f59e0b;
    color: #0f2027;
    font-weight: 600;
}

[data-theme="dark"] .sidebar .menu-section {
    color: #64748b;
}

[data-theme="dark"] .card,
[data-theme="dark"] .table-container,
[data-theme="dark"] .form-container,
[data-theme="dark"] .mod-panel,
[data-theme="dark"] .kpi-card {
    background-color: rgba(255,255,255,0.05);
    backdrop-filter: blur(8px);
    border-color: rgba(255,255,255,0.1);
    color: #f1f5f9;
}

/* ---- Tabelas: Bootstrap 5 usa variaveis CSS nos <td>/<th>,
        precisamos sobrescrever --bs-table-* para funcionar ---- */
[data-theme="dark"] .table {
    --bs-table-bg:             transparent;
    --bs-table-color:          #f1f5f9;
    --bs-table-border-color:   rgba(255,255,255,0.1);
    --bs-table-striped-bg:     rgba(255,255,255,0.04);
    --bs-table-striped-color:  #f1f5f9;
    --bs-table-hover-bg:       rgba(245,158,11,0.12);
    --bs-table-hover-color:    #f1f5f9;
    --bs-table-active-bg:      rgba(245,158,11,0.2);
    --bs-table-active-color:   #f1f5f9;
    color: #f1f5f9;
    border-color: rgba(255,255,255,0.1);
}

[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: var(--bs-table-bg);
    color: var(--bs-table-color);
    border-bottom-color: var(--bs-table-border-color);
}

[data-theme="dark"] .table thead th,
[data-theme="dark"] .table thead td {
    color: #f59e0b;
    background-color: rgba(15,48,96,0.6);
    border-bottom-color: rgba(245,158,11,0.3);
}

[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light > th,
[data-theme="dark"] .table-light > td {
    --bs-table-bg: rgba(255,255,255,0.04);
    --bs-table-color: #94a3b8;
    background-color: rgba(255,255,255,0.04) !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    --bs-table-bg: rgba(245,158,11,0.12);
    --bs-table-color: #f1f5f9;
    background-color: rgba(245,158,11,0.12);
    color: #f1f5f9;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg: rgba(255,255,255,0.04);
    --bs-table-color: #f1f5f9;
    background-color: rgba(255,255,255,0.04);
    color: #f1f5f9;
}

[data-theme="dark"] .table-responsive {
    border-color: rgba(255,255,255,0.1);
}

[data-theme="dark"] .modal-content {
    background-color: #1a3a4a;
    border-color: rgba(255,255,255,0.1);
    color: #f1f5f9;
}

[data-theme="dark"] .modal-header {
    border-bottom-color: rgba(255,255,255,0.1);
}

[data-theme="dark"] .modal-footer {
    border-top-color: rgba(255,255,255,0.1);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
    color: #f1f5f9;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: rgba(255,255,255,0.1);
    border-color: #f59e0b;
    color: #f1f5f9;
    box-shadow: 0 0 0 0.2rem rgba(245,158,11,.25);
}

[data-theme="dark"] .form-control::placeholder {
    color: #64748b;
}

[data-theme="dark"] .dropdown-menu {
    background-color: #1a3a4a;
    border-color: rgba(255,255,255,0.1);
}

[data-theme="dark"] .dropdown-item {
    color: #f1f5f9;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: rgba(245,158,11,0.15);
    color: #f59e0b;
}

[data-theme="dark"] .dropdown-divider {
    border-color: rgba(255,255,255,0.1);
}

[data-theme="dark"] .dropdown-item-text {
    color: #94a3b8;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.1);
    color: #f59e0b;
}

[data-theme="dark"] .nav-tabs .nav-link {
    color: #94a3b8;
}

[data-theme="dark"] .alert-info {
    background-color: rgba(15,48,96,0.6);
    border-color: rgba(56,189,248,0.3);
    color: #7dd3fc;
}

[data-theme="dark"] .alert-success {
    background-color: rgba(20,83,45,0.6);
    border-color: rgba(16,185,129,0.3);
    color: #6ee7b7;
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(66,32,6,0.6);
    border-color: rgba(245,158,11,0.3);
    color: #fde68a;
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(69,10,10,0.6);
    border-color: rgba(239,68,68,0.3);
    color: #fca5a5;
}

[data-theme="dark"] .bg-light {
    background-color: rgba(255,255,255,0.07) !important;
    color: #f1f5f9;
}

[data-theme="dark"] .text-muted {
    color: #64748b !important;
}

[data-theme="dark"] hr,
[data-theme="dark"] .dropdown-divider {
    border-color: rgba(255,255,255,0.1);
}

[data-theme="dark"] .input-group-text {
    background-color: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
    color: #94a3b8;
}

[data-theme="dark"] .badge.bg-light {
    background-color: rgba(255,255,255,0.1) !important;
    color: #f1f5f9 !important;
}

[data-theme="dark"] .list-group-item {
    background-color: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.08);
    color: #f1f5f9;
}

[data-theme="dark"] .border,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-top {
    border-color: rgba(255,255,255,0.1) !important;
}

[data-theme="dark"] pre {
    background-color: rgba(0,0,0,0.3);
    color: #f1f5f9;
    border: 1px solid rgba(255,255,255,0.1);
}

[data-theme="dark"] .loading-overlay {
    background: rgba(15, 32, 39, 0.85);
}

/* Dark mode toggle btn na navbar */
.dark-mode-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: background 0.2s;
}
.dark-mode-btn:hover {
    background: rgba(255,255,255,0.15);
}

/* Footer */
.app-footer {
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    padding: 0.75rem 1.5rem;
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: auto;
}

[data-theme="dark"] .app-footer {
    background-color: #1e293b;
    border-top-color: #334155;
    color: #64748b;
}

/* Sidebar mega menu — secoes colapsaveis */
.sidebar-section-toggle {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem 0.25rem;
}

.sidebar-section-toggle .section-arrow {
    font-size: 0.65rem;
    transition: transform 0.2s;
    color: #adb5bd;
}

.sidebar-section-toggle.collapsed .section-arrow {
    transform: rotate(-90deg);
}

.sidebar-section-toggle .section-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #6c757d;
    letter-spacing: 0.05em;
}

[data-theme="dark"] .sidebar-section-toggle .section-label {
    color: #64748b;
}

[data-theme="dark"] .sidebar-section-toggle .section-arrow {
    color: #475569;
}

/* ============================================================
   MEGA MENU FULL-WIDTH (Header)
   ============================================================ */

/* Header wrapper */
.avocati-header {
    position: sticky;
    top: 0;
    z-index: 1040;
    background: linear-gradient(90deg, #0f3460 0%, #0e7490 50%, #06b6d4 100%);
    box-shadow: 0 2px 12px rgba(6,182,212,0.25);
}

[data-theme="dark"] .avocati-header {
    background: linear-gradient(90deg, #0f3460 0%, #0e7490 50%, #06b6d4 100%);
    box-shadow: 0 2px 12px rgba(6,182,212,0.3);
}

/* Topbar principal */
.avocati-topbar {
    display: flex;
    align-items: center;
    height: 52px;
    padding: 0 1rem;
    gap: 0.5rem;
}

/* Logo / Brand */
.topbar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.02em;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    transition: background 0.15s;
    white-space: nowrap;
}
.topbar-brand:hover { color: white; background: rgba(255,255,255,0.12); }
.topbar-brand i { font-size: 1.3rem; }

/* Separador */
.topbar-sep {
    width: 1px;
    height: 28px;
    background: rgba(255,255,255,0.25);
    margin: 0 0.25rem;
    flex-shrink: 0;
}

/* Botão ≡ Menu */
/* ===== NAV CATEGORIAS — barra de navegacao por dropdown ===== */

.topbar-nav {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    overflow: visible;
}

.topbar-nav-loading {
    display: flex;
    align-items: center;
    color: rgba(255,255,255,0.6);
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
}

/* Botao de categoria */
.nav-cat-wrapper {
    position: relative;
}

.nav-cat-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    color: rgba(255,255,255,0.85);
    border-radius: 0.375rem;
    padding: 0.35rem 0.65rem;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    outline: none;
}
.nav-cat-btn:hover {
    background: rgba(255,255,255,0.15);
    color: white;
}
.nav-cat-btn.active {
    background: rgba(255,255,255,0.22);
    color: white;
}
.nav-cat-btn > i:first-child { font-size: 0.85rem; }
.nav-cat-chevron {
    font-size: 0.65rem;
    opacity: 0.7;
    transition: transform 0.2s;
}
.nav-cat-btn.active .nav-cat-chevron {
    transform: rotate(180deg);
}

/* Dropdown do modulo */
.nav-drop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 210px;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    border: 1px solid #e5e7eb;
    z-index: 1050;
    animation: navDropIn 0.15s ease;
}
@keyframes navDropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.nav-drop-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9ca3af;
    border-bottom: 2px solid var(--primary);
    margin-bottom: 0.3rem;
}
.nav-drop-header i { color: var(--primary); font-size: 0.85rem; }

.nav-drop-items {
    padding: 0.25rem 0.4rem 0.4rem;
    max-height: 340px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.nav-drop-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.55rem;
    border-radius: 0.375rem;
    color: #374151;
    font-size: 0.84rem;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
}
.nav-drop-item i { color: #9ca3af; font-size: 0.88rem; width: 16px; text-align: center; flex-shrink: 0; }
.nav-drop-item:hover { background: #eff6ff; color: var(--primary); }
.nav-drop-item:hover i { color: var(--primary); }
.nav-drop-item.nav-item-active { background: #eff6ff; color: var(--primary); font-weight: 600; }
.nav-drop-item.nav-item-active i { color: var(--primary); }

/* Overlay transparente para fechar ao clicar fora */
.nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

/* Botao Menu principal */
.topbar-menu-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    color: rgba(255,255,255,0.85);
    border-radius: 0.375rem;
    padding: 0.35rem 0.65rem;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    outline: none;
}
.topbar-menu-btn:hover {
    background: rgba(255,255,255,0.15);
    color: white;
}
.topbar-menu-btn.menu-open {
    background: rgba(255,255,255,0.22);
    color: white;
}

/* Shortcut buttons (Dashboard) */
.topbar-shortcut {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    color: rgba(255,255,255,0.85);
    border-radius: 0.375rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.topbar-shortcut:hover { background: rgba(255,255,255,0.12); color: white; }

/* Centro — busca */
.topbar-left {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}
.topbar-center {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 0 0.5rem;
}
.topbar-search {
    position: relative;
    width: 100%;
    max-width: 440px;
}
.topbar-search-icon {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
    pointer-events: none;
}
.topbar-search-input {
    width: 100%;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 1.5rem;
    color: white;
    padding: 0.35rem 0.75rem 0.35rem 2rem;
    font-size: 0.85rem;
    outline: none;
    transition: background 0.2s, border-color 0.2s;
}
.topbar-search-input::placeholder { color: rgba(255,255,255,0.55); }
.topbar-search-input:focus {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.5);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.1);
}

/* Dropdown de busca rápida */
.busca-rapida-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 1050;
    max-height: 320px;
    overflow-y: auto;
}
.busca-rapida-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: #374151;
    transition: background 0.1s;
    border-bottom: 1px solid #f0f0f0;
}
.busca-rapida-item:last-child { border-bottom: none; }
.busca-rapida-item:hover, .busca-rapida-item.focused { background: #eff6ff; color: var(--primary); }
.busca-rapida-item i { color: #6b7280; font-size: 0.9rem; width: 16px; text-align: center; }
.busca-rapida-item:hover i, .busca-rapida-item.focused i { color: var(--primary); }
.busca-rapida-ia { border-top: 1px solid #e5e7eb; background: #fffbeb; }
.busca-rapida-ia:hover, .busca-rapida-ia.focused { background: #fef3c7; color: #92400e; }
.busca-rapida-ia em { font-style: normal; font-weight: 500; }

/* Direita — ícones de ação */
.topbar-right {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}
.topbar-icon-btn {
    position: relative;
    background: none;
    border: none;
    color: rgba(255,255,255,0.85);
    border-radius: 0.375rem;
    padding: 0.35rem 0.5rem;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    line-height: 1;
}
.topbar-icon-btn:hover { background: rgba(255,255,255,0.12); color: white; }

/* Badge de notificações */
.notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #ef4444;
    color: white;
    border-radius: 50%;
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid var(--primary);
}

/* Botão do usuário */
.topbar-user-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    border-radius: 0.5rem;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    transition: background 0.15s;
    max-width: 200px;
}
.topbar-user-btn:hover { background: rgba(255,255,255,0.22); }
.topbar-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}
.topbar-user-info {
    display: flex;
    flex-direction: column;
    text-align: left;
    overflow: hidden;
}
.topbar-user-name {
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}
.topbar-user-empresa {
    font-size: 0.7rem;
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}
.topbar-chevron {
    font-size: 0.65rem;
    opacity: 0.7;
    flex-shrink: 0;
}

/* ===== MEGA MENU PANEL ===== */
.mega-menu {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1039;
    background: white;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    border-top: 3px solid var(--primary);
    animation: megaMenuSlideIn 0.18s ease;
}
@keyframes megaMenuSlideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mega-menu-inner {
    position: relative;
    z-index: 1;
    padding: 0.75rem 1.5rem 1rem;
    max-width: 1000px;
    margin: 0 auto;
}

/* ===== MEGA MENU — GRID DE COLUNAS COM EXPAND POR COLUNA ===== */

/* Container: grade de 3 colunas, cada uma independente */
.mega-menu-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem 1rem;
    padding-bottom: 0.25rem;
    align-items: start;   /* essencial: colunas nao se esticam pela vizinha */
}

/* Coluna de uma categoria */
.mm-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: 0.45rem;
    overflow: hidden;
    border: 1px solid transparent;
    transition: border-color 0.15s;
}
.mm-col.mm-col-open {
    border-color: color-mix(in srgb, var(--cat-cor, var(--primary)) 25%, transparent);
}

/* Header — botao clicavel */
.mm-col-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem 0.4rem 0.75rem;
    border-left: 3px solid var(--cat-cor, var(--primary));
    border-radius: 0.45rem 0.45rem 0 0;
    cursor: pointer;
    background: none;
    border-top: none;
    border-right: none;
    border-bottom: none;
    width: 100%;
    text-align: left;
    outline: none;
    transition: background 0.12s;
}
.mm-col-header:hover { background: #f1f5f9; }
.mm-col-open .mm-col-header { background: color-mix(in srgb, var(--cat-cor, var(--primary)) 8%, white); }

.mm-col-header > i:first-child {
    font-size: 0.82rem;
    color: var(--cat-cor, var(--primary));
    flex-shrink: 0;
    width: 15px;
    text-align: center;
}
.mm-col-header span {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #6b7280;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mm-col-open .mm-col-header span { color: var(--cat-cor, var(--primary)); }

/* Chevron animado */
.mm-col-chev {
    font-size: 0.65rem;
    color: #9ca3af;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.mm-col-open .mm-col-chev {
    transform: rotate(180deg);
    color: var(--cat-cor, var(--primary));
}

/* Lista de itens — oculta por padrao, visivel quando open */
.mm-col-items {
    display: none;
    flex-direction: column;
    gap: 0.02rem;
    padding: 0.3rem 0.35rem 0.4rem;
    background: #fafbfc;
}
.mm-col-open .mm-col-items { display: flex; }

/* Item individual */
.mm-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.5rem;
    border-radius: 0.3rem;
    color: #374151;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    outline: none;
}
.mm-item i {
    color: #b0b8c4;
    font-size: 0.82rem;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}
.mm-item span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mm-item:hover { background: #eff6ff; color: var(--primary); }
.mm-item:hover i { color: var(--primary); }
.mm-item:hover .mm-fav-btn { opacity: 1 !important; }
.mm-fav-btn:hover { color: #f59e0b !important; opacity: 1 !important; }
.mm-item.active { background: #dbeafe; color: var(--primary); font-weight: 600; }
.mm-item.active i { color: var(--primary); }

/* Loading state */
.mega-menu-loading {
    display: flex;
    align-items: center;
    color: #6c757d;
    font-size: 0.9rem;
    padding: 1rem 0;
    grid-column: 1 / -1;
}

/* Overlay para fechar o menu ao clicar fora */
.mega-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: -1;
}

/* Conteúdo principal full-width */
/* Em monitores largos cresce ate ~1760px (min(1760px, 95vw)) em vez de travar
   em 1400px com vazio nas laterais. 95vw mantem respiro nas bordas. */
.avocati-main {
    max-width: min(1760px, 95vw);
    margin: 0 auto;
    width: 100%;
}

/* Telas ultrawide (>= 2200px): permite ir um pouco alem, ate 2000px, sem
   esticar texto/formularios ao infinito. */
@media (min-width: 2200px) {
    .avocati-main {
        max-width: 2000px;
    }
}

/* ===== DARK MODE ===== */
[data-theme="dark"] .avocati-header {
    background: #1e3a5f;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
[data-theme="dark"] .topbar-user-btn {
    border-color: rgba(255,255,255,0.15);
}
[data-theme="dark"] .topbar-search-input {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.15);
}
[data-theme="dark"] .nav-drop {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
[data-theme="dark"] .nav-drop-header {
    color: #475569;
    border-bottom-color: #3b82f6;
}
[data-theme="dark"] .nav-drop-item { color: #cbd5e1; }
[data-theme="dark"] .nav-drop-item i { color: #475569; }
[data-theme="dark"] .nav-drop-item:hover { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .nav-drop-item:hover i { color: #60a5fa; }
[data-theme="dark"] .nav-drop-item.nav-item-active { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .busca-rapida-dropdown {
    background: #1e293b;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
[data-theme="dark"] .busca-rapida-item {
    color: #cbd5e1;
    border-bottom-color: #334155;
}
[data-theme="dark"] .busca-rapida-item:hover,
[data-theme="dark"] .busca-rapida-item.focused {
    background: #1e3a5f;
    color: #93c5fd;
}
[data-theme="dark"] .notif-badge { border-color: #1e3a5f; }
[data-theme="dark"] .mega-menu {
    background: #1e293b;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
[data-theme="dark"] .mm-col-header { border-left-color: var(--cat-cor, var(--primary)); }
[data-theme="dark"] .mm-col-header:hover { background: #263445; }
[data-theme="dark"] .mm-col-open .mm-col-header { background: #1a2d45; }
[data-theme="dark"] .mm-col-header span { color: #475569; }
[data-theme="dark"] .mm-col-open .mm-col-header span { color: var(--cat-cor, #93c5fd); }
[data-theme="dark"] .mm-col-items { background: #1a2332; }
[data-theme="dark"] .mm-item { color: #cbd5e1; }
[data-theme="dark"] .mm-item i { color: #3d4f63; }
[data-theme="dark"] .mm-item:hover { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .mm-item:hover i { color: #60a5fa; }
[data-theme="dark"] .mm-item.active { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .mm-item.active i { color: #60a5fa; }

/* Responsivo */
@media (max-width: 1100px) {
    .mega-menu-cols { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .topbar-sep { display: none; }
    .topbar-user-name, .topbar-user-empresa, .topbar-chevron { display: none; }
    .topbar-user-btn { padding: 0.3rem; }
    .topbar-center { max-width: 160px; }
    .topbar-menu-btn span { display: none; }
    .topbar-shortcut span { display: none; }
    .mega-menu-inner { padding: 0.5rem 0.75rem 0.75rem; }
    .mega-menu-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .topbar-center { display: none; }
    .mega-menu-cols { grid-template-columns: 1fr 1fr; }
}

/* ===== IMPRESSAO / PDF (window.print) ===== */
@media print {
    .topbar, .sidebar, .mega-menu, .btn, .card-header .btn,
    #audit-paginacao, .form-select, .form-control, .form-label,
    nav, .nav-tabs, [data-bs-dismiss], .page-item { display: none !important; }
    body { background: white !important; color: black !important; font-size: 11pt; }
    .card { border: 1px solid #ccc !important; box-shadow: none !important; page-break-inside: avoid; }
    .card-header { background: #f5f5f5 !important; color: black !important; }
    .badge { border: 1px solid #999 !important; color: black !important; background: #eee !important; }
    table { font-size: 9pt; }
    th { background: #333 !important; color: white !important; -webkit-print-color-adjust: exact; }
    #conteudo { margin: 0 !important; padding: 0 !important; }
    h4, h5 { margin-bottom: 8pt; }
}

.card-tarefa-hover:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.07); }

/* Hover dos cards de tarefa via CSS (substitui onmouseenter/leave inline bloqueados
   pelo CSP strict-dynamic). kanban-card no kanban; gestao-card no painel de gestao. */
.kanban-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; transform: translateY(-2px); }
.gestao-task-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.1) !important; transform: translateY(-1px); }

/* Pasta cards - grid estilo explorador de arquivos */
.pasta-card { transition: box-shadow .15s, transform .1s; }
.pasta-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12); transform: translateY(-1px); }
.pasta-card .card-footer { opacity: 0; transition: opacity .15s; }
.pasta-card:hover .card-footer { opacity: 1; }

/* ===== Diagrama de POP (HTML/CSS proprio) — fluxo atividade -> passos ===== */
.popfx-canvas {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 66vh;
    padding: 8px 4px;
    background: #f8fafc;
    background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
    background-size: 18px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
/* Uma linha de fluxo: atividade -> seta -> passo -> seta -> passo ... */
.popfx-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    margin-bottom: 14px;
    width: max-content;     /* nao quebra; rola horizontal se passar */
    min-width: 100%;
}
/* Cabecalho da atividade */
.popfx-atv {
    flex: 0 0 auto;
    width: 190px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #3b82f6;
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 1px 5px rgba(0,0,0,.08);
}
.popfx-cargo { font-size: .58rem; text-transform: uppercase; letter-spacing: .03em; color: #94a3b8; font-weight: 600; margin-bottom: 2px; }
.popfx-atv-nome { font-weight: 700; font-size: .83rem; color: #1e293b; line-height: 1.25; }
.popfx-atv-meta { font-size: .68rem; color: #64748b; margin-top: 4px; }
/* Seta entre nos */
.popfx-arrow {
    flex: 0 0 auto;
    width: 30px;
    text-align: center;
    color: #94a3b8;
    font-size: 1.1rem;
    line-height: 1;
}
/* Caixa de passo */
.popfx-passo {
    flex: 0 0 auto;
    width: 200px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    display: flex;
    gap: 7px;
    align-items: flex-start;
}
.popfx-passo-num {
    flex: 0 0 auto;
    width: 18px; height: 18px;
    background: #dbeafe; color: #1d4ed8;
    border-radius: 50%;
    font-size: .65rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
}
.popfx-passo-txt { font-size: .72rem; color: #475569; line-height: 1.3; }
.popfx-vazio { padding: 0 12px; }
/* Bloco de cargo (diagrama macro do escritorio) */
.popfx-cargo-bloco { margin-bottom: 22px; }
.popfx-cargo-titulo {
    font-weight: 700; font-size: .9rem; color: #334155;
    border-left: 4px solid #3b82f6;
    padding: 4px 10px; margin-bottom: 10px;
    background: #fff; border-radius: 4px;
    display: inline-block;
}

/* ===== Diagrama de POP em TELA CHEIA (Drawflow) — nos atividade + passo ===== */
.drawflow .drawflow-node.pop-df-node {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    width: auto !important;
}
.drawflow .drawflow-node.pop-df-node.selected { box-shadow: none !important; }
.pop-df-node .drawflow_content_node { padding: 0 !important; text-align: left !important; }
.pop-node-atv {
    background: #fff; border: 1px solid #e2e8f0; border-left: 4px solid #3b82f6;
    border-radius: 8px; padding: 9px 12px; box-shadow: 0 1px 5px rgba(0,0,0,.1); width: 190px;
}
.pop-node-cargo { font-size: .58rem; text-transform: uppercase; letter-spacing: .03em; color: #94a3b8; font-weight: 600; margin-bottom: 2px; }
.pop-node-titulo { font-weight: 700; font-size: .82rem; color: #1e293b; line-height: 1.25; }
.pop-node-meta { font-size: .68rem; color: #64748b; margin-top: 4px; }
.pop-node-passo {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 8px 10px; box-shadow: 0 1px 3px rgba(0,0,0,.06);
    width: 200px; display: flex; gap: 7px; align-items: flex-start;
}
.pop-passo-num {
    flex: 0 0 auto; width: 18px; height: 18px; background: #dbeafe; color: #1d4ed8;
    border-radius: 50%; font-size: .65rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.pop-passo-txt { font-size: .72rem; color: #475569; line-height: 1.3; }
.drawflow .pop-df-node .input, .drawflow .pop-df-node .output { width: 12px; height: 12px; background: #94a3b8; border: 2px solid #fff; }
.drawflow.pop-flow .connection .main-path { stroke: #6366f1; stroke-width: 2.5; }

/* TomSelect dentro de um SweetAlert (ex: popup da Nova Demanda): o container do Swal
   usa z-index ~1060, entao o dropdown do TomSelect precisa ficar ACIMA para nao ser
   cortado/escondido atras do popup. Cobre tambem o dropdown ancorado no body. */
.swal2-container .ts-dropdown,
.swal2-container .ts-wrapper.focus .ts-dropdown { z-index: 2000; }
body > .ts-dropdown { z-index: 2000; }
/* Garante que o campo de busca do TomSelect no Swal ocupe a largura toda e seja clicavel */
.swal2-container .ts-wrapper { text-align: left; }