/* ═══════════════════════════════════════════════════════════════════════════
   Dashboard-home scoped styles (merge-plan §5)
   Only loaded on the home page; rules apply inside `.hk-page[data-dashboard-home]`.
   General .hk-* rules live in _components-override.css and ARE NOT duplicated here.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Transparent ApexCharts canvas under cinematic chart wells */
.hk-page[data-dashboard-home] .hk-chart .apexcharts-canvas,
.hk-page[data-dashboard-home] .hk-chart .apexcharts-svg {
  background: transparent !important;
}

/* In dark mode, drop the soft chart-well surface so charts sit directly on the card */
[data-style="dark"] .hk-page[data-dashboard-home] .hk-chart-well,
html.dark-style .hk-page[data-dashboard-home] .hk-chart-well {
  background: transparent !important;
  border-color: transparent;
  box-shadow: none;
}

/* Bigger stat-dot glow on dark themes — looks great on neon palettes */
[data-style="dark"] .hk-page[data-dashboard-home] .hk-stat-dot,
html.dark-style .hk-page[data-dashboard-home] .hk-stat-dot {
  box-shadow: 0 0 0 1px rgba(0,0,0,.35),
              0 0 12px color-mix(in srgb, currentColor 45%, transparent);
}

/* Neon top border on analytics cards when a high-saturation theme is active.
   Scoped via theme attribute so it ONLY paints on hacker-mode + mesh themes. */
[data-theme="hacker-mode"]         .hk-page[data-dashboard-home] .hk-card-pro,
[data-theme="bioluminescent-mesh"] .hk-page[data-dashboard-home] .hk-card-pro,
[data-theme="aurora-mesh"]         .hk-page[data-dashboard-home] .hk-card-pro {
  position: relative;
}
[data-theme="hacker-mode"]         .hk-page[data-dashboard-home] .hk-card-pro::before,
[data-theme="bioluminescent-mesh"] .hk-page[data-dashboard-home] .hk-card-pro::before,
[data-theme="aurora-mesh"]         .hk-page[data-dashboard-home] .hk-card-pro::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%,
              color-mix(in srgb, var(--zt-primary) 78%, transparent) 28%,
              color-mix(in srgb, var(--zt-info)    72%, transparent) 55%,
              color-mix(in srgb, var(--zt-success) 68%, transparent) 78%,
              transparent 100%);
  opacity: .9; pointer-events: none;
}