/* ============================================================
RosterDive — Org Courses page
Page-specific styles not covered by DS components.
DS components used: splash-bg, splash-page, button, card,
inline-header, alert, modal, datatable,
toolbar, icon-button, badge, page-header,
topbar, hamburger, drawer, menu-group,
back-link, section-header, form-field,
toast
Tokens: css/tokens.css
Shared: css/auth.css (auth-main)

Table state rows (loading / empty / error) reuse the DS DataTable
classes (.datatable__loading / .datatable__empty / .datatable__error),
which also keeps them out of the DS client-side pagination.

NOTE ON SHARED CLASS NAMES
Classes such as .espandi-btn, .istruttore-view, .corso-num-iscritti,
.costo and .icon--iscritto are repository-wide
conventions shared with other live pages (roster_sites, gestione_siti,
storico_congegne, storico_revisioni, attrezzatura_club, ...).
Renaming them would require a global refactor and is out of scope here.
============================================================ */

/* ── Inline enrollment count ── */
.corso-num-iscritti {
  font-size: var(--font-body-medium);
  color: var(--color-text-secondary);
  margin-left: var(--space-2);
}

/* ── Enrollment sub-table (DS DataTable markup) ──
   The nested context drops the DS 600px min-width so the enrollment
   list adapts to the detail row width. */
.datatable__detail .datatable__wrapper {
  margin-top: var(--space-3);
}

.datatable__detail .datatable__table {
  min-width: 0;
}

/* ── Cost (price) cell ── */
.costo {
  white-space: nowrap;
}

/* ── Inline icons in the enrollment details ── */
.icon--iscritto {
  font-size: var(--font-body-large);
  vertical-align: middle;
  margin-right: var(--space-1);
  color: var(--color-text-secondary);
}

.icon--sollecito {
  color: var(--color-primary);
}

.icon--pagamento {
  color: var(--color-primary);
}

.icon--cyan {
  color: var(--color-primary);
}

/* ── Instructor view (admin-only actions hidden) ── */
.istruttore-view .btn-admin-only {
  display: none;
}

/* Empty enrollments message inside the detail row. Kept page-local on
   purpose: the DS .datatable__empty would make DataTable._rowUnits() skip
   the whole detail row (it treats rows containing that class as state rows). */
.enrollments-empty {
  text-align: center;
  padding: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--font-body-medium);
  font-style: italic;
}

.datatable__checkbox-col {
  width: 2.75rem; /* 44px */
}

.form-field__textarea--auto {
  height: auto;
}

/* ── Responsive ── */
@media (max-width: 599px) {
  .datatable__detail .datatable__table th,
  .datatable__detail .datatable__table td {
    padding: var(--space-2);
    font-size: var(--font-body-medium);
  }
}