/* Grafica smartphone/tablet (fino a 820px) per tutte le aree: pubblico, cliente, meccanico, admin.
   Caricato dopo mobile-admin.css. Regola generale: niente colonne affiancate, barre strumenti a capo,
   tabelle scorrevoli in orizzontale dentro il proprio riquadro, modali a tutta larghezza. */
@media (max-width: 820px) {

  /* --- Home / login: il link al modulo pubblico diventa un pulsante toccabile --- */
  #landingPage button[onclick="enterPublicMode()"] {
    display: block;
    width: 100%;
    min-height: 40px;
    margin-top: 6px;
    padding: 9px 10px;
    border: 1px solid #93c5fd;
    border-radius: 4px;
    background: #eff6ff;
    font-size: 12px !important;
  }

  /* --- Intestazione compatta per pubblico, cliente e meccanico (menu laterale trasformato) --- */
  body:not(.mobile-admin-ready) #appLayout > .w-48 {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo user out" "menu menu menu";
    align-items: center;
    max-height: none;
    column-gap: 8px;
  }
  body:not(.mobile-admin-ready) #appLayout > .w-48 > .p-4 { grid-area: logo; padding: 6px 0 6px 10px; border: 0; background: none; }
  body:not(.mobile-admin-ready) .portal-logo-sidebar { max-width: 112px; height: 30px; margin: 0; }
  body:not(.mobile-admin-ready) #appLayout > .w-48 > .p-2.bg-\[\#1e293b\] {
    grid-area: user;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 4px 0;
    border: 0;
    background: none;
    text-align: left;
    min-width: 0;
  }
  body:not(.mobile-admin-ready) #appLayout > .w-48 > .p-2.bg-\[\#1e293b\] > div { margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body:not(.mobile-admin-ready) #appLayout > .w-48 > .custom-scrollbar { grid-area: menu; padding: 6px 8px 8px; border-top: 1px solid #1e293b; }
  body:not(.mobile-admin-ready) #appLayout > .w-48 > .p-2.border-t { grid-area: out; padding: 4px 10px 4px 0; border: 0; background: none; }
  body:not(.mobile-admin-ready) #appLayout > .w-48 > .p-2.border-t .desktop-btn {
    width: 40px;
    min-height: 40px;
    padding: 0;
    font-size: 0;
    border-radius: 8px;
  }
  body:not(.mobile-admin-ready) #appLayout > .w-48 > .p-2.border-t .desktop-btn i { font-size: 15px; }
  body:not(.mobile-admin-ready) #menuPublic .sidebar-btn,
  body:not(.mobile-admin-ready) #menuClient .sidebar-btn,
  body:not(.mobile-admin-ready) #menuMech .sidebar-btn { min-height: 40px; min-width: 0; padding: 8px 12px; white-space: nowrap; }

  /* --- Barre strumenti e righe di comandi: vanno a capo invece di schiacciare i pulsanti --- */
  :is(#appLayout, [id^="modal"]) .flex:not(.flex-col):not(.flex-nowrap):not(.section) { flex-wrap: wrap; }
  :is(#appLayout, [id^="modal"]) .flex:not(.flex-col) > .flex-1,
  :is(#appLayout, [id^="modal"]) .flex:not(.flex-col) > [class*="flex-["] { flex: 1 1 150px; min-width: 0; }
  #appLayout .section.active > * { flex-shrink: 0; }
  :is(#appLayout, [id^="modal"]) .desktop-btn,
  :is(#appLayout, [id^="modal"]) .desktop-tab {
    flex: 0 0 auto;
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    min-height: 36px;
  }
  #appLayout .desktop-header-main { flex-wrap: wrap; text-align: left; row-gap: 6px; min-height: 42px; padding: 8px 12px; font-size: 12px; }
  #appLayout .desktop-header-main > .flex { width: 100%; }
  :is(#appLayout, [id^="modal"]) .ml-auto { margin-left: 0 !important; }
  :is(#appLayout, [id^="modal"]) [class^="w-"]:not(table), :is(#appLayout, [id^="modal"]) [class*=" w-"]:not(table) { max-width: 100%; }
  :is(#appLayout, [id^="modal"]) .border-r { border-right: 0 !important; padding-right: 0 !important; }
  :is(#appLayout, [id^="modal"]) .border-l:not(.sidebar-btn) { border-left: 0 !important; padding-left: 0 !important; }

  /* Campi di modulo: dimensione leggibile e nessun zoom automatico su iPhone */
  #appLayout input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  #appLayout select,
  #appLayout textarea,
  [id^="modal"] input:not([type="checkbox"]):not([type="radio"]),
  [id^="modal"] select,
  [id^="modal"] textarea { font-size: 16px !important; min-height: 38px; }
  #appLayout .desktop-label { font-size: 11px; }

  /* --- Tabelle: scorrono in orizzontale dentro il proprio riquadro, mai oltre lo schermo --- */
  :is(#appLayout, [id^="modal"]) .data-table { width: 100%; max-width: none; }
  :is(#appLayout, [id^="modal"]) .data-table th { padding: 6px 5px; font-size: 11px; white-space: nowrap; }
  :is(#appLayout, [id^="modal"]) .data-table td { padding: 6px 5px; font-size: 11px; white-space: normal; overflow-wrap: break-word; }
  :is(#appLayout, [id^="modal"]) div:has(> table) { overflow-x: auto !important; max-width: 100%; -webkit-overflow-scrolling: touch; }
  #appLayout div:has(> table) > table.data-table { min-width: 560px; }
  #auditLog div:has(> table) > table.data-table { min-width: 640px; }
  #reqAdmin div:has(> table) > table.data-table,
  #billing div:has(> table) > table.data-table,
  #posPanel div:has(> table) > table.data-table,
  #reports div:has(> table) > table.data-table,
  [id^="modal"] div:has(> table) > table.data-table { min-width: 100%; }

  /* --- Sezioni a due colonne: una sotto l'altra, scorrimento dell'intera sezione --- */
  #inventory > .flex, #wasteRegister > .flex, #posPanel > .p-2.flex, #billing #billPreviewPanel {
    flex-direction: column !important;
    flex-wrap: nowrap;
    overflow: auto;
    height: auto;
    -webkit-overflow-scrolling: touch;
  }
  #inventory > .flex > div, #wasteRegister > .flex > div, #posPanel > .p-2.flex > div, #billPreviewPanel > div {
    width: 100% !important;
    flex: 0 0 auto !important;
    max-height: none;
    overflow: visible;
    min-height: 0;
  }
  #inventory > .flex > .w-2\/3 > .flex-1.overflow-auto,
  #posPanel .bg-white.flex-1.overflow-auto { min-height: 220px; max-height: 60vh; }
  #inventory .grid-cols-2 > .flex.justify-between { flex-wrap: nowrap; }
  #wasteRegister .grid-cols-1.xl\:grid-cols-\[1fr_320px\] > div { min-height: 0; }
  #posPanel .text-4xl { font-size: 26px; }
  #posPanel .px-8 { padding-left: 14px; padding-right: 14px; }
  #billing #billingMakePanel > .desktop-panel label { font-size: 13px; }
  #billing #selBillJob { width: 100%; }

  /* Pannelli "flex-1" delle sezioni a colonna: altezza dal contenuto (su desktop riempiono lo schermo) */
  #appLayout .section.active > .flex-1,
  #appLayout .section .flex-col > .flex-1,
  #appLayout .section .quote-tab-panel,
  #appLayout .section .order-tab-panel { flex-basis: auto; height: auto; }
  #quotes .quote-tab-panel > .flex-1.overflow-y-auto, #orders .order-tab-panel > .flex-1.overflow-y-auto,
  #quotes .quote-tab-panel > .flex-1.overflow-auto, #orders .order-tab-panel > .flex-1.overflow-auto { min-height: 160px; max-height: 50vh; }
  #quotes textarea.flex-1, #orders textarea.flex-1 { min-height: 90px; }
  #quotePartsList, #orderPartsList { left: 0 !important; width: 100% !important; }
  #quotes .bg-\[\#ff7f00\] > .box-group, #orders .bg-\[\#1e3a8a\] > .box-group, #orders .box-group.border-blue-800 { width: 100%; margin: 30px 0 4px; }
  #quotes .bg-\[\#ff7f00\] > .flex.h-16 { width: 100%; }

  /* Moduli preventivo e ordine: etichetta e campo su due colonne */
  #quotes .grid-cols-\[100px_1fr_40px_1fr\], #orders .grid-cols-\[100px_1fr_40px_1fr\] { grid-template-columns: 92px minmax(0, 1fr); }
  #quotes .grid-cols-\[100px_1fr_40px_1fr\] > .col-span-3, #orders .grid-cols-\[100px_1fr_40px_1fr\] > .col-span-3 { grid-column: 2 / 3; }
  #quotes .grid-cols-\[100px_1fr_40px_1fr\] > label, #orders .grid-cols-\[100px_1fr_40px_1fr\] > label { text-align: left; }
  #quotes .box-group, #orders .box-group { margin-top: 12px; }

  /* Sezioni con pannello laterale (griglie di Tailwind): sempre una colonna sotto 820px */
  #appLayout .grid[class*="xl:grid-cols-["], #appLayout .grid[class*="lg:grid-cols-["] { grid-template-columns: minmax(0, 1fr) !important; }
  #appLayout .grid.grid-cols-3:not(.gap-1) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Blocchi centrati (mx-auto) non devono allargarsi oltre lo schermo per via delle tabelle */
  #appLayout .section.active > .mx-auto { width: 100%; max-width: 100%; }

  /* Calendario appuntamenti */
  #agendaCalendar .desktop-header-main > button { width: 100%; }
  #agCalHeader > .flex { flex-wrap: nowrap; }
  #agCalHeader > .flex > .text-center { flex: 1 1 auto; min-width: 0; }
  #agCalHeader > .flex > button { flex: 0 0 36px; }
  #agendaCalendar .section, #agendaCalendar { padding: 8px; }

  /* Supporto / chat: contatti sopra, chat sotto, tutto scorrevole */
  #supportCenter .support-shell { overflow: auto; padding: 8px; }
  #supportCenter .support-grid { display: flex; flex-direction: column; height: auto; }
  #supportCenter .support-side { max-height: none; overflow: visible; }
  #supportCenter .support-thread-list { max-height: 220px; }
  #supportCenter .support-chat { min-height: 460px; flex: 0 0 auto; }
  #supportCenter .support-chat-top { flex-wrap: wrap; }
  #supportCenter .support-chat-top > .flex { width: 100%; }
  #supportCenter #supportAdminControls:not(.hidden) { display: flex; flex-wrap: wrap; width: 100%; }
  #supportCenter #supportAdminControls > .desktop-input { flex: 1 1 120px; width: auto; }
  #supportCenter .support-messages { min-height: 180px; }

  /* Statistiche, rifiuti, operativo: riquadri numerici su due colonne */
  #reports .grid.lg\:grid-cols-4, #wasteRegister .grid.md\:grid-cols-4, #opsCenter .grid.lg\:grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #reports .text-4xl, #paymentsPanel .text-4xl { font-size: 24px; }

  /* --- Modali: larghezza piena, altezza massima dello schermo, contenuto scorrevole --- */
  [id^="modal"].fixed { padding: 8px !important; align-items: flex-start !important; padding-top: max(8px, env(safe-area-inset-top)) !important; }
  [id^="modal"].fixed > div { width: 100% !important; max-width: 100% !important; max-height: calc(100dvh - 16px) !important; height: auto !important; min-height: 0; }
  [id^="modal"].fixed > div > .overflow-y-auto, [id^="modal"].fixed > div > .flex-1 { min-height: 0; }
  [id^="modal"] .grid.grid-cols-2:not(.gap-1), [id^="modal"] .grid.grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [id^="modal"] .flex.justify-between { flex-wrap: nowrap; }
  [id^="modal"] .flex.justify-between > span, [id^="modal"] .flex.justify-between > div:first-child { min-width: 0; }
  #modalDDT .grid.grid-cols-2.gap-4 { grid-template-columns: minmax(0, 1fr); }
  #modalEditOrder .flex.gap-4 > .flex-1 { flex-basis: 100%; }
  #modalEditOrder .flex.gap-4 > .desktop-btn { width: 100%; }
  #modalEditOrder .flex-\[1\.5\] { flex-basis: 100%; }
  #modalEditOrder #editOrderPartsList { width: 100%; }
  #modalEditOrder .h-full { height: auto; }
  #modalAcceptanceView .md\:w-1\/3, #modalAcceptanceView .md\:w-2\/3 { width: 100% !important; }
  #modalImpostazioni .desktop-tab { flex: 1 1 auto; }
  #modalQuoteSearch .flex > .desktop-btn, #modalOrderSearch .flex > .desktop-btn { flex: 1 1 auto; }
  #modalQuoteSearch input.desktop-input, #modalOrderSearch input.desktop-input { flex: 1 1 100%; }
}

@media (max-width: 820px) {
  /* Schema auto dell'accettazione: proporzione fissa 2:1 come il canvas, così il disegno non si deforma */
  #reception .flex-1.relative.min-h-\[300px\] { aspect-ratio: 2 / 1; min-height: 0 !important; flex: 0 0 auto; }
}

/* Telefono in orizzontale: barre del pannello admin piu basse per lasciare spazio al contenuto */
@media (max-width: 820px) and (max-height: 500px) {
  body.mobile-admin-ready .mobile-admin-top { height: 54px; padding: 6px 12px; }
  body.mobile-admin-ready #appLayout > .flex-1 { inset: 54px 0 56px 0; }
  .mobile-admin-tabbar { height: 50px; padding: 4px; bottom: 4px; }
  .mobile-admin-tabbar i { font-size: 13px; margin-bottom: 1px; }
  .mobile-admin-home { padding-bottom: 64px; }
  .mobile-hero-panel { min-height: 0; padding: 12px 16px; }
  .mobile-hero-panel h1 { font-size: 20px; }
  body:not(.mobile-admin-ready) #appLayout > .w-48 > .custom-scrollbar { padding: 4px 8px 6px; }
  body:not(.mobile-admin-ready) #menuPublic .sidebar-btn, body:not(.mobile-admin-ready) #menuClient .sidebar-btn, body:not(.mobile-admin-ready) #menuMech .sidebar-btn { min-height: 34px; padding: 6px 10px; }
}

@media (max-width: 480px) {
  #appLayout .desktop-header-main .desktop-btn { font-size: 11px; padding: 6px 8px; }
}