/* app.css — refinements layered on top of the Tailwind Play CDN. Most styling
 * lives in utility classes directly in the markup (rendered by components.js);
 * this file only covers things that are awkward to express as utilities. */

body { background-color: #f3f4f6; }

/* Thin, modern scrollbars */
::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Sidebar nav tighter scrollbar */
nav::-webkit-scrollbar { width: 6px; }

/* Native <dialog> backdrop (used by some fallback paths) */
dialog::backdrop { background: rgba(0, 0, 0, 0.4); }

/* Smooth fade-in on view route changes */
#content > * { animation: ap-fade 0.15s ease-out; }
@keyframes ap-fade { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }

/* Table sticky header (used by UI.table) */
table thead th { position: sticky; top: 0; z-index: 1; background-clip: padding-box; }