/* ============================================
   Statuspage Customization - CSS
   Desktop + Mobile
   ============================================ */

/* Hide header */
.page-component-uptime-header,
.component-uptime-header,
.uptime-header {
  display: none !important;
}

/* Hide uptime percentage text */
.uptime-percent,
.component-uptime-text,
.component-extra-info {
  display: none !important;
}

/* Hide legend row */
.legend {
  display: none !important;
}

/* Hide spacer lines */
.spacer {
  display: none !important;
}

/* Make SVG full width on all devices */
svg.availability-time-line-graphic,
svg[id^="uptime-component"] {
  width: 100% !important;
  display: block !important;
  max-width: 100% !important;
}

/* Mobile overrides */
@media only screen and (max-width: 768px) {
  .component-inner-container,
  .component-container {
    overflow: visible !important;
  }

  svg.availability-time-line-graphic,
  svg[id^="uptime-component"] {
    width: 100% !important;
    height: 34px !important;
    max-width: 100% !important;
  }
}

/* Enable pointer events on SVG bars for tooltip */
svg.availability-time-line-graphic rect,
svg[id^="uptime-component"] rect {
  pointer-events: all;
}

/* Custom tooltip styling — uses specific ID so it's never hidden */
#uptime-custom-tooltip {
  position: absolute;
  background: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999;
  display: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Custom tooltip arrow */
#uptime-custom-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #333;
}

/* Hide Statuspage default tooltips/popovers (NOT our custom one) */
.tooltip-base,
.tooltip-base-content,
.component-delta-tooltip,
.availability-time-line-tooltip,
.tippy-box,
.tippy-content,
.popover,
.popover-content {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Hide "Related" section */
.related-events-container,
.related-incidents,
.related-events,
[class*="related"] {
  display: none !important;
}