/*
  Estilos do painel do PA (Portaria Remota) que precisam cruzar fronteira de componente —
  em especial o card da fila reagindo ao estado do cronômetro (Cronometro.razor) via :has().
  Fica em folha global (não em *.razor.css com isolamento) de propósito: o isolamento de CSS
  do Blazor prefixa cada seletor com um atributo de escopo próprio por componente, e :has()
  precisaria alcançar um descendente que pertence a OUTRO componente (Cronometro dentro de
  CardEventoFila) — mais simples e confiável resolver isso com classes globais estáveis.
*/

.card-evento {
    border-left: 4px solid transparent;
    border-radius: 4px;
    padding: 8px 10px;
    background: var(--mud-palette-surface);
    outline: 2px solid transparent;
    outline-offset: -2px;
}

.card-evento--panico {
    background: color-mix(in srgb, var(--mud-palette-error) 10%, var(--mud-palette-surface));
}

/* Ao ultrapassar segundos_alerta/segundos_estouro, o card inteiro muda de estado visual —
   sem nenhum re-render do CardEventoFila: a classe muda só no <span> isolado do Cronometro,
   e é essa mudança de classe que o :has() abaixo detecta puramente em CSS. */
.card-evento:has(.cronometro--alerta) {
    outline-color: var(--mud-palette-warning);
}

.card-evento:has(.cronometro--estouro) {
    outline-color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 14%, var(--mud-palette-surface));
}

.cronometro {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.cronometro--alerta {
    color: var(--mud-palette-warning-darken);
}

.cronometro--estouro {
    color: var(--mud-palette-error);
}

/* Alvo do atalho Alt+1..5 (Parte 9) — foco visível para o operador confirmar qual bloco recebeu o comando. */
.bloco-condominio:focus {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}