/* HomeFix · padrão de tabelas (7.6.25)
 * Referência de leitura: dashboards Veeries (cabeçalho claro, linhas finas, números alinhados, grupos suaves).
 * Identidade: Manual de Marca HomeFix (grafite #3C3C3B, vermelho #D8101A só como destaque, cinza #A8A8A8).
 * Fonte dos dados: var(--hf-fonte-dados) (Inter em teste, com números tabulares). */

@media screen {
  body.hf-topnav :is(main, .modal-backdrop, [role="dialog"]) table:not(.escala-table) {
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--hf-fonte-dados, 'Metropolis', Arial, sans-serif);
    font-size: 12.5px;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    color: var(--hf-graphite, #3C3C3B);
  }

  /* ---------- cabeçalho: claro, discreto e com uma linha grafite de estrutura ---------- */
  body.hf-topnav :is(main, .modal-backdrop, [role="dialog"]) table:not(.escala-table) thead th {
    background: #FFFFFF !important;
    color: #6B6B6A !important;
    font-family: var(--hf-fonte-dados, 'Metropolis', Arial, sans-serif);
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 11px 12px !important;
    border-bottom: 2px solid var(--hf-graphite, #3C3C3B) !important;
    border-radius: 0 !important;
    white-space: nowrap;
    vertical-align: bottom;
  }

  /* ---------- corpo: respiro, linhas finas e destaque suave ao passar o mouse ---------- */
  body.hf-topnav :is(main, .modal-backdrop, [role="dialog"]) table:not(.escala-table) tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #ECECEC;
    vertical-align: middle;
  }
  body.hf-topnav :is(main, .modal-backdrop, [role="dialog"]) table:not(.escala-table) tbody tr:last-child td { border-bottom-color: #D7D7D7; }
  body.hf-topnav :is(main, .modal-backdrop, [role="dialog"]) table:not(.escala-table) tbody tr:hover td { background-color: #F6F6F6; }
  body.hf-topnav :is(main, .modal-backdrop, [role="dialog"]) table:not(.escala-table) tbody tr:hover { box-shadow: none; }
  body.hf-topnav :is(main, .modal-backdrop, [role="dialog"]) table:not(.escala-table) tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--hf-red, #D8101A); }

  /* linhas de grupo (ex.: AURORA / BOULEVARD nas comissões): faixa cinza clara com marcador vermelho */
  body.hf-topnav :is(main, .modal-backdrop, [role="dialog"]) table:not(.escala-table) tbody tr:has(> td[colspan]) td {
    background: #F4F4F4;
    color: var(--hf-graphite, #3C3C3B);
    font-family: var(--hf-fonte-marca, 'Metropolis', Arial, sans-serif);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding-top: 8px;
    padding-bottom: 8px;
    box-shadow: inset 3px 0 0 var(--hf-red, #D8101A);
  }

  /* valores em destaque continuam em negrito; textos secundários mais claros */
  body.hf-topnav :is(main, .modal-backdrop, [role="dialog"]) table:not(.escala-table) td :is(small, .text-\[var\(--hf-gray\)\]) { color: #8A8A89; }

  /* campos dentro das tabelas (ex.: cadastro de metas) com a mesma fonte dos dados */
  body.hf-topnav :is(main, .modal-backdrop, [role="dialog"]) table:not(.escala-table) :is(input, select) {
    font-family: var(--hf-fonte-dados, 'Metropolis', Arial, sans-serif);
    font-size: 12.5px;
  }

  /* ---------- tabelas largas (comissões, produtos): primeira coluna fixa ao rolar para o lado ---------- */
  body.hf-topnav main table.hf-table tbody tr:not(:has(> td[colspan])) td:first-child,
  body.hf-topnav main table.hf-table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: #FFFFFF;
  }
  body.hf-topnav main table.hf-table tbody tr:not(:has(> td[colspan])) td:first-child { box-shadow: inset -1px 0 0 #ECECEC; }
  body.hf-topnav main table.hf-table tbody tr:hover td:first-child { background-color: #F6F6F6; }

  /* contêineres com rolagem horizontal ganham borda e cantos arredondados, como cartões */
  body.hf-topnav main .overflow-x-auto:has(> table:not(.escala-table)) {
    border: 1px solid #E4E4E4;
    border-radius: 14px;
    background: #FFFFFF;
  }
}

/* ---------- ranking de vendedores da Visão geral (lista em grade, não <table>) ---------- */
@media screen {
  body.hf-topnav .dashboard-rank-header {
    background: #FFFFFF;
    color: #6B6B6A;
    font-family: var(--hf-fonte-dados, 'Metropolis', Arial, sans-serif);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .04em;
    border-bottom: 2px solid var(--hf-graphite, #3C3C3B);
  }
  body.hf-topnav .dashboard-rank-row {
    font-family: var(--hf-fonte-dados, 'Metropolis', Arial, sans-serif);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    border-bottom-color: #ECECEC;
  }
}

/* comissões: observação longa limitada a 2 linhas (texto completo ao passar o mouse); valores sem quebra */
@media screen {
  body.hf-topnav #screen-comissoes table.hf-table td { white-space: nowrap; }
  body.hf-topnav #screen-comissoes table.hf-table td.com-obs { white-space: normal; min-width: 260px; max-width: 360px; }
  body.hf-topnav .com-obs-texto {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 11.5px;
    line-height: 1.35;
    color: #8A8A89;
  }
}

/* a regra global "* { font-family: Metropolis }" do painel vale para cada elemento: a fonte de dados precisa
   ser aplicada direto nas células (e no que estiver dentro delas) para valer nas tabelas */
@media screen {
  body.hf-topnav :is(main, .modal-backdrop, [role="dialog"]) table:not(.escala-table) :is(th, td),
  body.hf-topnav :is(main, .modal-backdrop, [role="dialog"]) table:not(.escala-table) :is(th, td) *:not(svg):not(svg *),
  body.hf-topnav .dashboard-rank-header, body.hf-topnav .dashboard-rank-header *,
  body.hf-topnav .dashboard-rank-row, body.hf-topnav .dashboard-rank-row *:not(svg):not(svg *) {
    font-family: var(--hf-fonte-dados, 'Metropolis', Arial, sans-serif);
    font-variant-numeric: tabular-nums;
  }
  /* linhas de grupo e etiquetas de situação continuam na fonte da marca */
  body.hf-topnav :is(main, .modal-backdrop, [role="dialog"]) table:not(.escala-table) tbody tr:has(> td[colspan]) td { font-family: var(--hf-fonte-marca, 'Metropolis', Arial, sans-serif); }
}

/* comissões: linhas mais compactas (referência Veeries), mantendo a área de clique da pontualidade */
@media screen {
  body.hf-topnav #screen-comissoes table.hf-table tbody td { padding-top: 7px; padding-bottom: 7px; }
  body.hf-topnav #screen-comissoes table.hf-table tbody td > label.inline-flex { padding: 4px 9px; border-radius: 9px; }
}