/* =============================================================================
   Carte — alignement fidèle sur la maquette Claude Design
   =============================================================================
   Chargé APRÈS design_v2.css : ces règles (même spécificité) affinent le rendu
   du panneau latéral, des cartes KPI, de la liste de comptes et de la légende
   pour reproduire l'aération de la maquette (cartes blanches ombrées, rayon r-3,
   séparateurs au lieu de boîtes denses). Aucune couleur en dur, tokens uniquement.
   La config MapLibre et la géométrie des marqueurs ne sont PAS touchées ici.
   ========================================================================= */

/* ---- Espace de travail : grille + respiration façon maquette ------------- */
.map-workspace {
  gap: var(--tt-s-5);              /* 20px — maquette: 18px arrondi à l'échelle */
}

/* Cartes (panneau latéral + carte) : ombre douce + rayon r-3 de la maquette */
.map-side-panel,
.map-main-panel {
  border-radius: var(--tt-r-3);
  box-shadow: var(--tt-shadow-1);
}

.map-side-panel {
  padding: var(--tt-s-4);          /* 16px */
  gap: var(--tt-s-4);              /* 16px — plus aéré que le 12px d'origine */
}

/* ---- En-têtes panneau / barre carte -------------------------------------- */
.map-panel-title,
.map-main-toolbar {
  gap: var(--tt-s-3);
}

.map-panel-title strong,
.map-main-toolbar strong {
  font-size: var(--tt-fs-14);      /* maquette: titres de carte à 13–14px/600 */
  font-weight: var(--tt-fw-semi);
  letter-spacing: -0.01em;
}

.map-panel-title span,
.map-main-toolbar span {
  margin-top: 3px;
  color: var(--tt-fg-3);
  font-size: var(--tt-fs-12);
}

/* ---- Cartes KPI : surface 2, rayon r-3, valeurs mono lisibles ------------ */
.map-kpi-row {
  gap: var(--tt-s-2);
}

.map-kpi {
  padding: var(--tt-s-3);
  border-radius: var(--tt-r-3);    /* maquette: r-3, pas r-2 */
}

/* design_v2 référence --tt-fs-16 / --tt-fw-semibold qui n'existent pas dans
   tokens.css : on rétablit ici une valeur valide (sinon la taille retombe en
   héritage). Voir sharedChangesNeeded. */
.map-kpi strong {
  font-size: 18px;
  font-weight: var(--tt-fw-bold);
  line-height: var(--tt-lh-tight);
  color: var(--tt-fg);
}

.map-kpi span {
  margin-top: 3px;
  font-weight: var(--tt-fw-medium);
}

.map-kpi em {
  margin-top: 1px;
  color: var(--tt-fg-4);
}

/* ---- Champ de recherche + groupes de boutons ----------------------------- */
.map-search-wrap {
  margin-top: 2px;
}

.map-mode-group,
.map-sector-list {
  gap: var(--tt-s-2);
}

/* ---- Liste des comptes : style "carte unique + séparateurs" de la maquette -
   La maquette regroupe les comptes dans UNE carte blanche, lignes séparées par
   un divider (border-top), padding 10px 8px, gap 11px. On reproduit ce rendu
   en stylant le conteneur comme une carte et les lignes comme des rangées
   plates (suppression des boîtes individuelles denses). */
.map-account-list {
  gap: 0;
  padding: var(--tt-s-1) var(--tt-s-2) var(--tt-s-2);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-3);
  background: var(--tt-surface);
  box-shadow: var(--tt-shadow-1);
}

.map-account-row {
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 11px;
  padding: 10px 8px;
  border: 0;
  border-radius: var(--tt-r-2);
  background: transparent;
}

.map-account-row + .map-account-row {
  border-top: 1px solid var(--tt-divider);
}

.map-account-row:hover {
  background: var(--tt-surface-2);
}

.map-account-row strong {
  font-size: var(--tt-fs-13);
  font-weight: var(--tt-fw-semi);
}

.map-account-row span {
  margin-top: 2px;
  color: var(--tt-fg-3);
  font-size: var(--tt-fs-11);
}

.map-account-row em {
  color: var(--tt-fg-4);
  font-size: var(--tt-fs-11);
}

/* ---- Barre de progression géocodage -------------------------------------- */
.map-geo-bar {
  padding: var(--tt-s-3);
  border-radius: var(--tt-r-3);
}

/* ---- Légende : lisible, séparée, alignée à la maquette ------------------- */
.map-legend {
  gap: var(--tt-s-3) var(--tt-s-4);
  padding-top: var(--tt-s-1);
  color: var(--tt-fg-3);
  font-size: var(--tt-fs-11);
}

.map-legend span {
  gap: 6px;
  font-weight: var(--tt-fw-medium);
}

.map-legend i {
  width: 10px;
  height: 10px;
  border-radius: var(--tt-r-pill);
}

.map-legend em {
  color: var(--tt-fg-4);
}

/* =============================================================================
   Carte — comptes par température commerciale (panneau dédié)
   ========================================================================= */

.map-temp-panel {
  display: flex;
  flex-direction: column;
  gap: var(--tt-s-3);              /* 12px — aéré */
  padding: var(--tt-s-4);          /* 16px, comme les cartes maquette */
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-3);    /* r-3 maquette */
  background: var(--tt-surface);
  box-shadow: var(--tt-shadow-1);
}

.map-temp-panel > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tt-s-3);
}

.map-temp-panel > header strong {
  color: var(--tt-fg);
  font-size: var(--tt-fs-14);
  font-weight: var(--tt-fw-semi);
}

.map-temp-panel > header span {
  color: var(--tt-fg-4);
  font-size: var(--tt-fs-11);
  font-weight: var(--tt-fw-semi);
}

.map-temp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tt-s-2);              /* 8px */
}

.map-temp-col {
  min-width: 0;
  padding: var(--tt-s-3);          /* 12px — aéré */
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-3);
  background: var(--tt-surface-2);
}

.map-temp-head {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: var(--tt-s-2);
  align-items: center;
  margin-bottom: var(--tt-s-2);    /* 8px */
}

.map-temp-head span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tt-accent);
}

.map-temp-col.is-hot .map-temp-head span { background: var(--tt-danger); }
.map-temp-col.is-warm .map-temp-head span { background: var(--tt-warn); }
.map-temp-col.is-cold .map-temp-head span { background: var(--tt-accent); }

.map-temp-head strong {
  color: var(--tt-fg);
  font-size: var(--tt-fs-12);
  font-weight: var(--tt-fw-semi);
}

.map-temp-head em {
  color: var(--tt-fg-3);
  font-family: var(--tt-font-mono);
  font-size: var(--tt-fs-12);
  font-style: normal;
  font-weight: var(--tt-fw-bold);
}

.map-temp-list {
  display: flex;
  flex-direction: column;
  gap: var(--tt-s-1);              /* 4px */
}

.map-temp-list p {
  margin: 0;
  color: var(--tt-fg-4);
  font-size: var(--tt-fs-11);
}

.map-temp-account {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--tt-s-2);
  width: 100%;
  padding: var(--tt-s-2);          /* 8px — un peu plus aéré */
  border: 1px solid transparent;
  border-radius: var(--tt-r-2);
  background: transparent;
  color: var(--tt-fg);
  text-align: left;
  cursor: pointer;
}

.map-temp-account:hover,
.map-temp-account:focus-visible {
  border-color: var(--tt-accent-border);
  background: var(--tt-accent-soft);
  outline: none;
}

.map-temp-account strong,
.map-temp-account span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-temp-account strong {
  font-size: var(--tt-fs-12);
  font-weight: var(--tt-fw-semi);
}

.map-temp-account span {
  grid-column: 1;
  color: var(--tt-fg-3);
  font-size: var(--tt-fs-11);
}

.map-temp-account em {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--tt-fg-2);
  font-family: var(--tt-font-mono);
  font-size: var(--tt-fs-11);
  font-style: normal;
  font-weight: var(--tt-fw-bold);
}