/* OSPrimeApp — Painel do administrador: Ocorrências do sistema.

   As classes abaixo disputam com regras do legacy.css que usam
   `.application-error-row span` e `.application-error-row small` (0,1,1). Uma
   classe sozinha (0,1,0) perde essa disputa, então tudo aqui é escrito com o
   prefixo da linha — é a mesma armadilha de especificidade já documentada no
   90-mobile.css. */

/* Sem repetir há uma semana. Nem "resolvido" (ninguém confirmou) nem o mesmo
   âmbar de algo acontecendo agora: cinza-azulado, o tom neutro do sistema. */
.application-error-row.stale {
  border-left: 4px solid #4b6fa0;
  opacity: .88;
}

/* O que fazer a respeito. É a linha que transforma um código opaco em algo
   acionável, então tem contraste maior que o resto do bloco. */
.application-error-row .application-error-dica {
  color: #d6e4f7;
  font-size: 11.5px;
  line-height: 1.5;
  padding-left: 9px;
  border-left: 2px solid rgba(75, 111, 160, .55);
}

/* Rota e contexto. O `small` do legacy é 9px, pequeno demais para um dado que
   existe justamente para ser lido e repassado. */
.application-error-row .application-error-tec {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: #8fa6c4;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* O contexto vai num <span>, que o legacy estiliza como texto de corpo
   (.application-error-row span). Três classes ganham dessa regra. */
.application-error-row .application-error-tec span {
  color: #8fa6c4;
  font-size: 11px;
  font-family: inherit;
}
.application-error-row .application-error-tec code {
  padding: 2px 7px;
  border: 1px solid rgba(75, 111, 160, .38);
  border-radius: 6px;
  background: rgba(12, 25, 42, .6);
  color: #a8c4e6;
  font-size: 11px;
  /* Rota longa quebra em vez de esticar a linha e empurrar o botão. */
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  /* No celular a linha vira coluna: o botão "Marcar resolvido" espremido ao
     lado de quatro linhas de texto ficava com menos de 44px de largura útil. */
  .application-error-row {
    flex-direction: column;
    align-items: stretch;
  }
  .application-error-row > .btn { width: 100%; }
}