/* API-down banner — fixed at top, shown via JS when API is unreachable */
.api-down-banner {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 10000;
  padding: var(--space-xs) var(--space-m);
  background-color: var(--color-warning-light);
  border-bottom: 2px solid var(--color-warning);
  color: var(--color-warning);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-align: center;
}

/* Tooltip on any element via data-tooltip attribute.
   Wrapping a disabled button in a <span data-tooltip="..."> makes the
   tooltip accessible since disabled buttons don't fire mouse events. */
[data-tooltip] {
  position: relative;
}

[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + var(--space-2xs));
  inset-inline-start: 50%;
  translate: -50% 0;
  white-space: nowrap;
  background: var(--color-text);
  color: var(--color-bg);
  font-size: var(--text-xs);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-sm);
  pointer-events: none;
  z-index: 10;
}

/* Ensure <dialog> without [open] is never visible — guards against
   browsers that don't apply the UA display:none reliably. */
dialog:not([open]) {
  display: none;
}

/* Conditional error colour on stat values */
[data-alert="error"] {
  color: var(--color-error);
}

/* Responsive: collapse sidebar on narrow screens */
@media (max-width: 768px) {
  .admin-layout {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    position: static;
    width: 100%;
  }

  .admin-main {
    margin-inline-start: 0;
  }
}