/* ============================================================================
 * layout-novo.css  —  NOVO SHELL (sidebar + topbar) + DASHBOARD reestilizado
 * ----------------------------------------------------------------------------
 * Aplicado SOBRE theme-moderno.css (carregado depois dele).
 * Princípio: CSS-first. Reaproveita o mecanismo de abas existente
 *   (showTab / navGoTo + .tab-content). Nada de IDs/JS removidos.
 *
 * REMOVÍVEL: basta tirar o <link> deste arquivo + a <aside class="side-nav">
 * e o <script> do rodapé que o sistema volta ao layout antigo.
 *
 * Tokens herdados de theme-moderno.css:
 *   --primary, --primary-rgb, --primary-dark, --accent, --indigo, --violet,
 *   --success, --warning, --danger, --brand-green,
 *   --bg-page, --bg-card, --bg-subtle, --text-primary, --text-secondary,
 *   --text-muted, --border-color, --radius*, --shadow*
 * ========================================================================== */

:root{
  --sn-w: 220px;            /* largura sidebar expandida */
  --sn-w-collapsed: 72px;   /* largura sidebar colapsada (só ícones) */
  --tb-h: 60px;             /* altura da topbar */
}

/* ============================================================================
 * 1. SHELL — sidebar fixa + container deslocado
 * ========================================================================== */

/* A sidebar é fixa à esquerda; o conteúdo (.container) ganha margin-left. */
.side-nav{
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sn-w);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border-right: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  transition: width .22s ease, transform .22s ease;
}
body.sn-collapsed .side-nav{ width: var(--sn-w-collapsed); }

/* Empurra TODO o app antigo para a direita da sidebar. */
body .container{
  margin-left: var(--sn-w) !important;
  transition: margin-left .22s ease;
  max-width: none !important;
  width: auto !important;
}
body.sn-collapsed .container{ margin-left: var(--sn-w-collapsed) !important; }

/* ============================================================================
 * ROLAGEM NATURAL DA PÁGINA
 * O layout antigo travava .container em height:100vh + overflow:hidden e cada
 * .tab-content rolava por dentro. No shell novo (sidebar fixa + topbar sticky)
 * deixamos a JANELA rolar — assim toda página que precisar ganha barra de
 * rolagem e nenhum conteúdo fica cortado. A topbar (sticky) e a sidebar
 * (fixed) permanecem no lugar enquanto o conteúdo rola.
 * ========================================================================== */
html{ height: auto !important; overflow-y: auto !important; overflow-x: hidden !important; }
body{ height: auto !important; min-height: 100vh !important; overflow: visible !important; }
/* SOLTA A GAIOLA INTEIRA: a base trava .container/.main-layout/.content-wrapper
   em flex + 100vh + overflow:hidden, com a .tab-content rolando por dentro.
   No shell novo desmontamos isso e deixamos a JANELA rolar (block flow). */
body .container,
body .main-layout,
body .content-wrapper{
  display: block !important;
  flex: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
body .container{ min-height: 100vh !important; }
/* cada aba flui no fluxo normal; scroll é da janela (mantém scroll interno de
   tabelas/listas que têm seu próprio container, ex.: .table-container) */
body .tab-content{ height: auto !important; min-height: 0 !important; overflow: visible !important; }
body .tab-content.active{ display: block !important; }

/* Esconde a topnav horizontal antiga — MANTIDA no DOM (JS referencia navbtn-*/
/* e navgroup-*). Só ocultamos visualmente. */
.nav-tabs{ display: none !important; }

/* O main-layout antigo era grid sidebar+conteúdo; agora é coluna simples. */
.main-layout{ display: block !important; }
.content-wrapper{ width: 100% !important; }

/* ---- Logo ---- */
.sn-logo{
  height: var(--tb-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 18px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.sn-logo .sn-mark{
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 17px;
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), .4);
}
.sn-logo .sn-name{
  font-weight: 800; font-size: 19px; letter-spacing: -.4px;
  white-space: nowrap; color: var(--text-primary);
}
body.sn-collapsed .sn-logo{ padding: 0; justify-content: center; }
body.sn-collapsed .sn-logo .sn-name{ display: none; }

/* ---- Lista de navegação ---- */
.sn-nav{
  flex: 1; overflow-y: auto;
  padding: 12px 12px 24px;
  display: flex; flex-direction: column; gap: 2px;
}
.sn-section{
  font-size: 10.5px; font-weight: 700; letter-spacing: .7px;
  text-transform: uppercase; color: var(--text-muted);
  padding: 16px 12px 6px; white-space: nowrap;
}
body.sn-collapsed .sn-section{ font-size: 0; text-align: center; padding: 14px 0 6px; }
body.sn-collapsed .sn-section::after{ content: "•"; font-size: 12px; color: var(--text-muted); }

.sn-item{
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  color: var(--text-secondary); font-size: 14px; font-weight: 500;
  white-space: nowrap; cursor: pointer; position: relative;
  border: none; background: none; width: 100%; text-align: left;
  font-family: inherit;
  transition: background .15s, color .15s;
}
.sn-item .sn-ico{ font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; line-height: 1; }
.sn-item .sn-label{ flex: 1; overflow: hidden; text-overflow: ellipsis; }
.sn-item:hover{ background: var(--bg-subtle); color: var(--text-primary); }
.sn-item.active{
  background: rgba(var(--primary-rgb), .10);
  color: var(--primary); font-weight: 600;
}
.sn-item.active::before{
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--primary);
}
/* CTA de upload destacado */
.sn-item.sn-cta{
  background: var(--primary); color: #fff; margin: 2px 0;
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), .35);
}
.sn-item.sn-cta:hover{ background: var(--primary-dark); color: #fff; }
.sn-item.sn-cta.active::before{ display: none; }

/* dot de status (WhatsApp) */
.sn-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success); flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(16,185,129,.18);
}

/* Colapsado: esconde rótulos, centraliza, mostra tooltip */
body.sn-collapsed .sn-item{ justify-content: center; padding: 11px 0; }
body.sn-collapsed .sn-item .sn-label,
body.sn-collapsed .sn-item .sn-dot{ display: none; }
body.sn-collapsed .sn-item:hover::after{
  content: attr(data-tip);
  position: absolute; left: calc(100% + 10px); top: 50%;
  transform: translateY(-50%);
  background: var(--text-primary); color: var(--bg-card);
  padding: 5px 10px; border-radius: 7px; font-size: 12.5px;
  white-space: nowrap; z-index: 1300; box-shadow: var(--shadow-md);
  font-weight: 500; pointer-events: none;
}

/* ============================================================================
 * 2. TOPBAR — o .header antigo vira barra fina no topo do conteúdo
 * ========================================================================== */
body .header{
  /* zera o visual de "banner" colorido herdado e vira topbar branca fina */
  position: sticky !important;
  top: 0 !important;
  z-index: 1100 !important;
  height: var(--tb-h) !important;
  min-height: var(--tb-h) !important;
  padding: 0 18px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: var(--bg-card) !important;
  border: none !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  box-shadow: var(--shadow-xs) !important;
  color: var(--text-primary) !important;
  overflow: visible !important;
}
/* remove o "::after" decorativo do header antigo (faixa/halo) */
body .header::after,
body .header::before{ display: none !important; content: none !important; }

/* título "SenDocs" some na topbar (já temos logo na sidebar) */
body .header .header-content{ display: none !important; }

/* Botões/inputs do header ficam discretos no tema claro */
body .header #whatsapp-status-header{
  background: var(--bg-subtle) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
}
body .header #user-info{
  background: var(--bg-subtle) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
}
body .header button{
  color: var(--text-secondary) !important;
}
body .header button:hover{ color: var(--text-primary) !important; }

/* Botão de colapsar a sidebar (inserido no header) */
.tb-collapse, .tb-burger{
  width: 38px; height: 38px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--text-secondary);
  background: transparent !important; border: none !important;
  cursor: pointer; flex-shrink: 0;
  transition: background .15s, color .15s;
}
.tb-collapse:hover, .tb-burger:hover{ background: var(--bg-subtle); color: var(--text-primary); }
.tb-burger{ display: none; }            /* só aparece no mobile */

/* O bloco de status/user/logout do header é empurrado para a direita */
body .header > div[style*="flex-end"]{ margin-left: auto; }

/* Botão flutuante de tema continua existindo (#theme-toggle-btn) — mantido. */

/* ============================================================================
 * 3. DRAWER MOBILE (off-canvas) — backdrop
 * ========================================================================== */
.sn-backdrop{
  position: fixed; inset: 0;
  background: rgba(15,23,42,.5);
  z-index: 1150; display: none;
}
body.sn-mobile-open .sn-backdrop{ display: block; }

@media (max-width: 900px){
  .side-nav{ transform: translateX(-100%); box-shadow: var(--shadow-xl); }
  body.sn-mobile-open .side-nav{ transform: none; }
  body .container{ margin-left: 0 !important; }
  body.sn-collapsed .container{ margin-left: 0 !important; }
  .tb-collapse{ display: none; }
  .tb-burger{ display: flex; }
}

/* ============================================================================
 * 4. DASHBOARD reestilizado (apenas #tab-dashboard)
 * ----------------------------------------------------------------------------
 * Reaproveita TODOS os widgets reais. Só reorganiza/reestiliza via CSS
 * (+ wrappers .dash-* adicionados no markup, que não removem nenhum ID).
 * ========================================================================== */

#tab-dashboard{ padding-top: 4px; }

/* ---- Faixa de KPIs (a partir de .stats-row real) ---- */
#tab-dashboard .stats-row{
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
  margin-bottom: 20px !important;
}
/* Os 4 stat-card-pro reais viram KPI-cards no estilo do mockup. */
#tab-dashboard .stat-card-pro{
  position: relative; overflow: hidden;
  padding: 16px 16px 14px !important;
  border-radius: var(--radius) !important;
}
/* barra colorida lateral (semáforo) — reusa as cores já existentes por classe */
#tab-dashboard .stat-card-pro::before{
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; height: auto !important; border-radius: 0 !important;
}
#tab-dashboard .stat-card-pro.green::before  { background: var(--success) !important; }
#tab-dashboard .stat-card-pro.blue::before   { background: var(--primary) !important; }
#tab-dashboard .stat-card-pro.orange::before { background: var(--warning) !important; }
#tab-dashboard .stat-card-pro.purple::before { background: var(--violet) !important; }
#tab-dashboard .stat-value-pro{
  font-size: 30px !important; font-weight: 800 !important;
  letter-spacing: -1px !important; margin: 6px 0 4px !important;
}
#tab-dashboard .stat-label-pro{
  font-size: 11.5px !important; text-transform: uppercase;
  letter-spacing: .3px; color: var(--text-secondary) !important; font-weight: 600;
}

/* ---- Ações rápidas: compacta ---- */
#tab-dashboard .quick-actions{ margin-bottom: 20px !important; }

/* ---- Grid 2 colunas (esquerda gráficos+atividade / direita calendário+status) ---- */
.dash-grid{
  display: grid;
  grid-template-columns: 1.9fr 1fr;
  gap: 18px;
  margin-bottom: 22px;
  align-items: start;
}
.dash-col{ display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* dentro do grid, os cards já existentes ocupam 100% e perdem margens soltas */
.dash-grid .charts-section{ margin: 0 !important; }
.dash-grid .chart-card-pro{ margin: 0 !important; }

/* O gráfico de destaque (Envios por Período) ganha mais respiro */
.dash-grid .charts-section{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 18px !important;
}

/* Coluna direita: calendário + status compactos */
.dash-col .calendar-card{ margin: 0 !important; }
.dash-col .section{ margin: 0 !important; }

/* ---- Responsivo do dashboard ---- */
@media (max-width: 1100px){
  #tab-dashboard .stats-row{ grid-template-columns: repeat(2, 1fr) !important; }
  .dash-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  #tab-dashboard .stats-row{ grid-template-columns: 1fr !important; }
}

/* ============================================================================
 * 5. ABA DOCUMENTOS / UPLOAD (#tab-documentos)
 * ----------------------------------------------------------------------------
 * Reestiliza a aba real no espírito do mockup preview-novo-layout.html.
 * CSS-first: nenhum ID/onclick/função JS foi removido. Apenas classes visuais
 * foram adicionadas no markup. Cores/tokens herdados de theme-moderno.css.
 *
 * Cores de categoria de tipo de documento (badges) — espelham o mockup:
 *   TRABALHISTA #7C3AED · FEDERAL #2563EB · ESTADUAL #0891B2
 *   MUNICIPAL #EA580C · FISCAL #4F46E5 · PAGAMENTO #475569
 * ========================================================================== */

#tab-documentos{ padding-top: 4px; }

/* ---- Títulos de seção mais leves dentro da aba ---- */
#tab-documentos .section{ margin-bottom: 20px !important; }

/* ============================================================================
 * 5.1 DROPZONE moderna (.upload-area / #upload-dropzone)
 * ========================================================================== */
#tab-documentos .upload-area.dz-novo{
  border: 2px dashed var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--bg-subtle) !important;
  padding: 40px 24px !important;
  text-align: center !important;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
  margin-bottom: 18px;
}
#tab-documentos .upload-area.dz-novo:hover,
#tab-documentos .upload-area.dz-novo.drag-over,
#tab-documentos .upload-area.dz-novo.dragover,
#tab-documentos .upload-area.dz-novo.drag{
  border-color: var(--primary) !important;
  background: var(--primary-100) !important;
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .10);
}
#tab-documentos .upload-area.dz-novo .dz-ic{
  font-size: 44px; line-height: 1;
  margin-bottom: 10px;
  opacity: .9;
}
#tab-documentos .upload-area.dz-novo h3{
  font-size: 17px; font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
}
#tab-documentos .upload-area.dz-novo p{
  color: var(--text-secondary); font-size: 13px;
  margin: 0 0 16px;
}
#tab-documentos .upload-area.dz-novo .dz-btn{
  display: inline-flex; align-items: center; justify-content: center;
  pointer-events: none;            /* o clique é capturado pela área inteira */
}

/* ============================================================================
 * 5.2 RESULTADOS DO UPLOAD (#upload-lista / #upload-resultados)
 * Cada item é #upload-item-${i}.upload-item-card (gerado por JS).
 * O JS muta inline: itemEl.style.background/borderColor/borderLeft (estados
 * sucesso/erro) — esses inline VENCEM o CSS abaixo, então os estados coloridos
 * continuam funcionando. Aqui só damos a "casca" de card moderno.
 * ========================================================================== */
#tab-documentos #upload-lista{ margin-top: 18px; }
#tab-documentos #upload-lista > h4{
  font-size: 14px; font-weight: 700; color: var(--text-primary);
  margin-bottom: 12px;
}

#tab-documentos .upload-item-card{
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
  margin-bottom: 12px;
  transition: box-shadow .18s ease;
}
#tab-documentos .upload-item-card:hover{ box-shadow: var(--shadow-md); }

#tab-documentos .upload-item-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
#tab-documentos .upload-item-nome{
  font-size: .92rem; font-weight: 700; color: var(--text-primary);
  word-break: break-word; min-width: 0;
}
/* badge de status do item: o JS troca background/color inline; aqui só forma */
#tab-documentos .upload-item-badge{
  font-size: 12px; font-weight: 700;
  padding: 4px 11px; border-radius: var(--radius-full);
  white-space: nowrap; flex-shrink: 0;
}
#tab-documentos .upload-item-track{
  background: var(--bg-subtle);
  border-radius: var(--radius-full);
  height: 22px; overflow: hidden;
}
#tab-documentos .upload-item-bar{
  border-radius: var(--radius-full);
}
/* A linha de info extra que o JS injeta via appendChild (infoDiv/erroDiv) usa
   inline style próprio — fica coerente sobre o card; só garantimos respiro. */
#tab-documentos .upload-item-card > div[style]{ margin-top: 8px; }

/* ============================================================================
 * 5.3 FILTROS (.docs-filtros) + BARRA DE AÇÕES EM MASSA
 * ========================================================================== */
#tab-documentos .docs-filtros{
  background: var(--bg-subtle) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius) !important;
  align-items: center;
}
#tab-documentos .docs-filtros .form-control{
  border-radius: 10px !important;
  border: 1px solid var(--border-color) !important;
  background: var(--bg-card) !important;
  height: 40px;
  transition: border-color .15s, box-shadow .15s;
}
#tab-documentos .docs-filtros .form-control:focus{
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .15) !important;
  outline: none;
}
#tab-documentos .docs-filtros .btn-secondary{
  border-radius: 10px !important;
  height: 40px;
}

/* Barra de ações em massa: destaque suave azul (mantém display:none inline) */
#tab-documentos #barra-acoes-massa{
  align-items: center !important;
  background: var(--primary-100) !important;
  border: 1px solid rgba(var(--primary-rgb), .35) !important;
  border-radius: var(--radius) !important;
  padding: 12px 16px !important;
  margin-top: 12px !important;
}
#tab-documentos #barra-acoes-massa #qtd-selecionados{
  color: var(--primary-dark) !important;
}
#tab-documentos #barra-acoes-massa .btn{
  border-radius: 9px !important;
}

/* ============================================================================
 * 5.4 TABELA de documentos (#documentos-tbody + cabeçalho com sort)
 * ========================================================================== */
#tab-documentos .table-container{
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
#tab-documentos .table{
  width: 100%; border-collapse: collapse;
  margin: 0 !important;
}
#tab-documentos .table thead th{
  text-align: left;
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--text-muted);
  padding: 12px 16px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}
#tab-documentos .table thead th.th-sort{ cursor: pointer; user-select: none; }
#tab-documentos .table thead th.th-sort:hover{ color: var(--text-secondary); }
#tab-documentos .table thead th .sort-ic{
  font-size: 11px; color: var(--text-muted); margin-left: 2px;
}
#tab-documentos .table tbody td{
  padding: 0 16px;
  height: 48px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
  vertical-align: middle;
  font-size: 13.5px;
}
#tab-documentos .table tbody tr{ transition: background .12s; }
#tab-documentos .table tbody tr:hover{ background: var(--bg-subtle); }
#tab-documentos .table tbody tr:last-child td{ border-bottom: none; }
#tab-documentos .table tbody td strong{ color: var(--text-primary); }

/* ----------------------------------------------------------------------------
 * 5.4.1 DIMENSIONAMENTO DAS COLUNAS — corrige rolagem horizontal
 * ----------------------------------------------------------------------------
 * Problema: 11 colunas (checkbox, PDF, Arquivo, Cliente, Compet., Tipo,
 * Vencimento, Valor, Dt.Envio, Status, Ações) estouravam a largura e geravam
 * scroll horizontal no desktop.
 *
 * Solução CSS-first (zero regressão): table-layout:fixed para o navegador
 * respeitar as larguras por coluna; larguras/proporções definidas por
 * nth-child; colunas de texto longo truncam com ellipsis em vez de empurrar
 * a largura. Nenhum ID/onclick/coluna/template foi alterado.
 *
 * Ordem das colunas (nth-child):
 *   1 checkbox · 2 PDF · 3 Arquivo · 4 Cliente · 5 Compet. · 6 Tipo ·
 *   7 Vencimento · 8 Valor · 9 Dt.Envio · 10 Status · 11 Ações
 * ========================================================================== */
#tab-documentos .table{ table-layout: fixed; }

/* O container só rola na horizontal em último caso (telas muito estreitas);
   no desktop a tabela cabe 100% e não há barra horizontal. */
#tab-documentos .table-container{ overflow-x: auto; }

/* Padding horizontal e fonte ligeiramente reduzidos p/ ganhar espaço */
#tab-documentos .table thead th{ padding-left: 12px; padding-right: 12px; }
#tab-documentos .table tbody td{ padding-left: 12px; padding-right: 12px; font-size: 13px; }

/* Larguras por coluna (percentuais somam ~100%) */
#tab-documentos .table thead th:nth-child(1),
#tab-documentos .table tbody td:nth-child(1){ width: 34px; text-align: center; padding-left: 8px; padding-right: 8px; }   /* checkbox */
#tab-documentos .table thead th:nth-child(2),
#tab-documentos .table tbody td:nth-child(2){ width: 40px; text-align: center; padding-left: 4px; padding-right: 4px; }   /* PDF */
#tab-documentos .table thead th:nth-child(3),
#tab-documentos .table tbody td:nth-child(3){ width: 23%; }                                                              /* Arquivo */
#tab-documentos .table thead th:nth-child(4),
#tab-documentos .table tbody td:nth-child(4){ width: 18%; }                                                              /* Cliente */
#tab-documentos .table thead th:nth-child(5),
#tab-documentos .table tbody td:nth-child(5){ width: 7%; }                                                               /* Competência */
#tab-documentos .table thead th:nth-child(6),
#tab-documentos .table tbody td:nth-child(6){ width: 12%; }                                                              /* Tipo/Impostos */
#tab-documentos .table thead th:nth-child(7),
#tab-documentos .table tbody td:nth-child(7){ width: 8%; white-space: nowrap; }                                          /* Vencimento */
#tab-documentos .table thead th:nth-child(8),
#tab-documentos .table tbody td:nth-child(8){ width: 8%; white-space: nowrap; }                                          /* Valor */
#tab-documentos .table thead th:nth-child(9),
#tab-documentos .table tbody td:nth-child(9){ width: 8%; }                                                              /* Dt. Envio */
#tab-documentos .table thead th:nth-child(10),
#tab-documentos .table tbody td:nth-child(10){ width: 8%; }                                                             /* Status */
#tab-documentos .table thead th:nth-child(11),
#tab-documentos .table tbody td:nth-child(11){ width: 110px; }                                                          /* Ações */

/* Truncamento das colunas de texto longo (Arquivo, Cliente, Tipo): cortam com
   reticências em vez de aumentar a largura da coluna. */
#tab-documentos .table tbody td:nth-child(3),
#tab-documentos .table tbody td:nth-child(4),
#tab-documentos .table tbody td:nth-child(6){
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Garante o ellipsis mesmo com <strong>/<span> internos sem alterar o JS */
#tab-documentos .table tbody td:nth-child(3) strong{
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Coluna Tipo: se houver vários badges, mantém em linha única e trunca o excesso */
#tab-documentos .table tbody td:nth-child(6) .badge{
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* Ações: botões compactos para caber em 96px sem quebrar layout */
#tab-documentos .table tbody td:nth-child(11) .btn-group{
  display: inline-flex; gap: 4px; flex-wrap: nowrap;
}
#tab-documentos .table tbody td:nth-child(11) .btn-group .btn{ padding: 4px 6px; }

/* Paginação coerente */
#tab-documentos #docs-paginacao{ padding: 12px 4px; }

/* ---- Badges de tipo por categoria (caso o JS exponha a categoria por
 * classe .badge-tipo-<cat> num futuro; hoje os tipos saem como .badge-info).
 * Mapeamento por CSS — seguro, só aplica se a classe existir. ---- */
#tab-documentos .badge-tipo-trabalhista{ background: #7C3AED !important; color: #fff !important; }
#tab-documentos .badge-tipo-federal    { background: #2563EB !important; color: #fff !important; }
#tab-documentos .badge-tipo-estadual   { background: #0891B2 !important; color: #fff !important; }
#tab-documentos .badge-tipo-municipal  { background: #EA580C !important; color: #fff !important; }
#tab-documentos .badge-tipo-fiscal     { background: #4F46E5 !important; color: #fff !important; }
#tab-documentos .badge-tipo-pagamento  { background: #475569 !important; color: #fff !important; }
/* badge de tipo neutro/consistente (estilo atual .badge-info na coluna Tipo) */
#tab-documentos .table tbody .badge{
  font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 7px;
  letter-spacing: .3px;
}

/* ============================================================================
 * 5.5 Responsivo da aba documentos
 * ========================================================================== */
/* ----------------------------------------------------------------------------
 * Tabela responsiva: oculta colunas secundárias por CSS (display:none no
 * th + td correspondente). NUNCA remove do DOM nem altera o template/JS —
 * as colunas continuam existindo (colspan="11", IDs e onclick intactos),
 * apenas ficam visualmente ocultas em telas estreitas.
 *
 * Essenciais (sempre visíveis): checkbox, PDF, Arquivo, Cliente, Tipo,
 * Vencimento, Valor, Status, Ações.
 *
 * Ordem de ocultação conforme a largura diminui:
 *   < 1200px → esconde Competência (5) e Dt. Envio (9)
 *   <  992px → esconde também Tipo/Impostos (6)
 * -------------------------------------------------------------------------- */
@media (max-width: 1200px){
  /* Competência (5) e Dt. Envio (9) */
  #tab-documentos .table thead th:nth-child(5),
  #tab-documentos .table tbody td:nth-child(5),
  #tab-documentos .table thead th:nth-child(9),
  #tab-documentos .table tbody td:nth-child(9){ display: none; }

  /* Reequilibra as larguras das colunas restantes */
  #tab-documentos .table thead th:nth-child(3),
  #tab-documentos .table tbody td:nth-child(3){ width: 25%; }
  #tab-documentos .table thead th:nth-child(4),
  #tab-documentos .table tbody td:nth-child(4){ width: 20%; }
  #tab-documentos .table thead th:nth-child(6),
  #tab-documentos .table tbody td:nth-child(6){ width: 16%; }
}

@media (max-width: 992px){
  /* Esconde também Tipo/Impostos (6) */
  #tab-documentos .table thead th:nth-child(6),
  #tab-documentos .table tbody td:nth-child(6){ display: none; }

  #tab-documentos .table thead th:nth-child(3),
  #tab-documentos .table tbody td:nth-child(3){ width: 32%; }
  #tab-documentos .table thead th:nth-child(4),
  #tab-documentos .table tbody td:nth-child(4){ width: 24%; }
}

@media (max-width: 720px){
  #tab-documentos .upload-area.dz-novo{ padding: 28px 16px !important; }
  #tab-documentos .docs-filtros{ gap: 8px !important; }
  /* Em telas muito estreitas/mobile, permite rolagem horizontal como
     último recurso para não comprimir demais as colunas essenciais. */
  #tab-documentos .table{ table-layout: auto; min-width: 640px; }
}

/* ============================================================================
 * 6. ABA CLIENTES (#tab-clientes)
 * ----------------------------------------------------------------------------
 * Reestiliza a aba real (cadastro + importação + lista) no espírito do mockup
 * preview-novo-layout.html e coerente com Dashboard e Documentos.
 * CSS-first: NENHUM ID/onclick/função JS foi removido ou renomeado. Apenas
 * classes/wrappers visuais foram adicionados ao markup. Tokens herdados de
 * theme-moderno.css (--primary #2563EB, --success #10B981, --bg-card, etc.).
 *
 * Avatar com iniciais: gerado por JS (cosmético) a partir de c.nome — apenas
 * derivação visual, não há novo dado nem ID dinâmico.
 * ========================================================================== */

#tab-clientes{ padding-top: 4px; }
#tab-clientes .section{ margin-bottom: 20px !important; }

/* ---- Layout topo: formulário (largo) + importação (estreito) ---- */
#tab-clientes .cli-grid{
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

/* ---- Cards limpos (cadastro / importação / lista) ---- */
#tab-clientes .cli-form-card,
#tab-clientes .cli-import-card,
#tab-clientes .cli-lista-card{
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 22px !important;
}
#tab-clientes .section > h2{
  font-size: 16px; font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 18px;
}

/* ============================================================================
 * 6.1 FORMULÁRIO de cadastro (#form-cliente) — grid responsivo
 * ========================================================================== */
#tab-clientes .cli-fields{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  margin: 0 !important;
}
#tab-clientes .cli-fields .form-group{ margin-bottom: 0 !important; min-width: 0; }
#tab-clientes .cli-span-2{ grid-column: 1 / -1; }

#tab-clientes .cli-fields label{
  font-size: 12.5px; font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 5px; display: block;
}
#tab-clientes .cli-fields small{
  font-size: 11px; color: var(--text-muted); margin-top: 3px; display: block;
}

#tab-clientes .cli-form .form-control{
  border-radius: 10px !important;
  border: 1px solid var(--border-color) !important;
  background: var(--bg-card) !important;
  height: 42px;
  font-size: 13.5px;
  transition: border-color .15s, box-shadow .15s;
}
#tab-clientes .cli-form select.form-control{ cursor: pointer; }
#tab-clientes .cli-form .form-control:focus{
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .15) !important;
  outline: none;
}

/* CPF/CNPJ + botão Buscar lado a lado */
#tab-clientes .cli-input-busca{ display: flex; gap: 8px; }
#tab-clientes .cli-input-busca .form-control{ flex: 1; min-width: 0; }
#tab-clientes .cli-btn-busca{
  white-space: nowrap;
  border-radius: 10px !important;
  height: 42px; padding: 0 16px;
  flex-shrink: 0;
}

/* Grupos de checkbox (atividade / características) */
#tab-clientes .cli-checks{
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  padding: 6px 0;
}
#tab-clientes .cli-check{
  display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer; font-weight: 500 !important;
  font-size: 13px; color: var(--text-secondary);
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 7px 13px;
  margin: 0 !important;
  transition: border-color .15s, background .15s;
}
#tab-clientes .cli-check:hover{ border-color: var(--primary); }
#tab-clientes .cli-check input[type="checkbox"]{
  width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary);
}

#tab-clientes .cli-form-actions{
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--border-color);
  display: flex; justify-content: flex-end;
}
#tab-clientes .cli-form-actions .btn{ border-radius: 10px !important; padding: 10px 22px; }

/* ============================================================================
 * 6.2 Card de importação CSV
 * ========================================================================== */
#tab-clientes .cli-import-desc{
  color: var(--text-secondary) !important;
  font-size: 13px; line-height: 1.5;
  margin-bottom: 16px !important;
}
#tab-clientes .cli-import-card .btn{ border-radius: 10px !important; width: 100%; }

/* ============================================================================
 * 6.3 TOOLBAR da lista (busca + ordenar + importar + novo)
 * ========================================================================== */
#tab-clientes .cli-toolbar{
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; margin-bottom: 16px;
}
#tab-clientes .cli-search{ position: relative; flex: 1; min-width: 220px; }
#tab-clientes .cli-search-ic{
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  font-size: 14px; pointer-events: none; opacity: .65;
}
#tab-clientes .cli-search .form-control{
  width: 100%;
  border-radius: 10px !important;
  border: 1px solid var(--border-color) !important;
  background: var(--bg-card) !important;
  height: 42px; padding-left: 38px !important;
  transition: border-color .15s, box-shadow .15s;
}
#tab-clientes .cli-search .form-control:focus{
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .15) !important;
  outline: none;
}
#tab-clientes .cli-ordenar{
  border-radius: 10px !important;
  border: 1px solid var(--border-color) !important;
  background: var(--bg-card) !important;
  height: 42px; min-width: 180px; cursor: pointer;
  margin-bottom: 0 !important;
}
#tab-clientes .cli-ordenar:focus{
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .15) !important;
  outline: none;
}
#tab-clientes .cli-btn-csv,
#tab-clientes .cli-btn-novo{
  border-radius: 10px !important;
  height: 42px; padding: 0 18px;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}

/* ============================================================================
 * 6.4 TABELA de clientes (#clientes-tbody) — coerente com Documentos
 * ========================================================================== */
#tab-clientes .table-container{
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
#tab-clientes .table{ width: 100%; border-collapse: collapse; margin: 0 !important; }
#tab-clientes .table thead th{
  text-align: left;
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--text-muted);
  padding: 12px 16px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}
#tab-clientes .table tbody td{
  padding: 0 16px;
  height: 52px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
  vertical-align: middle;
  font-size: 13.5px;
}
#tab-clientes .table tbody tr{ transition: background .12s; }
#tab-clientes .table tbody tr:hover{ background: var(--bg-subtle); }
#tab-clientes .table tbody tr:last-child td{ border-bottom: none; }
#tab-clientes .table tbody td strong{ color: var(--text-primary); font-weight: 600; }

/* Célula Nome com avatar de iniciais */
#tab-clientes .cli-nome-cell{
  display: flex; align-items: center; gap: 11px; min-width: 0;
}
#tab-clientes .cli-avatar{
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; letter-spacing: .3px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark, #1d4ed8));
}

/* Botões de ação da linha mais compactos/arredondados */
#tab-clientes .table tbody .btn-group{ display: inline-flex; gap: 6px; }
#tab-clientes .table tbody .btn-group .btn{
  border-radius: 8px !important;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 !important;
}

/* ============================================================================
 * 6.5 Responsivo da aba clientes
 * ========================================================================== */
@media (max-width: 1024px){
  #tab-clientes .cli-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  #tab-clientes .cli-fields{ grid-template-columns: 1fr; }
  #tab-clientes .cli-form-card,
  #tab-clientes .cli-import-card,
  #tab-clientes .cli-lista-card{ padding: 16px !important; }
  #tab-clientes .cli-toolbar .cli-btn-csv,
  #tab-clientes .cli-toolbar .cli-btn-novo{ flex: 1; justify-content: center; }
  #tab-clientes .cli-ordenar{ flex: 1; }
}

/* ============================================================================
 * 7. ABA VENCIMENTOS (#tab-vencimentos)
 * ----------------------------------------------------------------------------
 * Reestiliza a aba real (toolbar de filtros + 4 grupos por urgência + itens)
 * no espírito do mockup preview-novo-layout.html (.venc-item / semáforo de cor)
 * e coerente com Dashboard, Documentos e Clientes.
 *
 * CSS-first / zero regressão: NENHUM ID, onchange, onclick ou função JS foi
 * removido ou renomeado. Os IDs dos filtros (#filtro-vencimentos-*) e das
 * listas (#vencidos-lista / #hoje-lista / #proximos7-lista / #proximos30-lista)
 * permanecem intactos. O template de item gerado por renderizarListaVencimentos
 * recebeu apenas CLASSES visuais (.venc-item, .vmain, .vright, .vactions e o
 * modificador de urgência u-red/u-amber/u-blue/u-green) — nenhum dado, valor de
 * API, ID dinâmico (d.id) ou handler (enviarLembrete) foi alterado.
 *
 * Tokens herdados de theme-moderno.css (--primary #2563EB, --success #10B981,
 * --warning #F59E0B, --danger #EF4444, --bg-card, --border-color, etc.).
 * ========================================================================== */

#tab-vencimentos{ padding-top: 4px; }
#tab-vencimentos .section{ margin-bottom: 16px !important; }

/* ---- Cabeçalho da aba ---- */
#tab-vencimentos .venc-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin: 2px 0 18px;
}
#tab-vencimentos .venc-head h1{
  font-size: 22px; font-weight: 700; color: var(--text-primary);
  margin: 0; line-height: 1.2;
}
#tab-vencimentos .venc-sub{
  font-size: 13px; color: var(--text-secondary); margin-top: 3px;
}

/* ============================================================================
 * 7.1 TOOLBAR de filtros (busca com ícone + selects)
 * ========================================================================== */
#tab-vencimentos .venc-toolbar{
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 16px 18px !important;
}
#tab-vencimentos .venc-toolbar-row{
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px 16px;
  align-items: end;
}
#tab-vencimentos .venc-field{ min-width: 0; }
#tab-vencimentos .venc-field label{
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--text-secondary); margin-bottom: 6px;
}
#tab-vencimentos .venc-toolbar .form-control{
  border-radius: 10px !important;
  border: 1px solid var(--border-color) !important;
  background: var(--bg-card) !important;
  height: 42px; font-size: 13.5px; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
#tab-vencimentos .venc-toolbar select.form-control{ cursor: pointer; }
#tab-vencimentos .venc-toolbar .form-control:focus{
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .15) !important;
  outline: none;
}

/* Campo de busca com ícone à esquerda */
#tab-vencimentos .venc-search{ position: relative; }
#tab-vencimentos .venc-search-ico{
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  font-size: 14px; pointer-events: none; opacity: .65; line-height: 1;
}
#tab-vencimentos .venc-search .form-control{ padding-left: 38px !important; }

/* ============================================================================
 * 7.2 GRUPOS por urgência (semáforo de cor)
 * ========================================================================== */
#tab-vencimentos .venc-groups{ display: flex; flex-direction: column; gap: 16px; }

#tab-vencimentos .venc-group{
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-left: 4px solid var(--uc) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 18px 20px !important;
  margin-bottom: 0 !important;
}
/* cor de urgência (--uc) por grupo */
#tab-vencimentos .venc-group-danger{  --uc: var(--danger); }
#tab-vencimentos .venc-group-warning{ --uc: var(--warning); }
#tab-vencimentos .venc-group-info{    --uc: var(--info); }
#tab-vencimentos .venc-group-success{ --uc: var(--success); }

#tab-vencimentos .venc-group-head{
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 12px;
}
#tab-vencimentos .venc-group-head h2{
  font-size: 15px; font-weight: 700; color: var(--text-primary);
  margin: 0; line-height: 1.2;
}
#tab-vencimentos .venc-group-dot{
  width: 10px; height: 10px; border-radius: var(--radius-full);
  background: var(--uc); flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--uc) 18%, transparent);
}

/* ============================================================================
 * 7.3 ITENS da lista (template gerado por renderizarListaVencimentos)
 * ========================================================================== */
#tab-vencimentos .venc-lista{ display: flex; flex-direction: column; }

#tab-vencimentos .venc-item{
  display: flex; align-items: center; gap: 13px;
  padding: 12px 0;
  border-top: 1px solid var(--border-color);
}
#tab-vencimentos .venc-lista .venc-item:first-child{ border-top: none; }

/* cor de urgência do item (passada pelo JS via u-red/u-amber/u-blue/u-green) */
#tab-vencimentos .venc-item.u-red{   --uc: var(--danger); }
#tab-vencimentos .venc-item.u-amber{ --uc: var(--warning); }
#tab-vencimentos .venc-item.u-blue{  --uc: var(--info); }
#tab-vencimentos .venc-item.u-green{ --uc: var(--success); }
/* tarefa: realce roxo no flag, mantendo a cor de urgência no restante */
#tab-vencimentos .venc-item.venc-item-tarefa .uflag{ background: var(--purple); }

#tab-vencimentos .venc-item .uflag{
  width: 4px; align-self: stretch; min-height: 34px;
  border-radius: 3px; background: var(--uc); flex-shrink: 0;
}

#tab-vencimentos .venc-item .vmain{ flex: 1; min-width: 0; }
#tab-vencimentos .venc-item .vmain b{
  display: block; font-size: 13.5px; font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#tab-vencimentos .venc-item .vmain span{
  display: block; font-size: 12px; color: var(--text-secondary); margin-top: 2px;
}

#tab-vencimentos .venc-item .vright{
  text-align: right; flex-shrink: 0; white-space: nowrap;
}
#tab-vencimentos .venc-item .vright b{
  display: block; font-size: 13.5px; font-weight: 700;
  color: var(--text-primary); font-variant-numeric: tabular-nums;
}
#tab-vencimentos .venc-item .vright .vdate{
  display: block; font-size: 11.5px; font-weight: 600; color: var(--uc); margin-top: 2px;
}

#tab-vencimentos .venc-item .vactions{
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
}
#tab-vencimentos .venc-item .vactions .btn{
  border-radius: 9px !important;
  width: 36px; height: 36px; padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
}

/* hover suave na linha */
#tab-vencimentos .venc-item{ transition: background .15s; border-radius: 8px; }
#tab-vencimentos .venc-item:hover{
  background: color-mix(in srgb, var(--uc) 6%, transparent);
}

/* estado vazio */
#tab-vencimentos .venc-empty{
  color: var(--text-muted); font-size: 13px; padding: 10px 2px; margin: 0;
}

/* ============================================================================
 * 7.4 Responsivo da aba vencimentos
 * ========================================================================== */
@media (max-width: 720px){
  #tab-vencimentos .venc-toolbar-row{ grid-template-columns: 1fr; }
  #tab-vencimentos .venc-group{ padding: 14px 16px !important; }
  #tab-vencimentos .venc-item{ flex-wrap: wrap; }
  #tab-vencimentos .venc-item .vright{ text-align: left; }
  #tab-vencimentos .venc-item .vactions{ margin-left: auto; }
}