/* OSPrimeApp 5.7 — Configurações */
.settings-tabs {
  width: 100%;
  max-width: 100%;
  flex-wrap: wrap;
  overflow: visible;
}

/* Um grupo de configuração inativo nunca pode vazar para outra aba. */
html body.premium-ui #page-settings [data-settings-group].settings-group-off {
  display: none !important;
}

.n8n-settings-panel .n8n-settings-grid input[readonly] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}

.n8n-settings-panel .settings-actions {
  flex-wrap: wrap;
}

.n8n-status-board,
.n8n-metrics-grid {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.n8n-status-board {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.n8n-metrics-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.n8n-status-card,
.n8n-metrics-grid > div,
.n8n-history-row {
  border: 1px solid var(--border, rgba(148,163,184,.22));
  border-radius: 12px;
  background: var(--surface-soft, rgba(15,23,42,.42));
  padding: 12px;
}

.n8n-status-card span,
.n8n-metrics-grid span,
.n8n-history-row span {
  display: block;
  color: var(--muted, #94a3b8);
  font-size: 12px;
}

.n8n-status-card b,
.n8n-metrics-grid b {
  display: block;
  margin-top: 5px;
  font-size: 18px;
}

.n8n-status-card small,
.n8n-history-row small {
  display: block;
  margin-top: 5px;
  color: var(--muted, #94a3b8);
}

.n8n-history-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.n8n-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.n8n-history-row strong {
  display: block;
}

.n8n-history-row em {
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-style: normal;
  border: 1px solid var(--border, rgba(148,163,184,.22));
}

.n8n-history-row.ok em {
  color: #22c55e;
  background: rgba(34,197,94,.12);
}

.n8n-history-row.bad em {
  color: #fb7185;
  background: rgba(251,113,133,.12);
}

@media (max-width: 720px) {
  .n8n-status-board,
  .n8n-metrics-grid {
    grid-template-columns: 1fr;
  }

  .n8n-settings-panel .settings-actions .btn {
    width: 100%;
  }
}

/* Qual aba de Configurações está aberta.

   A regra do legacy (17654) diz:

     .settings-tab.active { background: var(--bg-surface-elevated, rgba(56,189,248,.16)) }

   O valor escrito como reserva é o acento ciano — era essa a intenção. Mas a
   variável existe em :root valendo #1e293b, um cinza-ardósia sem acento
   nenhum, e é ela que vale. Resultado medido: fundo da aba ativa #1e293b
   sobre a barra #182234, contraste de 1,09. Um contraste de 1,0 é "cor
   idêntica" — ou seja, praticamente não dá para ver qual das sete abas está
   aberta. Pior: o :hover usa rgba(56,189,248,.10) e fica MAIS marcado que o
   estado ativo.

   Eu mesmo caí nisso: olhando a tela, li a aba errada como ativa e só
   descobri o engano medindo.

   A reserva do autor sozinha resolveria pouco (calculei 1,38 depois da
   mistura com o fundo). O que decide é o anel de 1px no acento: ele dá uma
   borda nítida de contraste 2,67 contra a barra, visível de relance. A
   variável fica como está — os outros quatro usos dela são fundo de
   superfície, onde #1e293b está certo. */
html body.premium-ui .settings-tabs .settings-tab.active {
  background: rgba(56, 189, 248, .18) !important;
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, .55) !important;
  color: #e0f2fe !important;
}
/* O hover não pode competir com o estado ativo. */
html body.premium-ui .settings-tabs .settings-tab:hover:not(.active) {
  background: rgba(148, 163, 184, .10) !important;
}