/* ==========================================================================
   O2 Business Corporate Design (Clean, Light Theme)
   Official Palette:
     - O2 Corporate Navy: #0019A5
     - O2 Beyond Blue: #0050FF
     - Background: #F4F6F9
     - Surface / Cards: #FFFFFF
     - Text Primary: #192630
     - Text Secondary: #5B6B79
     - Border: #D8E2EC
     - Accent Coral: #FF6600
   ========================================================================== */

:root {
  --o2-navy: #0019A5;
  --o2-blue: #0050FF;
  --o2-bg: #F4F6F9;
  --o2-card: #FFFFFF;
  --o2-text-main: #192630;
  --o2-text-muted: #5B6B79;
  --o2-border: #D8E2EC;
  --o2-coral: #FF6600;
}

body {
  background-color: var(--o2-bg);
  color: var(--o2-text-main);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* Corporate Cards */
.corp-card {
  background: #FFFFFF;
  border: 1px solid var(--o2-border);
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 25, 165, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.corp-card:hover {
  border-color: #B4C8DE;
  box-shadow: 0 4px 12px rgba(0, 25, 165, 0.08);
}

/* Badges */
.badge-nbiot {
  background-color: #EBF3FF;
  color: #0050FF;
  border: 1px solid #C4DCFF;
}

.badge-ntn {
  background-color: #0019A5;
  color: #FFFFFF;
  border: 1px solid #001485;
}

/* Flash animation for new telemetry datagrams */
@keyframes corpFlashRow {
  0% {
    background-color: #E6F0FF;
  }
  100% {
    background-color: transparent;
  }
}

.animate-flash-row {
  animation: corpFlashRow 1.8s ease-out forwards;
}

/* Corporate Buttons */
.btn-o2-primary {
  background-color: #0050FF;
  color: #FFFFFF;
  border: 1px solid #0045DE;
  transition: background-color 0.15s ease;
}

.btn-o2-primary:hover {
  background-color: #0040D6;
}

.btn-o2-secondary {
  background-color: #FFFFFF;
  color: #0050FF;
  border: 1px solid #C4DCFF;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-o2-secondary:hover {
  background-color: #F0F6FF;
  border-color: #0050FF;
}

/* SVG Icon Coloring Filters */
.icon-telekom {
  filter: brightness(0) saturate(100%) invert(18%) sepia(99%) saturate(4975%) hue-rotate(314deg) brightness(89%) contrast(102%);
}

.icon-vodafone {
  filter: brightness(0) saturate(100%) invert(15%) sepia(87%) saturate(6822%) hue-rotate(358deg) brightness(98%) contrast(114%);
}

/* ==========================================================================
   Leaflet Map & Custom Pulse Markers
   ========================================================================== */
.leaflet-container {
  font-family: inherit;
  z-index: 10;
}

.custom-map-icon {
  background: transparent;
  border: none;
}

.map-pulse-marker {
  position: relative;
  width: 24px;
  height: 24px;
}

.map-pulse-marker .pulse-core {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  z-index: 2;
}

.map-pulse-marker .pulse-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  animation: mapPulse 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
  z-index: 1;
}

.map-pulse-marker.nbiot .pulse-core {
  background-color: #0050FF;
}
.map-pulse-marker.nbiot .pulse-ring {
  background-color: rgba(0, 80, 255, 0.45);
}

.map-pulse-marker.ntn .pulse-core {
  background-color: #FF6600;
}
.map-pulse-marker.ntn .pulse-ring {
  background-color: rgba(255, 102, 0, 0.45);
}

@keyframes mapPulse {
  0% {
    transform: scale(0.6);
    opacity: 0.9;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

.leaflet-popup-content-wrapper {
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  border: 1px solid #D8E2EC;
  padding: 0;
}

.leaflet-popup-content {
  margin: 12px 14px;
  line-height: 1.4;
  font-family: inherit;
}