/**
 * responsive.css - Gestione responsive per dispositivi mobile/tablet/desktop
 *
 * Questo file contiene SOLO le regole di responsive design.
 * NON modifica lo stile di shadcn/ui, aggiunge solo adattamenti per mobile.
 */

/* ========================================
   BREAKPOINTS (allineati con Tailwind)
   ======================================== */
/*
   sm:  640px  - phone landscape
   md:  768px  - tablet
   lg:  1024px - desktop
   xl:  1280px - large desktop
*/

/* ========================================
   TABELLA COMPARAZIONE - MOBILE
   ======================================== */

/* Su mobile: scroll orizzontale fluido */
@media (max-width: 767px) {
  /* Container tabella con scroll touch-friendly */
  main .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  /* Tabella: dimensioni minime per evitare colonne troppo strette */
  table {
    min-width: 600px; /* Forza scroll orizzontale */
  }

  /* Celle della tabella: padding ridotto per mobile */
  table th,
  table td {
    padding: 0.75rem 0.5rem !important;
    font-size: 0.875rem; /* 14px */
  }

  /* Nome prodotto: più compatto */
  table td:first-child {
    min-width: 120px;
    max-width: 150px;
    word-wrap: break-word;
    white-space: normal;
  }

  /* Badge supermercati: versione compatta */
  .supermarket-badge {
    font-size: 0.75rem !important; /* 12px */
    padding: 0.25rem 0.5rem !important;
  }

  /* Date aggiornamento: nascondi su schermi molto piccoli */
  @media (max-width: 480px) {
    table td .text-xs.text-gray-500 {
      display: none;
    }
  }
}

/* ========================================
   HEADER E NAVIGAZIONE - MOBILE
   ======================================== */

@media (max-width: 767px) {
  /* Header: stack verticale su mobile */
  header .flex {
    flex-direction: column;
    align-items: stretch !important;
  }

  /* Titolo: dimensione ridotta */
  h1 {
    font-size: 1.875rem !important; /* 30px invece di 36px */
  }

  /* Bottoni auth: full width su mobile */
  #authSection {
    width: 100%;
  }

  #authSection button,
  #authSection > div {
    width: 100%;
  }

  /* User info card: stack verticale */
  #userInfo > div {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  #userInfo button,
  #userInfo a {
    width: 100%;
    justify-content: center;
  }
}

/* ========================================
   MODAL LOGIN - MOBILE
   ======================================== */

@media (max-width: 767px) {
  /* Modal: occupa più spazio su mobile */
  #loginModal > div {
    max-width: 95% !important;
    margin: 1rem;
  }

  /* Form inputs: maggiore touch target */
  #loginModal input {
    min-height: 44px; /* iOS standard touch target */
  }

  /* Bottoni modal: stack su schermi molto piccoli */
  @media (max-width: 480px) {
    #loginForm > .flex {
      flex-direction: column;
    }

    #loginForm button {
      width: 100%;
    }
  }
}

/* ========================================
   PROFILO PAGE - MOBILE
   ======================================== */

@media (max-width: 767px) {
  /* Form cambio password: gap ridotto */
  #changePasswordForm {
    gap: 1rem !important;
  }

  /* Bottoni profilo: full width su mobile */
  #changePasswordForm .flex {
    flex-direction: column;
  }

  #changePasswordForm button {
    width: 100%;
  }
}

/* ========================================
   UPLOAD PAGE - MOBILE
   ======================================== */

@media (max-width: 767px) {
  /* File upload area: altezza ridotta */
  .border-dashed {
    min-height: 120px !important;
  }

  /* Preview tabella upload: scroll orizzontale */
  #uploadPreview table {
    min-width: 500px;
  }

  #uploadPreview .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }
}

/* ========================================
   BOTTONI ELIMINAZIONE - MOBILE
   ======================================== */

@media (max-width: 767px) {
  /* Bottoni X: dimensione touch-friendly */
  button[title*="Elimina"] {
    min-width: 32px;
    min-height: 32px;
  }

  /* Celle con bottoni: padding ridotto */
  td:has(button[title*="Elimina"]) {
    padding: 0.5rem !important;
  }
}

/* ========================================
   UTILITY CLASSES - MOBILE SPECIFIC
   ======================================== */

/* Nascondi su mobile (complementare a hidden di Tailwind) */
@media (max-width: 767px) {
  .hide-on-mobile {
    display: none !important;
  }
}

/* Mostra solo su mobile */
.show-on-mobile {
  display: none;
}

@media (max-width: 767px) {
  .show-on-mobile {
    display: block;
  }
}

/* Stack verticale su mobile (complementare a flex di Tailwind) */
@media (max-width: 767px) {
  .mobile-stack {
    flex-direction: column !important;
  }

  .mobile-stack > * {
    width: 100% !important;
  }
}

/* ========================================
   ANIMAZIONI SMOOTH - TUTTI I DEVICE
   ======================================== */

/* Transizioni fluide per resize */
* {
  transition-property: padding, margin, font-size;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

/* Disabilita transizioni durante il resize per performance */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* ========================================
   TABLET (768px - 1023px)
   ======================================== */

@media (min-width: 768px) and (max-width: 1023px) {
  /* Container: padding intermedio */
  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /* Tabella: scroll solo se necessario */
  table {
    min-width: auto;
  }

  /* Celle: padding standard */
  table th,
  table td {
    padding: 1rem 0.75rem !important;
  }
}

/* ========================================
   DESKTOP (1024px+)
   ======================================== */

@media (min-width: 1024px) {
  /* Hover effects più evidenti su desktop */
  button:hover,
  a:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }

  /* Tabella: celle con più respiro */
  table th,
  table td {
    padding: 1rem 1.5rem !important;
  }

  /* Righe tabella: hover più evidente */
  table tbody tr:hover {
    transform: scale(1.01);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  /* Nascondi elementi UI non necessari in stampa */
  #authSection,
  button,
  #loginModal {
    display: none !important;
  }

  /* Rimuovi colori di sfondo per risparmiare inchiostro */
  body {
    background: white !important;
  }

  /* Forza bordi neri per la tabella */
  table,
  th,
  td {
    border-color: black !important;
  }

  /* Previeni interruzioni di pagina nelle righe */
  tr {
    page-break-inside: avoid;
  }
}