/* ═══════════════════════════════════════════════════════
   Mapping Health · page-scoped (DESIGN.md §2 e §8, regra 8)
   ═══════════════════════════════════════════════════════
   Âmbito: body[data-page="mapping"]. Carrega depois do
   theme-v2.css, por isso vence nesta rota e só nesta.
   Tokens DS apenas: sem literais de cor, sem emojis, sem
   travessões na copy. O dark herda de graça.

   Registo: uma página de diagnóstico é uma lista onde a
   esmagadora maioria das linhas está bem. Por isso o
   default é calmo (hairlines, texto secundário, zero
   preenchimentos) e a cor fica reservada aos sinais:
   marcador de 2px na aresta da linha, ponto tingido no
   estado, texto tingido no problema. Nada de pastilhas
   cheias nem washes de linha inteira.
   ═══════════════════════════════════════════════════════ */

body[data-page="mapping"] {
  /* JetBrains Mono já vem carregada no index.html (Consumo / DB Studio).
     Identificadores (números, IDs Labs, slugs) são dados, não copy. */
  --mh-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --mh-radius: 12px;
  --mh-gap: 22px;
}

/* ── Cabeçalho ─────────────────────────────────────────── */
body[data-page="mapping"] .mh-sub {
  margin: 5px 0 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* ── Ícones (lucide, stroke 2, nunca sobre fundo tingido) ─ */
body[data-page="mapping"] .mh-i {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  pointer-events: none;
}
body[data-page="mapping"] .mh-i-lg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  pointer-events: none;
  color: var(--text-tertiary);
}

/* ── Sumário: uma só superfície, dividida a hairline ───── */
/* O cartão dimensiona-se ao conteúdo, não ao ecrã: fica com a largura da sua
   linha mais larga (a dos sinais). Quatro medidas espalhadas por 1440px davam
   mosaicos de 370px com um número de dois dígitos lá dentro. */
body[data-page="mapping"] .mh-summary {
  width: max-content;
  max-width: 100%;
  background: var(--bg-card);
  border-radius: var(--mh-radius);
  box-shadow: var(--elev-rest);
  margin-bottom: var(--mh-gap);
  overflow: hidden;
}
body[data-page="mapping"] .mh-stats {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
body[data-page="mapping"] .mh-stat {
  flex: 1 1 auto;
  min-width: 168px;
  padding: 15px 18px 16px;
  border-left: 1px solid var(--line);
}
body[data-page="mapping"] .mh-stat:first-child { border-left: 0; }

body[data-page="mapping"] .mh-stat-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}
body[data-page="mapping"] .mh-stat-value {
  display: block;
  margin-top: 9px;
  font-size: var(--num-md);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
body[data-page="mapping"] .mh-stat-value.is-danger { color: var(--danger); }
body[data-page="mapping"] .mh-stat-value.is-warn   { color: var(--warning); }
body[data-page="mapping"] .mh-stat-note {
  display: block;
  margin-top: 7px;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Rodapé do sumário: distribuição por sinal (well = --bg-card-2, §4) */
body[data-page="mapping"] .mh-flagbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding: 11px 18px;
  border-top: 1px solid var(--line);
  background: var(--bg-card-2);
}
body[data-page="mapping"] .mh-flaglist {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 18px;
  min-width: 0;
}
body[data-page="mapping"] .mh-fb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}
body[data-page="mapping"] .mh-fb b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
body[data-page="mapping"] .mh-clean {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--success);
}
body[data-page="mapping"] .mh-stamp {
  margin-left: auto;
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Ponto tingido partilhado (mesma spec do .status-badge::before do DS) */
body[data-page="mapping"] .mh-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex-shrink: 0;
  --dot: var(--text-tertiary);
  background: var(--dot);
  box-shadow: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 20%, transparent);
}
body[data-page="mapping"] [data-sev="danger"] > .mh-dot { --dot: var(--danger); }
body[data-page="mapping"] [data-sev="warn"] > .mh-dot   { --dot: var(--warning); }


/* ── Secções ───────────────────────────────────────────── */
body[data-page="mapping"] .mh-sec { margin-bottom: var(--mh-gap); }
body[data-page="mapping"] .mh-sec:last-child { margin-bottom: 0; }
body[data-page="mapping"] .mh-sec-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  padding: 0 2px;
}
body[data-page="mapping"] .mh-sec-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
body[data-page="mapping"] .mh-sec-title .mh-i { color: var(--text-tertiary); }
body[data-page="mapping"] .mh-sec-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
body[data-page="mapping"] .mh-sec-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--text-tertiary);
}
body[data-page="mapping"] .mh-sec-note.is-issue { color: var(--text-secondary); }
body[data-page="mapping"] .mh-sec-note[data-sev="danger"] > .mh-dot { --dot: var(--danger); }
body[data-page="mapping"] .mh-sec-note[data-sev="warn"] > .mh-dot   { --dot: var(--warning); }

/* ── Tabelas (DESIGN.md §6) ────────────────────────────── */
body[data-page="mapping"] .mh-panel {
  background: var(--bg-card);
  border-radius: var(--mh-radius);
  box-shadow: var(--elev-rest);
}
body[data-page="mapping"] .mh-scroll {
  overflow-x: auto;
  border-radius: var(--mh-radius);
  -webkit-overflow-scrolling: touch;
}
body[data-page="mapping"] .mh-tbl {
  width: 100%;
  border-collapse: collapse;
  min-width: 780px;
}
body[data-page="mapping"] .mh-tbl th {
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
body[data-page="mapping"] .mh-tbl td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  vertical-align: top;
}
body[data-page="mapping"] .mh-tbl tbody tr:last-child td { border-bottom: 0; }
body[data-page="mapping"] .mh-tbl tbody tr:hover td { background: var(--bg-card-2); }

/* Linha com sinais: marcador de aresta, não wash. O olho apanha a
   coluna esquerda; o resto da grelha continua a ler-se. */
body[data-page="mapping"] .mh-tbl tbody tr[data-sev] td:first-child {
  box-shadow: inset 2px 0 0 0 var(--warning);
}
body[data-page="mapping"] .mh-tbl tbody tr[data-sev="danger"] td:first-child {
  box-shadow: inset 2px 0 0 0 var(--danger);
}

/* ── Células ───────────────────────────────────────────── */
body[data-page="mapping"] .mh-mono {
  font-family: var(--mh-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--text-primary);
}
body[data-page="mapping"] .mh-mono.is-dim {
  font-weight: 400;
  color: var(--text-tertiary);
}
body[data-page="mapping"] .mh-trunc {
  display: inline-block;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
body[data-page="mapping"] .mh-owner {
  color: var(--text-primary);
  font-weight: 500;
}
body[data-page="mapping"] .mh-id {
  font-family: var(--mh-mono);
  font-size: 0.6875rem;
  color: var(--text-tertiary);
}
body[data-page="mapping"] .mh-none { color: var(--text-tertiary); }

/* Estado = ponto + texto (contrato de badges do DS v2, registo 1) */
body[data-page="mapping"] .mh-st {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--badge-h, 22px);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: var(--text-secondary);
  --dot: var(--text-tertiary);
}
body[data-page="mapping"] .mh-st::before {
  content: '';
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--dot);
  box-shadow: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 20%, transparent);
}
body[data-page="mapping"] .mh-st.is-ok      { --dot: var(--success); }
body[data-page="mapping"] .mh-st.is-clear   { color: var(--text-tertiary); }
body[data-page="mapping"] .mh-st.is-clear::before { display: none; }
body[data-page="mapping"] .mh-st.is-warn    { --dot: var(--warning); color: var(--warning); }
body[data-page="mapping"] .mh-st.is-danger  { --dot: var(--danger);  color: var(--danger); }
body[data-page="mapping"] .mh-st.is-idle    { --dot: var(--text-tertiary); color: var(--text-tertiary); }
/* Coluna de estado: só o ponto é semântico, o texto fica neutro (o registo
   de estado do DS v2). A cor do texto fica para a coluna Sinais. */
body[data-page="mapping"] .mh-st.is-plain  { color: var(--text-secondary); }
body[data-page="mapping"] .mh-st.is-idle.is-plain { color: var(--text-tertiary); }

/* Vários sinais na mesma célula empilham; não viram parede de pastilhas */
body[data-page="mapping"] .mh-flags {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

/* Etiqueta = retângulo suave, anel hairline, 22px (contrato registo 2).
   Tom neutro de propósito: numa página de diagnóstico a cor pertence aos
   sinais, e a paleta categórica de fornecedores (--ed-p-*) é vermelha nos
   dois temas, ou seja lia-se como alerta ao lado das linhas com desvio. */
body[data-page="mapping"] .mh-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--badge-h, 22px);
  padding: 0 8px;
  border: 0;
  border-radius: var(--badge-r, 6px);
  background: var(--bg-card-2);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: var(--text-secondary);
}

/* Detalhe do desvio: a única frase da tabela com direito a cor */
body[data-page="mapping"] .mh-drift {
  margin-top: 6px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--danger);
  max-width: 420px;
}

/* ── Estados de dados ──────────────────────────────────── */
body[data-page="mapping"] .mh-quiet {
  margin: 0;
  padding: 26px 18px;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}
body[data-page="mapping"] .mh-emptybox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 52px 24px;
  text-align: center;
  background: var(--bg-card);
  border-radius: var(--mh-radius);
  box-shadow: var(--elev-rest);
}
body[data-page="mapping"] .mh-emptybox p {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
}
body[data-page="mapping"] .mh-emptybox span {
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}
body[data-page="mapping"] .mh-err {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--mh-radius);
  background: var(--danger-bg);
  box-shadow: inset 0 0 0 1px var(--line);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 26%, transparent);
  font-size: 0.8125rem;
  color: var(--danger);
}
body[data-page="mapping"] .mh-err .mh-i { margin-top: 1px; }
body[data-page="mapping"] .mh-err-detail {
  display: block;
  margin-top: 3px;
  color: var(--text-secondary);
}

/* Skeleton estático (sem animação: nada a esconder num load de 300ms) */
body[data-page="mapping"] .mh-skel {
  display: grid;
  gap: 14px;
  padding: 18px;
  background: var(--bg-card);
  border-radius: var(--mh-radius);
  box-shadow: var(--elev-rest);
}
body[data-page="mapping"] .mh-skel i {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: var(--bg-card-2);
}
body[data-page="mapping"] .mh-skel .mh-skel-a { width: 38%; }
body[data-page="mapping"] .mh-skel .mh-skel-b { width: 72%; }
body[data-page="mapping"] .mh-skel .mh-skel-c { width: 55%; }

/* ── Responsivo ────────────────────────────────────────── */
@media (max-width: 900px) {
  body[data-page="mapping"] .mh-stats { width: 100%; }
  body[data-page="mapping"] .mh-stat { flex: 1 1 45%; }
  body[data-page="mapping"] .mh-stat:nth-child(odd) { border-left: 0; }
  body[data-page="mapping"] .mh-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  body[data-page="mapping"] .mh-stat { padding: 13px 14px 14px; }
  body[data-page="mapping"] .mh-flagbar { padding: 11px 14px; }
  body[data-page="mapping"] .mh-stamp { margin-left: 0; }
  body[data-page="mapping"] .mh-sec-note { flex-basis: 100%; margin-left: 0; }
  body[data-page="mapping"] .mh-sec-head { flex-wrap: wrap; row-gap: 4px; }
}