/* =====================================================================
   Profissionais — lista e ficha
   ===================================================================== */

.prof-kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px; margin-bottom: 14px;
}
.prof-kpi {
  min-width: 0; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface);
}
.prof-kpi__ico { display: none; }
.prof-kpi__label { color: var(--text-2); font-size: 11.5px; line-height: 1.35; }
.prof-kpi__value {
  margin-top: 2px; font-size: clamp(18px, 2vw, 23px); font-weight: 750;
  line-height: 1.2; letter-spacing: -.025em; font-variant-numeric: tabular-nums;
}
.prof-kpi__rodape { margin-top: 2px; color: var(--text-2); font-size: 11px; }
.prof-kpi__rodape .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#profFiltros { gap: 8px; margin-bottom: 14px; }
.prof-search { position: relative; flex: 1 1 300px; max-width: 440px; min-width: 180px; }
.prof-search > span {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  display: flex; color: var(--text-3); pointer-events: none;
}
.prof-search > span svg { width: 16px; height: 16px; }
.prof-search .input { width: 100%; padding-left: 34px; }
.prof-table-card { overflow: hidden; }
.prof-table-card .table-wrap { border: 0; }
.prof-table th,
.prof-table td { padding-block: 9px; }
.prof-table__identity { min-width: 180px; gap: 9px; }
.prof-table__copy { min-width: 0; }
.prof-table tbody tr:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

@media (max-width: 1024px) {
  .prof-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  #profFiltros { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .prof-search { width: 100%; max-width: none; }
  .prof-kpis { gap: 6px; margin-bottom: 10px; }
  .prof-kpi { padding: 8px 10px; }
  .prof-kpi__label { font-size: 10.5px; }
  .prof-kpi__value { font-size: 17px; }
  .prof-kpi__rodape { font-size: 10px; }
  .prof-table { min-width: 520px; }
  .prof-table th,
  .prof-table td { padding: 8px; }
}
@media (max-width: 390px) {
  .prof-table { min-width: 450px; }
  .prof-table th:nth-child(2),
  .prof-table td:nth-child(2) { display: none; }
}

/* ---------------------------------------------------------- SERVIÇOS */
.svc-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface);
}
.svc-row.is-on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }
.svc-row__fields { display: flex; gap: 10px; align-items: flex-end; margin-left: auto; }
.svc-row__fields .field__label { margin-bottom: 3px; }
.svc-row__fields .input { width: 104px; }

/* --------------------------------------------------------- COMISSÕES */
.rule-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 0; border-bottom: 1px solid var(--border);
}
.rule-row > div:first-child { flex: 1 1 220px; min-width: 0; }

/* ------------------------------------------------------------- METAS */
.goal-row {
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
  padding: 13px; border: 1px solid var(--border); border-radius: var(--r-sm);
}

/* ---------------------------------------------------------- HORÁRIOS */
.hour-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hour-row__fields { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hour-row__fields .input { width: 116px; }

/* -------------------------------------------------------- PERMISSÕES */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 9px; }
.perm-item { padding: 7px 9px; border-radius: var(--r-sm); }
.perm-item:hover { background: var(--surface-2); }

/* ------------------------------------------------------------ MOBILE */
@media (max-width: 720px) {
  .svc-row { align-items: flex-start; }
  .svc-row__fields { margin-left: 0; width: 100%; }
  .svc-row__fields .input { width: 100%; }
  .svc-row__fields .field { flex: 1 1 0; }

  .rule-row { align-items: flex-start; }
  .rule-row .inline { width: 100%; }
  .rule-row .inline .input { flex: 1 1 auto; }

  .goal-row .field { flex: 1 1 100% !important; }

  .hour-row { align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .hour-row__fields { width: 100%; }
  .hour-row__fields .input { flex: 1 1 104px; width: auto; min-width: 0; }
  /* Tratamento mobile de .proftab (esconder texto, ícone maior) mudou
     para app.css @media(max-width:640px), junto com .tab — achado de
     auditoria: as duas classes são "uma peça visual só" (comentário
     acima) mas tinham breakpoints diferentes (720px aqui vs 640px lá). */
}