/* ================================================================
   PRECIFIKA — FIXES GLOBAIS
   precifika-fixes.css — Junho 2026

   Centraliza correções transversais:
   1. Z-index padronizado para todos os modais
   2. Textos não cortados em conteúdo de negócio
   3. Consistência visual entre módulos
   4. Asaas checkout oculto quando não configurado
   ================================================================ */

/* ================================================================
   1. Z-INDEX GLOBAL — camadas centralizadas
   ================================================================ */

/*
  Tabela de camadas (mais alto = mais visível):
  --z-base:        1     → elementos normais com stacking context
  --z-sticky:      40    → topbar do editor (sticky)
  --z-topbar:      50    → topbar principal
  --z-sidebar-ov:  99    → overlay escuro da sidebar
  --z-sidebar:     100   → sidebar mobile
  --z-bottom-nav:  200   → barra de navegação inferior
  --z-dropdown:    300   → dropdowns / popovers
  --z-modal:       1000  → modais comuns (clients, services, etc.)
  --z-modal-hi:    1100  → modais de recibos e financeiro
  --z-modal-top:   2000  → modais sobre modais (attachment viewer)
  --z-toast:       9000  → PDF preview
  --z-overlay-top: 9999  → confirm dialog, troca de senha obrigatória
*/

/* Topbar — nunca sobrepostos por modais comuns */
.topbar { z-index: 50; }

/* Sidebar */
.sidebar         { z-index: 100; }
.sidebar-overlay { z-index: 99; }

/* Bottom nav mobile */
.mobile-bottom-nav { z-index: 200; }

/* Dropdowns / popovers inline */
.eb-confirm-pop         { z-index: 300; }
.si-suggestions-popup   { z-index: 300; }

/* Modais comuns (client-modal, service-modal, stage-modal) */
#client-modal,
#service-modal,
#stage-modal,
#si-save-lib-modal,
#library-picker-modal { z-index: 1000; }

/* Modais de recibos */
#modal-emit-receipt,
#modal-receipt-history,
#modal-edit-receipt   { z-index: 1100; }
#modal-bank-account   { z-index: 1200; }

/* Modais financeiro */
#fin-modal-entry      { z-index: 1100; }
#fin-attachment-viewer { z-index: 2000; }

/* Relatório financeiro */
.rpt-modal-overlay    { z-index: 1100; }

/* Checkout Asaas */
#payment-modal        { z-index: 1000; }

/* Email / Share modais */
#email-modal,
#share-modal          { z-index: 1000; }

/* PDF preview (fullscreen) */
.pdf-preview-overlay  { z-index: 9000; }

/* Toasts / notifications */
.toast-container,
#toast-container      { z-index: 9000; }

/* Confirm dialog — sempre no topo absoluto */
#confirm-dialog       { z-index: 9999; }

/* Troca de senha obrigatória — bloqueia tudo */
#member-change-pwd-screen { z-index: 9999; }

/* Promo popup */
#promo-popup-overlay  { z-index: 9999; }

/* ================================================================
   2. TEXTOS — evitar cortes em conteúdo de negócio
   ================================================================ */

/*
  Regra geral: campos de negócio (nomes, descrições, endereços)
  devem quebrar linha. Apenas valores monetários e códigos devem
  ficar em nowrap.
*/

/* Nomes de projetos — nunca cortar */
.est-project-name,
.fin-project-title,
.db-row-name,
.est-row-name {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
}

/* Nomes de clientes — ellipsis aceitável, mas com largura mínima */
.est-row-client,
.db-row-client {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Descrições de lançamentos financeiros — sempre visível */
.fin-entry-desc {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
  min-width: 0;
}

/* Nomes de serviços no builder */
.eb-item-service-name {
  white-space: normal;
  overflow: visible;
  min-width: 0;
}

/* Valores monetários — nunca quebram */
.fin-entry-amount,
.fin-kpi-value,
.dre-kpi-val,
.est-card-value,
.rpt-res-card-value,
.fin-contracted-value {
  white-space: nowrap;
}

/* Códigos de orçamento — nunca quebram */
.est-code-badge,
.est-rev-badge,
.display-code,
.fin-estimate-code {
  white-space: nowrap;
}

/* ================================================================
   3. CONSISTÊNCIA VISUAL — módulos
   ================================================================ */

/* Cabeçalho de página: padding uniforme */
.page-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Cards de módulo: sombra e radius uniformes */
.fin-entry-item,
.receipt-item,
.team-member-item,
.est-sel-card,
.fin-sel-card,
.cl-card,
.srv-card {
  transition: box-shadow .15s, transform .15s;
}
.fin-entry-item:hover,
.receipt-item:hover,
.team-member-item:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
}

/* Badges de status — tamanho mínimo para toque */
.status-badge,
.perm-badge,
.fin-origin-badge,
.fin-category-chip {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* Botões de ação em tabelas — tamanho mínimo 34x34 */
.fin-action-btn,
.receipt-action-btn,
.team-action-btn,
.cl-card-btn,
.srv-card-btn {
  min-width: 34px;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ================================================================
   4. VISUAL ASAAS — ocultar checkout quando não configurado
   ================================================================ */

/*
  O checkout Asaas é injetado dinamicamente por openAsaasCheckout().
  Esta regra garante que o container vazio não ocupe espaço.
*/
#asaas-checkout-root:empty {
  display: none;
}

/*
  Nas telas de planos, ocultar a seção de "Pagamento Online"
  e manter apenas os botões de contato (WhatsApp / email).
  Adicionar a classe .asaas-disabled à section quando a
  integração não estiver configurada.
*/
.asaas-payment-section.asaas-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.asaas-payment-section.asaas-disabled::after {
  content: 'Pagamento online em configuração';
  display: block;
  text-align: center;
  font-size: 12px;
  color: #94a3b8;
  padding: 8px;
  background: #f8fafc;
  border-radius: 0 0 12px 12px;
  border: 1px solid #e2e8f0;
  border-top: none;
}

/* ================================================================
   5. MODAIS — comportamento e acessibilidade
   ================================================================ */

/* Evitar scroll do body quando modal está aberto */
body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* Foco visível em modais para acessibilidade */
.modal-overlay:focus-visible,
.fin-modal-overlay:focus-visible {
  outline: none;
}

/* Animação suave de entrada para modais sheet no mobile */
@media (max-width: 680px) {
  .fin-modal-overlay.active .fin-modal-box,
  .receipt-modal-overlay.active .receipt-modal-box,
  .hist-modal-overlay.active .hist-modal-box {
    animation: slideUpSheet .25s cubic-bezier(.32,1,.56,1);
  }
}

@keyframes slideUpSheet {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ================================================================
   6. TABELAS — scroll suave horizontal
   ================================================================ */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: inherit;
}

/* Indicador visual de scroll horizontal disponível */
.table-responsive::after {
  content: '';
  display: block;
  height: 0;
}

/* ================================================================
   7. FORMULÁRIOS — acessibilidade e usabilidade
   ================================================================ */

/* Labels sempre visíveis */
.fin-form-label,
.receipt-form-label,
.team-form-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 5px;
}

/* Placeholder com contraste suficiente */
input::placeholder,
textarea::placeholder {
  color: #9ca3af;
  opacity: 1;
}

/* Select: seta nativa visível em todos os browsers */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* ================================================================
   8. PERFORMANCE — will-change em elementos animados
   ================================================================ */
.fin-modal-box,
.receipt-modal-box,
.hist-modal-box,
.team-modal-box,
.sidebar,
.mobile-bottom-nav {
  will-change: transform;
}

/* ================================================================
   9. TABELAS MOBILE — converter em cards responsivos
   ================================================================ */

/*
  Padrão: tabelas com classe .table-card-mobile viram cards
  em telas menores que 640px. Cada <tr> vira um card; cada <td>
  exibe o label via data-label.
*/
@media (max-width: 640px) {

  /* Container da tabela: sem scroll horizontal desnecessário */
  .table-card-mobile-wrap {
    overflow: visible;
  }

  /* Oculta thead */
  .table-card-mobile thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
  }

  /* Cada linha vira um card */
  .table-card-mobile tbody tr {
    display: block;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    border: 1px solid #e5e7eb;
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  .table-card-mobile tbody tr:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,.10);
  }

  /* Cada célula vira uma linha label: valor */
  .table-card-mobile tbody td {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 0;
    font-size: 13px;
    border: none;
  }
  .table-card-mobile tbody td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .4px;
    min-width: 90px;
    flex-shrink: 0;
    padding-top: 1px;
  }

  /* Célula de ações: alinha à direita */
  .table-card-mobile tbody td.td-actions {
    justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
    margin-top: 4px;
  }
  .table-card-mobile tbody td.td-actions::before {
    display: none;
  }

  /* ── Módulo Financeiro — lista de lançamentos ── */
  .fin-entries-list .fin-entry-item {
    display: block;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #fff;
    margin-bottom: 8px;
  }
  .fin-entry-item .fin-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
  }
  .fin-entry-item .fin-entry-body {
    flex: 1;
    min-width: 0;
  }
  .fin-entry-item .fin-entry-right {
    flex-shrink: 0;
    text-align: right;
  }

  /* ── Módulo Recibos — lista de recibos ── */
  .receipt-list .receipt-item {
    display: block;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #fff;
    margin-bottom: 8px;
  }

  /* ── Módulo Equipe — lista de membros ── */
  .team-members-list .team-member-item {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #fff;
    margin-bottom: 8px;
  }

  /* ── DRE — tabela de categorias ── */
  .dre-table-wrap table {
    display: block;
  }
  .dre-table-wrap thead {
    display: none;
  }
  .dre-table-wrap tbody tr {
    display: block;
    padding: 10px 12px;
    border-bottom: 1px solid #f3f4f6;
  }
  .dre-table-wrap tbody td {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    font-size: 12.5px;
    border: none;
  }
  .dre-table-wrap tbody td::before {
    content: attr(data-label);
    font-size: 10.5px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    min-width: 80px;
    flex-shrink: 0;
  }

  /* ── Relatório Financeiro — tabela de extrato ── */
  .rpt-extract-table thead { display: none; }
  .rpt-extract-table tbody tr {
    display: block;
    padding: 10px 12px;
    border-bottom: 1px solid #f3f4f6;
  }
  .rpt-extract-table tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 0;
    font-size: 12.5px;
    border: none;
  }
  .rpt-extract-table tbody td::before {
    content: attr(data-label);
    font-size: 10.5px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    min-width: 72px;
    flex-shrink: 0;
  }
}

/* ================================================================
   10. LEITURA POR MÓDULO — melhorar scannability
   ================================================================ */

/* ── Serviços: preço destaque ── */
.srv-card-price {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.3px;
}

/* ── Clientes: email e telefone legíveis ── */
.cl-card-email,
.cl-card-phone {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.cl-card-name {
  white-space: normal;
  word-break: break-word;
}

/* ── Financeiro: separação visual receita/despesa ── */
.fin-entry-item--receita {
  border-left: 3px solid #10b981;
}
.fin-entry-item--despesa {
  border-left: 3px solid #ef4444;
}

/* ── Equipe: badge de permissão com cor ── */
.perm-badge--owner   { background: #fef3c7; color: #92400e; }
.perm-badge--admin   { background: #ede9fe; color: #5b21b6; }
.perm-badge--editor  { background: #dbeafe; color: #1e40af; }
.perm-badge--viewer  { background: #f3f4f6; color: #374151; }

/* ── Recibos: número de recibo destaque ── */
.receipt-item-number,
.receipt-number {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.2px;
}

/* ── Dashboard: KPI cards — valor sempre legível ── */
.db-kpi-value,
.kpi-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.5px;
}

/* ================================================================
   11. Z-INDEX OVERRIDE FINAL — garante hierarquia sem conflitos
   ================================================================

  Estes overrides têm especificidade máxima (id + classe)
  para garantir que nenhum módulo quebre a hierarquia.
  Ordem de cascata: precifika-fixes.css é carregado por último.
*/

/* Asaas modal (criado dinamicamente) — abaixo dos confirms */
#asaas-checkout-modal.co-modal-overlay {
  z-index: 1000;
}

/* Token de autenticação — deve ficar acima de tudo */
.auth-token-modal-overlay {
  z-index: 9999;
}

/* Confirm pop inline (eb) — acima de dropdowns mas abaixo de modais */
.eb-confirm-pop {
  z-index: 300;
}

/* Sidebar overlay — deve ficar abaixo da própria sidebar */
.sidebar-overlay { z-index: 99; }
.sidebar         { z-index: 100; }

/* Toast/notification — deve ficar acima de modais mas abaixo de overlays fullscreen */
.toast-container,
#toast-container { z-index: 8500; }