/* ============================================================================
 * new-ro-alerts.css — NEWRO-20261026 (Donny, 2026-10-26)
 * New-RO arrival treatment on the staff board: announcement banner above
 * the board + red flash on the arriving RO's card until it is assigned or
 * acknowledged. Colours read on the board's light default theme (and stay
 * legible in dark): strong red border/glow, white card face preserved.
 * ========================================================================== */

.newro-banner {
  margin: 0 0 12px;
  border: 2px solid #d92d20;
  border-radius: 12px;
  background: #fff5f4;
  color: #7a1a12;
  padding: 10px 12px;
  box-shadow: 0 2px 10px rgba(217, 45, 32, .18);
}
.newro-banner[hidden] { display: none; }
.newro-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: calc(15px * var(--font-scale, 1)); margin-bottom: 6px;
}
.newro-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 0; border-top: 1px solid #f3c6c0;
}
.newro-dot {
  width: 10px; height: 10px; border-radius: 50%; background: #d92d20; flex: none;
  animation: newro-pulse 1.1s ease-in-out infinite;
}
.newro-line { flex: 1 1 220px; font-size: calc(14px * var(--font-scale, 1)); }
.newro-tech {
  min-height: 38px; border: 1px solid #d9a49e; border-radius: 8px; background: #fff;
  color: #1d2733; padding: 4px 8px; font-size: calc(14px * var(--font-scale, 1));
}
.newro-btn {
  min-height: 38px; border: 1px solid #b3261e; border-radius: 8px; background: #fff;
  color: #b3261e; font-weight: 700; padding: 4px 12px; cursor: pointer;
  font-size: calc(14px * var(--font-scale, 1));
}
.newro-btn.primary { background: #d92d20; border-color: #d92d20; color: #fff; }
.newro-btn.ghost { border-color: transparent; background: transparent; color: #7a1a12; font-weight: 600; }
.newro-btn:disabled { opacity: .6; cursor: wait; }

@keyframes newro-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* The arriving card itself: pulsing red outline + glow. Border colour is
   animated via box-shadow/outline so the card's own layout (both sizes)
   never shifts. */
#board .card.card-new-arrival {
  outline: 3px solid #d92d20;
  outline-offset: -1px;
  animation: newro-card-flash 1.1s ease-in-out infinite;
  position: relative;
}
@keyframes newro-card-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 45, 32, .55), 0 0 18px rgba(217, 45, 32, .45); }
  50% { box-shadow: 0 0 0 5px rgba(217, 45, 32, .12), 0 0 4px rgba(217, 45, 32, .15); }
}
#board .card.card-new-arrival::after {
  content: 'NEW — ASSIGN';
  position: absolute; top: 6px; right: 6px; z-index: 3;
  background: #d92d20; color: #fff; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .06em; padding: 2px 8px;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .newro-dot, #board .card.card-new-arrival { animation: none; }
  #board .card.card-new-arrival { box-shadow: 0 0 0 3px rgba(217, 45, 32, .5); }
}