setHover(true)} onMouseLeave={() => setHover(false)} style={{ display: 'grid', gridTemplateColumns: '180px 1fr', gap: 16, padding: '10px 0', borderBottom: '1px dashed var(--border-subtle, var(--border))', alignItems: multiline ? 'flex-start' : 'center', }} >

{label} {source && {source}}

{editing ? (

{type === 'select' ? ( ) : multiline ? (

setDraft(e.target.value)}
              onBlur={commit}
              onKeyDown={e => { if (e.key === 'Escape') cancel(); }}
              style={{ ..._fieldInputStyle(true), resize: 'vertical', fontFamily: 'var(--font-sans)' }}
            />
          ) : (
            <input
              autoFocus type={type} value={draft}
              onChange={e => setDraft(e.target.value)}
              onBlur={commit}
              onKeyDown={e => { if (e.key === 'Enter') commit(); if (e.key === 'Escape') cancel(); }}
              style={_fieldInputStyle(false)}
            />
          )}
        </div>
      ) : (
        <div
          onClick={() => editable && onChange && setEditing(true)}
          style={{
            fontSize: 13, color: value ? 'var(--text)' : 'var(--text-dim)',
            cursor: editable && onChange ? 'text' : 'default',
            display: 'flex', alignItems: multiline ? 'flex-start' : 'center', gap: 8,
            minHeight: 22, whiteSpace: multiline ? 'pre-wrap' : 'normal',
            lineHeight: multiline ? 1.5 : 1.3,
          }}
        >
          <span style={{ flex: 1 }}>{value || <em style={{ color: 'var(--text-dim)', fontStyle: 'normal' }}>—</em>}</span>
          {badge}
          {editable && onChange && hover && (
            <Icon name="more" size={12} style={{ color: 'var(--text-dim)', opacity: 0.6 }} />
          )}
        </div>
      )}
    </div>
  );
};
// Renomeado para evitar colisão com inputStyle (objecto) em admin_users_modals.jsx
const _fieldInputStyle = (multi) => ({
  flex: 1, padding: multi ? '6px 8px' : '4px 8px',
  background: 'var(--bg-elev)', border: '1px solid var(--ai-500)',
  borderRadius: 4, fontSize: 13, color: 'var(--text)',
  outline: 'none', fontFamily: 'var(--font-sans)',
});

// ════════════════════════════════════════════════════════════════
// EmpresaJunctionTable — tabela editável colaborador_empresa
// ════════════════════════════════════════════════════════════════
const EmpresaJunctionTable = ({ user, onChange, currentUserTipo }) => {
  const list = user?.empresas || [];
  const visible = D.visibleEmpresas(currentUserTipo);
  const setPrimary = (idx) => onChange(list.map((x, i) => ({ ...x, is_primary: i === idx })));
  const update = (idx, patch) => onChange(list.map((x, i) => i === idx ? { ...x, ...patch } : x));
  const remove = (idx) => onChange(list.filter((_, i) => i !== idx));
  const add = () => {
    const taken = new Set(list.map(x => x.id));
    const free = visible.find(e => !taken.has(e.id));
    if (!free) return;
    onChange([...list, { id: free.id, cargo: '', direccao: '', departamento: '', is_primary: list.length === 0 }]);
  };

return (
    <div style={{ marginTop: 4 }}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: '180px 1fr 1fr 60px 30px',
        gap: 8, padding: '6px 8px',
        fontSize: 10, color: 'var(--text-muted)',
        fontFamily: 'var(--font-display)', letterSpacing: '0.08em',
        textTransform: 'uppercase', fontWeight: 600,
        borderBottom: '1px solid var(--border)',
      }}>
        <div>Empresa</div>
        <div>Cargo</div>
        <div>Direcção · Depto</div>
        <div style={{ textAlign: 'center' }}>Primária</div>
        <div></div>
      </div>
      {list.map((row, idx) => {
        const e = D.getEmpresa(row.id);
        return (
          <div key={idx} style={{
            display: 'grid',
            gridTemplateColumns: '180px 1fr 1fr 60px 30px',
            gap: 8, padding: '8px',
            borderBottom: '1px solid var(--border)',
            alignItems: 'center', fontSize: 12,
          }}>
            <select
              value={row.id}
              onChange={ev => update(idx, { id: ev.target.value })}
              style={cellInput()}
            >
              {visible.map(emp => <option key={emp.id} value={emp.id}>{emp.nome}</option>)}
            </select>
            <input
              type="text" value={row.cargo || ''}
              placeholder="Cargo"
              onChange={ev => update(idx, { cargo: ev.target.value })}
              style={cellInput()}
            />
            <input
              type="text"
              value={[row.direccao, row.departamento].filter(Boolean).join(' · ') || ''}
              placeholder="Direcção · Depto"
              onChange={ev => {
                const parts = ev.target.value.split('·').map(s => s.trim());
                update(idx, { direccao: parts[0] || '', departamento: parts[1] || '' });
              }}
              style={cellInput()}
            />
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              <button
                onClick={() => setPrimary(idx)}
                title={row.is_primary ? 'Empresa primária' : 'Definir como primária'}
                style={{
                  width: 18, height: 18, borderRadius: '50%',
                  border: `2px solid ${row.is_primary ? 'var(--ai-500)' : 'var(--border)'}`,
                  background: row.is_primary ? 'var(--ai-500)' : 'transparent',
                  cursor: 'pointer', padding: 0,
                  display: 'grid', placeItems: 'center',
                }}
              >
                {row.is_primary && <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#fff' }} />}
              </button>
            </div>
            <button
              onClick={() => remove(idx)}
              title="Remover empresa"
              className="btn btn-ghost btn-sm"
              style={{ padding: 4, justifyContent: 'center' }}
            ><Icon name="close" size={12} /></button>
          </div>
        );
      })}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 8px' }}>
        <button onClick={add} className="btn btn-sm">
          <Icon name="plus" size={12} />
          Adicionar empresa
        </button>
        <Tooltip text="A empresa primária é a que aparece no header do utilizador. As outras são acessos adicionais." side="top">
          <span style={{ fontSize: 10.5, color: 'var(--text-dim)', display: 'inline-flex', alignItems: 'center', gap: 4 }}>
            <Icon name="circle" size={10} style={{ opacity: 0.4 }} />
            sobre primária
          </span>
        </Tooltip>
      </div>
    </div>
  );
};
const cellInput = () => ({
  padding: '5px 7px', background: 'var(--bg-sunken)',
  border: '1px solid transparent', borderRadius: 4,
  fontSize: 12, color: 'var(--text)', outline: 'none',
  fontFamily: 'var(--font-sans)', width: '100%',
});

// ════════════════════════════════════════════════════════════════
// PermissoesEditor — collapsed por default, com badge "Override"
// ════════════════════════════════════════════════════════════════
const PermissoesEditor = ({ user, onChange, expanded, setExpanded }) => {
  const def = D.TIPOS_DEFAULTS[user.tipo_utilizador] || { dados: [], marcas: [], skills: [], features: [], modos: [] };
  const cur = user.permissoes || def;
  const isOverride = JSON.stringify({...cur, modos:undefined}) !== JSON.stringify({...def, modos: undefined});

// Resumos
  const counts = {
    dados:    `${(cur.dados || []).length}/${D.DADOS_KEYS.length}`,
    marcas:   `${(cur.marcas || []).length}/${D.MARCAS_KEYS.length}`,
    skills:   `${(cur.skills || []).length}/${D.SKILLS_KEYS.length}`,
    features: `${(cur.features || []).length}/${D.FEATURES_KEYS.length}`,
  };

return (
    <div style={{
      border: '1px solid var(--border)', borderRadius: 8,
      background: 'var(--bg-sunken)', overflow: 'hidden',
    }}>
      <div style={{ padding: '12px 14px' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
          <div className="font-display" style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.10em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>
            Resumo permissões
          </div>
          {isOverride && (
            <span style={{
              padding: '2px 8px', borderRadius: 999, fontSize: 9.5,
              background: 'color-mix(in oklch, var(--warn) 18%, transparent)',
              border: '1px solid color-mix(in oklch, var(--warn) 35%, transparent)',
              color: 'var(--warn)',
              fontFamily: 'var(--font-mono)', letterSpacing: '0.06em',
            }}>OVERRIDE PONTUAL</span>
          )}
        </div>

<div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
          <button
            onClick={() => setExpanded(!expanded)}
            className="btn btn-sm"
            style={{ flex: 1 }}
          >
            <Icon name={expanded ? 'arrowUp' : 'arrowDown'} size={12} />
            {expanded ? 'Esconder editor' : 'Personalizar permissões'}
          </button>
          {isOverride && (
            <button onClick={revert} className="btn btn-sm btn-ghost">
              <Icon name="refresh" size={12} />
              Reverter para defaults
            </button>
          )}
        </div>
      </div>

{expanded && (
        <div style={{ padding: '14px', borderTop: '1px solid var(--border)' }}>
          <PermGroup title="Dados"    keys={D.DADOS_KEYS}    selected={cur.dados}    onToggle={(k) => toggle('dados', k)}    cols={2} />
          <PermGroup title="Marcas"   keys={D.MARCAS_KEYS}   selected={cur.marcas}   onToggle={(k) => toggle('marcas', k)}   cols={3} />
          <PermGroup title="Skills"   keys={D.SKILLS_KEYS}   selected={cur.skills}   onToggle={(k) => toggle('skills', k)}   cols={3} />
          <PermGroup title="Features" keys={D.FEATURES_KEYS} selected={cur.features} onToggle={(k) => toggle('features', k)} cols={3} last />
        </div>
      )}
    </div>
  );
};
const SummaryRow = ({ label, count }) => (
  <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8 }}>
    <span style={{ color: 'var(--text-muted)' }}>{label}:</span>
    <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>{count}</span>
  </div>
);
const PermGroup = ({ title, keys, selected, onToggle, cols = 3, last }) => {
  const sel = new Set(selected || []);
  return (
    <div style={{ marginBottom: last ? 0 : 14 }}>
      <div className="font-display" style={{
        fontSize: 10, fontWeight: 600, letterSpacing: '0.12em',
        textTransform: 'uppercase', color: 'var(--text-dim)', marginBottom: 6,
      }}>{title}</div>
      <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: '4px 10px' }}>
        {keys.map(k => (
          <label key={k} style={{
            display: 'flex', alignItems: 'center', gap: 6,
            fontSize: 11.5, fontFamily: 'var(--font-mono)',
            cursor: 'pointer', padding: '3px 0',
          }}>
            <input
              type="checkbox" checked={sel.has(k)}
              onChange={() => onToggle(k)}
              style={{ accentColor: 'var(--ai-500)' }}
            />
            <span style={{ color: sel.has(k) ? 'var(--text)' : 'var(--text-dim)' }}>{k}</span>
          </label>
        ))}
      </div>
    </div>
  );
};

// ════════════════════════════════════════════════════════════════
// ModosAcessoEditor
// ════════════════════════════════════════════════════════════════
const ModosAcessoEditor = ({ value, onChange }) => {
  const sel = new Set(value || []);
  const toggle = (k) => {
    const next = new Set(sel);
    if (next.has(k)) next.delete(k); else next.add(k);
    onChange([...next]);
  };
  const items = [
    { id: 'dev',      label: 'Dev',      desc: 'developers e admins' },
    { id: 'interno',  label: 'Interno',  desc: 'colaboradores · CRM · KPIs · módulos' },
    { id: 'clientes', label: 'Clientes', desc: 'modo público — sem dados internos' },
    { id: 'board',    label: 'Board',    desc: 'executivos — KPIs estratégicos · Pipeline 3' },
  ];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      {items.map(it => (
        <label key={it.id} style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: '8px 10px', borderRadius: 6,
          background: sel.has(it.id) ? 'color-mix(in oklch, var(--ai-500) 8%, transparent)' : 'var(--bg-sunken)',
          border: `1px solid ${sel.has(it.id) ? 'color-mix(in oklch, var(--ai-500) 30%, transparent)' : 'var(--border)'}`,
          cursor: 'pointer',
        }}>
          <input
            type="checkbox" checked={sel.has(it.id)}
            onChange={() => toggle(it.id)}
            style={{ accentColor: 'var(--ai-500)' }}
          />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12, fontWeight: 500, color: 'var(--text)' }}>{it.label}</div>
            <div style={{ fontSize: 10.5, color: 'var(--text-dim)' }}>{it.desc}</div>
          </div>
        </label>
      ))}
    </div>
  );
};

// ════════════════════════════════════════════════════════════════
// PortalAccessCard
// ════════════════════════════════════════════════════════════════
const PortalAccessCard = ({ user, onChange }) => {
  const set = (patch) => onChange({ ...user, ...patch });
  const usernameAvailable = !!user.portal_username && /^[a-z0-9._-]+$/.test(user.portal_username);
  return (
    <div style={{
      border: '1px solid var(--border)', borderRadius: 8,
      background: 'var(--bg-sunken)', padding: '14px',
    }}>
      <label style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
        <input
          type="checkbox" checked={user.portal_activo}
          onChange={ev => set({ portal_activo: ev.target.checked })}
          style={{ accentColor: 'var(--ai-500)' }}
        />
        <span style={{ fontSize: 13, fontWeight: 500 }}>Portal activo</span>
        <PortalBadge activo={user.portal_activo} />
      </label>

<div style={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: 10, fontSize: 12, alignItems: 'center', marginBottom: 8 }}>
        <span style={{ color: 'var(--text-muted)' }}>Username:</span>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <input
            type="text" value={user.portal_username || ''}
            onChange={ev => set({ portal_username: ev.target.value.toLowerCase() })}
            disabled={!user.portal_activo}
            placeholder="username.utilizador"
            style={{
              flex: 1, padding: '5px 8px',
              background: 'var(--bg-elev)', border: '1px solid var(--border)',
              borderRadius: 4, fontSize: 12, color: 'var(--text)',
              fontFamily: 'var(--font-mono)', outline: 'none',
            }}
          />
          {user.portal_activo && (
            <span style={{
              fontSize: 10.5, color: usernameAvailable ? 'var(--ok)' : 'var(--warn)',
              fontFamily: 'var(--font-mono)',
            }}>{usernameAvailable ? '✓ Disponível' : '⚠ inválido'}</span>
          )}
        </div>

<span style={{ color: 'var(--text-muted)' }}>Password:</span>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <span style={{ flex: 1, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-dim)' }}>••••••••••</span>
          <button className="btn btn-sm btn-ghost"><Icon name="refresh" size={11} />Reset password</button>
        </div>

<span style={{ color: 'var(--text-muted)' }}>SSO MS 365:</span>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <SSOBadge activo={user.portal_activo} />
          {user.portal_activo && user.ultima_interacao_digi && (
            <span style={{ fontSize: 11, color: 'var(--text-dim)' }}>
              último login {fmtRel(user.ultima_interacao_digi)}
            </span>
          )}
        </div>
      </div>

<div style={{ display: 'flex', gap: 8, marginTop: 16, paddingTop: 12, borderTop: '1px solid var(--border)' }}>
        <button className="btn btn-sm btn-ghost"><Icon name="refresh" size={11} />Forçar logout de todas as sessões</button>
        <button className="btn btn-sm btn-ghost" style={{ color: 'var(--err)' }}>
          <Icon name="warning" size={11} />Suspender utilizador
        </button>
      </div>
    </div>
  );
};

// ════════════════════════════════════════════════════════════════
// Audit · Sessions · Conversas
// ════════════════════════════════════════════════════════════════
const AuditLogList = ({ entries }) => (
  <div style={{ border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden' }}>
    {entries.length === 0 ? (
      <div style={{ padding: 16, fontSize: 12, color: 'var(--text-dim)', textAlign: 'center' }}>Sem alterações registadas.</div>
    ) : entries.map((e, i) => (
      <div key={i} style={{
        display: 'grid', gridTemplateColumns: '120px 1fr',
        gap: 12, padding: '10px 12px', fontSize: 12,
        borderBottom: i < entries.length - 1 ? '1px solid var(--border)' : '0',
      }}>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <span style={{ fontSize: 11, fontFamily: 'var(--font-mono)', color: 'var(--text-muted)' }}>{fmtRel(e.ts)}</span>
          <span style={{ fontSize: 10, color: 'var(--text-dim)' }}>{e.who}</span>
        </div>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-muted)', marginBottom: 2 }}>{e.field}</div>
          <div style={{ fontSize: 12 }}>
            <span style={{ color: 'var(--text-dim)', textDecoration: 'line-through' }}>{e.from || '∅'}</span>
            <span style={{ color: 'var(--text-dim)', margin: '0 6px' }}>→</span>
            <span style={{ color: 'var(--ok)' }}>{e.to || '∅'}</span>
          </div>
        </div>
      </div>
    ))}
  </div>
);

const SessionsList = ({ sessions }) => (
  <div style={{ border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden' }}>
    {sessions.length === 0 ? (
      <div style={{ padding: 16, fontSize: 12, color: 'var(--text-dim)', textAlign: 'center' }}>Portal inactivo — sem sessões.</div>
    ) : sessions.map((s, i) => (
      <div key={i} style={{
        display: 'grid', gridTemplateColumns: '120px 110px 1fr 80px',
        gap: 12, padding: '8px 12px', fontSize: 11.5,
        borderBottom: i < sessions.length - 1 ? '1px solid var(--border)' : '0',
        fontFamily: 'var(--font-mono)',
      }}>
        <span style={{ color: 'var(--text-muted)' }}>{fmtRel(s.ts)}</span>
        <span style={{ color: 'var(--text)' }}>{s.ip}</span>
        <span style={{ color: 'var(--text-dim)' }}>{s.ua}</span>
        <span style={{ color: 'var(--text)', textAlign: 'right' }}>{s.duration}</span>
      </div>
    ))}
  </div>
);

const ConversasList = ({ conversas }) => (
  <div style={{ border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden' }}>
    {conversas.length === 0 ? (
      <div style={{ padding: 16, fontSize: 12, color: 'var(--text-dim)', textAlign: 'center' }}>Sem conversas registadas.</div>
    ) : (
      <>
        {conversas.map((c, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            padding: '10px 12px', fontSize: 12,
            borderBottom: i < conversas.length - 1 ? '1px solid var(--border)' : '0',
          }}>
            <span style={{ color: 'var(--text)' }}>{c.mes}</span>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-muted)' }}>{c.count} interacções</span>
              <div style={{ width: 80, height: 4, background: 'var(--bg-sunken)', borderRadius: 2, overflow: 'hidden' }}>
                <div style={{
                  height: '100%', width: `${Math.min(100, c.count / 2)}%`,
                  background: 'var(--ai-500)',
                }} />
              </div>
            </div>
          </div>
        ))}
        <div style={{ padding: '10px 12px', borderTop: '1px solid var(--border)', display: 'flex', justifyContent: 'flex-end' }}>
          <button className="btn btn-sm btn-ghost">
            <Icon name="link" size={11} />Abrir Langfuse
          </button>
        </div>
      </>
    )}
  </div>
);

// ════════════════════════════════════════════════════════════════
// PortalSubsEditor — controlo completo: departamentos + submenus
// ════════════════════════════════════════════════════════════════
const PortalSubsEditor = ({ value, onChange, userTipo }) => {
  const [expanded, setExpanded] = React.useState(false);
  const [activeDept, setActiveDept] = React.useState(null);
  const _SINGLE_DEPT = new Set(['comercial','tecnico','marketing','administrativo','operacional']);
  const catalog = (D.PORTAL_SUBS_CATALOG || []).filter(d =>
    !_SINGLE_DEPT.has(userTipo) || !d.tiposComAcesso || d.tiposComAcesso.includes(userTipo)
  );
  const subs = value || null;

// Modelo whitelist: quando subs != null, só depts com chave são visíveis.
  // subs[key] ausente = hidden; null = livre; [] = hidden (compat); ['ids'] = restrito
  const isDeptHidden = (subKey) => {
    if (!subs) return false;
    if (!(subKey in subs)) return true; // ausente = oculto
    return Array.isArray(subs[subKey]) && subs[subKey].length === 0; // [] = oculto
  };
  const defaultVisible = (items) => items.filter(i => !i.restricted).map(i => i.id);

const getDeptStatus = (subKey, items) => {
    if (!subs) return 'livre';
    if (!(subKey in subs) || (Array.isArray(subs[subKey]) && subs[subKey].length === 0)) return 'hidden';
    if (subs[subKey] === null) return 'livre';
    const def = new Set(defaultVisible(items));
    const cur = new Set(subs[subKey]);
    if (def.size === cur.size && [...def].every(id => cur.has(id))) return 'livre';
    return 'restricted';
  };

const getDeptVisible = (subKey, items) => {
    if (!subs || !(subKey in subs) || subs[subKey] === null) return defaultVisible(items);
    return subs[subKey].length > 0 ? subs[subKey] : defaultVisible(items);
  };

// Toggle dept on/off (whitelist: presente=visível, ausente=oculto)
  const toggleDept = (subKey) => {
    if (isDeptHidden(subKey)) {
      // tornar visível: adicionar chave com null (libre)
      const newSubs = { ...(subs || {}) };
      newSubs[subKey] = null;
      onChange(newSubs);
    } else {
      // ocultar: remover chave da whitelist
      if (!subs) {
        // era null (tudo livre) — criar whitelist com todos os depts excepto este
        const newSubs = {};
        catalog.forEach(d => { if (d.subKey !== subKey) newSubs[d.subKey] = null; });
        onChange(Object.keys(newSubs).length > 0 ? newSubs : null);
      } else {
        const newSubs = { ...subs };
        delete newSubs[subKey];
        onChange(Object.keys(newSubs).length > 0 ? newSubs : null);
      }
    }
  };

// Toggle individual submenu item
  const toggleItem = (subKey, items, itemId) => {
    const current = getDeptVisible(subKey, items);
    const set = new Set(current);
    if (set.has(itemId)) set.delete(itemId); else set.add(itemId);
    const newArr = [...set];
    const def = new Set(defaultVisible(items));
    const newSet = new Set(newArr);
    const matchesDefault = def.size === newSet.size && [...def].every(id => newSet.has(id));
    const newSubs = { ...(subs || {}) };
    if (matchesDefault) { delete newSubs[subKey]; } else { newSubs[subKey] = newArr; }
    onChange(Object.keys(newSubs).length > 0 ? newSubs : null);
  };

const resetDept = (subKey) => {
    const newSubs = { ...(subs || {}) };
    delete newSubs[subKey];
    onChange(Object.keys(newSubs).length > 0 ? newSubs : null);
  };

const hiddenCount     = catalog.filter(d => isDeptHidden(d.subKey)).length;
  const restrictedCount = catalog.filter(d => getDeptStatus(d.subKey, d.items) === 'restricted').length;
  const hasChanges      = hiddenCount > 0 || restrictedCount > 0;

const activeDeptData = catalog.find(d => d.subKey === activeDept) || catalog[0];

if (catalog.length === 0) return (
    <div style={{ padding: '10px 14px', fontSize: 12, color: 'var(--text-dim)', border: '1px solid var(--border)', borderRadius: 8, background: 'var(--bg-sunken)' }}>
      Sem departamentos configuráveis para este tipo de utilizador.
    </div>
  );

const statusColor = (status) => status === 'hidden' ? 'var(--text-dim)' : status === 'restricted' ? 'var(--warn)' : 'var(--ok)';
  const statusLabel = (status, visible, total) => status === 'hidden' ? 'oculto' : status === 'restricted' ? `${visible}/${total}` : 'livre';

return (
    <div style={{ border: '1px solid var(--border)', borderRadius: 8, background: 'var(--bg-sunken)', overflow: 'hidden' }}>
      <div style={{ padding: '12px 14px' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
          <div className="font-display" style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.10em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>
            Resumo visualizações
          </div>
          {hasChanges ? (
            <span style={{ padding: '2px 8px', borderRadius: 999, fontSize: 9.5, background: 'color-mix(in oklch, var(--warn) 18%, transparent)', border: '1px solid color-mix(in oklch, var(--warn) 35%, transparent)', color: 'var(--warn)', fontFamily: 'var(--font-mono)', letterSpacing: '0.06em' }}>
              {hiddenCount > 0 ? `${hiddenCount} OCULTOS` : `${restrictedCount} RESTRITOS`}
            </span>
          ) : (
            <span style={{ padding: '2px 8px', borderRadius: 999, fontSize: 9.5, background: 'color-mix(in oklch, var(--ok) 12%, transparent)', border: '1px solid color-mix(in oklch, var(--ok) 30%, transparent)', color: 'var(--ok)', fontFamily: 'var(--font-mono)', letterSpacing: '0.06em' }}>
              LIVRE
            </span>
          )}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '5px 18px', fontSize: 12, marginBottom: 12 }}>
          {catalog.map(d => {
            const status  = getDeptStatus(d.subKey, d.items);
            const visible = getDeptVisible(d.subKey, d.items);
            return (
              <div key={d.subKey} style={{ display: 'flex', justifyContent: 'space-between', gap: 8 }}>
                <span style={{ color: status === 'hidden' ? 'var(--text-dim)' : 'var(--text-muted)', textDecoration: status === 'hidden' ? 'line-through' : 'none' }}>{d.label}:</span>
                <span style={{ fontFamily: 'var(--font-mono)', color: statusColor(status) }}>
                  {statusLabel(status, visible.length, d.items.length)}
                </span>
              </div>
            );
          })}
        </div>
        <button onClick={() => setExpanded(!expanded)} className="btn btn-sm" style={{ width: '100%' }}>
          <Icon name={expanded ? 'arrowUp' : 'arrowDown'} size={12} />
          {expanded ? 'Esconder editor' : 'Gerir visualizações'}
        </button>
      </div>

{expanded && (
        <div style={{ borderTop: '1px solid var(--border)', display: 'flex', minHeight: 220 }}>
          {/* Left: dept list com toggle visibilidade */}
          <div style={{ width: 148, borderRight: '1px solid var(--border)', padding: '8px 6px', display: 'flex', flexDirection: 'column', gap: 2, flexShrink: 0 }}>
            {catalog.map(d => {
              const isActive  = activeDeptData?.subKey === d.subKey;
              const hidden    = isDeptHidden(d.subKey);
              const status    = getDeptStatus(d.subKey, d.items);
              const dotColor  = hidden ? 'var(--text-dim)' : status === 'restricted' ? 'var(--warn)' : 'var(--ok)';
              return (
                <div key={d.subKey} style={{ display: 'flex', alignItems: 'center', gap: 4, borderRadius: 6, background: isActive ? 'var(--accent-500)' : 'transparent' }}
                  onMouseEnter={e => { if (!isActive) e.currentTarget.style.background = 'var(--bg-hover)'; }}
                  onMouseLeave={e => { if (!isActive) e.currentTarget.style.background = 'transparent'; }}
                >
                  <input type="checkbox" checked={!hidden} title={hidden ? 'Dept oculto — clica para mostrar' : 'Clica para ocultar dept'}
                    onChange={() => toggleDept(d.subKey)}
                    style={{ accentColor: 'var(--ai-500)', flexShrink: 0, marginLeft: 8, cursor: 'pointer' }}
                    onClick={e => e.stopPropagation()}
                  />
                  <button onClick={() => setActiveDept(d.subKey)}
                    style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 6, padding: '6px 6px 6px 2px', background: 'transparent', color: isActive ? '#fff' : (hidden ? 'var(--text-dim)' : 'var(--text-muted)'), fontSize: 12, fontWeight: isActive ? 600 : 400, textAlign: 'left', textDecoration: hidden ? 'line-through' : 'none' }}
                  >
                    <span style={{ width: 6, height: 6, borderRadius: '50%', flexShrink: 0, background: isActive ? '#fff' : dotColor, opacity: isActive ? 1 : 0.8 }} />
                    <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{d.label}</span>
                  </button>
                </div>
              );
            })}
          </div>

{/* Right: submenus do dept activo */}
          {activeDeptData && (() => {
            const { subKey, items } = activeDeptData;
            const hidden   = isDeptHidden(subKey);
            const visible  = new Set(getDeptVisible(subKey, items));
            const status   = getDeptStatus(subKey, items);
            return (
              <div style={{ flex: 1, padding: '12px 14px' }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
                  <span style={{ fontSize: 11, fontWeight: 600, color: hidden ? 'var(--text-dim)' : 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.08em', fontFamily: 'var(--font-display)', textDecoration: hidden ? 'line-through' : 'none' }}>
                    {activeDeptData.label}
                  </span>
                  {status === 'restricted' && !hidden && (
                    <button onClick={() => resetDept(subKey)} className="btn btn-sm btn-ghost" style={{ fontSize: 10.5, padding: '2px 7px' }}>
                      <Icon name="refresh" size={11} /> Livre
                    </button>
                  )}
                </div>
                {hidden ? (
                  <div style={{ padding: '12px 10px', borderRadius: 6, background: 'var(--bg-hover)', fontSize: 12, color: 'var(--text-dim)', textAlign: 'center' }}>
                    Departamento oculto — os utilizadores não vêem este dept no sidebar.<br />
                    <button onClick={() => toggleDept(subKey)} className="btn btn-sm" style={{ marginTop: 8 }}>
                      <Icon name="check" size={11} /> Tornar visível
                    </button>
                  </div>
                ) : (
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                    {items.map(item => (
                      <label key={item.id} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 8px', borderRadius: 6, cursor: 'pointer', background: visible.has(item.id) ? 'color-mix(in oklch, var(--ai-500) 6%, transparent)' : 'transparent', border: `1px solid ${visible.has(item.id) ? 'color-mix(in oklch, var(--ai-500) 20%, transparent)' : 'transparent'}` }}>
                        <input type="checkbox" checked={visible.has(item.id)} onChange={() => toggleItem(subKey, items, item.id)} style={{ accentColor: 'var(--ai-500)', flexShrink: 0 }} />
                        <span style={{ fontSize: 12, color: visible.has(item.id) ? 'var(--text)' : 'var(--text-dim)', flex: 1 }}>{item.label}</span>
                        {item.restricted && <span style={{ fontSize: 9.5, fontFamily: 'var(--font-mono)', color: 'var(--text-dim)', letterSpacing: '0.05em' }}>restrito</span>}
                      </label>
                    ))}
                  </div>
                )}
              </div>
            );
          })()}
        </div>
      )}
    </div>
  );
};

// ════════════════════════════════════════════════════════════════
// Expor
// ════════════════════════════════════════════════════════════════
window.AdminUsers = {
  Avatar, Tooltip,
  EmpresaTags, RelativeTime,
  TipoBadge, PortalBadge, SSOBadge, ApolloBadge,
  SectionHeader, FieldRow,
  EmpresaJunctionTable, PermissoesEditor, ModosAcessoEditor, PortalSubsEditor, PortalAccessCard,
  AuditLogList, SessionsList, ConversasList,
  helpers: { initials, fmtRel, fmtAbs },
};