/* Spinner used inside buttons (HTMX adds .htmx-request to the requesting element). */
.spinner {
  width: 0.95em;
  height: 0.95em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-rot 0.7s linear infinite;
  display: none;
}
.htmx-request .spinner,
.htmx-request.spinner {
  display: inline-block;
}
@keyframes spinner-rot { to { transform: rotate(360deg); } }

/* Flash messages */
.flash {
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  font-size: 0.85rem;
  display: inline-block;
}
.flash.ok    { background: #ecfdf5; color: #065f46; border: 1px solid #6ee7b7; }
.flash.error { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }
.dark .flash.ok    { background: #064e3b; color: #d1fae5; border-color: #065f46; }
.dark .flash.error { background: #7f1d1d; color: #fee2e2; border-color: #991b1b; }

/* Predict table */
.predict-table {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  border-collapse: collapse;
}
.predict-table td {
  padding: 2px 8px;
  border-bottom: 1px solid #e2e8f0;
}
.dark .predict-table td { border-bottom-color: #334155; }
.predict-table td.num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Image card selection state — outline when checkbox inside is checked. */
.image-card { transition: outline-color 0.1s ease; outline: 2px solid transparent; outline-offset: -2px; cursor: grab; }
.image-card:hover { outline-color: rgba(245, 158, 11, 0.4); }
.image-card:active { cursor: grabbing; }
.image-card.is-dragging { opacity: 0.4; }
.image-card:has(.image-checkbox:checked) {
  outline-color: #f59e0b;
}
.image-card:has(.image-checkbox:checked) > span {
  background: #f59e0b !important;
  color: #1f2937;
}

/* Drop zone */
.dropzone {
  position: relative;
}
.dropzone.is-dragover {
  outline: 2px dashed #f59e0b;
  outline-offset: -6px;
}
.dropzone-overlay {
  position: absolute;
  inset: 0;
  border-radius: 0.25rem;
  background: rgba(15, 23, 42, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  pointer-events: none;
  z-index: 10;
}
.dropzone.is-dragover .dropzone-overlay {
  display: flex !important;
}

/* Per-card prediction badge (transient, populated by "Predict selected"). */
.predict-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  pointer-events: none;
  z-index: 5;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}
.predict-badge.correct   { background: #16a34a; }
.predict-badge.incorrect { background: #dc2626; }
.predict-badge.error     { background: #6b7280; }

/* Subtle scrollbar in dark mode */
.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
.dark ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
.dark ::-webkit-scrollbar-track { background: #0b1220; }