/**
 * @file
 * Stili per campo Paragraph "Materiale usato" (field_materiale_usato)
 * 
 * Utilizza selettori CSS specifici basati sulla struttura HTML effettiva.
 * Layout inline dei campi su desktop per ottimizzare lo spazio nell'edit form.
 * Issue: Miglioramento UX edit form rapportini
 */

/* ============================================================================
   Layout inline su desktop
   ============================================================================ */

@media (min-width: 768px) {
  /* Wrapper del paragrafo materiale_usato - layout flex per allineare i campi */
  .paragraphs-subform[data-drupal-selector*="field-materiale-usato"][data-drupal-selector*="subform"] {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--gin-spacing-m, 1rem);
    align-items: flex-start;
  }
  
  /* Campo Nome materiale: si espande sempre per riempire lo spazio disponibile */
  .paragraphs-subform[data-drupal-selector*="field-materiale-usato"] > .field--name-field-nome-materiale {
    flex: 1 1 auto;
    min-width: 200px; /* Larghezza minima per leggibilità */
  }
  
  /* Campo Quantità: si espande se altri campi sono nascosti */
  .paragraphs-subform[data-drupal-selector*="field-materiale-usato"] > .field--name-field-quantita-materiale {
    flex: 0 0 120px; /* Larghezza fissa minima */
    min-width: 120px;
  }
  
  /* Campo Valore: si espande se altri campi sono nascosti */
  .paragraphs-subform[data-drupal-selector*="field-materiale-usato"] > .field--name-field-valore-materiale {
    flex: 0 0 120px; /* Larghezza fissa minima */
    min-width: 120px;
  }
  
  /* Riduci il margine bottom dei form-item per layout compatto */
  .paragraphs-subform[data-drupal-selector*="field-materiale-usato"] .form-item {
    margin-bottom: var(--gin-spacing-xs, 0.375rem);
  }
}

/* ============================================================================
   Layout mobile
   ============================================================================ */

@media (max-width: 767px) {
  /* Su mobile: mantieni layout verticale standard */
  .paragraphs-subform[data-drupal-selector*="field-materiale-usato"][data-drupal-selector*="subform"] {
    display: block;
  }
  
  .paragraphs-subform[data-drupal-selector*="field-materiale-usato"] > .field--name-field-nome-materiale,
  .paragraphs-subform[data-drupal-selector*="field-materiale-usato"] > .field--name-field-quantita-materiale,
  .paragraphs-subform[data-drupal-selector*="field-materiale-usato"] > .field--name-field-valore-materiale {
    width: 100%;
    margin-bottom: var(--gin-spacing-s, 0.5rem);
  }
}

/* ============================================================================
   Stili generali
   ============================================================================ */

/* Assicura che gli input utilizzino l'intera larghezza disponibile */
.paragraphs-subform[data-drupal-selector*="field-materiale-usato"] input[type="text"],
.paragraphs-subform[data-drupal-selector*="field-materiale-usato"] input[type="number"] {
  width: 100%;
  max-width: 100%;
}

/* Stile del container paragrafo per coerenza con Gin */
.paragraphs-subform[data-drupal-selector*="field-materiale-usato"][data-drupal-selector*="subform"] {
  padding: var(--gin-spacing-m, 1rem);
  background-color: var(--gin-bg-layer, #fff);
  border-radius: var(--gin-border-radius-s, 4px);
  margin-bottom: var(--gin-spacing-m, 1rem);
}

/* Nascondi il pulsante "Mostra l'ordine delle righe" per il campo materiale_usato */
.field--name-field-materiale-usato .tabledrag-toggle-weight-wrapper {
  display: none;
}

/* Nascondi completamente il dropdown se vuoto */
.field--name-field-materiale-usato .paragraphs-dropdown {
  display: none;
}

/* ============================================================================
   Pulsanti azione
   ============================================================================ */

/* Pulsante "Aggiungi materiale" - stili coerenti con altri pulsanti principali */
.field--name-field-materiale-usato .paragraphs-add-wrapper input[type="submit"],
.field--name-field-materiale-usato .paragraphs-add-wrapper button {
  font-size: var(--gin-font-size-s);
  padding-block: calc(var(--gin-spacing-s) - 2px);
  padding-inline: var(--gin-spacing-m);
  border: 2px solid var(--gin-color-primary) !important;
  border-radius: var(--gin-border-radius-s, 4px);
  box-shadow: 0 1px 2px var(--gin-color-primary-light);
}