/* ==========================================================================
   MiMuovo · pagina Order manager
   Ordini in arrivo da ogni canale (mail, PDF, Excel/CSV, WhatsApp, gestionale
   ordini), ordine letto dal documento, canali nel flusso e nel bento.
   La base della pianificazione (om-board) sta in mm.css; qui l’ordine che
   viene assegnato e il telefono dell’autista, come la chat di wa-mockup.js.
   Lo carica anche la pagina Autisti su WhatsApp, per la chat in piccolo del
   flusso (.omw-mini): se cambi quelle regole, controlla anche quella pagina.
   ========================================================================== */
/* le copie ferme delle scene stanno dentro .step: il testo della scena non
   deve prendere la misura dei paragrafi del passo (.step p in mm.css) */
.step :where(.scene) p{font-size:inherit;line-height:inherit;color:inherit;max-width:none}

/* le liste a griglia non si allargano oltre la scena per colpa del testo su una riga */
.scene .rows{grid-template-columns:minmax(0,1fr)}

.om-order .src img{width:11px;height:11px;object-fit:contain;flex-shrink:0}
.om-pad{padding:16px;min-height:430px}

/* ---------- pianificazione: l'ordine, il camion, il messaggio ---------- */
/* l'ordine da assegnare si accende al passo 1; dopo dice a chi è andato */
.om-order.hot{transition:border-color .35s ease,box-shadow .35s ease}
.scene[data-step="1"] .om-order.hot{border-color:#BFE0A0;box-shadow:0 0 0 3px #EAF6DF}
.om-order .om-chip{display:grid;justify-items:start;margin-top:6px}
.om-order .om-chip > .src{grid-area:1/1;margin-top:0;transition:opacity .3s ease,filter .3s ease}
.om-order .om-chip > .src.ok{color:#2F6B12;background:#EAF6DF}
.om-order .om-chip > .src.ok svg{width:11px;height:11px}
.scene[data-step="1"] .om-chip > .src.ok,
.scene:not([data-step="1"]) .om-chip > .src:not(.ok){opacity:0;filter:blur(2px)}
.scene:not([data-step="1"]) .om-chip > .src.ok{transition-delay:.35s}
/* la saturazione del carico, dentro la barra del viaggio */
.om-trip em{margin-left:7px;padding:1px 5px;border-radius:5px;background:rgba(255,255,255,.75);font:700 9.5px/1.4 var(--mono);font-style:normal;color:#2F6B12}
.om-trip.gray{display:block;line-height:26px;text-overflow:ellipsis}
/* nelle corsie strette (passi, telefono) la barra si allarga quanto serve al nome del viaggio, invece di tagliarlo */
.om-trip{min-width:max-content}
/* quando parte il messaggio, il resto della pianificazione fa un passo indietro */
.om-main > .om-row,.om-main > .om-hours{transition:opacity .4s ease}
.scene[data-step="3"] .om-main > .om-row:not(.hot),.scene[data-step="3"] .om-main > .om-hours{opacity:.38}

/* il telefono dell'autista: stesso aspetto della chat di assets/wa-mockup.js */
.om-phone.omw{width:232px;border-radius:30px;padding:6px;background:#3B3F43;box-shadow:0 30px 60px -26px rgba(16,24,20,.55),0 0 0 1px #23262A}
.omw-scr{border-radius:24px;overflow:hidden;background:#EFE7DD;text-align:left}
.omw-scr,.omw-mini{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
.omw-top{display:flex;align-items:center;gap:6px;padding:9px 10px 7px 9px;background:rgba(255,255,255,.72);border-bottom:.5px solid rgba(60,60,67,.14)}
.omw-back{display:flex;color:#007AFF;flex-shrink:0}
.omw-av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;background:#fff;border:.5px solid rgba(60,60,67,.18)}
.omw-av img{width:16px;height:16px}
.omw-who{display:grid;min-width:0;line-height:1.15}
.omw .omw-who b{display:flex;align-items:center;gap:3px;font-size:12px;font-weight:600;color:#000}
.omw .omw-who small{font-size:9.5px;color:#8E8E93}
.omw-msgs{display:flex;flex-direction:column;gap:3px;padding:9px 7px 10px}
.omw-m{max-width:88%;padding:5px 7px 4px;border-radius:11px;font-size:11.5px;line-height:1.35;color:#111B21;box-shadow:0 1px .5px rgba(0,0,0,.13);overflow-wrap:break-word}
.omw-m b{font-weight:600}
.omw-m.omw-in{align-self:flex-start;background:#fff;border-bottom-left-radius:3px}
.omw-m.omw-out{align-self:flex-end;background:#D9FDD3;border-bottom-right-radius:3px;margin-top:3px}
.omw-t{float:right;position:relative;top:3px;margin:5px 0 0 7px;font-size:9px;line-height:1;color:#8696A0;white-space:nowrap}
.omw-m.omw-out .omw-t{color:#6DA57C}
.omw-t i{font-style:normal;letter-spacing:-3px;padding-right:3px;color:#53BDEB}
.omw-qr{align-self:flex-start;width:88%;display:grid;gap:3px}
.omw-qr span{display:block;padding:6px;border-radius:9px;background:#fff;color:#00A5F4;font-size:11.5px;font-weight:500;text-align:center;box-shadow:0 1px .5px rgba(0,0,0,.13);transition:background-color .2s ease}
/* Marco risponde: il tasto si preme, arriva la conferma */
.omw .omw-m.omw-out{opacity:0;transform:translateY(6px) scale(.97);transform-origin:100% 100%;transition:opacity .3s ease,transform .4s var(--ease-out)}
.scene[data-step="3"] .omw .omw-m.omw-out{opacity:1;transform:none;transition-delay:1.5s}
.scene[data-step="3"] .omw-qr span:first-child{background:#E8F4FB;transition-delay:1.2s}
@media (max-width: 700px){
  .om-pad{padding:12px}
  .om-pad .tbl td:nth-child(2){white-space:normal}
  .om-order.ghost{display:none}
  .om-trip{font-size:10px;padding:0 7px}
  .om-trip em{margin-left:5px;padding:1px 4px;font-size:9px}
}

/* flusso: la chat in piccolo */
.fs-ui .omw-mini{display:flex;flex-direction:column;gap:3px;padding:8px 7px;border-radius:11px;background:#EFE7DD}
.omw-mini .omw-m{max-width:94%}
.omw-mini .omw-m.omw-out{opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .4s var(--ease-out)}
.fstage.on .omw-mini .omw-m.omw-out,.fstage.done .omw-mini .omw-m.omw-out{opacity:1;transform:none;transition-delay:.7s}

/* ---------- passo 1: ordini in arrivo ---------- */
.om-in .ui-h h4{font-size:15px}
.om-in-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@media (min-width: 1180px){.om-in-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.om-feed{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;align-content:start}
.om-f{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:11px;border:1px solid #EEF1EA;background:#FCFDFB}
.om-f.on{border-color:#BFE0A0;background:#F4FAEE;box-shadow:0 0 0 3px #EAF6DF}
.om-fl{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#fff;border:1px solid #EEF1EA;flex-shrink:0;color:#3B6E00}
.om-fl img{width:16px;height:16px;object-fit:contain}
.om-fl svg{width:15px;height:15px}
.om-ft{display:grid;flex:1;min-width:0}
.om-ft b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.om-ft small{font-size:10.5px;color:#7E8882;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.om-f em{font-style:normal;font-size:12px;font-weight:700;color:#4c5550;min-width:20px;text-align:right}
.om-parsed{align-self:start}
.om-dl{display:grid;gap:0;margin:0}
.om-dl div{display:grid;grid-template-columns:92px 1fr;gap:10px;padding:7px 0;border-top:1px solid #F1F3EF;font-size:12px}
.om-dl dt{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#8B948E;padding-top:2px}
.om-dl dd{margin:0;color:#20261f;font-weight:600}
/* il campo letto si accende, uno dopo l'altro */
.om-dl dd{transition:background-color .4s ease;border-radius:5px}
.scene[data-step="1"] .om-dl div:nth-child(n) dd{animation:omRead .9s ease both}
.scene[data-step="1"] .om-dl div:nth-child(2) dd{animation-delay:.25s}
.scene[data-step="1"] .om-dl div:nth-child(3) dd{animation-delay:.5s}
.scene[data-step="1"] .om-dl div:nth-child(4) dd{animation-delay:.75s}
@keyframes omRead{0%{background-color:transparent}35%{background-color:#EAF6DF}100%{background-color:transparent}}

/* ---------- flusso: i canali ---------- */
.fs-ui .om-chans{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.fs-ui .om-chans span{display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border-radius:999px;background:#fff;border:1px solid var(--border);font-size:10.5px;font-weight:700;color:var(--ink-soft);white-space:nowrap}
.fs-ui .om-chans span.on{border-color:#BFE0A0;background:var(--green-soft);color:var(--green-deep)}
.fs-ui .om-chans img,.fs-ui .om-chans svg{width:12px;height:12px;object-fit:contain;flex-shrink:0}
.fs-ui .om-chans svg{color:var(--green-deep)}

/* ---------- bento: i canali in grande ---------- */
.om-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.om-tiles span{display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;background:#fff;border:1px solid var(--border);min-width:0}
.om-tiles img,.om-tiles svg{width:22px;height:22px;object-fit:contain;flex-shrink:0}
.om-tiles svg{color:var(--green-deep)}
.om-tiles b{font-size:13.5px;line-height:1.25}
.om-tiles span:last-child{background:var(--green-soft);border-color:#CFE6B4}
.om-tiles span:last-child b{color:var(--green-deep)}
@media (max-width: 600px){.om-tiles{grid-template-columns:1fr 1fr}}
/* il collegamento al gestionale: gli ordini che passano */
.om-link{display:flex;align-items:center}
.om-link > span{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#fff;border:1px solid #CFE6B4;color:var(--green-deep);flex-shrink:0}
.om-link svg{width:20px;height:20px}
.om-link img{width:22px;height:22px}
.om-link i{position:relative;flex:1;height:8px;margin:0 8px;background:repeating-linear-gradient(90deg,#9CCB6E 0 6px,transparent 6px 11px) center/100% 2px no-repeat;overflow:hidden}
.om-link em{position:absolute;inset:0;animation:omFlow 2.4s var(--ease-io) infinite}
.om-link em::after{content:"";position:absolute;right:0;top:0;width:8px;height:8px;border-radius:50%;background:var(--green)}
@keyframes omFlow{0%{transform:translateX(-100%);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateX(0);opacity:0}}
@media (prefers-reduced-motion: reduce){.om-link em{animation:none;opacity:0}}
@media (prefers-reduced-motion: reduce){
  .scene[data-step="1"] .om-dl dd{animation:none}
  .omw .omw-m.omw-out,.omw-mini .omw-m.omw-out,.om-chip > .src{transition:none}
}

/* la pianificazione nella colonna dei passi è stretta (500-620px tra 980 e
   1440px di schermo): colonne più strette e barre in corpo minore, così il
   viaggio di Marco e il chip "Assegnato a FL483KT" non vengono tagliati */
@media (min-width: 980px){
  .steps-vis .om-board{grid-template-columns:180px minmax(0,1fr)}
  .steps-vis .om-side{padding:12px 10px}
  .steps-vis .om-main{padding:12px}
  .steps-vis .om-row{grid-template-columns:84px minmax(0,1fr)}
  .steps-vis .om-hours{grid-template-columns:84px repeat(6,1fr)}
  .steps-vis .om-trip{font-size:10px;padding:0 5px}
  .steps-vis .om-trip em{margin-left:5px;padding:1px 4px;font-size:9px}
  /* il telefono un po' più piccolo: lascia liberi i nomi degli autisti */
  .steps-vis .om-phone{scale:.9;transform-origin:100% 100%}
}

/* correzione locale: su telefono le ore della pianificazione restano in riga
   (in mm.css .om-hours prende le colonne di .om-row e va a capo) e le corsie
   hanno spazio per il nome del viaggio */
@media (max-width: 700px){
  .om-main{padding:12px}
  .om-row{grid-template-columns:82px minmax(0,1fr)}
  .om-hours{grid-template-columns:82px repeat(6,1fr)}
}

/* correzione locale: su telefono la colonna dei passi non si allarga oltre
   lo schermo per colpa del contenuto delle scene (in mm.css .steps usa 1fr) */
@media (max-width: 979px){.steps{grid-template-columns:minmax(0,1fr)}}

/* prefattura dei passi: gli altri viaggi chiusi del mese in una riga sola */
.om-more td{color:var(--ink-dim,#8B948E);font-size:12px}