/**
 * Grid Search Responsive Enhancements (< 640px)
 * Ottimizzazione responsive per i filtri di ricerca superiori nelle griglie standard (view.php)
 * Non impatta su schermi desktop (>= 641px) e non richiede modifiche a grids.php per totale retrocompatibilità.
 */

@media (max-width: 640px) {
  /* ==========================================================================
     Container Card dei Filtri di Ricerca
     ========================================================================== */
  form#grid-search,
  form[name="grid-search"] {
    display: block !important;
    background: #f8fafc !important;
    border: 1px solid #d2d6de !important;
    border-radius: 6px !important;
    padding: 14px 14px 12px 14px !important;
    margin: 8px 0 16px 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    clear: both !important;
    position: relative !important;
  }

  /* Intestazione visiva del blocco filtri con icona FontAwesome */
  form#grid-search::before,
  form[name="grid-search"]::before {
    content: "\f0b0 \00a0 Filtri di ricerca" !important;
    font-family: 'FontAwesome', 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    display: block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #333333 !important;
    padding-bottom: 8px !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }

  /* Rimozione margini negativi della row Bootstrap all'interno del form */
  form#grid-search .row,
  form[name="grid-search"] .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ==========================================================================
     Campi di Ricerca (Singole Colonne col-md-2)
     ========================================================================== */
  form#grid-search .col-md-2,
  form[name="grid-search"] .col-md-2 {
    width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 10px !important;
    clear: both !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  /* Nascondi colonne vuote (es. campi hidden) */
  form#grid-search .col-md-2:empty,
  form[name="grid-search"] .col-md-2:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ==========================================================================
     Inputs, Selects e Campi Form (<input>, <select>)
     ========================================================================== */
  form#grid-search .form-control,
  form[name="grid-search"] .form-control,
  form#grid-search input[type="text"],
  form[name="grid-search"] input[type="text"],
  form#grid-search select,
  form[name="grid-search"] select {
    height: 42px !important;
    min-height: 42px !important;
    font-size: 16px !important; /* Dimensione 16px per prevenire l'auto-zoom su Safari iOS */
    line-height: 1.4 !important;
    border-radius: 4px !important;
    border: 1px solid #ccd0d4 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06) !important;
    padding: 8px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    color: #333333 !important;
    background-color: #ffffff !important;
  }

  form#grid-search .form-control:focus,
  form[name="grid-search"] .form-control:focus,
  form#grid-search input[type="text"]:focus,
  form[name="grid-search"] input[type="text"]:focus,
  form#grid-search select:focus,
  form[name="grid-search"] select:focus {
    border-color: #3c8dbc !important;
    box-shadow: 0 0 6px rgba(60, 141, 188, 0.4) !important;
    outline: none !important;
  }

  /* Placeholder visibili e ad alto contrasto */
  form#grid-search .form-control::-webkit-input-placeholder,
  form[name="grid-search"] .form-control::-webkit-input-placeholder,
  form#grid-search input::-webkit-input-placeholder,
  form[name="grid-search"] input::-webkit-input-placeholder {
    color: #666666 !important;
    font-weight: 500 !important;
    opacity: 1 !important;
    font-size: 15px !important;
  }
  form#grid-search .form-control::-moz-placeholder,
  form[name="grid-search"] .form-control::-moz-placeholder,
  form#grid-search input::-moz-placeholder,
  form[name="grid-search"] input::-moz-placeholder {
    color: #666666 !important;
    font-weight: 500 !important;
    opacity: 1 !important;
    font-size: 15px !important;
  }
  form#grid-search .form-control:-ms-input-placeholder,
  form[name="grid-search"] .form-control:-ms-input-placeholder,
  form#grid-search input:-ms-input-placeholder,
  form[name="grid-search"] input:-ms-input-placeholder {
    color: #666666 !important;
    font-weight: 500 !important;
    opacity: 1 !important;
    font-size: 15px !important;
  }

  /* ==========================================================================
     Supporto Select2 su Mobile
     ========================================================================== */
  form#grid-search .select2-container,
  form[name="grid-search"] .select2-container {
    width: 100% !important;
    display: block !important;
    margin-bottom: 0 !important;
  }
  form#grid-search .select2-container .select2-choice,
  form[name="grid-search"] .select2-container .select2-choice,
  form#grid-search .select2-container .select2-selection,
  form[name="grid-search"] .select2-container .select2-selection {
    height: 42px !important;
    min-height: 42px !important;
    line-height: 40px !important;
    font-size: 16px !important;
    border-radius: 4px !important;
    border: 1px solid #ccd0d4 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 12px !important;
  }
  form#grid-search .select2-container .select2-chosen,
  form[name="grid-search"] .select2-container .select2-chosen {
    line-height: 40px !important;
    font-size: 16px !important;
    color: #333333 !important;
    margin-right: 28px !important;
  }
  form#grid-search .select2-container .select2-arrow,
  form[name="grid-search"] .select2-container .select2-arrow {
    width: 30px !important;
    height: 40px !important;
  }
  form#grid-search .select2-container .select2-arrow b,
  form[name="grid-search"] .select2-container .select2-arrow b {
    margin-top: 6px !important;
  }

  /* ==========================================================================
     Pulsanti Azione ("Cerca" e "Annulla" in col-md-12)
     ========================================================================== */
  form#grid-search .col-md-12,
  form[name="grid-search"] .col-md-12 {
    width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 6px !important;
    margin-bottom: 4px !important;
    display: flex !important;
    gap: 10px !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
  }

  /* Rimuovi l'interruzione di linea e gli spazi vuoti tra i bottoni */
  form#grid-search .col-md-12 > br,
  form[name="grid-search"] .col-md-12 > br {
    display: none !important;
  }

  /* Bottoni touch-friendly, affiancati 50%/50% */
  form#grid-search .col-md-12 .btn,
  form[name="grid-search"] .col-md-12 .btn {
    flex: 1 1 50% !important;
    height: 44px !important;
    min-height: 44px !important;
    line-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
    touch-action: manipulation !important;
    box-sizing: border-box !important;
  }

  form#grid-search .col-md-12 .btn i,
  form[name="grid-search"] .col-md-12 .btn i {
    margin-right: 8px !important;
    font-size: 15px !important;
  }

  form#grid-search .col-md-12 .btn-success,
  form[name="grid-search"] .col-md-12 .btn-success {
    background-color: #00a65a !important;
    border-color: #008d4c !important;
    color: #ffffff !important;
  }
  form#grid-search .col-md-12 .btn-success:active,
  form#grid-search .col-md-12 .btn-success:focus,
  form[name="grid-search"] .col-md-12 .btn-success:active,
  form[name="grid-search"] .col-md-12 .btn-success:focus {
    background-color: #008d4c !important;
  }

  form#grid-search .col-md-12 .btn-warning,
  form[name="grid-search"] .col-md-12 .btn-warning {
    background-color: #f39c12 !important;
    border-color: #e08e0b !important;
    color: #ffffff !important;
  }
  form#grid-search .col-md-12 .btn-warning:active,
  form#grid-search .col-md-12 .btn-warning:focus,
  form[name="grid-search"] .col-md-12 .btn-warning:active,
  form[name="grid-search"] .col-md-12 .btn-warning:focus {
    background-color: #e08e0b !important;
  }

  /* ==========================================================================
     Regolazioni elementi adiacenti e table-responsive
     ========================================================================== */
  form#grid-search + br,
  form[name="grid-search"] + br {
    display: none !important;
  }

  .table-responsive {
    border: none !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Datepicker popup elevato per non essere coperto */
  .datepicker.dropdown-menu {
    z-index: 9999 !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  }
}