/* ============ Telefono: tutto a misura di pollice ============
   Caricato per ultimo: qui ci sono solo le regole per gli schermi stretti, divise per parti.
   Due misure: fino a 640px (telefono) e fino a 760px (anche i tablet stretti, per le tabelle). */

@media (max-width: 640px) {
  /* ---------- intestazione della pagina ---------- */
  .page-head { margin: 4px 0 16px; gap: 12px; }
  .ph-title { gap: 12px; align-items: flex-start; min-width: 0; }
  .ph-title > div { min-width: 0; }
  .ph-title h1 { font-size: 25px; line-height: 1.12; overflow-wrap: anywhere; }
  .ph-title p { font-size: 13.5px; line-height: 1.4; margin-top: 3px; }
  .ph-emoji { width: 44px; height: 44px; min-width: 44px; font-size: 24px; border-radius: 15px; }
  .ph-actions { width: 100%; gap: 8px; }
  .ph-actions > .btn { flex: 1 1 0; min-width: max-content; padding: 10px 14px; min-height: 44px; font-size: 14.5px; }
  .ph-actions > .btn.icon { flex: none; min-width: 44px; }
  .back-link { margin: 0 0 8px; }

  /* ---------- numeri in evidenza: quattro riquadri piccoli, non una schermata intera ---------- */
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
  .kpi { flex-direction: row; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 18px; min-width: 0; }
  .kpi > div { min-width: 0; }
  .kpi-ic { width: 34px; height: 34px; min-width: 34px; font-size: 18px; border-radius: 11px; }
  .kpi small { font-size: 11px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .kpi b { font-size: 18px; line-height: 1.2; overflow-wrap: anywhere; }
  .kpi .tiny { display: block; font-size: 11px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kpi::after { width: 56px; height: 56px; right: -18px; top: -18px; }

  /* ---------- schede e titoli ---------- */
  .card { padding: 16px; border-radius: 20px; }
  .card.pad-sm { padding: 10px; }
  .card.pad-lg { padding: 20px; }
  .card-title { flex-wrap: wrap; row-gap: 8px; font-size: 17px; margin-bottom: 12px; }
  .card-title .grow { min-width: min(100%, 150px); }
  .notice { padding: 10px 12px; font-size: 13.5px; }

  /* ---------- barre di ricerca e filtri: la ricerca a tutta larghezza, i filtri su una riga che scorre ---------- */
  .toolbar { gap: 8px; margin-bottom: 12px; }
  .toolbar .input-icon { flex: 1 1 100%; min-width: 0; max-width: none; }
  .toolbar > .pick-chips, .toolbar > .seg:not(.view-toggle), .chip-row {
    flex: 1 1 0; min-width: 0; max-width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 24px;
  }
  .toolbar > .pick-chips::-webkit-scrollbar, .toolbar > .seg::-webkit-scrollbar, .chip-row::-webkit-scrollbar { display: none; }
  .toolbar > .seg:not(.view-toggle) { flex-basis: 100%; }
  .toolbar .seg button, .chip-row > * { flex: none; white-space: nowrap; }
  .view-toggle { margin-left: 0; flex: none; }
  .chip-row, .row.wrap.chip-row { flex: none; width: 100%; display: flex; flex-wrap: nowrap; gap: 8px; padding-bottom: 2px; }

  /* ---------- pulsanti della scheda (paziente, ricovero): riquadri con l'icona sopra ---------- */
  .action-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
  .action-bar .btn {
    flex-direction: column; gap: 4px; padding: 9px 4px 8px; min-height: 64px; border-radius: 18px;
    font-size: 11.5px; line-height: 1.15; white-space: normal; text-align: center; letter-spacing: 0;
  }
  .action-bar .btn .emoji { font-size: 21px; }
  .action-bar .btn svg { width: 21px; height: 21px; }
  .action-bar .btn:hover { transform: none; }

  /* ---------- dashboard: agenda di oggi ---------- */
  .tl-item { grid-template-columns: 44px 12px minmax(0, 1fr); gap: 8px; }
  .tl-time { padding-top: 11px; }
  .tl-time b { font-size: 15px; }
  .tl-body { flex-wrap: wrap; gap: 6px 10px; padding: 9px 10px; }
  .tl-body > .grow { flex: 1 1 calc(100% - 50px); }
  .tl-body > .chip { margin-left: 44px; }
  .tl-body > .chip + .chip { margin-left: 0; }
  .tl-item:hover .tl-body { transform: none; }
  .vax-row { gap: 8px; }
  .vax-row .btn.xs { padding: 5px 8px; }
  .rep-num { font-size: 34px; }

  /* ---------- pazienti: due schede per riga ---------- */
  .pet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pet-card { padding: 14px 10px 12px; border-radius: 20px; }
  .pet-card .pet-av.lg { --s: 60px; }
  .pet-card h3 { font-size: 16.5px; }
  .pc-owner { margin: 6px 0; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pc-chips .chip { font-size: 11px; padding: 3px 8px; }
  .pet-card:hover { transform: none; }

  /* ---------- scheda paziente ---------- */
  .pet-hero { gap: 14px; }
  .pet-hero .ph-art { justify-self: start; }
  .ph-art .pet-av.xl { --s: 84px; font-size: 46px; }
  .ph-main h1 { font-size: 30px; }
  .ph-facts { gap: 8px 14px; }
  .ph-owner { padding: 12px; }
  .records { gap: 10px; }
  .record { gap: 10px; padding: 12px; border-radius: 18px; }
  .rec-ic { width: 36px; height: 36px; min-width: 36px; font-size: 18px; border-radius: 12px; }
  .record h4 { font-size: 15.5px; }

  /* ---------- scheda proprietario ---------- */
  .owner-card > .row.top { flex-wrap: wrap; }
  .owner-card > .row.top > .btn { margin-left: auto; }
  .owner-card h1 { font-size: 24px; overflow-wrap: anywhere; }
  .owner-av { width: 52px; height: 52px; font-size: 28px; border-radius: 18px; }
  .kv { gap: 6px 12px; font-size: 13.5px; }

  /* ---------- abbonamento ---------- */
  .sub-plan h2 { font-size: 26px; }
  .sub-price b { font-size: 32px; }
  .meters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
  .meter-card { padding: 10px 12px; border-radius: 16px; min-width: 0; }
  .meter-val b { font-size: 21px; }

  /* ---------- impostazioni: listino (una voce = un riquadro su due righe) ---------- */
  .price-edit { gap: 8px; }
  .pe-row { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 6px; padding: 8px; border-radius: 16px; background: var(--card-2); border: 2px solid var(--line); }
  .pe-row > :nth-child(1) { grid-column: span 1; }
  .pe-row > :nth-child(2) { grid-column: span 4; }
  .pe-row > :nth-child(6) { grid-column: span 1; width: 100%; }
  .pe-row > :nth-child(3), .pe-row > :nth-child(4), .pe-row > :nth-child(5) { grid-column: span 2; }

  /* ---------- area proprietari: libretto dell'animale ---------- */
  .pass-card { padding: 16px; }
  .pass-top { flex-wrap: wrap; gap: 12px; }
  .pass-top > div:not(.ph-art) { flex: 1 1 calc(100% - 96px); min-width: 0; }
  .pass-top h1 { font-size: 28px; }
  .pass-top > .btn { flex: none; margin-left: auto; }
  .pass-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* voci del libretto (appuntamenti, vaccini, cliniche): il testo a tutta larghezza, stato e pulsanti sotto */
  .pp-item.row.between { flex-wrap: wrap; gap: 8px; }
  .pp-item.row.between > :first-child { flex: 1 1 100%; min-width: 0; }
  .pp-item.row.between > .col, .pp-item.row.between > .chip { width: 100%; flex-direction: row; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
  .pp-item.row.between > .chip { width: auto; margin-left: auto; }

  /* ---------- area proprietari: prenotazioni e preferiti ---------- */
  /* data e testo sulla prima riga, stato e pulsanti su una riga tutta loro (se no il testo si riduce a una parola per riga) */
  .bk-row { gap: 8px 10px; padding: 10px; }
  .bk-row > .grow { flex: 1 1 calc(100% - 62px); }
  .bk-side { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
  .bk-side > .row { flex-wrap: wrap; justify-content: flex-end; gap: 6px; min-width: 0; }
  .bk-side > .chip { margin-right: auto; }
  .fav-row { flex-wrap: wrap; }
  .fav-row > .btn, .fav-row > a.btn { margin-left: auto; }
  .hl-card { padding: 12px; gap: 10px; }
  .hl-card > .emoji { width: 40px; height: 40px; min-width: 40px; font-size: 22px; border-radius: 13px; }

  /* ---------- modali: foglio dal basso, pulsanti a tutta larghezza ---------- */
  .modal-head { padding: 18px 18px 8px; }
  .modal-head h3 { font-size: 20px; }
  .modal-body { padding: 8px 18px 18px; }
  .modal-foot { padding: 12px 18px calc(16px + env(safe-area-inset-bottom)); }
  .modal-foot > .btn { flex: 1 1 auto; }
}

/* ---------- tabelle: niente scorrimento laterale, ogni riga diventa una scheda
   (il nome della colonna arriva da data-label, che mette app.js; il magazzino ha già le sue schede) ---------- */
@media (max-width: 760px) {
  .table-wrap:has(> table.table:not(.mini-table, .sk-table)) { overflow: visible; }
  /* confronto dei piani: sta in quattro colonne strette invece di scorrere */
  .plan-matrix { font-size: 12.5px; }
  .plan-matrix th { font-size: 13px; padding: 8px 4px; }
  .plan-matrix td { padding: 8px 4px; }
  .plan-matrix th .emoji { display: block; font-size: 18px; }
  table.table:not(.mini-table, .sk-table) { display: block; border-spacing: 0; font-size: 13.5px; }
  table.table:not(.mini-table, .sk-table) thead { display: none; }
  table.table:not(.mini-table, .sk-table) tbody { display: flex; flex-direction: column; gap: 8px; }
  table.table:not(.mini-table, .sk-table) tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; position: relative;
    padding: 11px 13px; border-radius: 16px; background: var(--card-2); border: 2px solid var(--line);
  }
  table.table:not(.mini-table, .sk-table) tr.click:hover, table.table:not(.mini-table, .sk-table) tr.click:active { background: var(--bg-2); border-color: var(--line-2); }
  table.table:not(.mini-table, .sk-table) td {
    display: block; padding: 0; min-width: 0; background: none !important; border: 0 !important; border-radius: 0 !important;
    text-align: left; white-space: normal; overflow-wrap: anywhere; vertical-align: top;
  }
  table.table:not(.mini-table, .sk-table) td.num { text-align: left; }
  table.table:not(.mini-table, .sk-table) td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 1px;
    font: 800 10.5px/1.3 var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
  }
  table.table:not(.mini-table, .sk-table) td:empty { display: none; }
  /* la prima colonna è il titolo della scheda */
  table.table:not(.mini-table, .sk-table) td:first-child { grid-column: 1 / -1; font-size: 15px; }
  table.table:not(.mini-table, .sk-table) td:first-child::before { display: none; }
  /* celle senza intestazione (pulsanti): una riga intera, a destra */
  table.table:not(.mini-table, .sk-table) td:not([data-label]):not(:first-child) { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
  /* prima colonna con la sola casella di spunta o la sola foto: va nell'angolo, il titolo è la colonna dopo */
  table.table:not(.mini-table, .sk-table) td:first-child:has(> input[type="checkbox"]:only-child),
  table.table:not(.mini-table, .sk-table) td:first-child:has(> .pet-av:only-child) { position: absolute; top: 10px; right: 12px; }
  table.table:not(.mini-table, .sk-table) td:first-child:has(> input[type="checkbox"]:only-child) + td,
  table.table:not(.mini-table, .sk-table) td:first-child:has(> .pet-av:only-child) + td { grid-column: 1 / -1; font-size: 15px; padding-right: 46px; }
  table.table:not(.mini-table, .sk-table) td:first-child:has(> input[type="checkbox"]:only-child) + td::before,
  table.table:not(.mini-table, .sk-table) td:first-child:has(> .pet-av:only-child) + td::before { display: none; }
  table.table:not(.mini-table, .sk-table) td .chip { max-width: 100%; white-space: normal; line-height: 1.3; }
  table.table tr.sel { background: var(--sky-soft); border-color: color-mix(in srgb, var(--sky) 45%, var(--line)); }
  table.table .big-check { width: 24px; height: 24px; }

  /* libretto sanitario: le righe diventano voci, con il nome della colonna sopra ogni valore */
  .bk-table, .bk-table tbody { display: block; }
  .bk-table thead { display: none; }
  .bk-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; padding: 9px 0; border-bottom: 1px dashed #F1E4D3; }
  .bk-table td { display: block; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }
  .bk-table td:first-child { grid-column: 1 / -1; font-weight: 800; }
  .bk-table td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #8C84A3; }
}

/* le etichette lunghe delle chip non escono dalla scheda */
.rec-chips .chip, .rx-pcard .chip { white-space: normal; max-width: 100%; }
.rec-act { display: inline-flex; gap: 6px; margin-left: auto; }