/* ---------------------------------------------------------
   11. Empty state
   --------------------------------------------------------- */
.empty-state {
  display: grid;
  justify-items: center;
  text-align: center;
  padding: var(--sp-12) var(--sp-6);
  color: var(--color-text-muted);
}

.empty-state__icon {
  font-size: 3rem;
  margin-bottom: var(--sp-4);
  opacity: 0.4;
  line-height: 1;
}

.empty-state__title {
  max-width: min(100%, 42rem);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--sp-2);
}

.empty-state__desc {
  display: block;
  width: min(100%, 28rem);
  font-size: var(--text-sm);
  margin: 0 auto var(--sp-6) !important;
  text-align: center !important;
}

/* ---------------------------------------------------------
   12. Utility helpers
   --------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.text-muted { color: var(--color-text-muted); }
.text-rosso { color: var(--color-rosso); }
.text-sm    { font-size: var(--text-sm); }
.text-xs    { font-size: var(--text-xs); }
.fw-600     { font-weight: 600; }
.mt-4       { margin-top: var(--sp-4); }
.mb-4       { margin-bottom: var(--sp-4); }
.mb-6       { margin-bottom: var(--sp-6); }
.flex       { display: flex; }
.gap-2      { gap: var(--sp-2); }
.items-center { align-items: center; }
.flex-wrap  { flex-wrap: wrap; }

/* ---------------------------------------------------------
   13. HTMX loading indicator
   --------------------------------------------------------- */
.htmx-indicator {
  opacity: 0;
  transition: opacity 200ms ease-in;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}