/* =============================================================================
 * SONOYA - nb-map.css
 * -----------------------------------------------------------------------------
 * Primitive partagee de carte (SONOYA.maps, sonoya-map.js) : back-office
 * (entrepot, fiche commande) et page publique de suivi. Conteneur a filet 1 px
 * sans ombre, reperes ronds a icone (entrepot sombre, client accent, coursier
 * info), etat de repli quand Google ne repond pas. Mobile-first.
 * ============================================================================= */

@layer components {

  .nb-map {
    position: relative;
    inline-size: 100%;
    block-size: var(--nb-map-h, 240px);
    border: 1px solid var(--nb-color-border);
    border-radius: var(--bo-radius, 6px);
    background: var(--nb-color-surface-alt);
    overflow: hidden;
  }
  .nb-map[hidden] { display: none; }
  .nb-map--picker { --nb-map-h: 220px; cursor: crosshair; }
  .nb-map--route { --nb-map-h: 280px; }
  @media (min-width: 768px) {
    .nb-map--picker { --nb-map-h: 260px; }
    .nb-map--route { --nb-map-h: 340px; }
  }

  /* Repli : la carte n'a pas pu se charger, la saisie reste possible */
  .nb-map__fallback {
    position: absolute; inset: 0;
    display: grid; place-content: center; gap: 4px;
    padding: var(--nb-space-3, 12px);
    text-align: center;
    font-size: 0.8125rem; color: var(--nb-color-text-muted);
  }
  .nb-map__fallback > i { font-size: 1.5rem; justify-self: center; }

  /* Reperes (AdvancedMarkerElement) */
  .nb-map-pin {
    display: grid; place-items: center;
    inline-size: 34px; block-size: 34px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--nb-color-accent);
    color: #fff;
    font-size: 1rem;
    translate: 0 50%;
  }
  .nb-map-pin--hub { background: var(--nb-color-accent); border-radius: 8px; }
  .nb-map-pin--client { background: var(--nb-color-success); }
  .nb-map-pin--courier { background: var(--nb-color-info); inline-size: 38px; block-size: 38px; }
  .nb-map-pin--pick { background: var(--nb-color-accent); }

  /* Recherche de lieu (SONOYA.maps.placeSearch) : champ + liste au-dessus de la carte */
  .nb-map-search {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    color-scheme: light;

    & > i {
      position: absolute;
      inset-inline-start: 12px;
      font-size: 1.1rem;
      color: var(--nb-color-text-muted);
      pointer-events: none;
    }
  }
  .nb-map-search__input {
    inline-size: 100%;
    min-block-size: 44px;
    padding: 10px 12px 10px 38px;
    background: var(--nb-color-surface);
    border: 1.5px solid var(--nb-color-border);
    border-radius: var(--nb-radius-md, 8px);
    font-family: var(--nb-font-body);
    font-size: 1rem;
    color: var(--nb-color-text);
  }
  .nb-map-search__input:focus-visible { outline: none; border-color: var(--nb-color-accent); box-shadow: var(--nb-focus-ring); }
  .nb-map-search__list {
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(100% + 4px);
    z-index: 20;
    max-block-size: 300px;
    margin: 0;
    padding: 4px;
    overflow-y: auto;
    list-style: none;
    background: var(--nb-color-surface);
    border: 1px solid var(--nb-color-border);
    border-radius: var(--nb-radius-md, 8px);
    box-shadow: var(--nb-shadow-md, 0 8px 24px rgb(0 0 0 / 0.12));
  }
  .nb-map-search__list[hidden] { display: none; }
  .nb-map-search__list > li[role="option"] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--nb-radius-sm, 6px);
    cursor: pointer;

    & > i { margin-block-start: 2px; font-size: 1.05rem; color: var(--nb-color-accent); flex-shrink: 0; }
    & > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
    & strong { font-size: 0.875rem; font-weight: 600; color: var(--nb-color-text-strong); }
    & small { font-size: 0.75rem; color: var(--nb-color-text-muted); }
  }
  .nb-map-search__list > li[role="option"]:hover,
  .nb-map-search__list > li[aria-selected="true"] { background: color-mix(in oklch, var(--nb-color-accent) 8%, var(--nb-color-surface)); }
  .nb-map-search__empty { padding: 10px; font-size: 0.8125rem; color: var(--nb-color-text-muted); }

  /* Legende sous la carte : statut jamais porte par la seule couleur (icone + texte) */
  .nb-map-legend {
    display: flex; flex-wrap: wrap; gap: 4px var(--nb-space-3, 12px);
    margin-block-start: 6px;
    font-size: 0.8125rem; color: var(--nb-color-text);
  }
  .nb-map-legend > span { display: inline-flex; align-items: center; gap: 6px; }
  .nb-map-legend i { font-size: 1rem; }
  .nb-map-legend .is-hub { color: var(--nb-color-accent); }
  .nb-map-legend .is-client { color: var(--nb-color-success); }
  .nb-map-legend .is-courier { color: var(--nb-color-info); }
}