/* =======================================================================
   mobile.css — rifiniture grafiche + responsive per le sezioni nuove
   Si carica DOPO styles.css: non modifica il CSS esistente, lo arricchisce.
   Coerente con la palette dell'app (--deep, --deep-2, --lime, --coral, --line).
   ======================================================================= */

:root {
  --shadow-soft: 0 6px 20px rgba(21, 52, 47, .08);
  --shadow-hover: 0 12px 30px rgba(21, 52, 47, .12);
}

/* --- Ritocchi "fichi" leggeri (tutta l'app) --- */

.panel, .stat-card, .modal {
  box-shadow: var(--shadow-soft);
}

.button, .text-button, .nav-item,
[data-agenda-view], #agenda-prev, #agenda-next, #agenda-today,
#agenda-month, #agenda-year, [data-edit-appt] {
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, box-shadow .18s ease,
              transform .12s ease, filter .12s ease;
}

.button:active { transform: translateY(1px); }

.nav-item { border-radius: 12px; }

/* chip appuntamenti: micro sollevamento al passaggio */
[data-edit-appt] { border-radius: 6px; }
[data-edit-appt]:hover { transform: translateY(-1px); filter: brightness(1.06); }

/* controlli agenda: bordo che si accende all'hover */
#agenda-prev:hover, #agenda-next:hover, #agenda-today:hover,
#agenda-month:hover, #agenda-year:hover { border-color: var(--deep-2) !important; }

/* celle calendario cliccabili: feedback morbido */
#agenda-week-view [data-new-day],
#agenda-month-view [data-new-day] {
  transition: box-shadow .18s ease, transform .12s ease, border-color .18s ease;
}
#agenda-week-view [data-new-day]:hover,
#agenda-month-view [data-new-day]:hover {
  box-shadow: var(--shadow-soft);
  border-color: var(--deep-2) !important;
}

/* righe cronologia cliente: hover */
#client-appts-list [data-open-appt] { transition: background-color .15s ease; border-radius: 6px; }
#client-appts-list [data-open-appt]:hover { background: var(--canvas); }

/* risultati ricerca (cliente/pratica): voci con hover */
#appt-client-results [data-cid]:hover,
#appt-practice-results [data-pid]:hover { background: var(--canvas); }

/* --- Responsive: tablet e sotto --- */
@media (max-width: 1050px) {
  #agenda-week-view [style] { min-width: 0; }
}

@media (max-width: 760px) {
  /* barra controlli agenda: tutto a piena larghezza, niente "a capo" scomposto */
  .agenda-controls { gap: 8px !important; }
  .agenda-controls > div { margin-left: 0 !important; width: 100%; }
  .agenda-controls [data-agenda-view] { flex: 1; }
  #agenda-prev, #agenda-next, #agenda-today,
  #agenda-month, #agenda-year {
    height: 42px !important; font-size: 15px !important;
  }
  #agenda-today { flex: 0 0 auto; }
  #agenda-month, #agenda-year { flex: 1; }
  #agenda-period { width: 100%; margin-left: 0 !important; margin-top: 2px; }

  /* vista settimana: resta a scorrimento orizzontale ma colonne un filo più strette */
  #agenda-week-view [data-new-day] { min-width: 120px !important; }

  /* vista mese: più compatta per stare in 7 colonne */
  #agenda-month-view { padding: 6px !important; }
  #agenda-month-view [data-new-day] { min-height: 74px !important; padding: 4px !important; }

  /* striscia "Questa settimana" in home: colonne più strette */
  #dashboard-week > div > div { min-width: 128px !important; }

  /* popup più ariosi su telefono */
  .modal { max-height: 94vh; }
  .button { min-height: 42px; }
}

@media (max-width: 480px) {
  #agenda-month-view [data-new-day] { min-height: 58px !important; padding: 3px !important; }
  #agenda-month-view [data-new-day] [data-edit-appt] { font-size: 10px !important; padding: 1px 4px !important; }
  #agenda-month-view [data-new-day] > div:first-child { font-size: 11px !important; }
  #dashboard-week > div > div { min-width: 116px !important; }
}

/* =======================================================================
   Pass 2 — rifiniture responsive aggiuntive per le sezioni esistenti
   (report, pratiche, admin, team, banche) — solo su schermi piccoli
   ======================================================================= */

@media (max-width: 760px) {
  /* niente scroll laterale accidentale di tutta la pagina */
  .main-content { overflow-x: hidden; }

  /* scorrimento fluido delle tabelle su touch */
  .table-wrap { -webkit-overflow-scrolling: touch; }

  /* toolbar di sezione: titolo e azioni impilati, bottone pieno */
  .section-toolbar { gap: 10px; }
  .section-toolbar .button { width: 100%; }

  /* barra filtri (pratiche/clienti/agenda): a capo ordinato, controlli larghi */
  .filter-bar { flex-wrap: wrap; }
  .filter-bar select,
  .filter-bar .button { flex: 1 1 auto; min-height: 42px; }
  .search-input { min-width: 100% !important; }

  /* REPORT: preset periodo e selettori comodi da toccare */
  .report-filters { gap: 10px; }
  .report-filter-presets { gap: 8px; }
  .report-period { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; }
  .report-kpis { gap: 10px !important; }
  .report-donut { gap: 14px; }
  .report-chart { min-width: 0; }

  /* numeri grandi (stat card / KPI) un filo più contenuti per non sbordare */
  .stat-card .stat-value { word-break: break-word; }

  /* TEAM / BANCHE: card a una colonna e azioni allineate */
  .bank-list { grid-template-columns: 1fr !important; }
  .rule-card .action-button { justify-self: end; }

  /* ADMIN: form e azioni a piena larghezza */
  .admin-form-actions { flex-direction: column; align-items: stretch; }
  .admin-form-actions .button { width: 100%; }

  /* pulsanti azione riga: area di tocco più generosa */
  .action-button { width: 34px; height: 34px; font-size: 18px; }
  .row-actions { gap: 6px; }
}

@media (max-width: 480px) {
  .report-filter-presets { grid-template-columns: 1fr 1fr !important; }
  .report-kpis { grid-template-columns: 1fr !important; }
  .modal-header h2 { font-size: 18px; }
  .form-actions { flex-wrap: wrap; }
  .form-actions .button { flex: 1 1 auto; min-height: 42px; }
}

/* =======================================================================
   Pass 3 — ANTI-SFORAMENTO ORIZZONTALE (iPhone/Safari)
   Elimina lo scroll laterale della pagina causato da elementi a larghezza
   fissa o da tabelle che spingono i contenitori.
   ======================================================================= */

@media (max-width: 760px) {
  html, body { overflow-x: hidden; max-width: 100%; }

  .app-shell, .main-content, .view,
  .panel, .table-panel,
  .report-table-card, .report-monthly-table-card,
  .report-charts-grid, .report-tables-grid {
    min-width: 0;
    max-width: 100%;
  }

  /* le tabelle scorrono DENTRO il loro contenitore, senza trascinare la pagina */
  .table-wrap, .calc-table-wrap { max-width: 100%; }

  /* REPORT: controlli filtro a larghezza fissa (330/220/205px !important) -> piena larghezza */
  .report-filters #report-collaborator-filter,
  #report-collaborator-filter,
  .report-collaborator-control,
  .report-collaborator-control > div,
  #report-status-select {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* LOGIN: decorazione larga che poteva sforare */
  #loginScreen::before { max-width: 100% !important; }

  /* evita che input su iOS facciano zoom/allarghino (font >=16px) */
  input, select, textarea { font-size: 16px; }
}

/* =======================================================================
   Pass 4 — correzioni mirate da screenshot iPhone
   1) il pulsante menu (fixed, in alto a sx) copriva i titoli delle viste
   2) barra filtri stretta
   3) tabelle larghe: segnalare lo scroll
   ======================================================================= */

@media (max-width: 760px) {
  /* 2) barra filtri: campi a piena larghezza, "Azzera filtri" su riga propria */
  .filter-bar { gap: 10px; }
  .filter-bar .search-input { flex: 1 1 100%; min-width: 100% !important; }
  .filter-bar select { flex: 1 1 calc(50% - 5px); min-width: 0 !important; height: 42px; }
  .filter-bar .button { flex: 1 1 100%; min-height: 42px; }

  /* 3) tabelle: ombra a destra che suggerisce lo scorrimento + barra visibile */
  .table-wrap {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    background:
      linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center / 24px 100% no-repeat,
      linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right center / 24px 100% no-repeat,
      linear-gradient(to right, rgba(21,52,47,.10), rgba(21,52,47,0)) left center / 10px 100% no-repeat,
      linear-gradient(to left, rgba(21,52,47,.10), rgba(21,52,47,0)) right center / 10px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
}

/* =======================================================================
   Pass 6 — burger fluttuante pulito (niente barra) + calcolatore mobile
   ======================================================================= */

@media (max-width: 760px) {
  /* nessuna barra in alto: solo il pulsante che fluttua, con alone morbido */
  .mobile-menu-toggle {
    z-index: 40 !important;
    box-shadow: 0 0 0 7px rgba(247, 250, 245, .72), 0 6px 16px rgba(21, 52, 47, .22) !important;
  }

  /* spazio in cima: i titoli partono sotto il pulsante (che è alto ~58px) */
  .main-content { padding-top: calc(64px + env(safe-area-inset-top)) !important; }

  /* --- CALCOLATORE --- */
  .calc-layout { grid-template-columns: 1fr !important; gap: 14px !important; }
  .calc-inputs { position: static !important; }
  .calc-stats { grid-template-columns: 1fr 1fr !important; }
  .calc-modes { flex-wrap: wrap; }
  .calc-mode { flex: 1 1 auto; }
  .calc-field input,
  .calc-input-euro input,
  .calc-input-derivato input { width: 100%; box-sizing: border-box; }
  .calc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .calc-page { padding: 0 14px !important; }
  /* input a 16px: su iOS evita lo zoom automatico */
  .calc-field input, .calc-field select { font-size: 16px; }
}

@media (max-width: 420px) {
  .calc-stats { grid-template-columns: 1fr !important; }
}

/* =======================================================================
   Pass 7 — calcolatore (anti-sforamento grafico/pannelli) + burger a scomparsa
   ======================================================================= */

@media (max-width: 760px) {
  /* burger: scompare scrollando giù, riappare su (classe gestita via JS) */
  .mobile-menu-toggle { transition: transform .25s ease, opacity .25s ease; }
  body.nav-hidden .mobile-menu-toggle {
    transform: translateY(-160%);
    opacity: 0;
    pointer-events: none;
  }

  /* GRAFICO ammortamento: scorre dentro il suo riquadro, non sfora la pagina */
  .calc-chart {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .calc-chart .calc-bar-group { min-width: 16px; }

  /* PANNELLO verde "Rata" e risultati: mai oltre la larghezza */
  .calc-results, .calc-results > *,
  .calc-chart-panel, .calc-table-panel,
  .calc-headline { max-width: 100%; }
  .calc-headline { padding: 18px 16px; }
  .calc-headline-main strong { font-size: 30px; word-break: break-word; }
  .calc-verdict { max-width: 100%; }
}