.hazard-stripe {
  background-image: repeating-linear-gradient(
    45deg,
    #ffb703,
    #ffb703 12px,
    #0a0a0a 12px,
    #0a0a0a 24px
  );
}

/* Griglia stile "planimetria di magazzino", usata dietro al video in hero */
.grid-overlay {
  background-image:
    linear-gradient(rgba(255, 183, 3, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 183, 3, 0.07) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Card annunci: comparsa quando entrano in viewport (gestita via JS in home.js) */
.reveal {
  opacity: 0;
}
.reveal.reveal-visible {
  animation: fadeInUp 0.6s ease-out both;
}

/* Transizione tra le pagine: la pagina appena caricata compare con un fade
   verso l'alto; page-exit (aggiunta via JS al click su un link interno) fa
   sfumare quella corrente prima di navigare verso la successiva. */
body {
  animation: page-enter 0.45s ease-out both;
}
body.page-exit {
  animation: page-exit 0.3s ease-in forwards;
}
@keyframes page-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes page-exit {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Sidebar della dashboard: sotto i 768px resta nascosta finché sidebar.js
   non aggiunge .sidebar-open; da 768px in su è sempre visibile tramite
   l'utility md:flex di Tailwind, indipendentemente da questa classe. */
@media (max-width: 767px) {
  #dashboard-sidebar {
    display: none;
  }
  #dashboard-sidebar.sidebar-open {
    display: flex;
    flex-direction: column;
  }
}

/* Transizione della sola area contenuto della dashboard (dashboard-nav.js):
   la sidebar resta ferma, sfuma solo #dashboard-main. content-enter-replay
   serve a far ripartire l'animazione dopo lo scambio via AJAX, perché
   riapplicare la stessa regola d'ingresso sullo stesso elemento non la
   farebbe ripartire da sola. */
#dashboard-main {
  animation: content-enter 0.35s ease-out both;
}
#dashboard-main.content-exit {
  animation: content-exit 0.18s ease-in forwards;
}
#dashboard-main.content-enter-replay {
  animation: content-enter 0.35s ease-out both;
}
@keyframes content-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes content-exit {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Riserva sempre lo spazio della scrollbar verticale, così quando il
   contenuto cambia altezza (filtri, carrello, modale) la larghezza
   utile non "salta" avanti e indietro. La scrollbar resta funzionante
   (necessaria su schermi bassi o con zoom diverso dal 100%) ma sottile
   e discreta invece della barra di sistema, larga e invadente. */
#dashboard-main {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #3f3f46 transparent;
}
#dashboard-main::-webkit-scrollbar {
  width: 6px;
}
#dashboard-main::-webkit-scrollbar-track {
  background: transparent;
}
#dashboard-main::-webkit-scrollbar-thumb {
  background-color: #3f3f46;
  border-radius: 999px;
}
#dashboard-main::-webkit-scrollbar-thumb:hover {
  background-color: #52525b;
}

/* Sidebar della dashboard: stesso trattamento sottile/integrato di
   #dashboard-main sopra, al posto della scrollbar bianca di sistema quando
   il menu è più alto dello schermo. */
#dashboard-sidebar nav {
  scrollbar-width: thin;
  scrollbar-color: #2a2a2a transparent;
}
#dashboard-sidebar nav::-webkit-scrollbar {
  width: 6px;
}
#dashboard-sidebar nav::-webkit-scrollbar-track {
  background: transparent;
}
#dashboard-sidebar nav::-webkit-scrollbar-thumb {
  background-color: #2a2a2a;
  border-radius: 9999px;
}
#dashboard-sidebar nav::-webkit-scrollbar-thumb:hover {
  background-color: #454545;
}

/* Oltre i 9 articoli il carrello diventa una lista con scroll interno
   (l'altezza esatta per mostrarne 9 è calcolata in catalogo.js), invece
   di continuare a crescere e spingere giù il totale/bottone. */
.carrello-scroll {
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding-right: 0.25rem;
}

/* Catalogo: feedback quando un articolo viene aggiunto al carrello */
.animate-pop {
  animation: pop-scale 0.35s ease-out;
}
.animate-badge-bounce {
  animation: badge-bounce 0.4s ease-out;
}
.animate-card-flash {
  animation: card-flash 0.5s ease-out;
}
@keyframes pop-scale {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes badge-bounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.35); }
  60%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}
@keyframes card-flash {
  0%   { box-shadow: 0 0 0 0 rgba(255, 183, 3, 0.6); }
  100% { box-shadow: 0 0 0 10px rgba(255, 183, 3, 0); }
}

/* Catalogo: comparsa della schermata di successo ordine */
.animate-success-pop {
  animation: success-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.animate-code-glow-in {
  animation: code-glow-in 0.6s ease-out 0.15s both;
}
@keyframes success-pop {
  0%   { opacity: 0; transform: scale(0.7); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes code-glow-in {
  0%   { opacity: 0; transform: translateY(6px); text-shadow: none; }
  60%  { opacity: 1; transform: translateY(0); text-shadow: 0 0 4px #ffb703, 0 0 16px #ffb703; }
  100% { opacity: 1; transform: translateY(0); text-shadow: 0 0 4px #ffb703, 0 0 20px rgba(255, 183, 3, 0.4); }
}

/* Dashboard: l'annuncio locale più recente lampeggia sul bordo hazard per
   circa 2s ("notifica critica in arrivo") appena si entra in dashboard —
   4 iterazioni da 0.5s. Il titolo, in aggiunta, si "digita" da solo via JS
   (dashboard.js). */
.animate-alert-flash {
  animation: alert-flash 0.5s ease-in-out 4;
}
@keyframes alert-flash {
  0%, 100% { border-color: rgba(255, 183, 3, 0.4); box-shadow: none; }
  50%      { border-color: #ffb703; box-shadow: 0 0 20px rgba(255, 183, 3, 0.6); }
}

/* Monitoraggio pubblico: overlay ambientale "scanlines" da tubo catodico,
   applicato all'intera pagina (bassissima opacità, solo decorativo). */
.scanlines {
  position: relative;
}
.scanlines::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.035) 0px,
    rgba(255, 255, 255, 0.035) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* Monitoraggio pubblico: piccolo box "sequenza di boot" (monitoraggio.js),
   in flusso normale subito sotto la barra di ricerca — NON a schermo
   intero. Scanlines verdi in scorrimento continuo, contenute nel box
   (position:relative sul box + position:absolute su questo ::before), più
   un leggero sfarfallio CRT solo mentre .boot-active. */
#boot-sequence::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(16, 185, 129, 0.07) 0px,
    rgba(16, 185, 129, 0.07) 1px,
    transparent 1px,
    transparent 3px
  );
  animation: scanline-scroll 6s linear infinite;
}
#boot-sequence.boot-active {
  animation: crt-flicker 0.15s steps(2) infinite;
}
@keyframes scanline-scroll {
  from { background-position: 0 0; }
  to   { background-position: 0 40px; }
}
@keyframes crt-flicker {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.94; }
}

/* Righe della sequenza di boot: nascoste finché monitoraggio.js non
   aggiunge .boot-line-visible una alla volta, in stile "digitazione". */
.boot-line {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}
.boot-line-visible {
  opacity: 1;
  transform: translateY(0);
}
.boot-progress {
  width: 0%;
}
.boot-line-visible .boot-progress {
  width: 100%;
  transition: width 1.1s linear;
}

/* Monitoraggio pubblico: tracciato SVG della rotta di consegna. La linea
   base (grigia, sempre visibile) mostra il percorso intero; la linea
   "energia" (colorata, solo sui segmenti già raggiunti) e la linea
   "flusso" sovrapposta (tratteggio animato) danno l'idea di corrente neon
   che scorre verso la tappa corrente. */
.rotta-linea-base {
  fill: none;
  stroke: #27272a;
  stroke-width: 3;
  stroke-linecap: round;
}
.rotta-linea-energia {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px currentColor);
}
.rotta-linea-flusso {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 2 14;
  opacity: 0.9;
  animation: flusso-energia 1.2s linear infinite;
}
@keyframes flusso-energia {
  to { stroke-dashoffset: -32; }
}

/* Nodo della tappa corrente: anelli radar concentrici che si espandono in
   continuazione (effetto sonar/ping), usando currentColor per adattarsi al
   colore Tailwind di ciascuna tappa. */
.nodo-radar {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 2px solid currentColor;
  opacity: 0;
  animation: radar-ping 2.2s ease-out infinite;
}
@keyframes radar-ping {
  0%   { transform: scale(0.4); opacity: 0.9; }
  70%  { opacity: 0.15; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Nodi raggiunti/corrente: bagliore neon nel colore della tappa. */
.nodo-glow {
  filter: drop-shadow(0 0 6px currentColor);
}

/* Cursore cargo ancorato sulla tappa corrente: leggero "hover" verticale
   più bagliore neon nel colore della tappa. */
.cursore-cargo {
  animation: cursore-bob 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 5px currentColor);
}
@keyframes cursore-bob {
  0%, 100% { transform: translateY(0) translateX(-50%); }
  50%      { transform: translateY(-4px) translateX(-50%); }
}

/* Inbox Segnalazioni: la riga eliminata sfuma e collassa invece di sparire
   di scatto, prima di essere rimossa dal DOM (segnalazioni.js). */
.riga-uscita {
  animation: riga-esce 0.35s ease-in forwards;
  pointer-events: none;
}
@keyframes riga-esce {
  from { opacity: 1; max-height: 60px; }
  to   { opacity: 0; max-height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; overflow: hidden; }
}

/* Panoramica Ordini: la riga di un ordine appena chiuso (Consegnato o
   Annullato) sfuma e collassa prima di sparire dal DOM. La proprietà
   'transition' viene impostata inline da panoramica-ordini.js solo al
   momento della rimozione (non da una classe): '.riga-ordine' usa già
   l'utility Tailwind 'transition' per l'hover, che è uno shorthand — una
   regola CSS qui la sovrascriverebbe invece di sommarsi, rompendo la
   transizione fluida di bordo/sfondo al passaggio del mouse. */
.riga-ordine-uscita {
  opacity: 0;
  pointer-events: none;
}

/* Rispetta la preferenza utente per animazioni ridotte */
@media (prefers-reduced-motion: reduce) {
  body,
  body.page-exit,
  #dashboard-main,
  #dashboard-main.content-exit,
  #dashboard-main.content-enter-replay,
  .animate-title-on,
  .animate-fade-in-up,
  .reveal.reveal-visible,
  .animate-pop,
  .animate-badge-bounce,
  .animate-card-flash,
  .animate-success-pop,
  .animate-code-glow-in,
  .animate-alert-flash,
  #boot-sequence::before,
  #boot-sequence.boot-active,
  .rotta-linea-flusso,
  .nodo-radar,
  .riga-uscita,
  .riga-ordine-uscita {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
  }
  .nodo-radar {
    display: none !important;
  }
  .cursore-cargo {
    animation: none !important;
    transform: translateX(-50%) !important;
    text-shadow: none !important;
  }
  .riga-ordine {
    transition: none !important;
  }
}