/* === GLOBAL LAYOUT === */

/* Account for bottom navbar so globe isn't hidden */

/* === RESPONSIVE GLOBE HEIGHT === */
.globe {
  position: relative;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  padding-bottom: 70px; /* still leaves room for navbar */
  background-color: black;
  overflow: hidden;
}

/* Globe overlays should sit above the globe and navbar */
.globe-overlay {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
}

/* === CARDS, MODALS, & COMPONENTS === */

.globe-card {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.modal-dialog { margin: 0 auto; }
.modal-content { max-height: 100vh; }
.modal-body { max-height: 90vh; }
.modal-body-canvas { max-height: 200px; height: 30vh; }
.modal-body-table { max-height: calc(60vh - 71px); overflow-y: auto; }

/* === USER INPUT PROTECTION === */
.noninteractive {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  pointer-events: none;
}
.interactive {
  pointer-events: auto !important;
}

/* === WORLDWIND ELEMENT ADJUSTMENTS === */

/* Lift compass and coordinate overlay above navbar */
.worldwind-compass {
  bottom: 80px !important; /* raise compass */
  right: 20px !important;
}
.worldwind-coord-display {
  bottom: 70px !important; /* above navbar */
  left: 15px !important;
}

/* === SPEED CONTROL BOX === */
#speedControls {
  position: absolute;
  bottom: 100px;   /* lifted above navbar */
  right: 20px;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px 15px;
  border-radius: 8px;
  color: white;
  text-align: center;
  font-size: 0.9rem;
}

@media (max-height: 600px) {
  .globe {
    padding-bottom: 55px;
  }
  #speedControls {
    bottom: 85px;
  }
}