/* Hide Debug endpoints in Swagger UI - handled by JavaScript */

/* Indent nav items below section headers */
.md-nav[data-md-level="1"] > .md-nav__list,
.md-nav[data-md-level="2"] > .md-nav__list {
  padding-left: 1.2rem !important;
}

/* LED Status Page Styles */
.led-status-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}

.led-status-table {
  flex: 1;
  min-width: 300px;
}

.led-status-image {
  flex: 0 0 auto;
  position: sticky;
  top: 5rem;
}

.led-status-image img {
  max-width: 150px;
  height: auto;
}

.led-preview-container {
  position: relative;
  width: 150px;
  height: 150px;
}

.led-preview-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

#led-base {
  z-index: 1;
}

#led-color {
  z-index: 2;
  transition: opacity 0.4s ease-in-out;
}

#led-color.pulsing {
  animation: pulse 2.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 40% { opacity: 1; }
  70% { opacity: 0; }
  100% { opacity: 1; }
}

/* Highlight table rows on hover */
.led-status-table table tbody tr:hover {
  background-color: rgba(var(--md-primary-fg-color--light), 0.1);
}

/* Make entire row hoverable */
.led-row {
  cursor: pointer;
}

@media (max-width: 768px) {
  .led-status-container {
    flex-direction: column-reverse;
  }

  .led-status-image {
    position: static;
    text-align: center;
    width: 100%;
  }

  .led-status-image img {
    max-width: 120px;
  }
}