/**
 * Uptime Status Dashboard CSS
 * 
 * Styles for the uptime monitoring dashboard
 */

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.uptime-chevron {
  transition: transform 0.3s ease;
}

/* Uptime Chart Styles */

/* Detailed chart container */
.uptime-chart-container {
  position: relative;
  width: 100%;
  overflow: visible !important;
}

/* Chart labels container */
.chart-html-labels {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.uptime-chart {
  display: block;
  width: 100%;
  height: 200px;
}

.uptime-chart-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}

/* Chart range buttons */
.uptime-chart-range-btn {
  transition: all 0.2s ease;
}

.uptime-chart-range-btn:hover {
  transform: translateY(-1px);
}

.uptime-chart-range-btn.active {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Chart tooltips */
.chart-tooltip {
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.chart-bar-hover {
  transition: opacity 0.1s ease;
}

.chart-bar {
  transition: opacity 0.2s ease;
}

.chart-bar-hover:hover + .chart-bar,
.chart-bar-group:hover .chart-bar {
  opacity: 1;
  filter: brightness(1.1);
}

/* Chart labels */
.chart-label {
  fill: #6b7280;
  font-size: 11px;
}

@media (prefers-color-scheme: dark) {
  .chart-label {
    fill: #9ca3af;
  }
  
  .chart-grid line {
    stroke: #374151;
  }
}

/* Mobile responsive styles for monitor modal */
@media (max-width: 800px) {
  /* Make modal fixed width and centered on mobile */
  #uptime-monitor-modal .relative {
    width: 300px !important;
    max-width: 300px !important;
    margin: 2.5rem auto !important;
    padding: 0 !important;
  }
  
  #uptime-monitor-modal .bg-white,
  #uptime-monitor-modal .dark\:bg-gray-800 {
    width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 1rem) !important;
    border-radius: 1rem !important;
  }
  
  /* Make header more compact on mobile */
  #uptime-monitor-modal .flex.items-start.justify-between.border-b {
    padding: 0.75rem 1rem !important;
  }
  
  /* Make sidebar full width on mobile */
  #uptime-monitor-modal .w-64 {
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid rgb(229 231 235) !important;
  }
  
  /* Dark mode border for sidebar */
  #uptime-monitor-modal .dark .w-64 {
    border-bottom-color: rgb(55 65 81) !important;
  }
  
  /* Hide main content area (tabs and content) on mobile */
  #uptime-monitor-modal .flex-1.flex.flex-col.overflow-hidden {
    display: none !important;
  }
  
  /* Adjust sidebar padding on mobile */
  #uptime-monitor-modal nav.flex-1 {
    padding: 0.75rem !important;
  }
  
  /* Ensure sidebar buttons are still visible and properly styled */
  #uptime-monitor-modal .w-64 button {
    width: 100% !important;
  }
}

/* Status page chart styles */
.status-page-chart-container {
  width: 100%;
  position: relative;
  overflow: visible !important;
  box-sizing: border-box;
}

.status-page-chart-container .uptime-chart-bars {
  width: 100%;
  height: 30px;
}

.status-page-chart-container .chart-html-labels {
  width: 100% !important;
  max-width: 100% !important;
}

.speedlist-dots span {
  animation: speedlist-dot-pulse 1.4s infinite;
  opacity: 0;
}
.speedlist-dots span:nth-child(2) { animation-delay: 0.2s; }
.speedlist-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes speedlist-dot-pulse {
  0%, 80%, 100% { opacity: 0; }
  40% { opacity: 1; }
}