/*
 * Shared dashboard styles. Tailwind (Play CDN) handles layout/utilities;
 * this file holds animations + component polish that aren't utility-class friendly.
 * Loaded via <link rel="stylesheet" href="/style.css"> in header.ejs.
 */

body {
  background-color: #0f172a;
  color: #f8fafc;
}

/* ── Custom scrollbar ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

/* slate-850 fallback for sticky cells (defined in tailwind.config too) */
.bg-slate-850 { background-color: #151f32; }

/* ── Toast animations ── */
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.toast-in { animation: toastIn .18s ease-out; }

@keyframes toastOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(8px); }
}
.toast-out { animation: toastOut .25s ease-in forwards; }

/* ── Responsive table sticky-cell helpers ── */
.rt-wrap { -webkit-overflow-scrolling: touch; }
.rt-wrap table { min-width: 100%; }
.rt-wrap thead th { position: sticky; top: 0; z-index: 30; background-color: #0f172a; }
.rt-wrap thead th.sticky { z-index: 40; }
.rt-wrap tbody td.sticky { box-shadow: 2px 0 6px -4px rgba(0,0,0,0.6); }

/* subtle scroll hint on mobile tables */
@media (max-width: 1023px) {
  .rt-wrap { position: relative; }
  .rt-wrap::after {
    content: '';
    position: absolute; top: 0; right: 0; bottom: 0; width: 24px;
    background: linear-gradient(to left, #0f172a, transparent);
    pointer-events: none; opacity: .9;
  }
}

/* ── Modal mobile scroll ── */
.modal-scroll { max-height: 90vh; overflow-y: auto; }

/* ── Drawer transition ── */
#sidebar { transition: transform .25s ease-out; }