/* Minimal custom styles on top of Tailwind (Play CDN). */
html { scroll-behavior: smooth; }
body { -webkit-tap-highlight-color: transparent; }

/* Hide scrollbar utility for horizontal tables on small screens if needed. */
::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-thumb { background: rgba(100,116,139,.4); border-radius: 4px; }

/* When a modal is open, prevent body scroll. */
body.modal-open { overflow: hidden; }

/* Highlight rows that appeared in the latest live-panel refresh, so a newly
   added/changed task draws the eye without a manual page reload. */
@keyframes live-row-flash {
  0%   { background-color: rgba(99, 102, 241, .22); } /* brand-500/indigo */
  100% { background-color: transparent; }
}
.is-new { animation: live-row-flash 2.4s ease-out; }

/* When the live poller can't reach the server (network blip, 5xx, expired
   session) it adds .is-stale to #live-panel. The wrapper element itself is
   never replaced (only its innerHTML is swapped on each refresh), so the class
   survives across refreshes and keeps the warning visible until recovery. */
#live-panel.is-stale > :first-child::before {
  content: 'به‌روزرسانی زنده قطع است — در تلاش برای اتصال مجدد…';
  display: block;
  margin-bottom: .75rem;
  padding: .5rem .75rem;
  border-radius: .75rem;
  font-size: .8rem;
  font-weight: 600;
  text-align: center;
  background: rgba(244, 63, 94, .12);   /* rose-500/12 */
  color: #be123c;                       /* rose-700 */
  border: 1px solid rgba(244, 63, 94, .35);
}
.dark #live-panel.is-stale > :first-child::before {
  background: rgba(244, 63, 94, .15);
  color: #fda4af;                       /* rose-300 */
}