. Marca le colonne secondarie con .v2-col-lo
(th+td): vengono nascoste su tablet portrait/phone, restano su landscape/desktop.
(B) CARD su portrait: aggiungi class="v2-tbl-cards" alla
e su OGNI | metti data-label="Intestazione colonna". In portrait/phone
la tabella diventa una pila di card leggibili; su desktop resta tabella. */
/* (A) contenitore con scroll orizzontale morbido (no rottura layout) */
.v2-tbl-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius)}
.v2-tbl-scroll>table.tbl,.v2-tbl-scroll>table.table{min-width:640px}
/* colonne a bassa priorità: nascoste su tablet portrait e phone, visibili altrove */
@media (max-width:1199px) and (orientation:portrait){ .v2-col-lo{display:none!important} }
@media (max-width:767px){ .v2-col-lo{display:none!important} }
/* (B) table -> cards: rendering a card nelle bande tablet portrait + phone */
@media (max-width:1199px) and (orientation:portrait){
table.tbl.v2-tbl-cards,table.table.v2-tbl-cards{box-shadow:none;background:none}
table.tbl.v2-tbl-cards thead,table.table.v2-tbl-cards thead{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
table.tbl.v2-tbl-cards tbody tr,table.table.v2-tbl-cards tbody tr{display:block;background:var(--surface);border:1px solid var(--bi-border);border-radius:var(--radius);box-shadow:var(--shadow-sm);margin-bottom:12px;padding:8px 4px}
table.tbl.v2-tbl-cards tbody tr:hover,table.table.v2-tbl-cards tbody tr:hover{background:var(--surface)}
table.tbl.v2-tbl-cards td,table.table.v2-tbl-cards td{display:flex;justify-content:space-between;gap:14px;border:none;padding:8px 14px;font-size:.95rem;text-align:right}
table.tbl.v2-tbl-cards td::before,table.table.v2-tbl-cards td::before{content:attr(data-label);font-weight:600;color:var(--bi-text-muted);text-align:left;flex:0 0 auto;text-transform:none;letter-spacing:0}
table.tbl.v2-tbl-cards td:empty,table.table.v2-tbl-cards td:empty{display:none}
}
@media (max-width:767px){
table.tbl.v2-tbl-cards,table.table.v2-tbl-cards{box-shadow:none;background:none}
table.tbl.v2-tbl-cards thead,table.table.v2-tbl-cards thead{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
table.tbl.v2-tbl-cards tbody tr,table.table.v2-tbl-cards tbody tr{display:block;background:var(--surface);border:1px solid var(--bi-border);border-radius:var(--radius);box-shadow:var(--shadow-sm);margin-bottom:12px;padding:8px 4px}
table.tbl.v2-tbl-cards td,table.table.v2-tbl-cards td{display:flex;justify-content:space-between;gap:14px;border:none;padding:8px 14px;text-align:right}
table.tbl.v2-tbl-cards td::before,table.table.v2-tbl-cards td::before{content:attr(data-label);font-weight:600;color:var(--bi-text-muted);text-align:left;flex:0 0 auto;text-transform:none;letter-spacing:0}
table.tbl.v2-tbl-cards td:empty{display:none}
}
/* ---------- 4) GRID: densità adattata al tablet ----------
Le .grid.cols-* del DS usano auto-fit/minmax: già fluide. Aggiustiamo solo i
minmax in banda tablet per evitare colonne troppo strette o troppo larghe. */
@media (min-width:768px) and (max-width:1199px){
.grid.cols-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.main{padding:18px}
}
/* ---------- 5) MODALI FULLSCREEN su tablet portrait + phone ----------
I modali TaxAiCrud usano .modal-overlay > .modal-dialog. Su schermi stretti
(tablet portrait/phone) li portiamo a tutto schermo per usabilità touch,
con footer azioni sempre raggiungibile. Su desktop/tablet landscape invariati. */
@media (max-width:1199px) and (orientation:portrait){
.modal-overlay{align-items:stretch!important;justify-content:stretch!important;padding:0!important}
.modal-overlay .modal-dialog{width:100%!important;max-width:100%!important;max-height:100vh!important;height:100vh;margin:0!important;border-radius:0!important;display:flex;flex-direction:column}
.modal-overlay .modal-body{flex:1 1 auto;overflow:auto}
.modal-overlay .modal-footer{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--bi-border)}
.modal-overlay .modal-footer .btn{min-height:var(--v2-touch)}
}
@media (max-width:767px){
.modal-overlay{align-items:stretch!important;justify-content:stretch!important;padding:0!important}
.modal-overlay .modal-dialog{width:100%!important;max-width:100%!important;max-height:100vh!important;height:100vh;margin:0!important;border-radius:0!important;display:flex;flex-direction:column}
.modal-overlay .modal-body{flex:1 1 auto;overflow:auto}
.modal-overlay .modal-footer{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--bi-border)}
}
/* ---------- 6) TOP NAV: drawer/overflow su tablet ----------
La barra a 30+ voci con dropdown va in scroll orizzontale fluido su tablet,
con bersagli grandi. Il drawer verticale (toggle hamburger) è gestito da
shell-v2.js che aggiunge .v2-nav-drawer al quando attivo. */
@media (min-width:768px) and (max-width:1199px){
.topnav .wrap{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.topnav .dd-menu{position:fixed;left:8px;right:8px;min-width:0;max-height:60vh}
}
/* Hamburger toggle (iniettato dalla shell solo in banda tablet/coarse) */
.v2-nav-toggle{display:none;background:none;border:none;color:#cfe0f0;font-size:1.2rem;padding:12px 14px;cursor:pointer;min-height:var(--v2-touch)}
/* Drawer verticale: quando .topnav ha .v2-nav-drawer.open, il .wrap diventa colonna a tendina */
.topnav.v2-nav-drawer .wrap{display:none}
.topnav.v2-nav-drawer.open .wrap{display:flex;flex-direction:column;flex-wrap:nowrap;overflow-x:visible;max-height:70vh;overflow-y:auto;background:var(--bi-primary-darker);padding:6px 8px 12px}
.topnav.v2-nav-drawer.open .dd{width:100%}
.topnav.v2-nav-drawer.open .dd-menu{position:static;display:none;box-shadow:none;border:none;background:rgba(255,255,255,.06);border-radius:8px;margin:2px 0 6px;max-height:none}
.topnav.v2-nav-drawer.open .dd.open .dd-menu{display:block}
.topnav.v2-nav-drawer.open .dd-menu a{color:#e8f0f8}
.topnav.v2-nav-drawer.open .dd-menu a:hover{background:rgba(255,255,255,.1);color:#fff}
@media (min-width:768px) and (max-width:1199px){ .v2-nav-toggle{display:inline-flex;align-items:center} }
/* ---------- 8) SPLIT asimmetrico contenuto+aside (es. calendar) ----------
Le viste con layout "contenuto principale + colonna laterale" usano una grid
asimmetrica inline (es. minmax(0,2.1fr) minmax(280px,1fr)). Su tablet portrait
e phone va impilata per non sforare in larghezza. Marca il wrapper con
.v2-split-aside: su portrait/phone diventa una colonna; l'aside sticky torna
statico. Desktop e tablet landscape restano invariati (vince l'inline style
solo finché questa regola non si attiva). */
@media (max-width:1199px) and (orientation:portrait){
.v2-split-aside{grid-template-columns:1fr!important}
.v2-split-aside aside .card{position:static!important}
/* aside che è esso stesso una .card (es. nav della guida): de-stick + altezza libera */
.v2-split-aside aside.card{position:static!important;max-height:none!important}
}
@media (max-width:767px){
.v2-split-aside{grid-template-columns:1fr!important}
.v2-split-aside aside .card{position:static!important}
.v2-split-aside aside.card{position:static!important;max-height:none!important}
}
/* ---------- 7) Banner OFFLINE (gestito da sw-register.js) ---------- */
#v2-offline-banner{position:fixed;bottom:0;left:0;right:0;background:var(--bi-warning,#A66300);color:#fff;
padding:9px 16px;text-align:center;z-index:99997;font-size:.9rem;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 -2px 8px rgba(0,0,0,.15)}
#v2-offline-banner i{font-size:1rem}
|