/* ============================================================
   MtlTrafic — v248 : ROUTE PLANNER 🧭
   ============================================================ */
/* v272.100/105 (Bob : « je vois toujours pas mes routes ») — DERNIÈRE
   PASSÉE, testée en 320×783 avec screenshot : l'ordre: -1 ne suffisait
   pas (la liste flottait au-dessus du panneau, coupée par le bord de
   l'écran). MAINTENANT : la liste est COLLÉE en haut du panneau en
   position sticky (elle reste visible pendant tout le scroll du
   panneau) + scroll interne. Impossible de la manquer. */
.route-planner.open .rp-savedlist {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--panel, #fff);
  max-height: 38vh;
  box-shadow: 0 6px 16px rgba(13, 18, 38, 0.12);
}
.route-planner {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(430px, 100vw);
  background: var(--panel, #fff);
  z-index: 3200;
  transform: translateX(105%);
  transition: transform 0.28s var(--ease, ease);
  box-shadow: -12px 0 40px rgba(16, 24, 40, 0.18);
  display: flex;
  flex-direction: column;
  padding: 0.9rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.route-planner.open { transform: translateX(0); }
.rp-head { display: flex; align-items: baseline; gap: 0.5rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--accent, #e2492f); }
.rp-head b { font-size: 1.05rem; }
.rp-head span { color: var(--ink-soft, #5d6b7e); font-size: 0.8rem; flex: 1; }
.rp-x { border: 0; background: none; font-size: 1.1rem; cursor: pointer; padding: 0.2rem 0.45rem; border-radius: 8px; }
.rp-x:hover { background: var(--accent-soft, #fdeee6); }

.rp-profiles { display: flex; gap: 0.4rem; margin: 0.7rem 0; }
.rp-profiles button {
  flex: 1; padding: 0.55rem 0; font-size: 1.25rem;
  border: 1.5px solid var(--line, #e6e3db); border-radius: 12px; background: var(--panel-2, #f8f9fd); cursor: pointer;
  transition: all 0.15s ease;
}
.rp-profiles button.on {
  border-color: var(--accent, #e2492f);
  background: var(--accent-soft, #fdeee6);
  box-shadow: inset 0 0 0 1px var(--accent, #e2492f);
}

.rp-toolbar { display: flex; gap: 0.5rem; margin-bottom: 0.7rem; }
.rp-toolbar button {
  flex: 1; padding: 0.5rem; border-radius: 10px; cursor: pointer;
  border: 1.5px solid var(--accent, #e2492f); background: var(--accent-soft, #fdeee6); color: var(--accent-dark, #b93a24);
  font-weight: 700; font-size: 0.82rem;
}
.rp-toolbar .rp-start { background: var(--accent, #e2492f); color: #fff; }

.rp-list { display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.rp-empty { text-align: center; color: var(--ink-soft, #5d6b7e); padding: 2rem 1rem; font-size: 0.9rem; }
.rp-stop {
  border: 1.5px solid var(--line, #e6e3db);
  border-radius: 14px;
  padding: 0.6rem 0.7rem;
  background: var(--panel-2, #f8f9fd);
}
.rp-stop.now { border-color: var(--accent, #e2492f); box-shadow: 0 0 0 2px rgba(226, 73, 47, 0.25); }
.rp-stop.ok { opacity: 0.65; }
.rp-stop.ok .rp-addr-txt { text-decoration: line-through; }
.rp-stop-head { display: flex; align-items: center; gap: 0.4rem; }
.rp-stop-head b { flex: 1; font-size: 0.9rem; }
.rp-badge { font-size: 0.72rem; font-weight: 700; color: var(--accent-dark, #b93a24); background: var(--accent-soft, #fdeee6); padding: 0.15rem 0.5rem; border-radius: 999px; }
.rp-del { border: 0; background: none; cursor: pointer; color: var(--ink-soft, #5d6b7e); font-size: 0.9rem; padding: 0.1rem 0.3rem; }
.rp-del:hover { color: #c0392b; }
.rp-addr-txt { font-size: 0.88rem; margin: 0.2rem 0 0.45rem; }
.rp-lbl { display: block; font-size: 0.72rem; font-weight: 700; color: var(--ink-soft, #5d6b7e); margin: 0.35rem 0 0.15rem; text-transform: uppercase; letter-spacing: 0.03em; }
.rp-stop input[type="text"], .rp-stop input[type="datetime-local"], .rp-stop input[type="number"] {
  width: 100%; padding: 0.42rem 0.55rem; border: 1px solid var(--line, #e6e3db); border-radius: 9px; font-size: 0.86rem; background: #fff;
}
.rp-photo-row { display: flex; gap: 0.35rem; margin-top: 0.5rem; align-items: center; flex-wrap: wrap; }
.rp-photobtn { cursor: pointer; font-size: 0.8rem; font-weight: 700; color: var(--accent-dark, #b93a24); background: var(--accent-soft, #fdeee6); border: 1.5px solid var(--accent, #e2492f); padding: 0.35rem 0.65rem; border-radius: 999px; }
.rp-photobtn input { display: none; }
/* v272.10 : vignette de la photo + bouton d'enregistrement galerie */
.rp-photosave { border: 1px solid var(--line, #e6e3db); background: #fff; border-radius: 999px; font-size: 0.78rem; padding: 0.35rem 0.6rem; cursor: pointer; }
.rp-photosave:hover { background: #eef4ff; border-color: #1a73e8; }
.rp-photo-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; border: 1.5px solid var(--line, #e6e3db); display: block; }
.rp-photo-thumb:active { transform: scale(0.96); }
.rp-ok, .rp-ko { border: 1px solid var(--line, #e6e3db); background: #fff; border-radius: 999px; font-size: 0.78rem; padding: 0.35rem 0.6rem; cursor: pointer; }
.rp-ok:hover { background: #e7f6ec; border-color: #1c8a4c; }
.rp-ko:hover { background: #fdecea; border-color: #c0392b; }
.rp-actions { margin-top: 0.5rem; }
.rp-go { width: 100%; padding: 0.5rem; border: 0; border-radius: 10px; background: var(--ink, #101828); color: #fff; font-weight: 700; cursor: pointer; font-size: 0.85rem; }
.rp-go:hover { background: #1d232b; }

/* v272.79 (Bob) : sur téléphone le bouton + Ajouter sortait de l'écran —
   la rangée passe en COLONNE sous 900px (champ au-dessus, bouton pleine
   largeur en dessous, toujours visible). */
.rp-add { display: flex; gap: 0.4rem; margin: 0.7rem 0 0.4rem; }
.rp-addr { flex: 1; min-width: 0; padding: 0.55rem 0.65rem; border: 1.5px solid var(--line, #e6e3db); border-radius: 10px; font-size: 0.88rem; }
.rp-addbtn { padding: 0.55rem 0.7rem; border: 0; border-radius: 10px; background: var(--accent, #e2492f); color: #fff; font-weight: 700; cursor: pointer; font-size: 0.8rem; white-space: nowrap; }
@media (max-width: 899px) {
  .rp-add { flex-direction: column; }
  .rp-addbtn { width: 100%; min-height: 46px; }
}
.rp-hint { font-size: 0.72rem; color: var(--ink-soft, #5d6b7e); padding-top: 0.4rem; }

/* FAB 🧭 dans la carte (au-dessus de ⛶) — v249 : pile compacte */
#map .planner-fab {
  position: absolute;
  left: 0.7rem;
  bottom: 22.1rem;
  z-index: 1100;
  width: 38px; height: 38px;
  border-radius: 999px;
  border: 1px solid #b9e0c8;
  background: linear-gradient(160deg, #f2fbf5, #d8f3e2);
  box-shadow: var(--shadow-md, 0 4px 14px rgba(16,24,40,0.12));
  font-size: 1.05rem;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* v272.17 : MENU ROUTES (livraison) — Mes routes / Nouvelle / Sauvegarder */
.rp-routes { display: flex; gap: 0.4rem; margin: 0.55rem 0 0.2rem; flex-wrap: wrap; }
.rp-routes button {
  flex: 1 1 auto; min-width: 96px; border: 1px solid var(--line, #e6e3db); background: #fff;
  border-radius: 10px; padding: 0.5rem 0.55rem; font-size: 0.8rem; font-weight: 700; cursor: pointer; color: var(--ink, #101828);
}
.rp-myroutes:hover { background: #eef4ff; border-color: #1a73e8; }
.rp-newroute:hover { background: #e7f6ec; border-color: #1c8a4c; }
.rp-saveroute:hover { background: #fff6e5; border-color: #f5a524; }
.rp-savedlist { border: 1px dashed var(--line, #e6e3db); border-radius: 10px; margin: 0.3rem 0 0.5rem; padding: 0.35rem; max-height: 180px; overflow: auto; }
/* v272.79 (Bob) : rangée route + bouton 🗑️ Supprimer (impossible avant) */
.rp-load-row { display: flex; align-items: center; gap: 0.3rem; }
.rp-load-row .rp-load { flex: 1; }
.rp-del-route {
  border: 1px solid #f2c1bb; background: #fff2f0; color: #c1121f;
  border-radius: 8px; padding: 0.42rem 0.55rem; font-size: 0.82rem; cursor: pointer;
  min-height: 38px; min-width: 40px;
}
.rp-del-route:active { transform: scale(0.95); background: #ffe4e0; }
.rp-load { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 0.45rem 0.5rem; font-size: 0.8rem; cursor: pointer; border-radius: 8px; color: var(--ink, #101828); }
/* v272.18 : le SPAN « (12) » à l'intérieur du bouton volait le clic — appuyer
   sur le texte de la route ne chargeait RIEN (11 appuis rp-myroutes le 24/09).
   Le clic traverse désormais tout le bouton. */
.rp-load * { pointer-events: none; }
.rp-load:hover { background: var(--accent-soft, #fdeee6); }
.rp-load-n { color: var(--ink-soft, #5d6b7e); font-size: 0.72rem; }
/* v272.17 : REFAIRE / SENS INVERSE — en bas de la liste, comme Route Planner */
.rp-redo { display: flex; gap: 0.4rem; margin-top: 0.55rem; }
.rp-redo button {
  flex: 1; border: 1.5px solid var(--accent, #e2492f); background: var(--accent-soft, #fdeee6);
  color: var(--accent-dark, #b93a24); border-radius: 10px; padding: 0.55rem 0.4rem;
  font-size: 0.8rem; font-weight: 800; cursor: pointer;
}
.rp-redo button:hover { background: #fbe0d6; }
.rp-redo button:active { transform: scale(0.97); }
#map .planner-fab:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg, 0 8px 24px rgba(16,24,40,0.18)); }
@media (max-width: 1099px) {
  #map .planner-fab { bottom: 22.1rem; }
}

/* ============================================================
   v272.65 — PAQUET PRO LIVRAISON : statuts horodatés, raisons d'échec,
   ▲▼ réordonnancement, rapport CSV. Icônes différenciées d'un coup d'œil.
   ============================================================ */
.rp-status { font-size: 0.74rem; font-weight: 700; margin: 0.15rem 0; }
.rp-status.ok { color: #0a8f52; }
.rp-status.ko { color: #c1121f; }
.rp-move { display: inline-flex; gap: 2px; margin-left: auto; }
.rp-mv {
  border: 1px solid var(--line, #d9e0ea); background: #fff; color: var(--ink-soft, #5d6b7e);
  border-radius: 6px; width: 24px; height: 24px; font-size: 0.62rem;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.rp-mv:disabled { opacity: 0.3; cursor: default; }
.rp-mv:not(:disabled):hover { background: #eef4ff; border-color: #1a73e8; color: #1a73e8; }
.rp-stop.ko { border-color: rgba(193,18,31,.4); background: #fdf1f0; }
.rp-why, .rp-requeue {
  border: 1px solid var(--line, #d9e0ea); background: #fff; border-radius: 8px;
  padding: 0.3rem 0.5rem; font-size: 0.7rem; font-weight: 700; cursor: pointer;
  color: var(--ink, #101828);
}
.rp-why:hover { background: #fdf1f0; border-color: #c1121f; color: #c1121f; }
.rp-requeue { border-color: #1a73e8; color: #1a73e8; }
.rp-requeue:hover { background: #eef4ff; }
.rp-csvrow { margin-top: 0.5rem; }
.rp-csv-btn {
  width: 100%; border: 1.5px solid #0a8f52; background: #eafaf1; color: #0a6b3d;
  border-radius: 10px; padding: 0.55rem 0.4rem; font-size: 0.82rem; font-weight: 800; cursor: pointer;
}
.rp-csv-btn:hover { background: #d9f5e6; }
.rp-csv-btn:active { transform: scale(0.98); }
/* v272.65 : import liste + partager + total + étoile + skip */
.rp-importshare { display: flex; gap: 0.4rem; margin: 0.4rem 0 0.2rem; }
.rp-importshare button {
  flex: 1; border: 1px solid var(--line, #d9e0ea); background: #fff; color: var(--ink, #101828);
  border-radius: 10px; padding: 0.5rem 0.4rem; font-size: 0.78rem; font-weight: 700; cursor: pointer;
}
.rp-importshare button:hover { background: #eef4ff; border-color: #1a73e8; }
.rp-importbox { margin: 0.4rem 0; }
.rp-importbox textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 0.8rem;
  border: 1px solid var(--line, #d9e0ea); border-radius: 10px; padding: 0.5rem;
  background: var(--bg, #f6f5f1); color: var(--ink, #101828); resize: vertical;
}
.rp-importbox .rp-import-go {
  margin-top: 0.4rem; width: 100%; border: 0; border-radius: 10px; padding: 0.55rem;
  background: #1a73e8; color: #fff; font-weight: 800; font-size: 0.82rem; cursor: pointer;
}
.rp-total {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; font-weight: 800; color: var(--ink-soft, #5d6b7e);
  background: var(--bg, #f6f5f1); border: 1px dashed var(--line, #d9e0ea);
  border-radius: 10px; padding: 0.4rem 0.6rem; margin-bottom: 0.45rem;
}
.rp-star { font-size: 0.9rem; }
.rp-stop.star { border-color: rgba(245, 165, 36, 0.6); box-shadow: inset 3px 0 0 #f5a524; }
.rp-mv[data-act="star"] { color: #b9a24a; }
.rp-skip {
  border: 1px solid var(--line, #d9e0ea); background: #fff; color: var(--ink-soft, #5d6b7e);
  border-radius: 8px; width: 30px; height: 30px; font-size: 0.9rem; cursor: pointer;
  margin-left: auto;
}
.rp-skip:hover { background: #fff8e1; border-color: #f5a524; }