/* ============================================================
   JobHunter AI — custom CSS
   Complements Tailwind CDN (only what Tailwind can't do)
   ============================================================ */

/* ---------- Spinner (loading buttons) ---------- */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* ---------- Status chips ---------- */
.status-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-chip.status-new {
  background-color: #f3f4f6;
  color: #374151;
}

.status-chip.status-matched {
  background-color: #dbeafe;
  color: #1d4ed8;
}

.status-chip.status-applied {
  background-color: #dcfce7;
  color: #15803d;
}

.status-chip.status-replied {
  background-color: #f3e8ff;
  color: #7e22ce;
}

.status-chip.status-draft {
  background-color: #fef9c3;
  color: #a16207;
}

.status-chip.status-submitted {
  background-color: #dcfce7;
  color: #15803d;
}

.status-chip.status-rejected {
  background-color: #fee2e2;
  color: #b91c1c;
}

/* ---------- Toast notifications ---------- */
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toast-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.97);
  }
}

.toast-enter {
  animation: toast-in 0.22s ease-out both;
}

.toast-exit {
  animation: toast-out 0.22s ease-in both;
}

/* ---------- Pipeline buttons ---------- */
.pipeline-btn:disabled {
  pointer-events: none;
}

/* ---------- Smooth transitions on status chips ---------- */
.status-chip {
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* ---------- Scrollbar styling for description textarea ---------- */
textarea[readonly]::-webkit-scrollbar,
.overflow-y-auto::-webkit-scrollbar {
  width: 4px;
}

textarea[readonly]::-webkit-scrollbar-track,
.overflow-y-auto::-webkit-scrollbar-track {
  background: transparent;
}

textarea[readonly]::-webkit-scrollbar-thumb,
.overflow-y-auto::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 9999px;
}

/* ---------- Responsive: stats 2x2 on mobile ---------- */
@media (max-width: 640px) {
  .grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Table row hover is already handled by Tailwind ---------- */
/* ---------- HTMX loading indicator ---------- */
.htmx-request .htmx-indicator { display: inline-block; }
.htmx-indicator { display: none; }