/* =============================================================================
   TerraTrack - Tournee visual completion
   -----------------------------------------------------------------------------
   Fidelite maquette Claude Design (section data-view="tournee").
   Charge APRES design_v2.css / redesign.css : ce fichier a le dernier mot dans
   la cascade pour les classes propres a l'ecran Tournee (meme specificite).
   Toutes les valeurs sont reportees de la maquette ; aucune couleur en dur,
   tokens --tt-* uniquement. Les selecteurs (.tournee-row, .tour-rank, etc.)
   sont ceux deja emis par src/modules/tournees.js : on restyle, on ne renomme
   jamais.
   ============================================================================= */

.tournee-empty {
  padding: var(--tt-s-16) var(--tt-s-5);
}

.tournee-page {
  display: flex;
  flex-direction: column;
  gap: var(--tt-s-5);
}

.tournee-page > .card {
  width: 100%;
  margin: 0;
  padding: 0;
}

.tournee-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--tt-s-3);
}

.tournee-stat {
  min-height: 104px;
  padding: var(--tt-s-4);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-3);
  background: var(--tt-surface);
  box-shadow: var(--tt-shadow-1);
}

.tournee-stat span {
  display: block;
  color: var(--tt-fg-3);
  font-size: var(--tt-fs-11);
  font-weight: var(--tt-fw-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tournee-stat strong {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: var(--tt-s-2);
  color: var(--tt-fg);
  font-family: var(--tt-font-mono);
  font-size: var(--tt-fs-24);
  font-weight: var(--tt-fw-bold);
}

.tournee-stat em {
  color: var(--tt-fg-3);
  font-family: var(--tt-font-sans);
  font-size: var(--tt-fs-13);
  font-style: normal;
  font-weight: var(--tt-fw-semi);
}

/* -----------------------------------------------------------------------------
   Carte feuille de route : la maquette aere fortement les etapes.
   Padding interne carte = 6px 18px 16px ; chaque etape = padding 14px 0.
   On reporte ces valeurs sur le tableau existant (cellules) pour passer du
   rendu dense actuel (10px 14px) au rendu aere de la maquette.
   --------------------------------------------------------------------------- */
.tournee-table-card .card-body,
.tournee-table-card .card-body-flush {
  padding: 0 18px; /* gouttieres laterales de la maquette */
}

/* -----------------------------------------------------------------------------
   Pastille numerotee (maquette : cercle 26px, etape active = accent plein,
   etapes suivantes = surface-3 / texte fg-2, chiffre mono 12px/700).
   Le template emet .tour-rank-wrap > (.tt-temp + .tour-rank). On promeut
   .tour-rank en pastille ronde 26px et on retire le carre dense d'origine.
   --------------------------------------------------------------------------- */
.tour-rank-wrap {
  gap: 0;
}

/* La pastille temperature minuscule du wrap fait double emploi avec la
   pastille numerotee : on la masque pour coller a la maquette (un seul
   marqueur rond par etape). La classe reste presente (JS/temperature). */
.tour-rank-wrap .tt-temp {
  display: none;
}

.tour-rank {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: var(--tt-surface-3);
  color: var(--tt-fg-2);
  font-family: var(--tt-font-mono);
  font-size: var(--tt-fs-12);
  font-weight: var(--tt-fw-bold);
}

/* Premiere etape mise en avant comme dans la maquette (pastille accent). */
.tournee-row:first-child .tour-rank {
  background: var(--tt-accent);
  color: var(--tt-fg-on-accent);
}

/* -----------------------------------------------------------------------------
   Cellule "Compte" : titre 14px/600, sous-ligne 12px fg-3 espacee de 2px,
   conformement aux etapes de la maquette.
   --------------------------------------------------------------------------- */
.tour-link {
  font-size: var(--tt-fs-14);
  font-weight: var(--tt-fw-semi);
}

.tour-sub {
  margin-top: 2px;
  font-size: var(--tt-fs-12);
  color: var(--tt-fg-3);
}

/* Heure / trajet en mono discret (maquette : mono 12px fg-4). */
.tournee-table td.num,
.tournee-table td .num {
  font-family: var(--tt-font-mono);
}

.tournee-table td .tour-sub.num {
  color: var(--tt-fg-4);
}

/* Score terrain : barres + ratio mono, aere (maquette : valeurs mono fg-4). */
.tour-score {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.tour-score .num {
  font-size: var(--tt-fs-12);
  color: var(--tt-fg-4);
}

/* -----------------------------------------------------------------------------
   Panneau carte (maquette : hauteur 200px, coins arrondis r-3, ombre 1).
   --------------------------------------------------------------------------- */
.tournee-page .mini-map {
  height: clamp(420px, 46vh, 560px);
  border-radius: var(--tt-r-3);
  border: 1px solid var(--tt-border);
  background: var(--tt-surface-2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}

.tournee-map-card .card-body {
  padding: var(--tt-s-5);
}

.tournee-map-card .card-header {
  padding: 16px 18px;
  background: var(--tt-surface);
}

.tournee-map-card .tour-mini-map {
  min-height: 100%;
}

.tour-mini-map {
  width: 100%;
  height: 100%;
  min-height: 320px;
  overflow: hidden;
  border-radius: 10px;
}

.tour-mini-map-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 320px;
  padding: 28px 16px;
  color: var(--tt-fg-3);
  font-size: var(--tt-fs-13);
  text-align: center;
}

.tour-mini-map-empty-icon {
  opacity: 0.5;
}

.tour-mini-map-empty small {
  color: var(--tt-fg-4);
  font-size: var(--tt-fs-11);
}

.tour-mini-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 3px solid var(--tt-surface);
  border-radius: 50%;
  background: var(--tt-accent);
  box-shadow: 0 4px 14px rgba(15,17,21,0.28);
  color: var(--tt-fg-on-accent);
  cursor: pointer;
  font-family: var(--tt-font-mono);
  font-size: var(--tt-fs-12);
  font-weight: var(--tt-fw-bold);
}

.tour-mini-marker:hover {
  background: var(--tt-accent-hover);
}

/* ---------------------------------------------------------------------------
   Timeline finale HANDOFF_2 : le JS emet maintenant une liste d'etapes, mais
   conserve .tournee-row / .tour-nav / .tour-report / .tour-remove pour les hooks.
   ------------------------------------------------------------------------- */
.tournee-route-head {
  align-items: flex-start;
  gap: var(--tt-s-4);
  padding: 16px 18px;
}

.tournee-route-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.tournee-head-sub {
  margin-top: 3px;
  color: var(--tt-fg-3);
  font-size: var(--tt-fs-12);
  line-height: var(--tt-lh-normal);
}

.tournee-chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.tournee-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-pill);
  background: var(--tt-surface-2);
  color: var(--tt-fg-2);
  font-size: var(--tt-fs-11);
  font-weight: var(--tt-fw-medium);
  white-space: nowrap;
}

.tournee-timeline {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tournee-step {
  display: grid;
  grid-template-columns: 22px 30px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--tt-divider);
  cursor: pointer;
}

.tournee-step:hover,
.tournee-step:focus-visible {
  background: linear-gradient(90deg, transparent, var(--tt-surface-2), transparent);
  outline: none;
}

.tournee-step:last-child {
  border-bottom: none;
}

.tour-step-drag {
  display: grid;
  place-items: center;
  width: 22px;
  height: 26px;
  color: var(--tt-fg-4);
}

.tour-step-marker {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 82px;
}

.tour-step-line {
  position: absolute;
  top: 32px;
  bottom: -14px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: var(--tt-divider);
}

.tournee-step:last-child .tour-step-line {
  display: none;
}

.tour-step-main {
  min-width: 0;
}

.tour-step-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.tour-step-top .tour-link {
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-temp-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: var(--tt-r-pill);
  font-size: 10px;
  font-weight: var(--tt-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tour-temp-badge--hot {
  background: var(--tt-danger-soft);
  color: var(--tt-danger);
}

.tour-temp-badge--warm {
  background: var(--tt-warn-soft);
  color: var(--tt-warn);
}

.tour-temp-badge--cold {
  background: var(--tt-accent-soft);
  color: var(--tt-accent);
}

.tour-step-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
}

.tour-step-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-pill);
  background: var(--tt-bg);
  color: var(--tt-fg-2);
  font-size: var(--tt-fs-11);
  font-weight: var(--tt-fw-medium);
}

.tour-contact {
  margin-top: 8px;
}

.tour-step-actions {
  justify-content: flex-end;
  margin-top: 0;
  white-space: nowrap;
}

.tournee-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tt-s-3);
  padding: 14px 18px;
  border-top: 1px solid var(--tt-divider);
}

.tournee-footer > span {
  color: var(--tt-fg-3);
  font-size: var(--tt-fs-12);
}

.tournee-footer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.tournee-map-card {
  border-radius: var(--tt-r-3);
  box-shadow: var(--tt-shadow-1);
  overflow: hidden;
}

@media (max-width: 1100px) {
  .tournee-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .tournee-stats-grid {
    grid-template-columns: 1fr;
  }

  .tournee-route-head {
    flex-direction: column;
  }

  .tournee-chip-row {
    justify-content: flex-start;
  }

  .tournee-table-card .card-body,
  .tournee-table-card .card-body-flush {
    padding-inline: var(--tt-s-4);
  }

  .tournee-step {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
  }

  .tour-step-drag,
  .tour-step-actions {
    display: none;
  }

  .tour-step-marker {
    grid-column: 1;
    grid-row: 1;
  }

  .tour-step-main {
    grid-column: 2;
  }

  .tournee-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .tournee-footer-actions {
    justify-content: flex-start;
  }

  .tournee-page .mini-map {
    height: 62vh;
    min-height: 380px;
  }

  .tournee-map-card .card-body {
    padding: var(--tt-s-3);
  }
}