/* ── Mobile UI elements: nascosti di default (desktop+tablet).
   Visibili solo via @media (max-width:768px) sotto. */
.mobile-hamburger,
.mobile-bottom-nav { display: none; }

/* ============================================================
   mobile.css — overrides "Usabile" per smartphone (≤ 768px).
   Linkato DOPO style.css per vincere via cascade. Desktop e
   tablet ≥ 769px restano IDENTICI: tutto qui dentro è dentro
   @media (max-width: 768px).

   Scope "Usabile": nessun layout rotto, niente scroll
   orizzontale infinito, font leggibili (min 14px nei testi,
   16px negli input per non triggerare zoom iOS), bottoni
   tappabili (min 40×40px), modali fullscreen, sidebar a
   drawer con backdrop. Tabelle: scroll orizzontale interno
   nei wrapper invece di spaccare la pagina.

   Le pagine specifiche che meritano un layout cards-first
   (Inventario, Detail prodotto) verranno fatte in step 2.
   ============================================================ */

@media (max-width: 768px) {

  /* ── 1. Layout shell: sidebar → drawer ─────────────────── */
  /* La sidebar passa a position fixed off-screen a sinistra.
     Si apre aggiungendo classe `.sidebar--open` (gestita da JS
     in AppShell tramite stato React). Backdrop scuro via ::after
     sul body quando aperta. */
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(82vw, 320px);
    transform: translateX(-100%);
    transition: transform 0.22s ease-out;
    z-index: 9999;
    box-shadow: 4px 0 24px rgba(0,0,0,0.25);
  }
  .sidebar.sidebar--open {
    transform: translateX(0);
  }
  /* Backdrop overlay quando sidebar aperta */
  body.sidebar-open::after {
    content: "";
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9998;
    animation: mobile-backdrop-fade-in 0.18s ease-out;
  }
  @keyframes mobile-backdrop-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Mobile bottom-nav: fissa in basso (pattern app native).
     5 voci: Home / Inventario / Ordini / Alert / Menu (apre drawer).
     safe-area-inset-bottom per iPhone con notch / home indicator. */
  .mobile-bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 9996;
    display: flex !important;
    justify-content: space-around;
    align-items: stretch;
    background: var(--bg);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.10);
    padding-bottom: env(safe-area-inset-bottom, 0);
    height: calc(58px + env(safe-area-inset-bottom, 0));
  }
  .mbn-item {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2px;
    background: none; border: none;
    color: var(--muted);
    font-family: inherit;
    text-decoration: none;
    padding: 6px 4px;
    min-height: 56px;
    cursor: pointer;
    transition: color 0.15s;
  }
  .mbn-item.is-active {
    color: var(--accent);
  }
  .mbn-item:active {
    background: rgba(99,102,241,0.08);
  }
  .mbn-ico {
    font-size: 22px;
    line-height: 1;
  }
  .mbn-lbl {
    font-size: 10.5px;
    font-weight: 600;
  }

  /* Main content: padding-top normale (no hamburger fisso) + padding-bottom
     per non far coprire l'ultima riga dal bottom-nav. */
  .main-content {
    padding: 16px 14px calc(78px + env(safe-area-inset-bottom, 0)) !important;
    width: 100%;
    overflow-x: hidden;
  }

  /* ── 2. Tipografia: aumenta leggibilità su mobile ───────── */
  body, .main-content {
    font-size: 15px;
  }
  .page-title {
    font-size: 20px !important;
    line-height: 1.3;
  }
  .card-title, h2 { font-size: 16px !important; }
  h3 { font-size: 14px !important; }
  .text-xs { font-size: 12px !important; }
  /* Input: 16px font-size impedisce zoom automatico iOS Safari su focus. */
  input, select, textarea {
    font-size: 16px !important;
  }
  /* Eccezione: input molto piccoli dentro celle tabella restano compatti
     (sono numeri/codici, lo zoom non serve). */
  .data-table input, .data-table select, .filter-input.cell-tight {
    font-size: 13px !important;
  }

  /* ── 3. Bottoni: touch target ≥ 40×40 ───────────────────── */
  .btn, button.btn {
    min-height: 40px;
    padding: 9px 14px;
    font-size: 14px;
  }
  .btn-primary, .btn-secondary {
    min-height: 40px;
  }
  /* Pills/icone (es. tab pills) restano più piccole ma ≥ 36px */
  .icon-pill, .nav-item {
    min-height: 40px !important;
  }

  /* ── 4. Filter bar: stack vertical su mobile ─────────────── */
  .filters-bar, .filter-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .filter-input, .filter-select {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px;
    padding: 0 12px;
  }

  /* ── 5. Tabelle: scroll orizzontale + font compatto ─────── */
  /* Wrapper esterno automatico: ogni .data-table dentro un parent normale
     resta scrollabile orizzontalmente. */
  .data-table {
    font-size: 12.5px;
  }
  .data-table th, .data-table td {
    padding: 8px 10px;
  }
  /* Card che contengono tabelle: rimuovi overflow:hidden per permettere
     lo scroll naturale (la card stessa diventa scroll container). */
  .card {
    overflow-x: auto;
  }
  /* Wrapper Excel-like: scroll orizzontale leggibile */
  table.data-table { display: table; }

  /* ── 6. KPI grid: 2 colonne su mobile invece di flex row ─ */
  .kpi-grid, .kpi-row, .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .kpi-card {
    padding: 10px 12px !important;
    min-width: 0 !important;
  }
  .kpi-value {
    font-size: 18px !important;
  }
  .kpi-label {
    font-size: 11px !important;
  }
  .kpi-sub {
    font-size: 10px !important;
  }

  /* ── 7. Card padding ridotto ─────────────────────────────── */
  .card {
    padding: 14px 12px !important;
    border-radius: 10px;
  }
  .card.card-flush { padding: 0 !important; }

  /* ── 8. Modali: fullscreen su mobile ─────────────────────── */
  /* Tutte le modali React usano un wrapper .modal-shell o un div fixed
     centrato con un child .card. Override generico: tutto fullscreen. */
  [class*="modal-overlay"], [data-modal-overlay] {
    padding: 0 !important;
    align-items: stretch !important;
  }
  [class*="modal-overlay"] > div,
  [data-modal-overlay] > div {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100vh !important;
    height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* ── 9. Forms: label + input stack ───────────────────────── */
  label {
    font-size: 13px;
  }
  /* Grid 2-col automatico → 1-col su mobile */
  [style*="gridTemplateColumns"][style*="1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── 10. Page title bar: stack ────────────────────────────── */
  .page-header, .flex.justify-between {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* ── 11. Note operative / chat bubbles ───────────────────── */
  .note-bubble, .chat-bubble {
    max-width: 92% !important;
  }

  /* ── 12. Sticky thead inventario: top più piccolo perché c'è
         l'hamburger button sopra (60px padding-top sulla main). */
  /* L'inventario usa position:sticky con top:0 sul thead. Va bene così:
     il top è relativo al main-content (scroll container), non al viewport. */

  /* ── 13. Detail prodotto: tabs scroll orizzontale ─────────── */
  .product-tabs, .detail-tabs {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }
  .product-tabs > *, .detail-tabs > * {
    flex-shrink: 0;
  }

  /* ── 14. Footer bottoni modali: sticky bottom ──────────────── */
  .modal-actions, .form-actions {
    position: sticky;
    bottom: 0;
    background: var(--bg);
    padding: 12px 0;
    border-top: 1px solid var(--border);
    margin-top: 14px;
  }

  /* ── 15. Sidebar drawer: aumenta tap target nav items ─────── */
  .sidebar .nav-item {
    padding: 14px 16px !important;
    font-size: 15px !important;
  }

  /* ── 16. Charts: limita altezza + scroll horizontal su mobile ─── */
  /* Chart.js canvas vengono dimensionati via JS, ma il container max-height
     evita che dominino la viewport. */
  canvas[role="img"], .chart-container canvas {
    max-height: 240px !important;
    width: 100% !important;
  }
  /* Container di chart con label esterne → compatti */
  .chart-container, .chart-card {
    padding: 8px !important;
    overflow-x: auto;
  }

  /* ── 17. Riduzione padding ovunque per recuperare spazio ────── */
  section { margin-bottom: 14px !important; }
  .text-sm { font-size: 13px !important; }

  /* ── 18. Modali React (ModalShell): fullscreen edge-to-edge ─── */
  /* Selector specifico per il pattern di ModalShell che usa position:fixed inset:0
     con un .card centrato. Forziamo fullscreen + scroll interno. */
  div[style*="position: fixed"][style*="inset: 0"] > div.card,
  div[style*="position:fixed"][style*="inset:0"] > div.card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100vh !important;
    min-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* ── 19. Hide elementi puramente decorativi su mobile ─────── */
  .hide-on-mobile { display: none !important; }

  /* ── 20. Product detail tabs: stack verticale (no scroll x) ── */
  /* Le tab di PriceHubSection/MarketHistorySection sono <button> in flex row.
     Su mobile diventano vertical stack = accordion visivo (1 col, full-width). */
  .card > div[style*="border-bottom"][style*="display: flex"] > button {
    flex-basis: auto !important;
    font-size: 12px !important;
    padding: 10px 6px !important;
  }

  /* ── 21. Native-like: ripple effect su tap dei bottoni ─────── */
  .btn:active, button:active, .nav-item:active, .mbn-item:active {
    transform: scale(0.97);
    transition: transform 0.08s;
  }

  /* ── 22. Smooth scroll inertial-like ─────────────────────────── */
  .main-content {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  /* ── 23. Pull-to-refresh native (PWA): permette al browser di
         intercettare lo swipe verso il basso oltre lo scroll top. */
  html, body {
    overscroll-behavior-y: contain;
  }
  .main-content {
    overscroll-behavior-y: contain;
  }

  /* ── 24. AGGRESSIVE OVERFLOW FIX: card/grid che escono dalla viewport
         su molte pagine (Products, Detail, Orders, Settings). Forza
         max-width 100% + min-width 0 dovunque per garantire che nessun
         child esca dal box parent. */
  .main-content * {
    max-width: 100%;
    min-width: 0;
  }
  /* Eccezione: tabelle dense che vogliono scrollare orizzontalmente */
  .main-content .data-table {
    max-width: none !important;
    min-width: 1100px !important;
  }
  /* La card che contiene la tabella deve avere overflow-x:auto per non
     stretchare la pagina (sovrascrive max-width:100% sopra). */
  .main-content .card:has(.data-table) {
    overflow-x: auto !important;
    max-width: 100% !important;
  }

  /* ── 25. Grid universale: tutte le griglie multi-col diventano 1-col ── */
  /* Pattern usato in Settings / Products / Detail con inline-styled grids */
  [style*="grid-template-columns"][style*="repeat"],
  [style*="gridTemplateColumns"][style*="repeat"] {
    grid-template-columns: 1fr !important;
  }
  /* Pattern minmax(NNNpx, ...) → minmax(0, 1fr) */
  [style*="minmax(140px"], [style*="minmax(150px"], [style*="minmax(160px"],
  [style*="minmax(170px"], [style*="minmax(180px"], [style*="minmax(200px"],
  [style*="minmax(220px"], [style*="minmax(250px"], [style*="minmax(280px"],
  [style*="minmax(300px"], [style*="minmax(320px"], [style*="minmax(360px"],
  [style*="minmax(380px"], [style*="minmax(400px"] {
    grid-template-columns: 1fr !important;
  }
  /* Pattern fractional con valori non-uniformi (es. "1.3fr 1fr 1.5fr" Margini,
     "1.5fr 1fr" Balance, "2fr 1fr" Reviews). Catch-all: qualsiasi inline grid
     con valori frazionari diversi da "1fr 1fr" puro → 1col mobile. */
  [style*="1.3fr"], [style*="1.5fr"], [style*="1.4fr"], [style*="1.6fr"],
  [style*="2fr"], [style*="3fr"], [style*="0.5fr"], [style*="0.8fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="gridTemplateColumns:\"1fr 1fr 1fr"],
  [style*="grid-template-columns: 2fr"],
  [style*="grid-template-columns: 3fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── 26. Card-grids tipo Products list (grid auto-fill di card 200px+) ─ */
  /* Force a 2-col grid in mobile so cards are readable but compact */
  .products-grid, .product-grid,
  .cards-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* ── 27. Detail prodotto: hero header + tabs su mobile ──────────────── */
  /* Le sezioni con bordo/padding alti vanno compatte */
  [class*="product-detail"], [data-detail-section] {
    padding: 10px !important;
  }
  /* product-metrics: griglia KPI tipica detail page → 2 col */
  .product-metrics {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .metric-box {
    padding: 8px 10px !important;
  }
  .metric-value {
    font-size: 16px !important;
  }

  /* ── 28. Impostazioni: form e sezioni stack ────────────────────────── */
  .settings-grid, .settings-section {
    display: block !important;
  }
  .settings-grid > *, .settings-section > * {
    width: 100% !important;
    margin-bottom: 12px;
  }

  /* ── 29. Orders/Resi: card row con immagine + dettagli ───────────── */
  /* Le card ordine tipicamente sono display:flex con foto + colonne dati */
  .order-card, .order-row {
    flex-wrap: wrap !important;
  }
  .order-card > *, .order-row > * {
    min-width: 0 !important;
  }

  /* ── 30. Inline-styled flex con gap grandi → ridotto su mobile ─── */
  [style*="gap: 18px"], [style*="gap: 20px"], [style*="gap: 24px"],
  [style*="gap:18px"], [style*="gap:20px"], [style*="gap:24px"] {
    gap: 10px !important;
  }

  /* ── 31. Page-title bar + filter-bar: full width azioni ──────── */
  .page-title + div, .page-header > div {
    width: 100% !important;
    flex-wrap: wrap !important;
  }
  .page-title + div > *, .page-header button {
    flex: 1 1 calc(50% - 8px) !important;
  }

  /* ── 32. Chat (DmChatPage): sidebar conversazioni nasconde,
         si vede solo la chat aperta. Tap "indietro" per tornare.
         Layout chat: input full-width sticky bottom (sopra bottom-nav). */
  /* Container 2-col (lista conversazioni + chat attiva) → stack */
  .chat-layout, .dm-chat-layout, [class*="chat-grid"] {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
  }
  /* Lista conversazioni sopra, chat sotto (o viceversa con classe attiva) */
  .chat-sidebar, .conversations-list {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 30vh !important;
    overflow-y: auto !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .chat-main, .chat-thread {
    width: 100% !important;
    min-height: 50vh;
  }
  /* Input chat: full-width + sticky sopra bottom-nav (78px = padding mobile) */
  .chat-input-bar, .dm-chat-input {
    position: sticky !important;
    bottom: calc(78px + env(safe-area-inset-bottom, 0)) !important;
    background: var(--bg) !important;
    padding: 8px !important;
    border-top: 1px solid var(--border) !important;
    z-index: 100 !important;
  }
  /* Messaggi: max-width 88% (lascia respiro), border-radius bubble */
  .chat-message, .dm-message {
    max-width: 88% !important;
    word-wrap: break-word;
  }
}

/* Tablet medio (769-1024): mantiene desktop ma riduce un po' i padding */
@media (min-width: 769px) and (max-width: 1024px) {
  .main-content {
    padding: 24px 20px;
  }
  .sidebar {
    width: 200px;
    min-width: 200px;
  }
}