html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.navbar {
  font-weight: 500;
}
.navbar-brand {
  font-weight: 600;
}

/* ── Page frame ─────────────────────────────────────────────────────────────
   body is a full-height flex column (header / main / footer). main must be
   allowed to shrink so the planner can size itself from the remaining space. */
main {
  min-height: 0;
}

.footer {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ── Planner layout: inputs left, map centre, outputs and actions right ─── */
.planner {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr) 340px;
  min-height: 0;
}

.planner-inputs,
.planner-outputs {
  overflow-y: auto;
  min-height: 0;
  padding: 1rem;
  background: var(--bs-tertiary-bg, #f8f9fa);
}
.planner-inputs  { border-right: 1px solid var(--bs-border-color, #dee2e6); }
.planner-outputs { border-left:  1px solid var(--bs-border-color, #dee2e6); }

.planner-map {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* Search bar above the map (Ian's placement); results drop over the map */
.map-search {
  position: relative;
  z-index: 1001;
  padding: 0.5rem 0.75rem;
  background: var(--bs-tertiary-bg, #f8f9fa);
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}
.map-search #locate-results {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  top: 100%;
  max-height: 40vh;
  overflow-y: auto;
}

.map-frame {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

/* Leaflet needs a container with a resolved pixel height. Filling the
   positioned parent gives it one without any JS measurement. */
#map {
  position: absolute;
  inset: 0;
}

@media (max-width: 1399.98px) {
  .planner {
    grid-template-columns: 300px minmax(0, 1fr) 300px;
  }
}

/* Narrow screens: one column, map in the middle, whole planner scrolls */
@media (max-width: 991.98px) {
  .planner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(320px, 55vh) auto;
    overflow-y: auto;
  }
  .planner-inputs,
  .planner-outputs {
    overflow-y: visible;
    border: 0;
  }
  .planner-inputs  { border-bottom: 1px solid var(--bs-border-color, #dee2e6); }
  .planner-outputs { border-top:    1px solid var(--bs-border-color, #dee2e6); }
}

/* ── Map overlays ───────────────────────────────────────────────────────── */
.map-banner {
  position: absolute;
  top: 3.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  margin: 0;
  max-width: calc(100% - 2rem);
}

/* Status pill over the map: what the planner is doing or waiting for */
.map-status {
  position: absolute;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-size: 0.8rem;
  color: #fff;
  background: rgba(44, 62, 80, 0.88);
  max-width: calc(100% - 7rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.map-status.ok    { background: rgba(24, 188, 156, 0.92); }
.map-status.warn  { background: rgba(243, 156, 18, 0.95); }
.map-status.error { background: rgba(231, 76, 60, 0.92); }

/* MapTiler logo control (required by MapTiler's terms) */
.maptiler-logo img {
  height: 22px;
  display: block;
}

/* leaflet-draw toolbar buttons keep a light background so the sprites show */
.leaflet-draw-toolbar a {
  background-color: #fff;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.planner .card {
  margin-bottom: 0.75rem;
}
.planner .card-header {
  padding: 0.4rem 0.75rem;
  font-weight: 600;
  font-size: 0.9rem;
}
.planner .card-body {
  padding: 0.6rem 0.75rem;
}
.param-card {
  border-left: 4px solid var(--bs-primary);
}
.param-unit {
  font-size: 0.7rem;
  color: var(--bs-secondary-color, #6c757d);
  margin-top: 0.15rem;
}
input.derived {
  background-color: rgba(24, 188, 156, 0.08);
}
.legend span {
  margin-right: 0.75rem;
  white-space: nowrap;
}
.swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.swatch-area { background: #3498db; }
.swatch-path { background: #e67e22; }
.swatch-wp   { background: #e74c3c; }

/* Small print; a class rather than a style attribute so the CSP can forbid inline styles */
.fineprint {
  font-size: 0.75rem;
}

/* The validation-summary tag helper (mode "All", used by some stock Identity
   pages) emits an empty <li style="display:none"> placeholder. The CSP blocks
   that inline style, so hide the list while the summary reports no errors;
   jQuery validation swaps the class to validation-summary-errors when it fills it. */
.validation-summary-valid ul {
  display: none;
}
#locate-results .list-group-item {
  cursor: pointer;
}
#cam-consequences table th,
#cam-consequences table td,
.planner table.table-sm td {
  padding: 0.1rem 0.3rem;
}