/* CRM da telefono, rifinitura: filtri a scorrimento, bersagli da toccare, azioni affiancate. Solo <= 768px, il desktop non cambia.
   Si carica dopo crm-mobile-readability.css. */
@media (max-width: 768px) {
  /* ---- Contatti: le due righe di filtri (categoria, stato) diventano una riga ciascuna da scorrere col dito, invece di 4-5 righe di pulsanti ---- */
  .crm-contacts-main-filters > [role="group"] {
    flex-wrap: nowrap; overflow-x: auto; gap: 0.5rem; margin: 0 0 0.5rem; padding: 0.125rem 0 0.375rem;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .crm-contacts-main-filters > [role="group"]::-webkit-scrollbar { display: none; }
  .crm-contacts-main-filters > [role="group"] > * { flex: 0 0 auto !important; scroll-snap-align: start; white-space: nowrap; }
  .crm-contacts-main-filters > [role="group"] > .ui-btn { min-height: 2.5rem; padding-inline: 0.9rem; white-space: nowrap !important; }

  /* ---- Pipeline: «Filtra» e «Reset» affiancati ---- */
  .pipeline-filters .grid > div:has(> button), .pipeline-filters .grid > button { grid-column: auto; }
  .pipeline-filters .grid { grid-template-columns: 1fr 1fr; }
  .pipeline-filters .grid > :nth-child(-n+2) { grid-column: 1 / -1; }
  .pipeline-filters .ui-btn { min-height: 2.75rem; justify-content: center; }

  /* ---- bersagli da toccare di almeno 44 px dove prima erano 17-28 px ---- */
  a.crm-settings-card-link, a.crm-help-path-link, a.pwa-back, .crm-django-message-close {
    display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  }
  .crm-django-message-close { justify-content: center; }
  a.underline:not(.ui-btn) { display: inline-flex; align-items: center; min-height: 44px; }
  .pipeline-state-chip { min-height: 36px; display: inline-flex; align-items: center; }
  .crm-property-chip, .crm-property-next-action-badge, .crm-property-deal { min-height: 36px; }

  /* ---- Quick Start: icona piccola accanto al titolo invece di una colonna vuota a sinistra ---- */
  .qs-hub-card { align-items: flex-start; gap: 12px 14px !important; padding: 18px 16px !important; }
  .qs-hub-card .qs-hub-icon { width: 48px; height: 48px; flex: 0 0 auto; align-self: flex-start; }
  .qs-hub-card .qs-hub-icon svg { width: 26px; height: 26px; }
  .qs-hub-card .qs-hub-body { flex: 1 1 0; min-width: 0; }
}