/* ════════════════════════════════════════════════════════════════════
   Dashboard polish — global finishing touches.
   Import once in your dashboard (e.g. in page.tsx: `import "./dashboard-polish.css";`)
   These complement the in-component animations in DashboardAnalytics.tsx.
   ════════════════════════════════════════════════════════════════════ */

/* 1. Numbers in DashboardAnalytics use your global --font-display
      (Cabinet Grotesk), already loaded by dashboard.module.css — nothing
      extra to import here. */

/* 2. Smooth, modern scrollbars inside scrollable panels. */
.da-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.18) transparent;
}
.da-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.da-scroll::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.18);
  border-radius: 99px;
}
.da-scroll::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, 0.30); }
.da-scroll::-webkit-scrollbar-track { background: transparent; }

/* 3. Respect users who prefer reduced motion — disable the entrance/hover
      animations rather than forcing movement on them. */
@media (prefers-reduced-motion: reduce) {
  .da-rise { opacity: 1 !important; animation: none !important; }
  .da-card { transition: none !important; }
  .da-card:hover { transform: none !important; }
}

/* 4. Optional: a subtle page-level gradient backdrop behind the dashboard.
      Apply by adding className="da-bg" to your outer dashboard wrapper.
      Comment out if your shell already sets a background. */
.da-bg {
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(139, 20, 212, 0.06), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(74, 0, 128, 0.05), transparent 60%),
    #ffffff;
}