/* Django-only additions. globals.css stays an unchanged copy of the React app's file. */

[hidden] {
  display: none !important;
}

/* Native <dialog> elements reuse the React modal overlay classes, so reset the UA dialog box. */
dialog {
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
}
dialog:not([open]) {
  display: none !important;
}
dialog::backdrop {
  background: transparent;
}
dialog.plain-overlay[open] {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg-overlay);
  display: grid;
  place-items: center;
  padding: var(--space-md);
}

/* HTMX request indicator: hidden until a request is in flight. */
.htmx-indicator {
  display: none;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline-flex;
}
.htmx-request .hide-while-loading {
  display: none !important;
}

#htmx-error {
  margin: var(--space-md) auto 0;
  max-width: var(--container-max);
  padding-inline: var(--page-gutter);
}

.errorlist {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--danger);
  font-size: 0.85rem;
}

/* Light theme: globals.css gives these badges near-white text (made for the dark theme), unreadable on white cards.
   The React app has the same problem; fixed here only. */
[data-theme="light"] .badge-success {
  background: rgba(21, 128, 61, 0.1);
  border-color: rgba(21, 128, 61, 0.25);
  color: var(--success);
}
[data-theme="light"] .badge-danger {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.22);
  color: var(--danger);
}

/* The sidebar logo dot uses `animation: pulseDot`, which the React CSS never defined; same keyframes as the login brand dot. */
@keyframes pulseDot {
  0%,
  100% {
    transform: scale(1);
    box-shadow:
      0 0 0 6px rgba(var(--accent-rgb), 0.08),
      0 0 24px rgba(var(--accent-rgb), 0.28);
  }

  30% {
    transform: scale(1.1);
    box-shadow:
      0 0 0 8px rgba(var(--accent-rgb), 0.12),
      0 0 32px rgba(var(--primary-rgb), 0.44);
  }

  44% {
    transform: scale(1.12);
  }

  58% {
    transform: scale(0.96);
  }

  72% {
    transform: scale(1.05);
  }
}