/* Sign-in bar and toasts from supabridge/auth. Designed for a dark header; override as needed. */
.authbar { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.authbar form { display: flex; gap: 6px; flex-wrap: wrap; }
.authbar form[hidden], .authbar [hidden] { display: none; }
.authbar input { padding: 4px 6px; border: 1px solid #4b5563; border-radius: 4px; background: #1f2937; color: #f9fafb; width: 170px; }
.authbar button { padding: 4px 10px; border: 0; border-radius: 4px; background: #2563eb; color: #fff; cursor: pointer; }
.authbar button[name="up"], .authbar .out { background: #4b5563; }
.authbar .ro { font-size: 12px; color: #fbbf24; }

#toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 100000; }
.toast { padding: 8px 12px; border-radius: 6px; background: #111827; color: #fff; max-width: 420px; box-shadow: 0 4px 12px rgb(0 0 0 / .2); }
.toast.error { background: #b91c1c; }
.toast.success { background: #047857; }

/* Realtime cell flash (smartclient-flash.js): the cells a push changed, rows new to a grid, rows leaving it. The
   script sets each cell's animation inline (name, duration, delay); these are the colors and keyframes. The colors
   are translucent and laid over the cell's own background (selected, rollover, a light or dark skin) with an inset
   shadow; override the variables to change them. */
:root {
  --sb-flash-up: rgb(22 163 74 / .35);
  --sb-flash-down: rgb(220 38 38 / .35);
  --sb-flash: rgb(234 179 8 / .35);
  --sb-flash-new: rgb(37 99 235 / .25);
}
@keyframes sb-flash-up { from { box-shadow: inset 0 0 0 100vmax var(--sb-flash-up); } }
@keyframes sb-flash-down { from { box-shadow: inset 0 0 0 100vmax var(--sb-flash-down); } }
@keyframes sb-flash { from { box-shadow: inset 0 0 0 100vmax var(--sb-flash); } }
@keyframes sb-flash-new { from { box-shadow: inset 0 0 0 100vmax var(--sb-flash-new); } }
@keyframes sb-flash-out { to { opacity: 0; } }
/* reduced motion: no fade, the highlight stays for the whole time, then goes */
@media (prefers-reduced-motion: reduce) {
  [style*="sb-flash"] { animation-timing-function: step-end !important; }
}