html, body {
  height: 100%;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #0f1112;
  color: #e9ecef;
}

body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.container-fluid, .row {
  flex: 1;
  min-height: 0;
}

/* ============================================================
 * Sidebar
 * ============================================================ */
.sidebar {
  background: #1a1d20;
  border-right: 1px solid #2c2f33;
  padding: 1rem;
  overflow-y: auto;
  height: calc(100vh - 56px);
  color: #e9ecef;
}

.sidebar hr {
  border-color: #2c2f33;
  opacity: 1;
}

.sidebar .form-label {
  color: #adb5bd;
  font-size: 0.82rem;
}

.sidebar h6 {
  color: #adb5bd !important;
}

.sidebar p.text-muted,
.sidebar .text-muted {
  color: #8a9097 !important;
}

/* Abas (nav-pills) */
.nav-pills .nav-link {
  font-size: 0.85rem;
  padding: 0.4rem 0.5rem;
  color: #adb5bd;
  background: transparent;
}

.nav-pills .nav-link:not(.active):hover {
  background: #2c2f33;
  color: #fff;
}

/* Botões "outline" dos atalhos no dark */
.btn-outline-primary {
  --bs-btn-color: #74c0fc;
  --bs-btn-border-color: #2c4a6b;
  --bs-btn-hover-bg: #1864ab;
  --bs-btn-hover-border-color: #1864ab;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #1971c2;
  --bs-btn-active-border-color: #1971c2;
}

/* ============================================================
 * Mapa
 * ============================================================ */
.main-area {
  position: relative;
  height: calc(100vh - 56px);
}

#map {
  width: 100%;
  height: 100%;
  background: #1a1a1a;
}

/* ============================================================
 * Estatísticas
 * ============================================================ */
.stat-box {
  background: #25282c;
  border: 1px solid #2c2f33;
  border-radius: 6px;
  padding: 0.5rem;
}

.stat-label {
  font-size: 0.7rem;
  color: #8a9097;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-value {
  font-size: 1.25rem;
  font-weight: 600;
  color: #f1f3f5;
}

.stat-cold .stat-value { color: #4dabf7; }
.stat-hot  .stat-value { color: #ff6b6b; }

/* ============================================================
 * Legenda
 * ============================================================ */
.legend-bar {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(to right,
    #2b83ba 0%,
    #abdda4 33%,
    #fdae61 66%,
    #d7191c 100%
  );
  box-shadow: 0 0 0 1px #2c2f33;
}

/* ============================================================
 * Painel lateral do sensor
 * ============================================================ */
.painel-sensor {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 360px;
  max-width: calc(100% - 2rem);
  background: #1a1d20;
  color: #e9ecef;
  border: 1px solid #2c2f33;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
  padding: 1rem 1.25rem;
  z-index: 1000;
  display: none;
}

.painel-sensor.aberto { display: block; }

.painel-sensor .text-muted {
  color: #8a9097 !important;
}

.btn-close-painel {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  border: none;
  background: transparent;
  font-size: 0.9rem;
  color: #8a9097;
  cursor: pointer;
}

.btn-close-painel:hover { color: #fff; }

/* ============================================================
 * Marcadores de sensor
 * ============================================================ */
.sensor-marker {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #111;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.25);
  cursor: pointer;
}

.sensor-marker.inativo    { border-color: #6c757d; opacity: 0.5; }
.sensor-marker.manutencao { border-color: #ffc107; }

/* ============================================================
 * Leaflet — controles e tooltips dark
 * ============================================================ */
.leaflet-tooltip {
  background: #25282c !important;
  color: #f1f3f5 !important;
  border: 1px solid #3a3f44 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
}
.leaflet-tooltip-top::before    { border-top-color: #25282c !important; }
.leaflet-tooltip-bottom::before { border-bottom-color: #25282c !important; }
.leaflet-tooltip-left::before   { border-left-color: #25282c !important; }
.leaflet-tooltip-right::before  { border-right-color: #25282c !important; }

.leaflet-bar a,
.leaflet-bar a:link,
.leaflet-bar a:visited {
  background: #25282c !important;
  color: #f1f3f5 !important;
  border-color: #3a3f44 !important;
}
.leaflet-bar a:hover { background: #3a3f44 !important; }

.leaflet-control-attribution {
  background: rgba(26, 29, 32, 0.85) !important;
  color: #adb5bd !important;
}
.leaflet-control-attribution a {
  color: #74c0fc !important;
}

/* ============================================================
 * Status badge
 * ============================================================ */
#status-conexao.bg-success { background: #198754 !important; }
#status-conexao.bg-danger  { background: #dc3545 !important; }

/* ============================================================
 * Mobile
 * ============================================================ */
@media (max-width: 767px) {
  .sidebar, .main-area {
    height: auto;
    min-height: 50vh;
  }
  #map { min-height: 60vh; }
}

@keyframes pulso-heatmap {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 0.30; }
}

.heatmap-overlay {
  animation: pulso-heatmap 2s ease-in-out infinite;
}

/* ============================================================
 * Marcadores pulsantes — velocidade proporcional ao dB
 * ============================================================ */
@keyframes pulso-marcador {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.25),
                0 0 0 0   rgba(255,255,255,0.6);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.25),
                0 0 0 8px rgba(255,255,255,0);
  }
}

.sensor-marker.pulsa {
  animation-name: pulso-marcador;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  /* duração definida inline pelo JS */
}

/* sensores inativos não pulsam */
.sensor-marker.inativo { animation: none !important; }