/* public/css/activityModal.css */

/* ===============================
   OVERLAY ATTIVITÀ
   =============================== */

#activityModal {
  position: fixed;
  inset: 0;

  width: 100vw;
  height: 100vh;
  height: 100dvh;

  display: none;

  margin: 0;
  padding: 0;

  overflow: hidden;

  background: rgb(0 0 0 / 92%);

  z-index: 12000;
}

#activityModal.open {
  display: block;
}

/* ===============================
   CONTENITORE
   =============================== */

#activityModalContent {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;
}

#activityModal .activity-modal-wrapper {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;
}

/* ===============================
   MAPPA LEAFLET / MAPBOX
   =============================== */

#activityModal #activityMap {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  margin: 0;
  padding: 0;

  background: #d8d8d8;

  z-index: 1;
}

#activityModal .leaflet-container,
#activityModal .mapboxgl-map {
  width: 100%;
  height: 100%;
}

/*
 * Protegge le tile Leaflet da eventuali
 * regole globali applicate alle immagini.
 */
#activityModal img.leaflet-tile {
  width: 256px !important;
  height: 256px !important;

  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: initial !important;
  filter: none !important;
  background: transparent !important;
}

/* ===============================
   SELETTORE MAPPA SU DESKTOP
   =============================== */

#activityModal
  .activity-map-style-control.leaflet-control-layers-toggle {
  position: fixed;

  top: calc(11px + env(safe-area-inset-top));
  right: calc(72px + env(safe-area-inset-right));
  left: auto;

  z-index: 15000;

  width: auto !important;
  min-width: 0 !important;
  max-width: calc(
    100vw -
    100px -
    env(safe-area-inset-left) -
    env(safe-area-inset-right)
  ) !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  display: block;

  margin: 0;
  padding: 0;

  background-image: none !important;

  border: 0;
  border-radius: 0;

  box-shadow: none;
}

#activityModal .activity-map-style-select {
  min-height: 38px;
  max-width: 220px;

  padding: 7px 32px 7px 10px;

  border: 1px solid rgb(0 0 0 / 20%);
  border-radius: 8px;

  background: rgb(255 255 255 / 96%);
  color: #222;

  font-family: inherit;
  font-size: 13px;
  font-weight: 600;

  box-shadow:
    0 2px 8px
    rgb(0 0 0 / 22%);

  cursor: pointer;
}

#activityModal .activity-map-style-select:focus-visible {
  outline: 3px solid rgb(43 140 255 / 45%);
  outline-offset: 2px;
}

/* ===============================
   CONTROLLI MAPBOX
   =============================== */

#activityModal
  #activityMap
  .mapboxgl-ctrl-top-left {
  top: calc(8px + env(safe-area-inset-top));
  left: calc(8px + env(safe-area-inset-left));

  z-index: 13000;
}

#activityModal
  #activityMap
  .mapboxgl-ctrl-top-left
  .mapboxgl-ctrl {
  margin: 0;
}

#activityModal
  #activityMap
  .mapboxgl-ctrl-group {
  overflow: hidden;

  border-radius: 8px;

  box-shadow:
    0 2px 8px
    rgb(0 0 0 / 25%);
}

/* ===============================
   CONTROLLO ALTEZZA TERRAIN 3D
   =============================== */

#activityModal .activity-terrain-control {
  position: fixed;

  top: calc(8px + env(safe-area-inset-top));
  left: calc(60px + env(safe-area-inset-left));

  z-index: 15000;

  box-sizing: border-box;

  width: 220px;
  height: 38px;

  padding: 0 10px;

  display: flex;
  align-items: center;
  gap: 8px;

  border: 1px solid rgb(0 0 0 / 20%);
  border-radius: 8px;

  background: rgb(255 255 255 / 96%);
  color: #222;

  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;

  box-shadow:
    0 2px 8px
    rgb(0 0 0 / 22%);
}

#activityModal .activity-terrain-control[hidden] {
  display: none !important;
}

#activityModal .activity-terrain-control label {
  flex: 0 0 auto;

  margin: 0;

  white-space: nowrap;
}

#activityModal .activity-terrain-range {
  flex: 1 1 auto;

  min-width: 0;
  height: 20px;

  margin: 0;
  padding: 0;

  cursor: pointer;

  accent-color: #2b8cff;
}

#activityModal
  .activity-terrain-control
  output {
  flex: 0 0 34px;

  min-width: 34px;

  margin: 0;

  font-size: 12px;
  font-weight: 700;

  font-variant-numeric: tabular-nums;

  text-align: right;
  white-space: nowrap;
}

/* ===============================
   PULSANTE INFO ATTIVITÀ
   =============================== */

#activityInfoBtn {
  position: fixed;

  top: calc(60px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));

  width: 44px;
  height: 44px;

  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #0033aa;
  background: #eef4ff;

  border: 1px solid #d0d8ff;
  border-radius: 50%;

  box-shadow:
    0 2px 8px
    rgb(0 0 0 / 35%);

  cursor: pointer;

  font-size: 21px;
  line-height: 1;

  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;

  z-index: 13000;
}

#activityInfoBtn:hover,
#activityInfoBtn.active {
  background: #dfe9ff;
  border-color: #9fb4ff;
}

#activityInfoBtn:active {
  transform: translateY(1px);
}

#activityInfoBtn:focus-visible {
  outline: 2px solid #4c9ffe;
  outline-offset: 2px;
}

/* ===============================
   PULSANTE FOTO
   =============================== */

#activityModal .activity-media-btn {
  position: fixed;

  top: calc(112px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));

  z-index: 13000;

  min-width: 58px;
  min-height: 38px;

  padding: 8px 12px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgb(0 0 0 / 20%);
  border-radius: 9px;

  background: rgb(255 255 255 / 96%);
  color: #222;

  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;

  box-shadow:
    0 2px 8px
    rgb(0 0 0 / 30%);

  cursor: pointer;

  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#activityModal .activity-media-btn:hover {
  background: #f1f5f9;
}

#activityModal .activity-media-btn.active {
  border-color: #2b8cff;
  background: #2b8cff;
  color: #fff;
}

#activityModal .activity-media-btn:active {
  transform: translateY(1px);
}

#activityModal .activity-media-btn:focus-visible {
  outline: 3px solid rgb(43 140 255 / 45%);
  outline-offset: 2px;
}

/* ===============================
   INDICATORE CARICAMENTO TRACCIA
   =============================== */

#activityModal .activity-route-loading {
  position: absolute;

  right: calc(14px + env(safe-area-inset-right));
  bottom: calc(120px + env(safe-area-inset-bottom));

  z-index: 13000;

  display: flex;
  align-items: center;
  gap: 8px;

  max-width: calc(100% - 28px);

  padding: 8px 12px;

  border-radius: 999px;

  background: rgb(20 30 42 / 88%);
  color: #fff;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;

  box-shadow:
    0 2px 10px
    rgb(0 0 0 / 25%);

  pointer-events: none;
}

#activityModal .activity-route-loading.is-error {
  background: rgb(95 25 30 / 92%);
}

#activityModal .activity-route-loading-spinner {
  width: 15px;
  height: 15px;

  flex: 0 0 auto;

  border: 2px solid rgb(255 255 255 / 25%);
  border-top-color: #fff;
  border-radius: 50%;

  animation:
    activity-route-spin
    0.8s linear infinite;
}

@keyframes activity-route-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #activityModal .activity-route-loading-spinner {
    animation: none;
  }
}

/* ===============================
   MARKER MEDIA MAPBOX
   =============================== */

#activityModal .activity-media-mapbox-marker {
  position: relative;

  width: 46px;
  height: 46px;

  padding: 0;

  border: 2px solid #fff;
  border-radius: 7px;

  overflow: hidden;

  background: #fff;

  box-shadow:
    0 2px 8px
    rgb(0 0 0 / 35%);

  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
}

#activityModal .activity-media-mapbox-marker img {
  display: block;

  width: 100%;
  height: 100%;

  max-width: none;

  object-fit: cover;
}

#activityModal .activity-media-mapbox-marker:focus-visible {
  outline: 3px solid rgb(43 140 255 / 60%);
  outline-offset: 2px;
}

#activityModal .activity-media-video-icon {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #fff;

  font-size: 18px;

  background: rgb(0 0 0 / 25%);

  text-shadow:
    0 1px 3px
    rgb(0 0 0 / 80%);

  pointer-events: none;
}

/* ===============================
   MARKER MEDIA LEAFLET
   =============================== */

#activityModal .activity-media-marker,
#activityModal .photo-marker {
  border-radius: 7px;

  box-shadow:
    0 2px 8px
    rgb(0 0 0 / 35%);
}

/* ===============================
   INFORMAZIONI ATTIVITÀ
   =============================== */

#activityModal .activity-modal-info {
  position: absolute;

  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));

  padding: 12px 16px;

  color: #fff;
  background: rgb(0 0 0 / 76%);

  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 12px;

  box-shadow:
    0 4px 16px
    rgb(0 0 0 / 35%);

  pointer-events: none;

  z-index: 12500;
}

#activityModal .activity-modal-title {
  margin: 0 0 4px;

  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

#activityModal .activity-modal-meta {
  margin-top: 2px;

  font-size: 14px;
  line-height: 1.35;

  opacity: 0.95;
}

/* ===============================
   PULSANTE CHIUSURA
   =============================== */

#activityModalClose.modal-close {
  z-index: 16000 !important;
}

/* ===============================
   INFO PANEL SOPRA LA MAPPA
   =============================== */

#infoPanel.open,
#infoPanel[data-open="1"] {
  z-index: 21000 !important;
}

/* ===============================
   VISUALIZZAZIONE MOBILE
   =============================== */

@media (max-width: 768px) {
  /* Informazioni attività */
  #activityModal .activity-modal-info {
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));

    padding: 10px 12px;
  }

  #activityModal .activity-modal-title {
    font-size: 15px;
  }

  #activityModal .activity-modal-meta {
    font-size: 13px;
  }

  /* Pulsante informazioni */
  #activityInfoBtn {
    top: calc(58px + env(safe-area-inset-top));
    right: calc(10px + env(safe-area-inset-right));
  }

  /* Pulsante Foto */
  #activityModal .activity-media-btn {
    top: calc(110px + env(safe-area-inset-top));
    right: calc(10px + env(safe-area-inset-right));
  }

  /* Indicatore caricamento traccia completa */
  #activityModal .activity-route-loading {
    right: calc(8px + env(safe-area-inset-right));
    bottom: calc(112px + env(safe-area-inset-bottom));

    max-width: calc(
      100% -
      16px -
      env(safe-area-inset-left) -
      env(safe-area-inset-right)
    );

    font-size: 11px;
  }

  /*
   * Controllo Altezza Terrain 3D.
   * Si trova a destra dei controlli
   * zoom e bussola di Mapbox.
   */
  #activityModal .activity-terrain-control {
    top: calc(8px + env(safe-area-inset-top));
    left: calc(60px + env(safe-area-inset-left));

    width: min(
      190px,
      calc(
        100vw -
        190px -
        env(safe-area-inset-left) -
        env(safe-area-inset-right)
      )
    );

    height: 44px;

    gap: 6px;
    padding: 0 8px;

    font-size: 11px;
  }

  #activityModal .activity-terrain-control label {
    flex: 0 0 auto;

    margin: 0;

    white-space: nowrap;
  }

  #activityModal .activity-terrain-range {
    flex: 1 1 auto;

    min-width: 45px;
    height: 18px;

    margin: 0;
  }

  #activityModal
    .activity-terrain-control
    output {
    flex: 0 0 30px;

    min-width: 30px;

    font-size: 10px;
  }

  /*
   * Pulsante Layers ufficiale di Leaflet.
   * È posizionato a sinistra della chiusura.
   */
  #activityModal
    .activity-map-style-control.leaflet-control-layers-toggle {
    position: fixed !important;

    top: calc(
      8px +
      env(safe-area-inset-top)
    ) !important;

    right: calc(
      68px +
      env(safe-area-inset-right)
    ) !important;

    left: auto !important;

    z-index: 15000 !important;

    box-sizing: border-box !important;

    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;

    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    border:
      2px solid
      rgb(0 0 0 / 25%) !important;

    border-radius: 9px !important;

    background-color:
      rgb(255 255 255 / 98%) !important;

    background-image:
      url("https://unpkg.com/leaflet@1.9.4/dist/images/layers.png")
      !important;

    background-position:
      center !important;

    background-repeat:
      no-repeat !important;

    background-size:
      26px 26px !important;

    box-shadow:
      0 2px 8px
      rgb(0 0 0 / 35%) !important;

    cursor: pointer !important;
  }

  #activityModal
    .activity-map-style-control.leaflet-control-layers-toggle:hover {
    background-color: #fff !important;
  }

  #activityModal
    .activity-map-style-control.leaflet-control-layers-toggle:active {
    transform: translateY(1px);
  }

  /*
   * Disabilita eventuali vecchie icone
   * create tramite pseudo-elementi.
   */
  #activityModal
    .activity-map-style-control.leaflet-control-layers-toggle::before,
  #activityModal
    .activity-map-style-control.leaflet-control-layers-toggle::after {
    content: none !important;
    display: none !important;
  }

  /*
   * Il select copre completamente il pulsante,
   * ma resta trasparente e cliccabile.
   */
  #activityModal
    .activity-map-style-control
    .activity-map-style-select {
    position: absolute !important;
    inset: 0 !important;

    z-index: 2 !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    opacity: 0 !important;

    cursor: pointer !important;

    appearance: none !important;
    -webkit-appearance: none !important;
  }

  #activityModal
    .activity-map-style-control:focus-within {
    outline:
      3px solid
      rgb(43 140 255 / 50%);

    outline-offset: 2px;
  }
}