/* ==========================================================================
   org_course_detail.css — Page-specific styles

   Solo stili non coperti dai componenti DS.
   DS components usati: info_grid, datatable, button, badge, modal,
                         confirm_dialog, page_header, section_header,
                         loading_state, toast, back_link,
                         icon_button, form-field

   Token: css/tokens.css (Design Tokens v3.0)

   FIX (2026-08-02):
   - Rimosso riferimento nel commento a css/auth.css e css/wac-menu.css:
     non più pertinenti da quando la pagina è dentro lo shell SPA
     (layout "app", header/menu gestiti da app_bootstrap.js)
   - Sostituiti i token inesistenti --space-xl/lg/md/sm, --color-divider,
     --layout-max-width, --layout-padding-laptop (schema di naming
     precedente, mai esistiti in tokens.css v3.0) con i token reali
     --space-1..16 e --color-border. Prima di questo fix la sezione
     .dettaglio-main non aveva di fatto alcun max-width/padding applicato.
   - Aggiunta .section-header-row: layout non coperto da un componente
     DS dedicato (titolo sezione + bottone azione sulla stessa riga).
   ========================================================================== */

/* ── Main layout ── */
.dettaglio-main {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-8);
  padding-top: 96px; /* spazio per topbar fissa */
}

/* Nota (2026-10-16): la utility .hidden è stata rimossa — è duplicata
   dalla regola nativa [hidden] definita in ds/base/reset.css. Gli stati
   nascosti della pagina usano ora l'attributo HTML nativo [hidden]. */

/* ── Riga titolo sezione + bottone azione (Iscritti) ── */
.section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.section-header-row .section-header {
  margin-bottom: 0;
}

/* ── Sezioni ── */
.iscritti-section {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.modifiche-section {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.modifiche-section .section-header {
  margin-bottom: var(--space-3);
}

/* ── Azioni bottone ── */
.corso-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ── Tabella iscritti (DS DataTable) ── */
#enrollments-table {
  margin-top: var(--space-4);
}

/* ── Member search results ── */
.member-search-results {
  margin-top: var(--space-4);
  max-height: 320px;
  overflow-y: auto;
}

.member-search-results__loading,
.member-search-results__empty {
  text-align: center;
  color: var(--color-text-secondary);
  padding: var(--space-4);
  font-size: var(--font-body-medium);
}

.member-search-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-surface);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-standard);
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
}

.member-search-item:hover,
.member-search-item:focus-visible {
  background: var(--color-surface-container);
}

.member-search-item__name {
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  font-size: var(--font-body-large);
}

.member-search-item__email {
  font-size: var(--font-body-medium);
  color: var(--color-text-secondary);
}


/* ── Empty state del catalogo didattiche (dentro .info-grid) ── */
.info-grid .empty-state {
  grid-column: 1 / -1;
}

.info-grid .empty-state .button {
  margin-top: var(--space-4);
}


/* ==========================================================================
   RESPONSIVE — Mobile 5''
   ========================================================================== */

@media (max-width: 599px) {
  .dettaglio-main {
    padding: var(--space-6);
    padding-top: 72px;
  }

  .corso-azioni {
    flex-direction: column;
  }

  .corso-azioni .button {
    width: 100%;
  }
}