/* ==========================================================================
   Stat-box hover animation.
   Targets the headline KPI cards on the Dashboard and the StatCards on the
   Carpool pages (Bookings / Trips). Both are `.card.custom-card` wrapping a
   `.card-item`; the chart cards and list cards have no `.card-item`, so
   `:has(.card-item)` hits exactly the stat boxes and nothing else.

   Effect: a subtle lift + deeper shadow on hover, with the icon chip popping
   slightly — a standard, restrained "interactive card" feel. Works in both
   themes; dark mode adds a teal edge + icon glow to match the chart palette.
   (Uses :has(), supported in all current evergreen browsers.)
   ========================================================================== */

.card.custom-card:has(.card-item) {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card.custom-card:has(.card-item) .card-item-icon {
  transition: transform 0.2s ease, background 0.2s ease;
}

.card.custom-card:has(.card-item):hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.14);
}
.card.custom-card:has(.card-item):hover .card-item-icon {
  transform: scale(1.08);
}

/* Dark mode — deeper shadow, a teal edge, and a brighter icon chip on hover so
   the lift reads on the AMOLED-black surface and stays on-palette. */
body.dark-theme .card.custom-card:has(.card-item):hover {
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.6);
  border-color: rgba(97, 205, 187, 0.5) !important;
}
body.dark-theme .card.custom-card:has(.card-item):hover .card-item-icon.card-icon {
  background: rgba(97, 205, 187, 0.28) !important;
}

/* Respect users who prefer reduced motion — keep the shadow/edge cue, drop the
   movement. */
@media (prefers-reduced-motion: reduce) {
  .card.custom-card:has(.card-item):hover,
  .card.custom-card:has(.card-item):hover .card-item-icon {
    transform: none;
  }
}