/* ==========================================================================
   list_item.css — List Item Component

   Riga di lista generica con info, badge stato e azioni.
   Pattern unificato da: gestione_corso_dettaglio (.iscritto-row).

   Struttura:
   <div class="list-item">
     <div class="list-item__info">
       <span class="list-item__title">Nome</span>
       <span class="list-item__subtitle">Dettaglio</span>
     </div>
     <div class="list-item__badge"><span class="badge">Stato</span></div>
     <div class="list-item__actions">
       <button class="btn-icon btn-icon--edit">...</button>
     </div>
   </div>

   FIX (2026-08-02): il file referenziava token di uno schema di naming
   precedente (--space-xs/sm/md, --color-divider, --font-size-*,
   --font-weight-*) non più presenti in css/tokens.css (Design Tokens v3.0),
   quindi il componente non applicava alcuno stile reale. Allineato ai
   token correnti.
   Token: --color-border, --color-text-primary, --color-text-secondary,
          --font-body-large, --font-body-medium, --weight-medium,
          --weight-regular, --line-height-tight,
          --space-1, --space-2, --space-4
   ========================================================================== */

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.list-item__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  flex: 1;
}

.list-item__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-body-large);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-item__subtitle {
  font-family: var(--font-family-primary);
  font-size: var(--font-body-medium);
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
  line-height: var(--line-height-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-item__badge {
  flex-shrink: 0;
}

.list-item__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 599px) {
  .list-item {
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2) 0;
  }

  .list-item__actions {
    width: 100%;
    justify-content: flex-end;
  }
}