.one-line {
  white-space: nowrap;
}

/* Equal height utility for complex layouts that need more control than Tailwind flex */
.equal-height-grid {
  display: grid;
  align-items: stretch;
}

.equal-height-grid > * {
  display: flex;
  flex-direction: column;
}

/* ============================================
   HTMX Loading Indicators
   ============================================ */

/*
 * The .htmx-indicator class is used by HTMX to show/hide loading indicators
 * When a request is in flight, the triggering element (or ancestor) gets .htmx-request
 * This allows us to show spinners and hide default content during requests
 */

/* Hide indicator by default - HTMX shows it when request is in flight */
.htmx-indicator {
  display: none !important;
  opacity: 0;
  transition: opacity 200ms ease-in;
}

/* Show indicator when request is in flight */
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline-flex !important;
  align-items: center;
  opacity: 1;
}

/* Hide default content when request is in flight */
.htmx-request .htmx-indicator-hide {
  display: none !important;
}

/* Button loading states - disable interaction during request */
button.htmx-request,
.htmx-request button[type='submit'],
input[type='submit'].htmx-request {
  pointer-events: none;
  opacity: 0.7;
  cursor: wait;
}

/* For forms: apply htmx-request class to submit button */
form.htmx-request button[type='submit'],
form.htmx-request input[type='submit'] {
  pointer-events: none;
  opacity: 0.7;
  cursor: wait;
}

/* Loading spinner animation */
@keyframes htmx-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.htmx-indicator svg.animate-spin,
.htmx-spinner {
  animation: htmx-spin 1s linear infinite;
}

/* Global loading overlay (optional - for blocking requests) */
#htmx-global-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  height: 3px;
  background: transparent;
  pointer-events: none;
}

#htmx-global-indicator .htmx-indicator {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-primary-light, #60a5fa) 50%, var(--c-primary) 100%);
  background-size: 200% 100%;
  animation: htmx-progress 1.5s ease-in-out infinite;
  opacity: 0;
  transition: opacity 200ms ease-in;
}

/* Show the progress bar when body has htmx-request class */
body.htmx-request #htmx-global-indicator .htmx-indicator {
  opacity: 1;
}

@keyframes htmx-progress {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Inline button loading pattern - position for absolute spinners */
.btn-loading-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Accessible loading state */
.htmx-request[aria-busy] {
  aria-busy: true;
}