@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

/* Premium Light Panel */
.glass-panel {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
}

.glass-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.02), 0 1px 2px -1px rgba(0, 0, 0, 0.02);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
  background: #FFFFFF;
  border-color: rgba(94, 106, 210, 0.25);
  box-shadow: 0 12px 30px -4px rgba(94, 106, 210, 0.08), 0 4px 10px -2px rgba(0, 0, 0, 0.02);
  transform: translateY(-1px);
}

/* Accent Glow Border Effect */
.glass-card-accent {
  background: #FFFFFF;
  border: 1px solid rgba(94, 106, 210, 0.2);
  box-shadow: 0 4px 20px rgba(94, 106, 210, 0.02);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card-accent:hover {
  border-color: rgba(94, 106, 210, 0.5);
  box-shadow: 0 12px 30px rgba(94, 106, 210, 0.06), 0 0 1px rgba(94, 106, 210, 0.2);
  transform: translateY(-1px);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #F8FAFC;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.16);
}

/* Real-Time Pulse Animation (Light Mode) */
@keyframes heart-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.animate-pulse-green {
  animation: heart-pulse 2s infinite cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes heart-pulse-red {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

.animate-pulse-red {
  animation: heart-pulse-red 2s infinite cubic-bezier(0.16, 1, 0.3, 1);
}

/* Ambient Floating Background Blobs */
@keyframes blob-float {
  0% { transform: translate(0px, 0px) scale(1); }
  50% { transform: translate(30px, -40px) scale(1.05); }
  100% { transform: translate(-10px, 10px) scale(0.98); }
}

@keyframes blob-float-reverse {
  0% { transform: translate(0px, 0px) scale(0.98); }
  50% { transform: translate(-40px, 30px) scale(1.02); }
  100% { transform: translate(20px, -15px) scale(1); }
}

.animate-blob-slow {
  animation: blob-float 15s infinite alternate ease-in-out;
}

.animate-blob-slower {
  animation: blob-float-reverse 20s infinite alternate ease-in-out;
}

/* Uptime Bar History Visualizer */
.uptime-bar-tick {
  flex: 1 1 0%;
  min-width: 1.5px;
  max-width: 6px;
  height: 28px;
  border-radius: 1.5px;
  margin: 0 0.5px;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
}

.uptime-bar-tick:hover {
  transform: scaleY(1.35);
}

/* Uptime Tooltip Styling */
.uptime-tooltip .uptime-tooltip-text {
  visibility: hidden;
  width: 140px;
  background-color: #0F172A;
  color: #FFFFFF;
  text-align: center;
  border-radius: 6px;
  padding: 5px 8px;
  position: absolute;
  z-index: 50;
  bottom: 140%; /* Position above the tick */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
  font-size: 9px;
  font-family: 'Inter', sans-serif;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.uptime-tooltip .uptime-tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -4px;
  border-width: 4px;
  border-style: solid;
  border-color: #0F172A transparent transparent transparent;
}

.uptime-tooltip:hover .uptime-tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* Print Layout */
@media print {
  body {
    background: white !important;
    color: black !important;
  }
  .no-print {
    display: none !important;
  }
  .print-table {
    border: 1px solid #e2e8f0 !important;
  }
}

/* Custom Latency and Uptime Status Colors */
.bg-latency-excellent { background-color: #22C55E !important; }
.bg-latency-good { background-color: #84CC16 !important; }
.bg-latency-moderate { background-color: #EAB308 !important; }
.bg-latency-slow { background-color: #F97316 !important; }
.bg-latency-inactive { background-color: #EF4444 !important; }

/* Mobile Table Scrolling and Wider Uptime Bar Ticks */
@media (max-width: 768px) {
  .overflow-x-auto {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .overflow-x-auto table {
    min-width: 600px !important;
    width: 100%;
  }
  .overflow-x-auto th, .overflow-x-auto td {
    white-space: nowrap !important;
  }
}

@media (max-width: 640px) {
  .uptime-bar-tick {
    min-width: 4px !important;
    max-width: 10px !important;
    height: 24px !important;
    border-radius: 2px !important;
  }
}