/*
 * EmlogStudio daylight statistic fusion refinement.
 *
 * Keep the card surface deliberately solid. The moving material comes only
 * from stats-fusion.js' WebGL canvas, so custom four-colour palettes remain
 * visible without reintroducing a CSS gradient underneath them.
 */

html[data-theme="light"] body.emstudio-view-home .stats-style-fusion {
  --em-day-stat-paper: #ffffff;
  --em-day-stat-ink: #14394a;
  --em-day-stat-muted: #557987;
  --em-day-stat-line: rgba(17, 94, 122, .18);
  --em-day-stat-line-hover: rgba(7, 126, 116, .34);
  --em-day-stat-shadow: 0 10px 24px rgba(20, 82, 108, .10);
}

/* No theme-specific geometry lives in this layer: day/night keep the exact
 * same grid, padding and card height. Only the daylight material changes. */
html[data-theme="light"] body.emstudio-view-home .stats-style-fusion .stat-card {
  color: var(--em-day-stat-ink);
  background: var(--em-day-stat-paper);
  border-color: var(--em-day-stat-line);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    var(--em-day-stat-shadow);
}

/* The former decorative CSS washes are removed. WebGL is intentionally kept
 * enabled; this is the single source of colour movement in daylight mode. */
html[data-theme="light"] body.emstudio-view-home .stats-style-fusion .stat-card::after {
  content: none;
}

html[data-theme="light"] body.emstudio-view-home .stats-style-fusion .stat-card::before {
  border-top-color: rgba(var(--stat-fluid-a), .23);
  box-shadow: none;
}

/* The shader already reserves the left side as a paper area for copy. Raising
 * canvas opacity here restores the clear, luminous palette seen in KTBOY while
 * the solid white card keeps text calm and legible. */
html[data-theme="light"] body.emstudio-view-home .stats-style-fusion .stat-fusion-canvas,
html[data-theme="light"] body.emstudio-view-home .stats-style-fusion .stat-card.is-fusion-webgl-ready .stat-fusion-canvas {
  opacity: .96;
  filter: saturate(1.36) contrast(1.045);
}

/* Do not layer a static radial/linear fallback over a live WebGL material.
 * When WebGL is unavailable, the card intentionally remains a clean white
 * statistic surface instead of becoming a separate CSS-gradient design. */
html[data-theme="light"] body.emstudio-view-home .stats-style-fusion .stat-fusion-field,
html[data-theme="light"] body.emstudio-view-home .stats-style-fusion .stat-card.is-fusion-webgl-ready .stat-fusion-field {
  display: none;
  opacity: 0;
}

html[data-theme="light"] body.emstudio-view-home .stats-style-fusion :is(.stat-label, .stat-number) {
  color: var(--em-day-stat-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .88);
}

html[data-theme="light"] body.emstudio-view-home .stats-style-fusion :is(.stat-number small, .stat-trend) {
  color: var(--em-day-stat-muted);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .82);
}

html[data-theme="light"] body.emstudio-view-home .stats-style-fusion .stat-trend b {
  color: #087b70;
}

html[data-theme="light"] body.emstudio-view-home .stats-style-fusion .stat-icon {
  color: #087b70;
  background: rgba(255, 255, 255, .82);
  border-color: rgba(9, 122, 112, .20);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 4px 10px rgba(20, 82, 108, .07);
}

html[data-theme="light"] body.emstudio-view-home .stats-style-fusion .alert-card .stat-icon {
  color: #c54f50;
  background: rgba(255, 250, 249, .88);
  border-color: rgba(197, 79, 80, .19);
}

@media (hover: hover) {
  html[data-theme="light"] body.emstudio-view-home .stats-style-fusion .stat-card:hover {
    border-color: var(--em-day-stat-line-hover);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .98),
      0 14px 28px rgba(20, 82, 108, .14);
  }

  html[data-theme="light"] body.emstudio-view-home .stats-style-fusion .stat-card:hover .stat-fusion-canvas {
    filter: saturate(1.48) contrast(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="light"] body.emstudio-view-home .stats-style-fusion .stat-fusion-canvas {
    filter: saturate(1.28) contrast(1.035);
  }
}