/* LiveStock GPS Tracker — Dashboard Styles
   SPDX-License-Identifier: Apache-2.0 */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #1a1a2e;
  color: #eee;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: #16213e;
  border-bottom: 1px solid #0f3460;
}

header h1 {
  font-size: 20px;
  font-weight: 600;
  color: #e94560;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-logo {
  height: 40px;
  width: auto;
  border-radius: 6px;
}

.brand-tagline {
  font-size: 12px;
  color: #a0a0b8;
}

.footer-brand {
  color: #a0a0b8;
  text-decoration: none;
}

.footer-brand:hover {
  color: #e94560;
}

.header-right {
  display: flex;
  gap: 20px;
  font-size: 13px;
  color: #a0a0b8;
}

main {
  display: flex;
  flex: 1;
  overflow: hidden;
}

#sidebar {
  width: 280px;
  background: #16213e;
  padding: 16px;
  overflow-y: auto;
  border-right: 1px solid #0f3460;
}

#sidebar h2 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #a0a0b8;
  margin-bottom: 12px;
}

.animal-card {
  background: #1a1a2e;
  border: 1px solid #0f3460;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.2s;
}

.animal-card:hover {
  border-color: #e94560;
}

.animal-card.selected {
  border-color: #e94560;
  background: #1f1f3a;
}

.animal-card .tag {
  font-size: 14px;
  font-weight: 600;
  color: #eee;
}

.animal-card .species {
  font-size: 11px;
  color: #a0a0b8;
  margin-top: 2px;
}

.animal-card .meta {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  color: #7a7a9a;
}

.animal-card .battery {
  color: #e94560;
  font-weight: 600;
}

#mapContainer {
  flex: 1;
  position: relative;
}

#map {
  width: 100%;
  height: 100%;
}

footer {
  display: flex;
  justify-content: space-between;
  padding: 8px 24px;
  background: #16213e;
  border-top: 1px solid #0f3460;
  font-size: 12px;
  color: #a0a0b8;
}

#connectionStatus {
  font-weight: 600;
}

#connectionStatus.connected { color: #2ecc71; }
#connectionStatus.disconnected { color: #e74c3c; }

/* ─── Panic alert bar ─────────────────────────────────── */
#panicBar {
  display: none;
  gap: 8px;
  padding: 8px 16px;
  background: #1a0a0a;
  border-bottom: 2px solid #e74c3c;
  overflow-x: auto;
  flex-shrink: 0;
}

.panic-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #2c0a0a;
  border: 1px solid #e74c3c;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  animation: panicPulse 1.5s infinite;
  font-size: 12px;
}

.panic-item.severity-critical {
  border-color: #ff0;
  background: #3a0a0a;
}

.panic-item strong { color: #e74c3c; }
.panic-item span { color: #ff0; }
.panic-item small { color: #888; }

@keyframes panicPulse {
  0%, 100% { box-shadow: 0 0 4px rgba(231,76,60,0.4); }
  50% { box-shadow: 0 0 12px rgba(231,76,60,0.9); }
}

/* ─── Panicking animal card ──────────────────────────── */
.animal-card.panicking {
  border-color: #e74c3c !important;
  background: #2a0a0a !important;
}

.animal-card.panicking .tag {
  color: #e74c3c;
}

.panic-badge {
  margin-top: 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ff0;
  font-weight: 600;
}

/* Leaflet overrides */
.leaflet-popup-content-wrapper {
  background: #16213e !important;
  color: #eee !important;
  border-radius: 8px !important;
}

.leaflet-popup-tip {
  background: #16213e !important;
}