/*
 * Velo dashboard — minimal global styles.
 *
 * The bulk of styling lives in Tailwind utility classes in the templates.
 * This file is for the few things Tailwind can't easily express:
 *   - global font + tabular numerals
 *   - background colors that need to apply BEFORE Tailwind's runtime
 *     compilation finishes (avoids FOUC on first load)
 *   - Chart.js canvas wrapper sizing (Chart.js needs an explicit height
 *     parent or it stretches to fill the document)
 */

:root {
  color-scheme: light;
  --velo-accent: #18181b;
}

html,
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  font-feature-settings: "tnum", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Pre-Tailwind colors so the page isn't visually broken before the CDN
 * script finishes compiling utility classes. */
body {
  background: #ffffff;
  color: #18181b;
}

/* Chart.js canvas wrappers — needs an explicit-height parent. */
.chart-wrap {
  position: relative;
  height: 240px;
  width: 100%;
}
.chart-wrap-sm {
  position: relative;
  height: 160px;
  width: 100%;
}

/* Sortable table affordance — direction arrow. */
table.velo-sortable th[data-dir="asc"]::after {
  content: " ↑";
  color: var(--velo-accent);
}
table.velo-sortable th[data-dir="desc"]::after {
  content: " ↓";
  color: var(--velo-accent);
}

/* Suppress the native <details> disclosure marker on velo-menu popovers
 * (Tailwind's `list-none` covers most browsers but Safari needs the
 * webkit pseudo-element). The chevron icon inside the summary is
 * rendered by the template instead. */
.velo-menu > summary {
  list-style: none;
}
.velo-menu > summary::-webkit-details-marker {
  display: none;
}

/* Keep slide-in side panels (and their backdrop) rendered when their
 * parent <details> is closed so the translate-out transition actually
 * plays. The browser default rule
 *   details:not([open]) > :not(summary) { display: none !important }
 * uses !important so we have to match it to win the cascade. Without
 * !important the element is display:none when closed, and the
 * transform transition has no "before" frame to animate from when
 * the user opens the panel — it just snaps in. */
.velo-menu > .velo-panel,
.velo-menu > .velo-panel-backdrop {
  display: block !important;
}

/* Animated flame for streak */
@keyframes flame-flicker {
  0%, 100% { transform: scaleY(1) scaleX(1); opacity: 1; }
  25% { transform: scaleY(1.1) scaleX(0.95); opacity: 0.85; }
  50% { transform: scaleY(0.95) scaleX(1.05); opacity: 1; }
  75% { transform: scaleY(1.05) scaleX(0.97); opacity: 0.9; }
}
.velo-flame {
  display: inline-block;
  animation: flame-flicker 0.8s ease-in-out infinite;
  transform-origin: bottom center;
}

/* Animated star for active days */
@keyframes star-pulse {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.15) rotate(8deg); opacity: 0.8; }
}
.velo-star {
  display: inline-block;
  animation: star-pulse 2s ease-in-out infinite;
}