* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Courier New', monospace; background: #0a0a0f; color: #00ff88; overflow: hidden; }
#map { width: 100vw; height: 100vh; }

/* ── Гамбургер ── */
#hamburger {
  position: absolute; top: 16px; left: 16px; z-index: 200;
  width: 42px; height: 42px;
  background: rgba(0,0,0,0.75);
  border: 1px solid rgba(0,255,136,0.3);
  border-radius: 8px; cursor: pointer;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
  transition: all 0.2s; backdrop-filter: blur(4px);
}
#hamburger:hover { background: rgba(0,255,136,0.15); border-color: #00ff88; }
#hamburger span { display: block; width: 18px; height: 2px; background: #00ff88; border-radius: 2px; transition: all 0.3s; }
#hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#hamburger.open span:nth-child(2) { opacity: 0; }
#hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Кнопка чистого екрану ── */
#btn-clean {
  position: absolute; top: 16px; left: 68px; z-index: 200;
  width: 42px; height: 42px;
  background: rgba(0,0,0,0.75);
  border: 1px solid rgba(0,255,136,0.3);
  border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #00ff88;
  transition: all 0.2s; backdrop-filter: blur(4px);
  user-select: none;
}
#btn-clean:hover { background: rgba(0,255,136,0.15); border-color: #00ff88; }
#btn-clean.active { background: rgba(0,255,136,0.25); border-color: #00ff88; color: #fff; }

/* Режим чистого екрану */
body.clean-mode #map-controls,
body.clean-mode #map-type,
body.clean-mode .badge,
body.clean-mode #zoom-badge,
body.clean-mode .mapboxgl-ctrl-bottom-left,
body.clean-mode .mapboxgl-ctrl-bottom-right { opacity: 0; pointer-events: none; transition: opacity 0.3s; }

/* ── Сайдбар ── */
#ui {
  position: absolute; top: 0; left: 0; z-index: 160;
  height: 100vh; width: 270px;
  background: rgba(5,5,12,0.65);
  border-right: 1px solid rgba(0,255,136,0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto; overflow-x: hidden;
  padding: 70px 0 30px 0;
  pointer-events: none;
}
#ui.open { transform: translateX(0); pointer-events: all; }

/* ── Панелі ── */
.panel {
  background: transparent; border: none;
  border-bottom: 1px solid rgba(0,255,136,0.07);
  border-radius: 0; padding: 12px 18px;
  min-width: unset; pointer-events: all;
}
.panel h2 {
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: #00ff88; margin: 0; padding-bottom: 0; border-bottom: none;
  cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  user-select: none;
}
.panel h2::after { content: '▲'; font-size: 8px; opacity: 0.4; transition: transform 0.25s; }
.panel h2.collapsed::after { transform: rotate(180deg); }
.panel-body { overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease; max-height: 600px; opacity: 1; margin-top: 10px; }
.panel-body.collapsed { max-height: 0 !important; opacity: 0; margin-top: 0; }
.stat { display: flex; justify-content: space-between; margin: 5px 0; font-size: 11px; gap: 12px; }
.stat-label { color: #666; }
.stat-value { color: #00ff88; font-weight: bold; white-space: nowrap; }
.stat-value.red { color: #ff6b35; }

.btn-group { display: flex; gap: 5px; flex-wrap: wrap; }
.btn {
  background: rgba(0,255,136,0.07); border: 1px solid rgba(0,255,136,0.25);
  color: #00ff88; padding: 5px 11px; border-radius: 4px;
  font-size: 10px; font-family: inherit; cursor: pointer;
  letter-spacing: 1px; transition: all 0.2s;
}
.btn:hover, .btn.active { background: rgba(0,255,136,0.2); border-color: #00ff88; }

.legend { display: flex; flex-direction: column; gap: 6px; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 10px; color: #888; }
.legend-dot { width: 11px; height: 11px; border-radius: 2px; flex-shrink: 0; }
.legend-line { width: 20px; height: 3px; border-radius: 2px; flex-shrink: 0; }
.legend-circle { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }

/* ── Перемикачі шарів ── */
.layer-toggle {
  display: flex; align-items: center; justify-content: space-between;
  margin: 5px 0; font-size: 10px; color: #888; letter-spacing: 1px;
}
.layer-toggle label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.layer-toggle input[type=checkbox] { accent-color: #00ff88; width: 13px; height: 13px; cursor: pointer; }

/* Власні кнопки керування */
#map-controls {
  position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%);
  z-index: 10; display: flex; flex-direction: column; gap: 6px;
}
.map-btn {
  width: 38px; height: 38px;
  background: rgba(0,0,0,0.85);
  border: 1px solid rgba(0,255,136,0.25);
  border-radius: 6px; color: #00ff88;
  font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; user-select: none;
}
.map-btn:hover { background: rgba(0,255,136,0.15); border-color: #00ff88; }
.map-btn.active { background: rgba(0,255,136,0.25); border-color: #00ff88; }
.sep { height: 1px; background: rgba(0,255,136,0.12); margin: 2px 0; }

/* Перемикач типу карти */
#map-type {
  position: absolute; bottom: 30px; right: 16px;
  z-index: 10; display: flex; gap: 5px;
}
.type-btn {
  background: rgba(0,0,0,0.85); border: 1px solid rgba(0,255,136,0.25);
  border-radius: 5px; color: #00ff88;
  font-size: 10px; font-family: inherit;
  padding: 5px 10px; cursor: pointer;
  letter-spacing: 1px; transition: all 0.2s;
}
.type-btn:hover, .type-btn.active { background: rgba(0,255,136,0.2); border-color: #00ff88; }

/* Tooltip (floating non-popup) */
#tooltip {
  position: absolute; z-index: 20; pointer-events: all;
  background: rgba(0,0,0,0.92); border: 1px solid rgba(0,255,136,0.35);
  border-radius: 7px; padding: 10px 14px 10px 14px;
  font-size: 11px; color: #bbb; display: none; line-height: 1.8;
  max-width: 220px;
}
#tooltip strong { color: #00ff88; display: block; margin-bottom: 3px; font-size: 12px; }
#tooltip .g { color: #00ff88; }
#tooltip .r { color: #ff6b35; }
#tooltip .tt-close {
  position: absolute; top: 6px; right: 8px;
  color: #444; cursor: pointer; font-size: 14px; line-height: 1;
}
#tooltip .tt-close:hover { color: #00ff88; }

.badge {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.7); border: 1px solid rgba(0,255,136,0.12);
  border-radius: 4px; padding: 4px 12px;
  font-size: 9px; letter-spacing: 2px; color: rgba(0,255,136,0.4);
}

.mapboxgl-ctrl-logo { opacity: 0.3 !important; }
.mapboxgl-ctrl-attrib { display: none !important; }

/* Mapbox Popup — будівлі та об'єкти */
.building-popup .mapboxgl-popup-content {
  background: rgba(0,0,0,0.92);
  border: 1px solid rgba(0,255,136,0.4);
  border-radius: 8px;
  padding: 12px 16px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: #bbb;
  line-height: 1.8;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.building-popup .mapboxgl-popup-content strong {
  color: #00ff88; display: block;
  margin-bottom: 4px; font-size: 12px;
  letter-spacing: 1px;
}
.building-popup .mapboxgl-popup-content .g { color: #00ff88; }
.building-popup .mapboxgl-popup-content .r { color: #ff6b35; }
.building-popup .mapboxgl-popup-tip { border-top-color: rgba(0,255,136,0.4) !important; }
.building-popup .mapboxgl-popup-close-button {
  color: #444; font-size: 16px; padding: 4px 8px;
  background: none; border: none;
}
.building-popup .mapboxgl-popup-close-button:hover { color: #00ff88; }

/* Pipes popup */
.pipe-popup .mapboxgl-popup-content {
  background: rgba(0,0,0,0.92);
  border: 1px solid rgba(255,102,0,0.5);
  border-radius: 8px;
  padding: 12px 16px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: #bbb;
  line-height: 1.8;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.pipe-popup .mapboxgl-popup-content strong { color: #ff6600; display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: 1px; }
.pipe-popup .mapboxgl-popup-tip { border-top-color: rgba(255,102,0,0.5) !important; }
.pipe-popup .mapboxgl-popup-close-button { color: #444; font-size: 16px; padding: 4px 8px; background: none; border: none; }
.pipe-popup .mapboxgl-popup-close-button:hover { color: #ff6600; }

/* Heatpoints popup — CTP orange, TP cyan */
.heatpoint-ctp-popup .mapboxgl-popup-content {
  background: rgba(0,0,0,0.92);
  border: 1px solid rgba(255,107,0,0.5);
  border-radius: 8px; padding: 12px 16px;
  font-family: 'Courier New', monospace; font-size: 11px; color: #bbb; line-height: 1.8;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.heatpoint-ctp-popup .mapboxgl-popup-content strong { color: #ff6b00; display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: 1px; }
.heatpoint-ctp-popup .mapboxgl-popup-tip { border-top-color: rgba(255,107,0,0.5) !important; }
.heatpoint-ctp-popup .mapboxgl-popup-close-button { color: #444; font-size: 16px; padding: 4px 8px; background: none; border: none; }
.heatpoint-ctp-popup .mapboxgl-popup-close-button:hover { color: #ff6b00; }

.heatpoint-tp-popup .mapboxgl-popup-content {
  background: rgba(0,0,0,0.92);
  border: 1px solid rgba(0,200,255,0.5);
  border-radius: 8px; padding: 12px 16px;
  font-family: 'Courier New', monospace; font-size: 11px; color: #bbb; line-height: 1.8;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.heatpoint-tp-popup .mapboxgl-popup-content strong { color: #00c8ff; display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: 1px; }
.heatpoint-tp-popup .mapboxgl-popup-tip { border-top-color: rgba(0,200,255,0.5) !important; }
.heatpoint-tp-popup .mapboxgl-popup-close-button { color: #444; font-size: 16px; padding: 4px 8px; background: none; border: none; }
.heatpoint-tp-popup .mapboxgl-popup-close-button:hover { color: #00c8ff; }

/* Райони */
.district-btn {
  display: block; width: 100%;
  background: transparent; border: none;
  color: #666; font-family: inherit; font-size: 10px;
  text-align: left; padding: 4px 0;
  cursor: pointer; letter-spacing: 1px;
  border-bottom: 1px solid rgba(0,255,136,0.05);
  transition: color 0.2s;
}
.district-btn:hover { color: #00ff88; }
.district-btn.active { color: #00ff88; font-weight: bold; }
.district-btn::before { content: '▶ '; font-size: 8px; opacity: 0.5; }
.district-btn.active::before { content: '◆ '; opacity: 1; }

/* Попап района */
#district-popup {
  position: absolute; z-index: 15; pointer-events: none;
  background: rgba(0,0,0,0.88); border: 1px solid rgba(0,255,136,0.4);
  border-radius: 6px; padding: 8px 12px;
  font-size: 11px; color: #00ff88; display: none;
  letter-spacing: 1px; white-space: nowrap;
}