@media (max-width: 768px) {
    .sidebar {
      width: 80px;
    }
    
    /* Miglioriamo la visibilità delle icone */
    .sidebar-menu a {
      justify-content: center;
      padding: 15px 0;
    }
    
    .sidebar-menu a i {
      margin-right: 0;
      font-size: 1.2rem; /* Icone più grandi */
    }
    
    /* Nascondiamo correttamente il testo ma manteniamo l'accessibilità */
    .sidebar-menu a span {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    
    /* Assicuriamo che le intestazioni delle sezioni siano nascoste */
    .sidebar-heading {
      display: none;
    }
  }

  @media (max-width: 768px) {
    .search-bar {
      flex-direction: column;
      gap: 10px;
    }
    
    .search-container {
      width: 100%;
      flex-wrap: wrap;
      gap: 5px;
    }
    
    .leads-page-search-input {
      width: 100%;
      margin-bottom: 5px;
    }
    
    .buttons-container {
      width: 100%;
      justify-content: space-between;
    }
    
    .leads-page-tab-btn, 
    .leads-page-filter-btn, 
    .leads-page-add-lead-btn {
      font-size: 0.85rem;
      padding: 6px 10px;
    }
  }

  @media (max-width: 768px) {
    /* Nascondi alcune colonne meno importanti */
    .data-table th:nth-child(4),  /* Data di creazione */
    .data-table td:nth-child(4),
    .data-table th:nth-child(5),  /* Inserito da */
    .data-table td:nth-child(5) {
      display: none;
    }
    
    /* Riduci lo spazio nella cella delle azioni */
    .data-table td:last-child {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    
    .action-btn {
      width: 100%;
      justify-content: center;
      margin-right: 0;
    }
    
    /* Testo più piccolo per risparmiare spazio */
    .data-table td, .data-table th {
      padding: 10px 8px;
      font-size: 0.85rem;
    }
  }

  @media (max-width: 768px) {
    .main-content {
      margin-left: 80px; /* Deve corrispondere alla larghezza della sidebar mobile */
      padding: 10px;
    }
    
    .container {
      padding-left: 5px;
      padding-right: 5px;
    }
    
    /* Riduzione del padding nell'header */
    .header {
      padding: 8px 10px;
      margin-bottom: 15px;
    }
  }

  @media (max-width: 768px) {
    /* Adattamento modale */
    .modal-dialog {
      margin: 0.5rem;
    }
    
    /* Riduci il padding nelle modali */
    .modal-body {
      padding: 15px 10px;
    }
    
    /* Adatta i campi di input nelle modali */
    .modal-body .row {
      margin-left: -5px;
      margin-right: -5px;
    }
    
    .modal-body .col-sm-4,
    .modal-body .col-sm-8 {
      padding-left: 5px;
      padding-right: 5px;
    }
  }

  @media (max-width: 768px) {
    .sidebar-menu li a {
      padding: 10px 0;
      justify-content: center;
    }
    
    /* Assicurati che tutti gli elementi della sidebar siano visibili */
    .sidebar-menu li {
      display: block !important;
    }
          
    /* Ripristina la visibilità del pulsante Home */
    #dashboardNav, #dashboardNav span {
      display: block;
    }
  }

  @media (max-width: 768px) {
    .sidebar-menu li {
      display: block !important;
      visibility: visible !important;
    }
    
    .sidebar-menu li a {
      display: flex !important;
      visibility: visible !important;
    }
  }

  @media (max-width: 768px) {
    /* Aggiungi spazio in alto alla sidebar per evitare sovrapposizioni con l'header */
    .sidebar {
      padding-top: 20px; /* Regola questo valore in base all'altezza dell'header */
    }
    
    /* Oppure applica il padding al primo elemento della sidebar */
    .sidebar-menu li:first-child {
      padding-top: 60px;
    }
  }

  @media (max-width: 768px) {
    /* Nascondi l'icona di ricerca nella versione mobile */
    .search-container .fa-search {
      display: none;
    }
    
    /* Se necessario, regola il padding dell'input di ricerca */
    .search-input {
      padding-left: 12px; /* Rimuove lo spazio aggiuntivo a sinistra se presente */
    }
  }

  @media (max-width: 768px) {
    /* Correzione dimensione input di ricerca per le pagine Commerciali e Installatori */
    .search-input, 
    input[type="text"].search-input, 
    .search-container input[type="text"] {
      width: 100% !important; /* Forza la larghezza al 100% del contenitore */
      max-width: 100%; /* Assicura che non superi mai la larghezza del contenitore */
      box-sizing: border-box; /* Include padding e bordo nella larghezza */
      margin-right: 0; /* Rimuove eventuali margini a destra */
    }
    
    /* Assicura che il contenitore dell'input sia correttamente dimensionato */
    .search-container {
      width: 100%;
      padding-right: 10px; /* Aggiunge un po' di spazio a destra */
    }
    
    /* Migliora la gestione dello spazio nella barra di ricerca */
    .search-bar {
      padding: 10px;
    }
  }

  @media (max-width: 768px) {
    /* Nasconde il testo e mantiene solo le icone nell'header per versione mobile */
    /*
    .header .protexia-red-link span,
    .header .protexia-red-link .me-2 ~ span,
    .header .page-title h5,
    
    .header .user-nav a span {
      display: none;
    }
    */
    
    /* Mantiene solo l'icona "Torna alla lista" */
    
    .header .protexia-red-link {
      font-size: 0;  /* Nasconde il testo */
    }
    
    
    .header .protexia-red-link i {
      font-size: 1rem; /* Ripristina la dimensione dell'icona */
      margin-right: 0;
    }
    

    /* Nasconde il testo "Profilo lead" ma mantiene l'icona */
    /*
    .header .page-title h5 {
      display: none;
      
    }
    */
    /* Mantiene solo le icone di notifiche e utente */
    
    .header .user-nav a {
      font-size: 0;
    }
    

    .header .user-nav a i {
      font-size: 1rem;
      margin-right: 0;
    }
    
    /* Assicura che le icone siano distanziate correttamente */
    .header .user-nav a {
      margin-left: 15px;
    }
  }

  @media (max-width: 768px) {
    /* Nasconde breadcrumb generica nell'header */
    .header .breadcrumb,
    .header .breadcrumb i.fas.fa-home {
      display: none !important;
    }
    
    /* Mantiene il titolo della pagina */
    #mainTitle {
      display: block !important;
      font-size: 1.2rem !important; /* Riduce dimensione del titolo */
    }
    
    /* Struttura base dell'header */
    .header {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
    }
    
    /* Per la freccia Torna alla lista nelle pagine profilo */
    .header .protexia-red-link {
      font-size: 0; /* Nasconde il testo */
      display: flex !important;
      align-items: center;
      order: -1; /* Forza a sinistra */
      margin-right: auto; /* Spinge a sinistra */
    }
    
    .header .protexia-red-link i {
      font-size: 1rem; /* Ripristina la dimensione dell'icona */
      margin-right: 0;
      display: block !important;
    }
    
    /* Mantiene solo le icone di notifiche e utente */
    .header .user-nav {
      display: flex !important;
      order: 3; /* Posiziona a destra */
    }
    
    .header .user-nav a {
      font-size: 0;
      margin-left: 15px;
      display: flex !important;
      align-items: center;
    }
    
    .header .user-nav a i {
      font-size: 1rem;
      margin-right: 0;
      display: block !important;
    }
    
    /* Per la pagina profilo lead, fissa specificamente la posizione */
    .header > div:first-child {
      order: -1; /* Posiziona il primo div (che contiene la freccia indietro) a sinistra */
    }
    
    .header > div:last-child {
      order: 3; /* Posiziona l'ultimo div (che contiene le icone utente) a destra */
    }
  }

  @media (max-width: 768px) {
    /* Correzione specifica per la pagina dashboard/home */
    #dashboardSection:not([style="display: none;"]) ~ * .header .user-nav,
    #dashboardSection:visible ~ * .header .user-nav,
    body:has(#dashboardSection:visible) .header .user-nav,
    #dashboardSection:visible .header .user-nav,
    #dashboardNav.active ~ * .header .user-nav {
      margin-left: auto !important; /* Spinge le icone completamente a destra */
      display: flex !important;
      justify-content: flex-end !important;
    }
    
    /* Per sicurezza, aggiungiamo un selettore diretto più specifico */
    #dashboardSection .header .user-nav {
      margin-left: auto !important;
      display: flex !important;
      justify-content: flex-end !important;
    }
    
    /* Nasconde qualsiasi elemento a sinistra nella dashboard */
    #dashboardSection:not([style="display: none;"]) ~ * .header > div:not(.user-nav),
    #dashboardNav.active ~ * .header > div:not(.user-nav):empty {
      display: none !important;
    }
  }