/* mobile.css — adattamenti per schermi piccoli (telefono). Caricato per ultimo in ogni pagina. */
@media (max-width: 600px) {
  /* iOS ingrandisce la pagina sui campi con testo sotto i 16px: lo evitiamo */
  input, select, textarea { font-size: 16px !important; }

  /* Nessuno scorrimento orizzontale della pagina */
  html, body { overflow-x: hidden; }
  #main { min-width: 0; }

  /* ── Transazioni: ogni riga diventa una scheda ── */
  .tx-table thead { display: none; }
  .tx-table, .tx-table tbody { display: block; width: 100%; }
  .tx-table tbody tr:not(.tx-detail) {
    display: grid;
    grid-template-columns: 28px auto auto 1fr auto;
    grid-template-areas:
      "chk cat  cat  cat   num"
      "chk desc desc desc  desc"
      "chk date tipo stato azioni";
    align-items: center;
    column-gap: 8px; row-gap: 2px;
    padding: 10px 10px 8px;
    border-bottom: 1px solid var(--border);
  }
  .tx-table tbody tr:not(.tx-detail) > td { display: block; padding: 0; border: 0; min-width: 0; background: none; }
  .tx-table .c-chk    { grid-area: chk; align-self: start; padding-top: 2px !important; }
  .tx-table .c-cat    { grid-area: cat; font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tx-table .td-num   { grid-area: num; font-size: 15px; font-weight: 600; white-space: nowrap; text-align: right; }
  .tx-table .c-desc   { grid-area: desc; font-size: 13px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tx-table .td-date  { grid-area: date; font-size: 12px; color: var(--text2); }
  .tx-table .c-tipo   { grid-area: tipo; }
  .tx-table .c-stato  { grid-area: stato; }
  .tx-table .c-stato .stato-Confermata { display: none; }
  .tx-table .c-azioni { grid-area: azioni; display: flex !important; justify-content: flex-end; gap: 2px; }
  .tx-table .c-metodo, .tx-table .c-conto, .tx-table .c-note { display: none !important; }
  .tx-table tr.tx-detail { display: block; padding: 0 10px 10px 46px; border-bottom: 1px solid var(--border); }
  .tx-table tr.tx-detail > td { display: block; padding: 0; border: 0; }
  .tx-table tr.tx-detail > td:first-child { display: none; }
  .tx-table .btn-icon.btn-small { width: 36px; height: 36px; }

  /* Filtri: il periodo va su una riga intera e si restringe */
  #filters-trans > div:first-child { width: 100%; }
  #filters-trans input[type=date] { flex: 1 1 0; width: 0; min-width: 0; padding: 5px 4px !important; }
  .filters select, .filters input[type=text], .filters input[type=search] { max-width: 100%; }

  /* ── Dashboard: importi senza a capo ── */
  .bar-row { grid-template-columns: 88px 1fr auto !important; }
  .bar-value { white-space: nowrap; }
  .td-num { white-space: nowrap; }
  #patrimonio-box > div > div:last-child { flex: 1 1 100% !important; }
  #patrimonio-box > div > div:first-child { margin: 0 auto; }

  /* ── Impostazioni ── */
  .settings-section { padding: 16px; }
  .setting-row input { width: 55%; min-width: 0; }
  #conti-list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #conti-list > div { min-width: 600px; }
  #metodi-list > div > div { width: 100%; }
  #metodi-list > div > div > input[type=text] { flex: 1; min-width: 0 !important; max-width: none !important; }
  #conti-section { overflow: hidden; }
  .stile-prev { height: 72px; }

  /* Tabelle larghe (budget, programmate, saldi): scorrono dentro il loro riquadro */
  .table-wrap { max-width: 100%; -webkit-overflow-scrolling: touch; }
}