/* ============================================================
   GEOINFOWORLD
   Spatial Interaction Core v1
   ============================================================ */


/* ------------------------------------------------------------
   FLOATING SPATIAL TOOL DOCK
   ------------------------------------------------------------ */

.giw-spatial-dock {
  position: absolute;

  left: 14px;
  top: 62px;

  z-index: 76;

  display: flex;
  flex-direction: column;

  gap: 5px;

  padding: 5px;

  border:
    1px solid rgba(190,220,240,.14);

  border-radius: 12px;

  background:
    rgba(5,16,28,.78);

  backdrop-filter:
    blur(16px)
    saturate(125%);

  box-shadow:
    0 14px 38px
    rgba(0,0,0,.24);
}


.giw-spatial-dock-group {
  display: grid;

  gap: 4px;

  padding-bottom: 5px;

  border-bottom:
    1px solid rgba(190,220,240,.08);
}


.giw-spatial-dock-group:last-child {
  padding-bottom: 0;

  border-bottom: 0;
}


.giw-spatial-tool {
  position: relative;

  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  cursor: pointer;

  padding: 0;

  border:
    1px solid transparent;

  border-radius: 8px;

  color:
    #96abba;

  background:
    transparent;

  font-size: 15px;

  transition:
    .15s ease;
}


.giw-spatial-tool:hover {
  color: #ffffff;

  border-color:
    rgba(69,212,255,.22);

  background:
    rgba(69,212,255,.08);
}


.giw-spatial-tool.is-active {
  color: #bff3ff;

  border-color:
    rgba(69,212,255,.42);

  background:
    rgba(69,212,255,.13);

  box-shadow:
    inset 0 0 16px
    rgba(69,212,255,.04);
}


/* ------------------------------------------------------------
   TOOLTIP
   ------------------------------------------------------------ */

.giw-spatial-tool::after {
  content:
    attr(data-tooltip);

  position: absolute;

  left: 45px;

  top: 50%;

  transform:
    translateY(-50%);

  z-index: 200;

  display: none;

  width: max-content;

  max-width: 220px;

  padding:
    6px 8px;

  border:
    1px solid rgba(190,220,240,.12);

  border-radius: 7px;

  color:
    #c8dae8;

  background:
    rgba(5,16,28,.94);

  box-shadow:
    0 8px 24px rgba(0,0,0,.25);

  font-size:
    .65rem;

  pointer-events: none;
}


.giw-spatial-tool:hover::after {
  display: block;
}


/* ------------------------------------------------------------
   COORDINATE PROBE
   ------------------------------------------------------------ */

.giw-coordinate-marker {
  width: 18px;
  height: 18px;

  border:
    2px solid #45d4ff;

  border-radius: 50%;

  background:
    rgba(69,212,255,.14);

  box-shadow:
    0 0 0 5px
    rgba(69,212,255,.08);
}


.giw-coordinate-card {
  display: grid;

  gap: 8px;
}


.giw-coordinate-value {
  padding: 10px;

  border:
    1px solid rgba(69,212,255,.16);

  border-radius: 9px;

  color:
    #cbf3ff;

  background:
    rgba(69,212,255,.055);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;

  font-size:
    .76rem;
}


.giw-coordinate-actions {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 6px;
}


/* ------------------------------------------------------------
   BOOKMARKS
   ------------------------------------------------------------ */

.giw-bookmark-list {
  display: grid;

  gap: 6px;

  margin-top: 9px;
}


.giw-bookmark {
  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    auto
    auto;

  align-items: center;

  gap: 6px;

  padding: 8px;

  border:
    1px solid rgba(180,210,240,.09);

  border-radius: 8px;

  background:
    rgba(255,255,255,.018);
}


.giw-bookmark-title {
  overflow: hidden;

  color: #b8ccdb;

  font-size: .7rem;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.giw-bookmark button {
  min-height: 26px;

  padding:
    3px 7px;

  cursor: pointer;

  border:
    1px solid rgba(180,210,240,.10);

  border-radius: 6px;

  color: #8198ab;

  background:
    rgba(255,255,255,.02);

  font-size: .62rem;
}


/* ------------------------------------------------------------
   TRANSIENT TOAST
   ------------------------------------------------------------ */

.giw-map-toast {
  position: absolute;

  left: 50%;
  bottom: 66px;

  z-index: 150;

  transform:
    translateX(-50%)
    translateY(8px);

  opacity: 0;

  padding:
    7px 10px;

  border:
    1px solid rgba(190,220,240,.14);

  border-radius: 8px;

  color: #d9edf8;

  background:
    rgba(5,16,28,.91);

  backdrop-filter:
    blur(12px);

  box-shadow:
    0 12px 32px rgba(0,0,0,.26);

  font-size: .68rem;

  pointer-events: none;

  transition:
    opacity .16s ease,
    transform .16s ease;
}


.giw-map-toast.is-visible {
  opacity: 1;

  transform:
    translateX(-50%)
    translateY(0);
}


/* ------------------------------------------------------------
   FULLSCREEN
   ------------------------------------------------------------ */

.giw-app-shell:fullscreen {
  width: 100vw !important;
  height: 100vh !important;
}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 700px) {

  .giw-spatial-dock {
    top: auto;

    bottom: 58px;

    flex-direction: row;

    overflow-x: auto;

    max-width:
      calc(100vw - 28px);
  }


  .giw-spatial-dock-group {
    display: flex;

    padding-right: 5px;
    padding-bottom: 0;

    border-right:
      1px solid rgba(190,220,240,.08);

    border-bottom: 0;
  }

}