/* client/syshelp.css — estilos do popover @help e dos chips de política.
   Classes .help-pop* e .policy-chip* copiadas de Telmo/Menu/assets/styles.css
   (NÃO renomear: são partilhadas com o markup copiado do Menu).
   Depende das variáveis CSS (--bg1, --line, --text, --purple, --cyan, etc.)
   definidas no styles.css do host. */

.help-pop{
  display:none;position:fixed;background:var(--bg1);border:1px solid var(--line);border-radius:8px;
  width:340px;box-shadow:var(--shadow-lg);z-index:300;
  font-size:12.5px;line-height:1.5;color:var(--text);
}
.help-pop.on{display:flex;flex-direction:column;animation:popIn .18s ease-out}
@keyframes popIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.help-pop-head{padding:10px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;background:var(--bg2)}
.help-pop-alias{font-family:var(--font-mono);font-size:11px;color:var(--purple);background:var(--purple-bg);padding:2px 8px;border-radius:4px;border:1px solid var(--purple-bd);font-weight:600;flex:1}
.help-pop-close{width:22px;height:22px;border-radius:4px;color:var(--text3);font-size:13px;display:flex;align-items:center;justify-content:center}
.help-pop-close:hover{background:var(--bg);color:var(--text)}
.help-pop-title{padding:10px 14px 4px;font-weight:700;font-size:13.5px;color:var(--text);font-family:var(--font-display)}
.help-pop-body{padding:0 14px 12px;color:var(--text2)}
.help-pop-body p{margin-bottom:6px}
.help-pop-foot{padding:8px 14px;border-top:1px solid var(--line);background:var(--bg2);display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;color:var(--text3)}
.help-pop-foot a{color:var(--cyan);text-decoration:none;font-weight:600}
.help-pop-foot a:hover{text-decoration:underline}

/* POLICY CHIPS (@tipo.alias inline) */
.policy-chip{
  display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:10px;
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.02em;
  border:1px solid;cursor:pointer;transition:.12s;vertical-align:middle;line-height:1.4;
  white-space:nowrap;
}
.policy-chip:hover{filter:brightness(.95);transform:translateY(-1px)}
.policy-chip--def   { background:#eef9fc;color:#0f7f9b;border-color:#b5e3ef }
.policy-chip--regra { background:#eef5fd;color:#0071e3;border-color:#c9dff6 }
.policy-chip--proc  { background:#eff9f1;color:#1d8a45;border-color:#b3dfc0 }
.policy-chip--kpi   { background:#fdf6ec;color:#b25a00;border-color:#efd3a3 }
.policy-chip--aviso { background:#fdf1f1;color:#d70015;border-color:#f3b8bc }
/* um alias comprido num chip nowrap sai do cartão/painel em ecrã estreito
   (auditoria 04/08) — quebra linha. Esta folha carrega DEPOIS do styles.css
   do shell, por isso a regra tem de viver AQUI também, senão o nowrap de
   cima ganha na ordem. */
@media (max-width:920px){
  .policy-chip{white-space:normal;word-break:break-word}
}