body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; transition: background-color 0.3s, color 0.3s; }
.hidden { display: none !important; }

#mapContainer { position: relative; width: 100%; height: 620px; }
#map { height: 100%; width: 100%; border-radius: 12px; }
.mini-map { height: 220px; width: 100%; border-radius: 8px; cursor: crosshair; }

#mapContainer.map-fullscreen {
  position: fixed !important; top: 0 !important; left: 0 !important;
  width: 100vw !important; height: 100vh !important;
  z-index: 9999 !important; border-radius: 0 !important;
}
#mapContainer.map-fullscreen #map { border-radius: 0 !important; }

.marker-label {
  background-color: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid #0ea5e9 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5) !important;
}
.marker-label::before { display: none !important; }

.leaflet-marker-icon,
.leaflet-marker-icon.custom-cam-icon,
.leaflet-marker-icon.custom-node-icon {
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
}

.pin-wrapper { position: relative; width: 32px; height: 32px; }

.cam-pin, .node-pin {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #ffffff; font-size: 14px; box-shadow: 0 3px 8px rgba(0,0,0,0.6);
  border: 2px solid #ffffff; position: relative; z-index: 2;
}

.cam-pin-online { background-color: #10b981; }
.cam-pin-offline { background-color: #ef4444; }
.node-pin-online { background-color: #0ea5e9; }
.node-pin-offline { background-color: #ef4444; }

.pulse-ring-cam, .pulse-ring-node {
  position: absolute; top: 0; left: 0; width: 32px; height: 32px;
  border-radius: 50%; z-index: 1; pointer-events: none;
  animation: map-pulse 1.8s infinite ease-out;
}

.pulse-ring-cam { border: 3px solid #10b981; box-shadow: 0 0 12px #10b981; }
.pulse-ring-node { border: 3px solid #0ea5e9; box-shadow: 0 0 12px #0ea5e9; }

@keyframes map-pulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}

.metric-card {
  border: none; border-radius: 12px; transition: all 0.2s ease-in-out;
  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(240,242,245,0.9));
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.metric-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }

.site-card {
  border: 1px solid rgba(0,0,0,0.08); border-radius: 16px; overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: #ffffff;
}
.site-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(14, 165, 233, 0.15) !important;
  border-color: #0ea5e9;
}
.site-card-header {
  background: linear-gradient(135deg, #0f172a, #1e293b); color: #ffffff; padding: 1.25rem;
}

[data-bs-theme="dark"] body { background-color: #0b0f19 !important; color: #f1f5f9 !important; }
[data-bs-theme="dark"] .card { background-color: #151c2c !important; border: 1px solid #1e293b !important; box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important; }
[data-bs-theme="dark"] .metric-card { background: linear-gradient(135deg, #151c2c, #1e293b) !important; border: 1px solid #334155 !important; }
[data-bs-theme="dark"] .site-card { background: #151c2c !important; border-color: #1e293b !important; }
[data-bs-theme="dark"] .card-header { background-color: #1e293b !important; border-bottom: 1px solid #334155 !important; }
[data-bs-theme="dark"] .list-group-item { background-color: #151c2c !important; border-color: #1e293b !important; color: #f1f5f9 !important; }
[data-bs-theme="dark"] .table { color: #f1f5f9 !important; }
[data-bs-theme="dark"] .table-light { background-color: #1e293b !important; color: #f1f5f9 !important; }
[data-bs-theme="dark"] .modal-content { background-color: #151c2c !important; border: 1px solid #334155 !important; color: #f1f5f9 !important; }
[data-bs-theme="dark"] .bg-body-tertiary { background-color: #1e293b !important; }

.bg-online { background-color: #10b981; color: white; }
.bg-offline { background-color: #ef4444; color: white; }
.progress-bar { transition: width 0.3s ease, background-color 0.3s ease; }