/* Joker LLP — fix mobile condivisi, solo layout.
   Un solo file: qualunque tweak futuro su questi pattern si fa qui,
   non pagina per pagina. Applicare le classi sotto ai contenitori
   esistenti, mai introdurre nuova logica. */

/* 1) Card/box centrati senza @media (reset_password.php, send_reset_mail.php,
      reset_password_confirm.php) */
@media (max-width: 480px) {
  .jk-authbox { padding: 16px; }
}

/* 2) Tabelle gestionali senza wrapper scrollabile (admin_booking.php,
      usb_flash.php, import_ade.php, HR/hr.php) */
.jk-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.jk-table-wrap table { min-width: 600px; }

/* 3) Form a griglia 2 colonne che non collassano (admin_account.php,
      admin_booking.php — stessa convenzione .row2 già in uso in questi file) */
@media (max-width: 700px) {
  .row2 { grid-template-columns: 1fr !important; }
}

/* 4) Target di tocco minimo per bottoni piccoli (Staff/consuntivazione.php,
      bottone "Approva") */
.jk-touch-btn { min-height: 40px; }

/* 4bis) Barra tab a pillola (area_riservata.php .tabs) — con 3 tab
   (Profilo/Prenotazioni/Consuntivazione, quest'ultima solo per staff) il
   contenitore a max-width:fit-content esce dalla cornice su schermi stretti,
   spingendo in larghezza l'intera pagina. Qui la rendiamo scorrevole SOLO al
   suo interno (mai la pagina) e compattiamo leggermente i pulsanti. */
@media (max-width: 480px) {
  .jk-tabs-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .jk-tabs-scroll::-webkit-scrollbar { display: none; }
  .jk-tabs-scroll .tab-btn {
    flex: 0 0 auto;
    padding: 6px 8px;
    font-size: 0.78rem;
  }
  .jk-tabs-scroll .tab-btn span.icon { font-size: 0.82rem; }
}

/* 5) Report Business Plan (dettaglio/analisi/capexopex): pagine pensate solo
      per @media print, nessuna regola schermo. Qui solo l'adattamento minimo
      per non romperle se aperte da mobile — la resa a stampa non cambia. */
@media (max-width: 700px) {
  .jk-report-page { margin: 12px !important; padding: 12px !important; }
  .jk-report-page table { width: 100% !important; }
  /* .pagina: convenzione già condivisa da business_plan_report_analisi.php
     e business_plan_report_capexopex.php, nessuna classe nuova da aggiungere */
  .pagina { padding: 12px !important; overflow-x: auto; }
  .barra-riga { grid-template-columns: 1fr !important; }
}

/* 6) Barra tab a pillola — variante con markup .tab invece di .tab-btn
      (stesso principio del punto 4bis, RCH usa un nome di classe diverso):
      RCH/rch_import.php, RCH/MenuRCH.php, RCH/rch_chiusure.php,
      RCH/rch_tavoli.php, RCH/rch_offerte.php (5 tab, escono dalla cornice
      su schermi stretti). Applicare .jk-tabs-scroll al contenitore .tabs
      esistente, nessuna classe nuova sui singoli .tab. */
.jk-tabs-scroll .tab { flex: 0 0 auto; }
@media (max-width: 480px) {
  .jk-tabs-scroll .tab { padding: 6px 10px; font-size: 0.78rem; }
}

/* 7) Menu RCH (RCH/MenuRCH.php .rch-layout): colonna categorie a sinistra +
      griglia prodotti a destra — su schermi stretti le categorie diventano
      una barra orizzontale scorrevole sopra la griglia invece di restare
      una colonna fissa che comprime i prodotti. */
@media (max-width: 720px) {
  .rch-layout { flex-direction: column; }
  .rch-cats { width: 100%; flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; border-right: none; border-bottom: 1px solid #1f2937; }
  .rch-cat-btn { flex: 0 0 auto; white-space: nowrap; }
}