/* Vera HQ Dashboard — Custom styles (beyond Tailwind CDN) */

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Table striping */
table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}
table tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Modal overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-overlay.hidden {
  display: none;
}

/* Smooth section transitions */
.section {
  animation: fadeIn 0.15s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Monospace utility */
.mono {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.8125rem;
}

/* Status dot pulse for active */
.pulse-dot {
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Spinner */
.spinner {
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: #0A84FF;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 0.6s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Toast notification */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 60;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #fff;
  animation: slideUp 0.2s ease-out;
  pointer-events: none;
}
.toast.success { background: rgba(16, 185, 129, 0.9); }
.toast.error { background: rgba(239, 68, 68, 0.9); }
@keyframes slideUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Check-in history bars */
.checkin-bar {
  transition: height 0.2s ease-out;
  min-height: 2px;
}

/* Alert row expand transition */
.alert-detail, .webhook-deliveries {
  animation: fadeIn 0.15s ease-out;
}

/* Toggle switch — peer-checked styles for Tailwind CDN */
.peer:checked ~ .peer-checked\:after\:translate-x-full::after {
  transform: translateX(100%);
}
.peer:checked ~ .peer-checked\:bg-emerald-600 {
  background-color: #059669;
}

/* Revenue bar animation */
.revenue-bar {
  transition: width 0.3s ease-out;
}

/* Truncate utility for long URLs */
.truncate-url {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Telemetry bar chart */
.telemetry-bar {
  transition: height 0.2s ease-out;
  min-height: 2px;
}

/* Telemetry detail panel expand */
.telemetry-detail-panel {
  animation: fadeIn 0.15s ease-out;
}

/* Telemetry site row highlight on expanded */
.telemetry-site-row.expanded {
  background: rgba(255, 255, 255, 0.04);
}