/* FuelTrack - tweaks oltre Tailwind CDN
 * Solo regole non realizzabili con utility Tailwind o supporto a CDN.
 * Le @apply sono in index.html dentro <style type="text/tailwindcss">. */

/* Stato attivo del toggle carburante: sovrascrivi colore al volo via inline style.
 * Vedi app.js -> renderFuelToggles() */

/* Skeleton card mentre arrivano i dati */
.price-card-skeleton {
  height: 130px;
  border-radius: 1rem;
  background: linear-gradient(
    90deg,
    rgba(148, 163, 184, 0.12) 0%,
    rgba(148, 163, 184, 0.22) 50%,
    rgba(148, 163, 184, 0.12) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .price-card-skeleton {
    animation: none;
  }
}

/* Tap target minimo 44x44 per pulsanti compatti su mobile */
@media (max-width: 640px) {
  .range-btn {
    min-height: 2.5rem;
  }
}

/* Stile del marker dei <details> compatibile cross-browser */
summary::-webkit-details-marker {
  display: none;
}
summary {
  list-style: none;
}

/* Indicatori chart su sfondo scuro */
@media (prefers-color-scheme: dark) {
  canvas {
    color-scheme: dark;
  }
}

/* Migliora la leggibilita' del chart su touch device */
#price-chart {
  touch-action: pan-y;
}

/* Suggerimenti distributore: sopra le card successive */
.station-v2-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 0.25rem;
  z-index: 50;
}

.station-v2-pick-active {
  background-color: rgb(239 246 255);
  box-shadow: inset 0 0 0 1px rgb(59 130 246);
}

@media (prefers-color-scheme: dark) {
  .station-v2-pick-active {
    background-color: rgb(30 58 138 / 0.25);
    box-shadow: inset 0 0 0 1px rgb(96 165 250);
  }
}

/* Legenda/toggle leggermente piu' compatti su schermi piccoli */
@media (max-width: 640px) {
  #fuel-toggles {
    gap: 0.4rem;
  }
}

/* Badge carburanti: look piu' pulito e leggibile */
.fuel-toggle {
  border-radius: 9999px;
  transition: all 180ms ease;
}

.fuel-toggle:hover {
  transform: translateY(-1px);
}

.fuel-toggle-active {
  font-weight: 600;
  background: rgba(255, 255, 255, 0.92);
}

@media (prefers-color-scheme: dark) {
  .fuel-toggle-active {
    background: rgba(15, 23, 42, 0.9);
  }
}