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

/* External-link icon next to nav entries, top tabs, and footer links that point outside the docs */
.md-nav__link[href^="http://"]::after,
.md-nav__link[href^="https://"]::after,
.md-tabs__link[href^="http://"]::after,
.md-tabs__link[href^="https://"]::after,
.md-copyright__highlight a[href^="http://"]::after,
.md-copyright__highlight a[href^="https://"]::after {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  vertical-align: -0.1em;
  background-color: currentColor;
  opacity: 0.65;
  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE0LDNWNWgzLjU5TDcuNzYsMTQuODNsMS40MSwxLjQxTDE5LDYuNDFWMTBoMlYzTTE5LDE5SDVWNWg3VjNINUMzLjg5LDMgMywzLjg5IDMsNXYxNGEyLDIgMCAwLDAgMiwyaDE0YTIsMiAwIDAsMCAyLTJ2LTdoLTJ2N1oiLz48L3N2Zz4=") no-repeat center / contain;
          mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE0LDNWNWgzLjU5TDcuNzYsMTQuODNsMS40MSwxLjQxTDE5LDYuNDFWMTBoMlYzTTE5LDE5SDVWNWg3VjNINUMzLjg5LDMgMywzLjg5IDMsNXYxNGEyLDIgMCAwLDAgMiwyaDE0YTIsMiAwIDAsMCAyLTJ2LTdoLTJ2N1oiLz48L3N2Zz4=") no-repeat center / contain;
}

/* Top-nav tab external link: icon sits to the right of the label */
.md-tabs__link[href^="http://"]::after,
.md-tabs__link[href^="https://"]::after {
  margin-left: 0.3em;
}

/* Separator before external tabs (e.g. Shop) in the top nav — short centered line */
.md-tabs__item:has(> .md-tabs__link[href^="http://"]),
.md-tabs__item:has(> .md-tabs__link[href^="https://"]) {
  margin-left: 0.6rem;
  padding-left: 1.2rem;
  position: relative;
}

.md-tabs__item:has(> .md-tabs__link[href^="http://"])::before,
.md-tabs__item:has(> .md-tabs__link[href^="https://"])::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1rem;
  background-color: rgba(255, 255, 255, 0.4);
}

/* Shop tab: highlight with warm accent color (amber on blue header) + cart icon for visibility */
.md-tabs__link[href^="https://www.xn--wattwchter-u5a.de"] {
  color: #ffd54f;
  font-weight: 700;
  opacity: 1;
}

.md-tabs__link[href^="https://www.xn--wattwchter-u5a.de"]:hover,
.md-tabs__link[href^="https://www.xn--wattwchter-u5a.de"]:focus {
  color: #ffe082;
}

.md-tabs__link[href^="https://www.xn--wattwchter-u5a.de"] .md-ellipsis::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.35em;
  vertical-align: -0.15em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE3LDE4QzE1Ljg5LDE4IDE1LDE4Ljg5IDE1LDIwQTIsMiAwIDAsMCAxNywyMkEyLDIgMCAwLDAgMTksMjBDMTksMTguODkgMTguMSwxOCAxNywxOE0xLDJWNEgzTDYuNiwxMS41OUw1LjI0LDE0LjA0QzUuMDksMTQuMzIgNSwxNC42NSA1LDE1QTIsMiAwIDAsMCA3LDE3SDE5VjE1SDcuNDJBMC4yNSwwLjI1IDAgMCwxIDcuMTcsMTQuNzVDNy4xNywxNC43IDcuMTgsMTQuNjYgNy4yLDE0LjYzTDguMSwxM0gxNS41NUMxNi4zLDEzIDE2Ljk2LDEyLjU4IDE3LjMsMTEuOTdMMjAuODgsNS41QzIwLjk1LDUuMzQgMjEsNS4xNyAyMSw1QTEsMSAwIDAsMCAyMCw0SDUuMjFMNC4yNywyTTcsMThDNS44OSwxOCA1LDE4Ljg5IDUsMjBBMiwyIDAgMCwwIDcsMjJBMiwyIDAgMCwwIDksMjBDOSwxOC44OSA4LjEsMTggNywxOFoiLz48L3N2Zz4=") no-repeat center / contain;
          mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE3LDE4QzE1Ljg5LDE4IDE1LDE4Ljg5IDE1LDIwQTIsMiAwIDAsMCAxNywyMkEyLDIgMCAwLDAgMTksMjBDMTksMTguODkgMTguMSwxOCAxNywxOE0xLDJWNEgzTDYuNiwxMS41OUw1LjI0LDE0LjA0QzUuMDksMTQuMzIgNSwxNC42NSA1LDE1QTIsMiAwIDAsMCA3LDE3SDE5VjE1SDcuNDJBMC4yNSwwLjI1IDAgMCwxIDcuMTcsMTQuNzVDNy4xNywxNC43IDcuMTgsMTQuNjYgNy4yLDE0LjYzTDguMSwxM0gxNS41NUMxNi4zLDEzIDE2Ljk2LDEyLjU4IDE3LjMsMTEuOTdMMjAuODgsNS41QzIwLjk1LDUuMzQgMjEsNS4xNyAyMSw1QTEsMSAwIDAsMCAyMCw0SDUuMjFMNC4yNywyTTcsMThDNS44OSwxOCA1LDE4Ljg5IDUsMjBBMiwyIDAgMCwwIDcsMjJBMiwyIDAgMCwwIDksMjBDOSwxOC44OSA4LjEsMTggNywxOFoiLz48L3N2Zz4=") no-repeat center / contain;
}

/* Footer external link: small left margin since there is no flex gap there */
.md-copyright__highlight a[href^="http://"]::after,
.md-copyright__highlight a[href^="https://"]::after {
  margin-left: 0.2em;
}

/* Nav external link: shrink Material's flex gap so the icon sits as close to the text as in the footer */
.md-nav__link[href^="http://"],
.md-nav__link[href^="https://"] {
  gap: 0.2rem;
}

/* Nav external link icon: push down to match the footer's vertical position
   (in the nav, the link is flex with align-items: flex-start, so vertical-align doesn't apply) */
.md-nav__link[href^="http://"]::after,
.md-nav__link[href^="https://"]::after {
  margin-top: 0.15em;
}

/* 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;
}

/* Content tabs (=== "Tab"): give inactive labels visible contrast,
   highlight the active tab with the primary color and a thicker underline */
.md-typeset .tabbed-labels > label {
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.75;
}

.md-typeset .tabbed-set > input:checked + label,
.md-typeset .tabbed-labels > label[aria-selected="true"] {
  color: var(--md-primary-fg-color);
  opacity: 1;
  font-weight: 700;
}

.md-typeset .tabbed-set > input:checked + label::after,
.md-typeset .tabbed-labels > label[aria-selected="true"]::after {
  background-color: var(--md-primary-fg-color) !important;
  height: 3px !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;
  }
}

/* A bit more breathing room above and below admonition / info boxes */
.md-typeset .admonition,
.md-typeset details {
  margin-top: 2.5em;
  margin-bottom: 2.5em;
}

/* "We moved" banner (assets/js/moved-banner.js) — sits above the header like
   Material's announcement bar, only for visitors from docs.wattwächter.de. */
.ww-moved-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  /* Amber on purpose: the blue header swallowed the banner. Fixed colours so
     it looks the same in the light and the dark scheme. */
  background: #ffb300;
  color: #1f1a00;
  border-bottom: 2px solid #c98b00;
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: center;
}

.ww-moved-banner strong {
  color: inherit;
}

.ww-moved-banner__close {
  flex: none;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
}

.ww-moved-banner__close:hover {
  opacity: 1;
}