#map { height: 458px; border-radius: 1rem; }
#mapAGB, #mapBGB, #mapCAGB, #mapCBGB { height: 250px; border-radius: 1rem; }

input:invalid { border-color: red; }
thead th { position: sticky; top: 0; background: #fff; }
tbody tr { background: #fff; }
tbody tr:hover { background: #f8fafc; }
.no-vert-scroll thead th { position: static !important; top: auto !important; }

/* Header > Leaflet controls */
header.sticky { z-index: 1200 !important; }
.leaflet-top, .leaflet-bottom { z-index: 500 !important; }

html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, svg, iframe { max-width: 100%; height: auto; display: block; }

.table-warp {overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; table-layout: auto; }

input[type="text"], input[type="number"], select, textarea { max-width: 100%; }

.responsive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.responsive-flex { display: flex; flex-wrap: wrap; gap: 1rem; }

@media (max-widt: 640px) { header.sticky { position: sticky; top: 0} }
button, .btn, .leaflet-control { min-height: 40 px; }

/* Number labels on mini maps (AGB/BGB/C_AGB/C_BGB) */
.value-label-div{
  font-weight: 300;
  font-size: 8px;
  color: #ffffff;
  background: transparent;
  text-shadow: 0 0 2px #111, 0 0 4px #111, 0 0 3px #111;
  transform: translate(-50%, -120%); /* center, slightly above the point */
  pointer-events: none;
}

/* Hide protected elements by default; will be shown after login via JS */


/* Auth gating: show protected only when logged in */
body:not(.is-auth) [data-protected="true"],
body:not(.is-auth) #entrySection { display: none; }