/* People · Organograma — árvore com o nó da organização no topo, uma linha
   de departamentos ligada por hastes e barras, e um ramo por departamento
   que se abre para os seus membros. Zoom via CSS custom property --zoom
   (propriedade "zoom": altera o espaço ocupado, por isso o scroll continua
   a alcançar todas as margens da árvore). */

[data-view] {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1 0 auto;
  min-height: 0;
}

.org-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- barra de ferramentas ---------- */

.org-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.org-toolbar__group { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); }

.org-toolbar__zoom {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 3px;
  border-radius: var(--r-full);
  background: var(--grey-100);
}

.org-toolbar__zoom .btn-icon { width: 32px; height: 32px; font-weight: 700; }
.org-toolbar__zoom-value { min-width: 42px; text-align: center; font-size: var(--fs-sm); font-weight: 700; color: var(--grey-600); font-variant-numeric: tabular-nums; }

.org-toolbar__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* pesquisa */
.org-search {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.org-search__input {
  width: 300px;
  max-width: 100%;
  height: 38px;
  padding: 0 var(--sp-4);
  padding-right: 88px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface);
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text);
}

.org-search__input:focus-visible { outline: 2px solid var(--navy-500); outline-offset: 2px; }

.org-search__count {
  position: absolute;
  right: var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted);
  pointer-events: none;
}

.org-note {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: 12px;
  background: rgba(255, 159, 10, 0.14);
  color: #7a4a00;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.org-note[hidden] { display: none; }

.org-hint { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); text-align: center; }

/* ---------- área com scroll (a árvore pode ser mais larga que o ecrã) ---------- */

.org-viewport {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--sp-6) var(--sp-4);
  border-radius: 24px;
  background: var(--surface-alt, #f7f8fb);
  cursor: grab;
  /* Sem barra de scroll visível: a árvore move-se a arrastar, com o trackpad
     ou com Shift + roda do rato (a dica por baixo explica-o). */
  scrollbar-width: none;
}

.org-viewport::-webkit-scrollbar { display: none; }

.org-viewport[hidden] { display: none; }
.org-viewport.is-panning { cursor: grabbing; user-select: none; }
.org-viewport:focus-visible { outline: 2px solid var(--navy-500); outline-offset: 2px; }
.org-viewport ::selection { background: rgba(10, 132, 255, 0.22); }

.org-chart {
  display: flex;
  justify-content: center;
  min-width: max-content;
  width: 100%;
}

.org-branch {
  --line-color: #7f8aa0;
  --line-width: 2px;
  --stem-h: 22px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  zoom: var(--zoom, 1);
}

/* ---------- linhas de ligação ----------
   Todas as hastes têm a mesma altura (--stem-h) e a mesma cor/espessura,
   para o "tronco" ler-se como uma única linha contínua do topo até cada
   pessoa, em vez de segmentos desencontrados. A cor está acima de 3:1
   sobre o fundo: as linhas são informação (quem reporta a quem). */

.org-col__stem {
  width: var(--line-width);
  height: var(--stem-h);
  background: var(--line-color);
  border-radius: 2px;
}

.org-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
}

.org-row__bar {
  position: absolute;
  top: 0;
  /* Medido em JS (positionConnectors) a partir do centro real da 1ª/última
     coluna e guardado em percentagem — colunas de larguras diferentes
     (nomes mais compridos) desalinhavam a linha com valores fixos. */
  left: var(--bar-left, 50%);
  right: var(--bar-right, 50%);
  height: var(--line-width);
  background: var(--line-color);
  border-radius: 2px;
}

/* Um único ramo não precisa de barra horizontal — só da haste vertical.
   Combinador de filho direto (">"): um descendente normal apanharia também
   a barra de uma linha de membros aninhada dentro de um ramo "single" de
   nível superior e escondia-a por engano. */
.org-row--single > .org-row__bar { display: none; }

.org-row--members { gap: var(--sp-4); }

.org-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 0 auto;
}

/* Muitos colegas sem equipa própria: lista vertical em vez de uma linha
   com milhares de píxeis de largura. */
.org-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-2);
}

.org-stack .org-node--member { width: 100%; }

/* ---------- botão de contagem (expandir / recolher um ramo) ----------
   Um "span" clicável (o nó do departamento é o botão acessível por teclado
   e leitor de ecrã); o rótulo diz a unidade: "3 pessoas", "5 departamentos". */

.org-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 28px;
  padding: 0 var(--sp-3);
  border: var(--line-width) solid var(--line-color);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--navy-800);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--t-fast), transform var(--t-fast);
}

.org-toggle::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t-fast);
}

.org-toggle[data-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.org-toggle:hover { border-color: var(--navy-500); transform: scale(1.05); }

/* ---------- nós ---------- */

.org-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  font: inherit;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 8px 20px -16px rgba(20, 30, 60, 0.3);
  transition: box-shadow var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
}

.org-node:hover { box-shadow: 0 12px 26px -14px rgba(20, 30, 60, 0.38); transform: translateY(-2px); }
.org-node:active { transform: translateY(0); box-shadow: 0 6px 16px -14px rgba(20, 30, 60, 0.4); }
.org-node:focus-visible,
.org-toggle:focus-visible { outline: 2px solid var(--navy-500); outline-offset: 3px; }

/* resultado da pesquisa */
.org-node.is-match {
  outline: 2px solid var(--navy-500);
  outline-offset: 2px;
  border-color: var(--navy-500);
}

.org-node__avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--accent, var(--navy-600)) 16%, transparent);
  color: color-mix(in srgb, var(--accent, var(--navy-700)) 70%, #10203b);
  font-size: var(--fs-sm);
  font-weight: 800;
  overflow: hidden;
}

.org-node__avatar img { width: 100%; height: 100%; object-fit: cover; }

.org-node__name {
  max-width: 140px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-node__meta { font-size: var(--fs-xs); color: var(--text-muted); }

/* nó da organização (raiz) — em destaque */
.org-node--root {
  padding: var(--sp-4) var(--sp-6);
  border-color: var(--navy-700);
  background: linear-gradient(135deg, var(--navy-700) 0%, var(--navy-900) 100%);
}

.org-node--root .org-node__name { color: var(--white); }
.org-node--root .org-node__meta { color: rgba(255, 255, 255, 0.82); }

.org-node__avatar--root {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.16);
  color: var(--white);
}

.org-node__avatar--root.org-node__avatar--text { font-size: var(--fs-md); }
.org-node__avatar--root img { object-fit: contain; padding: 6px; }

/* nó de departamento — barra de cor no topo */
.org-node--dept {
  position: relative;
  min-width: 132px;
  border-top: 3px solid var(--accent, var(--navy-600));
}

/* nó de membro — horizontal: avatar, nome + função, estado */
.org-node--member {
  flex-direction: row;
  gap: var(--sp-2);
  min-width: 170px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: 12px;
  text-align: left;
}

.org-node__avatar--sm { width: 32px; height: 32px; flex-shrink: 0; font-size: var(--fs-xs); }
.org-node__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.org-node--member .org-node__name { max-width: 128px; font-weight: 700; }

.org-node__role {
  max-width: 128px;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Cartão da data de admissão: um segundo cartão pequeno, colado por baixo
   do cartão do membro (sem espaço entre os dois, cantos que se completam),
   para se ler como uma etiqueta presa ao cartão em vez de texto lá dentro. */
.org-member-card { display: flex; flex-direction: column; align-items: stretch; }

.org-member-card:has(.org-node__admission-tag) .org-node--member {
  border-radius: 12px 12px 0 0;
  box-shadow: none;
}

.org-node__admission-tag {
  margin-top: -1px;
  padding: 2px var(--sp-3) 4px;
  border: 1px solid var(--border);
  border-top: 1px dashed var(--border-strong);
  border-radius: 0 0 12px 12px;
  background: var(--grey-050);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* toggle "Mostrar admissão" na barra de ferramentas — switch em pílula,
   consistente com os outros controlos (zoom, Expandir/Recolher Tudo). */
.org-toolbar__check {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px var(--sp-3) 4px 4px;
  border-radius: var(--r-full);
  background: var(--grey-100);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background var(--t-fast);
}

.org-toolbar__check:hover { background: var(--grey-200); }

.org-toolbar__check-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.org-toolbar__check-track {
  position: relative;
  width: 34px;
  height: 20px;
  flex-shrink: 0;
  border-radius: var(--r-full);
  background: var(--grey-300);
  transition: background var(--t-fast);
}

.org-toolbar__check-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: var(--r-full);
  background: var(--white);
  box-shadow: 0 1px 3px rgba(20, 30, 60, 0.3);
  transition: transform var(--t-fast);
}

.org-toolbar__check-input:checked ~ .org-toolbar__check-track { background: var(--navy-700); }
.org-toolbar__check-input:checked ~ .org-toolbar__check-track .org-toolbar__check-thumb { transform: translateX(14px); }

.org-toolbar__check-input:focus-visible ~ .org-toolbar__check-track {
  outline: 2px solid var(--navy-500);
  outline-offset: 2px;
}

.org-toolbar__check-label { white-space: nowrap; }

/* estado do colaborador: ponto verde (Ativo, com texto para leitores de ecrã)
   ou etiqueta com texto — nunca só cor. */
.org-node__status {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: var(--r-full);
  background: var(--state-done);
}

.org-node__state {
  flex-shrink: 0;
  padding: 1px var(--sp-2);
  border-radius: var(--r-full);
  font-size: 0.75rem;
  font-weight: 700;
}

.org-node__state--warn { background: rgba(255, 159, 10, 0.18); color: #7a4a00; }
.org-node__state--danger { background: rgba(255, 59, 48, 0.14); color: #a3221a; }

/* ---------- ecrãs estreitos: árvore vertical ----------
   Uma árvore horizontal não cabe num telemóvel. Aqui os ramos empilham-se e
   as hastes verticais de cada coluna passam a ser a linha da árvore. */
@media (max-width: 640px) {
  .org-viewport { padding: var(--sp-4) var(--sp-2); }
  .org-row { flex-direction: column; align-items: center; gap: 0; }
  .org-row__bar { display: none; }
  .org-toolbar__group, .org-toolbar__actions { width: 100%; }
  .org-search, .org-search__input { width: 100%; }
  .org-hint { display: none; }
}

/* ecrãs táteis: alvos de pelo menos 44px */
@media (pointer: coarse) {
  .org-toolbar__zoom .btn-icon { width: 44px; height: 44px; }
  .org-search__input { height: 44px; }
  .org-toolbar__check { min-height: 44px; }
  .org-toggle { min-height: 44px; padding: 0 var(--sp-4); }
  .org-node--member { min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .org-node, .org-toggle, .org-toggle::after { transition: none; }
  .org-node:hover, .org-toggle:hover { transform: none; }
}

/* ---------- popup de resumo do colaborador ---------- */

.org-profile {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.org-profile__avatar {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: var(--r-full);
  background: var(--navy-100);
  color: var(--navy-800);
  font-size: var(--fs-lg, 1.125rem);
  font-weight: 800;
  overflow: hidden;
}

.org-profile__avatar img { width: 100%; height: 100%; object-fit: cover; }
.org-profile__heading { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.org-profile__name { margin: 0; font-size: var(--fs-lg, 1.125rem); color: var(--text); }
.org-profile__role { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }

.org-profile__facts { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; }

.org-fact { display: flex; flex-direction: column; gap: 2px; }
.org-fact dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.org-fact dd { margin: 0; font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.org-fact dd a { color: var(--navy-700); }
.org-fact__hint { font-weight: 500; color: var(--text-muted); }

/* ============================================================
   Desktop — mesma direção "liquid glass" do resto do People
   (ver o bloco equivalente em people.css). As variáveis --pp-*
   já vêm de people.css, sempre carregado antes desta folha.
   O vidro (blur) fica só no painel: aplicá-lo a cada nó custa caro
   com dezenas de colaboradores, por isso os nós usam a mesma
   superfície translúcida mas sem desfoque próprio.
   ============================================================ */
@media (min-width: 1025px) {
  .org-viewport {
    background: var(--pp-glass-bg);
    border: 1px solid var(--pp-glass-border);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
  }

  .org-toolbar__zoom { background: rgba(120, 120, 128, 0.1); }
  .org-toolbar__zoom-value { color: var(--pp-secondary); }

  .org-search__input { background: var(--pp-glass-bg-strong); border-color: var(--pp-glass-border); color: var(--pp-ink); }
  .org-search__input:focus-visible { outline-color: var(--pp-accent); }
  .org-search__count { color: var(--pp-secondary); }

  .org-toolbar__check { background: rgba(120, 120, 128, 0.1); color: var(--pp-ink); }
  .org-toolbar__check:hover { background: rgba(120, 120, 128, 0.16); }
  .org-toolbar__check-track { background: var(--pp-hairline); }
  .org-toolbar__check-input:checked ~ .org-toolbar__check-track { background: var(--pp-accent); }

  .org-node {
    background: var(--pp-glass-bg-strong);
    border-color: var(--pp-glass-border);
  }

  .org-node__name { color: var(--pp-ink); }
  .org-node__role { color: var(--pp-secondary); }
  .org-node__admission-tag { color: var(--pp-secondary); background: rgba(120, 120, 128, 0.08); border-color: var(--pp-hairline); }
  .org-node__meta { color: var(--pp-secondary); }
  .org-toggle { background: var(--pp-glass-bg-strong); color: var(--pp-ink); }
  .org-toggle:hover { border-color: var(--pp-accent); }
  .org-node:focus-visible, .org-toggle:focus-visible, .org-viewport:focus-visible { outline-color: var(--pp-accent); }
  .org-node.is-match { outline-color: var(--pp-accent); border-color: var(--pp-accent); }

  .org-node--root {
    border-color: transparent;
    background: linear-gradient(155deg, rgba(10, 132, 255, 0.95), rgba(0, 90, 220, 0.95));
    box-shadow: 0 20px 46px -20px rgba(10, 132, 255, 0.45);
  }

  .org-node--root .org-node__name { color: var(--white); }
  .org-node--root .org-node__meta { color: rgba(255, 255, 255, 0.88); }

  .org-profile__avatar { background: var(--pp-accent-soft); color: var(--pp-accent); }
  .org-profile__name { color: var(--pp-ink); }
  .org-profile__role { color: var(--pp-secondary); }
  .org-fact dt { color: var(--pp-secondary); }
  .org-fact dd { color: var(--pp-ink); }
  .org-fact__hint { color: var(--pp-secondary); }
}