/* dl-app web UI custom styles. Tailwind utility classes do most of the work;
   this file holds tweaks that are easier outside utility soup. */

/* iOS safe-area aware padding for the bottom tab bar */
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0); }
.pt-safe { padding-top: env(safe-area-inset-top, 0); }

/* HTMX request indicator */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }

/* Subtle hover lift on interactive cards */
.card-hover { transition: transform 120ms ease, box-shadow 120ms ease; }
.card-hover:hover { transform: translateY(-1px); }

/* Heatmap cell tooltips */
.heatmap-cell { transition: transform 120ms ease; }
.heatmap-cell:hover { transform: scale(1.05); z-index: 10; }

/* Custom scrollbar in dark mode */
@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.3); border-radius: 4px; }
}

/* Animated countdown */
@keyframes pulse-emerald {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
}
.pulse-emerald { animation: pulse-emerald 2s ease-in-out infinite; }