/**
 * Utility Styles - HTMX loading indicators, helper classes
 */

/* ========== HTMX Loading Indicator Styles ========== */
.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator {
  display: inline-flex !important;
}

.htmx-request.htmx-indicator {
  display: inline-flex !important;
}

/* ========== Button Loading States ========== */
.htmx-request .btn-text {
  display: none;
}

.htmx-request .btn-loading {
  display: inline-flex !important;
}

/* ========== Disabled Appearance During Request ========== */
.htmx-request {
  pointer-events: none;
  opacity: 0.7;
}

/* ========== Loading Overlay for Content Areas ========== */
.loading-overlay {
  position: relative;
}

.loading-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.8);
  display: none;
  z-index: 10;
}

.loading-overlay.htmx-request::after {
  display: block;
}

.loading-overlay .loading-spinner-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 11;
  display: none;
}

.loading-overlay.htmx-request .loading-spinner-overlay {
  display: block;
}

/* ========== Spacing Utilities ========== */
.mr-2 {
  margin-right: 0.5rem;
}

.gap-2 {
  gap: 0.5rem;
}

/* ========== Table Actions ========== */
.table-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  align-items: center;
}

/* ========== Responsive Utilities ========== */

/* Mobile breakpoint */
@media (max-width: 768px) {
  .table-actions {
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
  }

  .table-actions .btn,
  .table-actions button {
    width: 100%;
    justify-content: center;
  }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
  /* Better touch targets for mobile devices */
  button,
  .btn,
  a {
    min-height: 44px;
    min-width: 44px;
  }
}