/* Módulo Utilizadores (frente ui-pessoas). Global de propósito: os SfDialog vão para o <body>.
   Também traz as peças comuns aos ecrãs de pessoas (avatares, botões de linha, erro em diálogo) — reutilizadas por Permissões. */

/* ── Avatares (cor estável por nome) ── */
.ut-avatar { display: inline-grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  font: 700 12.5px var(--fonte); letter-spacing: .02em; color: #fff; background: #64748b; }
.ut-avatar.pequeno { width: 28px; height: 28px; font-size: 11px; }
.ut-avatar.cor-0 { background: #2563eb; } .ut-avatar.cor-1 { background: #0d9488; } .ut-avatar.cor-2 { background: #7c3aed; }
.ut-avatar.cor-3 { background: #c2410c; } .ut-avatar.cor-4 { background: #0369a1; } .ut-avatar.cor-5 { background: #be185d; }
.ut-avatar.cor-6 { background: #4d7c0f; } .ut-avatar.cor-7 { background: #9333ea; }

/* ── Grelha ── */
.ut-pessoa { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ut-pessoa-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ut-pessoa-texto small { color: var(--texto-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ut-nome { font: 650 13.5px var(--fonte); color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligacao-linha { padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.ligacao-linha:hover { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }
.ut-eu { display: inline-block; width: fit-content; margin: 1px 0; padding: 0 6px; border-radius: 6px; background: var(--acento-suave); color: var(--acento); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.ut-grupo { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.ut-grupo .chip { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.ut-extras { padding: 1px 7px; border-radius: 999px; background: var(--roxo-suave); color: var(--roxo-texto); font-size: 11.5px; font-weight: 700; }
.ut-estado { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ut-estado small { color: var(--texto-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }

.ut-acoes { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }
.botao-linha { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid transparent; border-radius: 9px;
  background: transparent; color: var(--texto-2); cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.botao-linha:hover { background: var(--superficie-2); border-color: var(--borda); color: var(--texto); }
.botao-linha.sucesso:hover { background: var(--verde-suave); color: var(--verde-texto); border-color: color-mix(in srgb, var(--verde) 40%, transparent); }
.botao-linha.perigo { color: var(--vermelho-texto); }
.botao-linha.perigo:hover { background: var(--vermelho-suave); border-color: color-mix(in srgb, var(--vermelho) 40%, transparent); }
.botao-linha:disabled { opacity: .4; cursor: not-allowed; }
.e-btn.botao-linha-sf { width: 34px; height: 34px; min-width: 34px; padding: 0 !important; border: 1px solid transparent !important; border-radius: 9px !important;
  background: transparent !important; color: var(--texto-2) !important; box-shadow: none !important; }
.e-btn.botao-linha-sf:hover, .e-btn.botao-linha-sf.e-active { background: var(--superficie-2) !important; border-color: var(--borda) !important; color: var(--texto) !important; }
.e-btn.botao-linha-sf .e-btn-icon { margin: 0 !important; font-size: 16px; }

/* Filtros rápidos com contagem */
.ut-filtro button { gap: 7px; }
.ut-contagem { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--superficie-3); color: var(--texto-2); font-size: 11.5px; line-height: 18px; text-align: center; }
.ut-filtro button.ativo .ut-contagem { background: var(--acento-suave); color: var(--acento); }
.ut-ponto-vivo { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 3px var(--verde-suave); animation: ut-pulso 2s ease-in-out infinite; }
@keyframes ut-pulso { 50% { box-shadow: 0 0 0 6px transparent; } }

/* ── Diálogo de utilizador ── */
.ut-form { display: flex; flex-direction: column; gap: 14px; }
.ut-blocos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.ut-bloco { display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie-2); }
.ut-bloco h3 { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--texto-2); }
.ut-bloco h3 .icone { color: var(--acento); }
.ut-bloco-horario { grid-column: 1 / -1; }
.ut-grelha-2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ut-bloco .campo { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.ut-bloco .campo > span:first-child { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.ut-bloco label.campo > input, .ut-bloco .campo-password input { background: var(--superficie); }
.ut-bloco .campo .e-input-group.e-control-wrapper:not(.e-multiselect) { background: var(--superficie) !important; }
.ut-opcional { font-style: normal; font-weight: 500; color: var(--texto-3); font-size: 12px; margin-left: 4px; }
.ut-ajuda { color: var(--texto-3); font-size: 12px; line-height: 1.4; }
.ut-nota { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--texto-3); font-size: 12.5px; }
.ut-erro { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--vermelho) 45%, transparent);
  border-radius: 10px; background: var(--vermelho-suave); color: var(--vermelho-texto); font-weight: 600; font-size: 13.5px; }
.ut-erro .icone { margin-top: 2px; }
.ut-texto { margin: 0 0 14px; color: var(--texto-2); line-height: 1.55; }
.ut-linha-campo { display: flex; gap: 8px; }
.ut-linha-campo input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid var(--borda-forte); border-radius: 10px; background: var(--superficie-2);
  color: var(--texto); font: 14px var(--fonte); outline: none; }
.ut-linha-campo input:focus { border-color: var(--foco); box-shadow: 0 0 0 3px var(--acento-suave); }
.ut-linha-campo .e-btn { height: 42px; }
#frm-password, #frm-picar { display: flex; flex-direction: column; gap: 12px; }
#frm-picar label.campo > input { width: 100%; }

@media (max-width: 900px) {
  .ut-blocos { grid-template-columns: 1fr; }
  .ut-grelha-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) { .ut-grelha-2 { grid-template-columns: 1fr; } }

/* A barra de filtros da lista cabe numa linha a 1440 px (pesquisa um pouco mais curta). */
#utilizadores .pesquisa-local { flex-basis: 280px; min-width: 220px; }
.ut-filtro button { padding: 0 10px; }