html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; }
body { background: #000; color: #ccc; font-family: sans-serif; }
#map {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  transition: left 180ms ease;
}
/* Default (phones / tablets / portrait): panel covers the full viewport. */
body.panel-open #map { left: 100%; }
/* Computer-class screens in landscape: panel takes 70%, map takes the rest. */
@media (orientation: landscape) and (min-width: 900px) {
  body.panel-open #map { left: 70vw; }
}

#info {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,0.75); color: #fff;
  padding: 6px 10px; font: 12px ui-monospace,monospace;
  z-index: 1000; border-radius: 4px;
}

#budget-banner {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  background: #8a0000; color: #fff;
  padding: 6px 14px; font: 12px ui-monospace,monospace;
  z-index: 1001; border-radius: 4px;
  border: 1px solid #ff4040;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  display: none;
}
#budget-banner.visible { display: block; }

#sightings-btn {
  position: absolute; bottom: 25px; left: 10px; z-index: 1000;
  background: #1a1a1a; color: #fff; border: 1px solid #444;
  padding: 7px 12px; font: 12px ui-monospace,monospace; font-weight: bold;
  border-radius: 4px; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
#sightings-btn:hover { background: #2a2a2a; border-color: #888; }
body.panel-open #sightings-btn { display: none; }

#sightings-panel {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 100vw;
  background: #111; color: #ddd; border-right: 1px solid #444;
  box-shadow: 2px 0 14px rgba(0,0,0,0.6);
  z-index: 2000; display: flex; flex-direction: column;
  font: 12px ui-monospace,monospace;
}
@media (orientation: landscape) and (min-width: 900px) {
  #sightings-panel { width: 70vw; }
}
#sightings-panel.hidden { display: none; }
#sightings-header {
  padding: 10px 14px; border-bottom: 1px solid #333;
  display: flex; align-items: center; gap: 12px;
  background: #1a1a1a;
}
#sightings-title { font-size: 14px; font-weight: bold; color: #fff; }
#sightings-count { color: #888; }
#sightings-close {
  margin-left: auto; background: transparent; color: #aaa; border: 0;
  font-size: 16px; cursor: pointer; padding: 0 6px;
}
#sightings-close:hover { color: #fff; }

#sightings-body { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 0; }
.sight-table-wrap { flex: 1; overflow: auto; }
.sight-pager {
  flex: 0 0 auto; border-top: 1px solid #333; background: #181818;
  padding: 8px; display: flex; flex-wrap: wrap; gap: 4px; overflow-x: auto;
}
.day-btn {
  background: #222; color: #ccc; border: 1px solid #333;
  padding: 4px 10px; font: 11px ui-monospace,monospace; border-radius: 3px;
  cursor: pointer; white-space: nowrap;
}
.day-btn:hover { background: #2d2d2d; border-color: #666; }
.day-btn.active { background: #2e8bff; color: #fff; border-color: #2e8bff; }
.day-count { color: #888; margin-left: 4px; }
.day-btn.active .day-count { color: #bfd9ff; }
#sightings-body table { width: 100%; border-collapse: collapse; }
#sightings-body a { color: #6ac; text-decoration: none; }
#sightings-body a:hover { text-decoration: underline; color: #9cf; }
#sightings-body th, #sightings-body td {
  text-align: left; padding: 5px 10px; border-bottom: 1px solid #222;
  white-space: nowrap; vertical-align: top;
}
#sightings-body th {
  position: sticky; top: 0; background: #222; color: #eee;
  cursor: pointer; user-select: none; font-weight: bold;
}
#sightings-body th:hover { background: #2a2a2a; }
#sightings-body th.no-sort { cursor: default; }
#sightings-body th.no-sort:hover { background: #222; }
#sightings-body th .sort-arrow { color: #888; margin-left: 4px; }
#sightings-body tr:hover td { background: #1a1a1a; }
#sightings-body input.path-toggle { cursor: pointer; accent-color: #ff8800; }

.leaflet-tooltip.path-label {
  background: rgba(0,0,0,0.78); color: #ff8800; border: 1px solid #ff8800;
  font: bold 12px ui-monospace,monospace; padding: 2px 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.6); white-space: nowrap;
}
.leaflet-tooltip.path-label::before { display: none; } /* kill the default arrow */

.cat-police   { color: #7aa6ff; }
.cat-military { color: #ccc; background: #000; padding: 1px 6px; border-radius: 3px; }
.cat-fire     { color: #ff5a5a; }
.cat-cargo    { color: #c98a4a; }
.cat-commercial { color: #888; }

.region-tag {
  color: #fc3; background: rgba(255,204,51,0.12);
  padding: 1px 6px; border-radius: 3px; font-weight: bold;
}

.live {
  color: #0f0; font-weight: bold;
  background: rgba(0,255,0,0.08); padding: 1px 6px; border-radius: 3px;
}
.live::before { content: "● "; color: #0f0; }

.region-label { background: none; border: none; }
.region-label div {
  color: #fc3; font: bold 11px ui-monospace,monospace;
  text-shadow: 1px 1px 2px #000; white-space: nowrap;
  transform: translate(4px, 4px);
  background: rgba(0,0,0,0.55); padding: 1px 5px; border-radius: 2px;
}

.plane { background: none; border: none; }
.plane div {
  color: #ff0; font: bold 15px ui-monospace,monospace;
  text-shadow: 1px 1px 2px #000; white-space: nowrap;
  transform: translate(14px, -12px); line-height: 1.1;
}
.plane svg { filter: drop-shadow(0 0 2px #000); }

.leaflet-popup-content { font: 12px ui-monospace,monospace; }
.leaflet-popup-content table { border-collapse: collapse; }
.leaflet-popup-content table td { padding: 1px 4px; vertical-align: top; }
.leaflet-popup-content .k { color: #888; padding-right: 8px; }
.leaflet-popup-content img { max-width: 100%; max-height: 140px; display: block;
                             margin-bottom: 6px; border-radius: 3px; }
.leaflet-popup-content hr { border: 0; border-top: 1px solid #ccc; margin: 4px 0; }
.leaflet-popup-content .links { margin-top: 6px; font-size: 11px; }
.leaflet-popup-content .warn { color: #c00; font-weight: bold; }