/* Project styles, on top of Bootstrap. Third-party assets go in static/vendor/. */

/* The global htmx request indicator: a thin animated bar at the top of the window.
   htmx shows it (opacity 1) while any request is running. */
.request-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1100;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--bs-primary), transparent);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  animation: request-indicator-slide 1s linear infinite;
}

@keyframes request-indicator-slide {
  from { background-position: -50% 0; }
  to { background-position: 150% 0; }
}

/* Long user names or emails must not push the menu off narrow screens. */
.navbar .user-name {
  max-width: 18rem;
}

/* Alpine shows these once it has started (e.g. a tab that starts hidden). */
[x-cloak] {
  display: none !important;
}

/* Django marks fields with errors aria-invalid="true" (core/_form_fields.html). */
.form-control[aria-invalid="true"],
.form-select[aria-invalid="true"] {
  border-color: var(--bs-form-invalid-border-color);
}

/* Sortable column headers look like headers, not like links. */
.sort-link {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.create-card {
  max-width: 36rem;
}