/* Custom styles and animations for UptimeMonitor */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #0f172a;
}
::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* Pulsing status dots */
@keyframes pulse-ring {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 0; }
  100% { transform: scale(0.95); opacity: 0; }
}

.pulse-dot-up {
  position: relative;
}
.pulse-dot-up::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 9999px;
  background-color: #10b981;
  animation: pulse-ring 2s infinite ease-in-out;
}

.pulse-dot-down {
  position: relative;
}
.pulse-dot-down::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 9999px;
  background-color: #f43f5e;
  animation: pulse-ring 1.5s infinite ease-in-out;
}

/* Heartbeat bar items */
.heartbeat-bar {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 28px;
}

.heartbeat-tick {
  flex: 1;
  height: 22px;
  border-radius: 3px;
  transition: all 0.15s ease-in-out;
  cursor: pointer;
}
.heartbeat-tick:hover {
  transform: scaleY(1.25);
  filter: brightness(1.2);
}

.tick-up {
  background-color: #10b981;
}
.tick-down {
  background-color: #f43f5e;
}
.tick-empty {
  background-color: #1e293b;
  border: 1px dashed #334155;
  cursor: default;
}

/* Transitions for modals */
.modal-show {
  display: flex !important;
  opacity: 1 !important;
}

/* Favorite card styling */
.card-favorite {
  border-color: rgba(245, 158, 11, 0.4) !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.03) 0%, rgba(15, 23, 42, 0.8) 100%) !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.05);
}

.card-favorite:hover {
  border-color: rgba(245, 158, 11, 0.65) !important;
}

/* Drag and Drop styling */
.monitor-card {
  transition: transform 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.monitor-card.dragging {
  opacity: 0.35;
  border-style: dashed !important;
  border-color: #10b981 !important;
}

.monitor-card.drag-over {
  border-color: #10b981 !important;
  transform: scale(1.008);
}