/* Only what Bootstrap 5.3 utilities cannot express: full-bleed map geometry,
   the centre crosshair, touch target sizes, and the Leaflet marker resets.
   All layout (flex, spacing, borders, colours) lives in the templates as
   Bootstrap classes. */

html,
body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

#app {
  height: 100%;
}

/* Bootstrap's .vh-100 uses `vh`, which jumps as iOS Safari's toolbars move.
   `dvh` tracks the visible viewport instead. */
.fire-app {
  height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---- map ---- */
.fire-map-wrap {
  position: relative;
  flex: 1 1 auto;
  /* Both axes: the split is a row on wide screens and a column in bottom-sheet
     mode, and a flex item's automatic minimum size would otherwise let the map
     overflow the viewport instead of shrinking. */
  min-width: 0;
  min-height: 0;
}

.fire-map {
  position: absolute;
  inset: 0;
}

.fire-map-controls {
  position: absolute;
  right: 0.75rem;
  bottom: 1rem;
  z-index: 600;
}

/* ---- centre crosshair ---- */
.fire-crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  pointer-events: none;
  z-index: 500;
}
.fire-crosshair-h,
.fire-crosshair-v {
  position: absolute;
  background: rgba(33, 37, 41, 0.8);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);
}
.fire-crosshair-h {
  left: 0;
  right: 0;
  top: 21px;
  height: 2px;
}
.fire-crosshair-v {
  top: 0;
  bottom: 0;
  left: 21px;
  width: 2px;
}
.fire-crosshair-o {
  position: absolute;
  inset: 13px;
  border: 2px solid rgba(33, 37, 41, 0.8);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);
}
[data-bs-theme='dark'] .fire-crosshair-h,
[data-bs-theme='dark'] .fire-crosshair-v {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}
[data-bs-theme='dark'] .fire-crosshair-o {
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}

/* ---- search dropdown ---- */
.fire-search {
  position: relative;
  flex: 1 1 auto;
  max-width: 420px;
  /* The results panel overlays the map, so it has to clear Leaflet's control
     corners (1000) — a statically-stacked header would be painted under them.
     Must stay below Bootstrap's modal backdrop (1050) so dialogs cover it. */
  z-index: 1020;
}

.fire-search-results {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  max-height: 50vh;
  overflow-y: auto;
}

/* ---- side panel sizing ---- */
.fire-panel-content {
  width: 340px;
}

/* ---- touch targets (44 px minimum, gloved finger) ---- */
.btn-map {
  width: 52px;
  height: 52px;
  font-size: 1.25rem;
}

.btn-tab {
  width: 64px;
  min-height: 60px;
  font-size: 1.2rem;
}

.btn-touch {
  min-height: 52px;
  font-size: 1.05rem;
}

.btn-touch-sm {
  min-width: 44px;
  min-height: 44px;
}

.form-range {
  height: 2rem;
}

/* Bootstrap has no min-width:0 utility; needed for text-truncate in flex rows. */
.min-w-0 {
  min-width: 0;
}

/* ---- leaflet marker resets ---- */
.fire-pin,
.fire-ship,
.fire-handle {
  background: none;
  border: none;
}

.fire-handle {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fire-handle-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #0d6efd;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* ---- portrait / narrow: panel becomes a bottom sheet ---- */
@media (max-width: 820px) {
  .fire-main-split {
    flex-direction: column;
  }
  .fire-panel {
    flex-direction: column-reverse;
    max-height: 55%;
  }
  .fire-tabs {
    flex-direction: row !important;
    justify-content: space-around;
  }
  .fire-panel-content {
    width: auto;
    border-left: none !important;
    border-top: 1px solid var(--bs-border-color);
  }
}

/* ---- obstacle overlay ---- */
/* Drawn straight to a canvas rather than as Leaflet vector shapes: the ground
   footprints are sized in metres while the height bars are sized in pixels,
   and no single Leaflet geometry spans both. Taps are resolved by the layer
   against its own hit list, so the canvas itself stays transparent to them. */
.leaflet-obstacles {
  pointer-events: none;
}