/* ================================================================
   App custom styles (plain CSS, loaded via <link>).
   NOTE: the Tailwind v4 Play CDN only compiles content inside
   <style type="text/tailwindcss"> tags in index.html. The ONE
   Tailwind directive this project needs (@custom-variant dark) must
   stay inline in index.html; everything here is plain CSS that the
   browser applies verbatim.
   ================================================================ */

:root { color-scheme: light; }
:root.dark { color-scheme: dark; }

body { font-family: 'Inter', sans-serif; }
.mono { font-family: 'JetBrains Mono', monospace; }

#drawer { transform: translateX(100%); }
#drawer.drawer-open { transform: translateX(0); }

.nav-btn.active { background: #f4f4f5; color: #18181b; }
.dark .nav-btn.active { background: #27272a; color: #fafafa; }

.chip.active { border-color: #d97706; background: #fffbeb; color: #92400e; }
.dark .chip.active { border-color: #d97706; background: #451a03; color: #fbbf24; }

.select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.5rem !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem 1rem;
}
.dark .select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }

@keyframes rowflash { 0%, 60% { background-color: #fef3c7; } 100% { background-color: transparent; } }
@keyframes rowflashDark { 0%, 60% { background-color: #451a03; } 100% { background-color: transparent; } }
.row-flash { animation: rowflash 2.4s ease-out; }
.dark .row-flash { animation: rowflashDark 2.4s ease-out; }

th button { width: 100%; text-align: inherit; }
.sort-arrow { opacity: .35; }
th[aria-sort] .sort-arrow { opacity: 1; }

.no-chartjs .requires-chartjs { display: none !important; }
.no-chartjs #noChartjs { display: block !important; }
#noChartjs { display: none; }