/* Supplements Tailwind: things the CDN build can't express as utilities. */

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

body { font-feature-settings: "cv02", "cv03", "cv04", "cv11"; }

/* ── Collapsed sidebar ──────────────────────────────────────────────────── */
#sidebar { transition: width .2s ease, transform .2s ease; }
.brand-mark { display: none; }

/* Collapsing only applies to the docked rail. Below lg the sidebar is a drawer,
   which must stay full width however the user left it on desktop. */
@media (min-width: 1024px) {
  html.sidebar-collapsed #sidebar { width: 4.5rem; }
  html.sidebar-collapsed #sidebar .nav-text { display: none; }

  /* The wordmark has no icon, so a monogram stands in once the rail narrows. */
  html.sidebar-collapsed #sidebar .brand-mark { display: block; }
  html.sidebar-collapsed #sidebar nav a,
  html.sidebar-collapsed #sidebar #collapse-btn,
  html.sidebar-collapsed #sidebar .flex.h-16 > a { justify-content: center; padding-left: .5rem; padding-right: .5rem; }
  html.sidebar-collapsed #sidebar #collapse-btn svg { transform: rotate(180deg); }

  /* Group headings collapse to a divider rule rather than vanishing outright. */
  html.sidebar-collapsed #sidebar nav p {
    height: 1px; padding: 0; margin: .75rem .5rem; overflow: hidden;
    background: rgba(255, 255, 255, .08);
  }
}

/* ── Mobile tab bar ─────────────────────────────────────────────────────── */
/* Sits above the iOS home indicator rather than under it. */
.mobile-tabs { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ── Scrollbars ─────────────────────────────────────────────────────────── */
.scrollbar-thin { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, .3) transparent; }
.scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, .3); border-radius: 3px; }
.scrollbar-thin::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, .5); }

/* ── Chart polish ───────────────────────────────────────────────────────── */
.chart-svg .grid-line { stroke: rgb(226 232 240); stroke-dasharray: 3 4; stroke-width: 1; }
html.dark .chart-svg .grid-line { stroke: rgb(30 41 59); }
.chart-svg .axis-label { fill: rgb(148 163 184); font-size: 10px; font-weight: 500; }

.chart-area { animation: chart-fade .6s ease-out; }
.chart-line { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: draw 1.2s ease-out forwards; }

@keyframes draw       { to { stroke-dashoffset: 0; } }
@keyframes chart-fade { from { opacity: 0; } to { opacity: 1; } }

.chart-dot { opacity: 0; transition: opacity .15s; }
.chart-hit:hover + .chart-dot,
.chart-hit:hover ~ .chart-dot { opacity: 1; }

/* ── Donut ──────────────────────────────────────────────────────────────── */
.donut-seg { transition: stroke-width .15s ease, opacity .15s ease; }
.donut-seg:hover { stroke-width: 22; }

/* ── Misc ───────────────────────────────────────────────────────────────── */
[data-dismiss] { line-height: 1; font-size: 1.25rem; }

.flash { animation: slide-down .3s ease-out; }
@keyframes slide-down { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Date inputs stay legible in dark mode. */
html.dark input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.7); }

@media print {
  #sidebar, header, .no-print { display: none !important; }
  main { padding: 0 !important; }
}