/******************************************************************************
* newforms.css — restyling opt-in dei form table-input (studio: data/FORM.md)
*
* ATTIVAZIONE: solo sulle pagine che impostano $page_attr['newforms']=1
* prima di showHeader(); common.php emette class="newforms" sul .
* Senza quella classe questo file e` completamente inerte.
*
* ROLLBACK:
* - singola pagina: commentare la riga $page_attr['newforms']=1;
* - globale: commentare il diventa una griglia auto-adattiva ---------- */
/* auto-fit minmax(220px,1fr): ~3 colonne a piena larghezza (max 820px),
1-2 nel contenitore stretto di consumi.php, 1 su smartphone. */
body.newforms table.table-input {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
column-gap: 20px;
row-gap: 12px;
max-width: 820px;
background: #ffffff;
border: 1px solid #eef1f6;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(15,23,42,.10), 0 2px 8px rgba(15,23,42,.06);
padding: 0 24px 20px 24px;
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
overflow: hidden;
margin-top: 18px;
align-items: start;
}
body.newforms table.table-input thead,
body.newforms table.table-input tbody { display: contents; }
/* ---- Header principale (tr.hdr): banda a tutta larghezza ---------------- */
body.newforms table.table-input tr.hdr {
grid-column: 1/-1; display: block;
margin: 0 -24px 6px -24px; width: calc(100% + 48px);
}
body.newforms table.table-input tr.hdr th,
body.newforms table.table-input tr.hdr td,
body.newforms table.table-input tr.hdr:first-child th,
body.newforms table.table-input tr.hdr:first-child td {
display: block; width: 100%; box-sizing: border-box;
height: auto; line-height: 1.35; border: none;
background: linear-gradient(135deg, #0ea5a4, #2563eb);
color: #fff; font-size: 16px; font-weight: 700;
padding: 16px 24px; text-align: left;
}
/* ---- Sotto-sezioni (tr.hdr1) -------------------------------------------- */
body.newforms table.table-input tr.hdr1 { grid-column: 1/-1; display: block; }
body.newforms table.table-input tr.hdr1 th,
body.newforms table.table-input tr.hdr1 td {
display: block; height: auto; line-height: 1.35;
padding: 8px 0 4px;
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: .6px; color: #2563eb;
border: none; border-top: 1px solid #eef1f6;
text-align: left; background: none;
}
/* ---- Righe campo: etichetta sopra, input sotto -------------------------- */
/* :where() azzera la specificita` dei :not() → i casi speciali sotto vincono */
body.newforms table.table-input tbody tr:where(:not(.hdr):not(.hdr1):not(.ftr)) {
display: flex; flex-direction: column;
box-sizing: border-box; min-width: 0;
}
body.newforms table.table-input tbody tr:where(:not(.hdr):not(.hdr1):not(.ftr)) td {
display: block; width: 100%; box-sizing: border-box;
height: auto; padding: 0; border: none; min-width: 0;
}
body.newforms table.table-input tbody tr:where(:not(.hdr):not(.hdr1):not(.ftr)) td:first-child {
font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: .4px; color: #64748b; margin-bottom: 4px;
}
/* note inline accanto ai campi (es. "Seleziona Tutti per i grafici in
cascata" in consumi.php): a capo sotto il campo, mai fuori dalla cella */
body.newforms table.table-input tbody td .text-muted {
white-space: normal !important; /* vince sull'inline style nowrap */
display: block; margin: 4px 0 0 0 !important;
}
/* Righe a cella singola (td colspan, es. select "Selezione automatica"):
piena larghezza e niente stile-etichetta sul contenuto */
body.newforms table.table-input tbody tr:has(> td[colspan]) { grid-column: 1/-1; }
body.newforms table.table-input tbody tr:has(> td[colspan]) > td:first-child {
font-size: inherit; font-weight: 400; text-transform: none;
letter-spacing: 0; color: inherit; margin-bottom: 0;
}
/* Righe con checkbox: etichetta e casella affiancate */
body.newforms table.table-input tbody tr:has(> td > input[type=checkbox]) {
grid-column: 1/-1; flex-direction: row; align-items: center; gap: 10px;
}
body.newforms table.table-input tbody tr:has(> td > input[type=checkbox]) td {
width: auto;
}
body.newforms table.table-input tbody tr:has(> td > input[type=checkbox]) td:first-child {
margin-bottom: 0;
}
/* Righe con radio: gruppo in linea con a-capo */
body.newforms table.table-input tbody tr:has(> td > input[type=radio]) { grid-column: 1/-1; }
body.newforms table.table-input tbody tr:has(> td > input[type=radio]) td:last-child {
display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center;
}
/* Range di date (due input affiancati): riga a piena larghezza,
input fianco a fianco */
body.newforms table.table-input tbody tr:has(input[type=text] + input[type=text]),
body.newforms table.table-input tbody tr:has(input[type=date] + input[type=date]) {
grid-column: 1/-1;
}
body.newforms table.table-input td:has(> input[type=text] + input[type=text]),
body.newforms table.table-input td:has(> input[type=date] + input[type=date]) {
display: flex; gap: 8px;
}
body.newforms table.table-input td:has(> input[type=text] + input[type=text]) input,
body.newforms table.table-input td:has(> input[type=date] + input[type=date]) input {
flex: 1 1 0; min-width: 0;
}
/* ---- Campi input (lista tipi allineata a bs.css) ------------------------ */
body.newforms table.table-input tr td select,
body.newforms table.table-input tr td textarea,
body.newforms table.table-input tr td input[type=text],
body.newforms table.table-input tr td input[type=email],
body.newforms table.table-input tr td input[type=time],
body.newforms table.table-input tr td input[type=date],
body.newforms table.table-input tr td input[type=datetime],
body.newforms table.table-input tr td input[type=datetime-local],
body.newforms table.table-input tr td input[type=month],
body.newforms table.table-input tr td input[type=number],
body.newforms table.table-input tr td input[type=search],
body.newforms table.table-input tr td input[type=tel],
body.newforms table.table-input tr td input[type=url],
body.newforms table.table-input tr td input[type=password] {
width: 100%; box-sizing: border-box; height: auto;
padding: 7px 11px;
border: 1.5px solid #e2e8f0; border-radius: 9px;
font-size: 13px; color: #1e293b; background: #f8fafc;
transition: all .15s ease;
}
body.newforms table.table-input tr td select:focus,
body.newforms table.table-input tr td textarea:focus,
body.newforms table.table-input tr td input[type=text]:focus,
body.newforms table.table-input tr td input[type=email]:focus,
body.newforms table.table-input tr td input[type=time]:focus,
body.newforms table.table-input tr td input[type=date]:focus,
body.newforms table.table-input tr td input[type=datetime]:focus,
body.newforms table.table-input tr td input[type=datetime-local]:focus,
body.newforms table.table-input tr td input[type=month]:focus,
body.newforms table.table-input tr td input[type=number]:focus,
body.newforms table.table-input tr td input[type=search]:focus,
body.newforms table.table-input tr td input[type=tel]:focus,
body.newforms table.table-input tr td input[type=url]:focus,
body.newforms table.table-input tr td input[type=password]:focus {
outline: none; border-color: #2563eb; background: #fff;
box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
body.newforms table.table-input input[type=checkbox] {
width: 17px; height: 17px; accent-color: #2563eb; cursor: pointer;
}
body.newforms table.table-input input[type=radio] { accent-color: #2563eb; }
/* ---- Footer (tr.ftr): bottone principale + eventuali link extra --------- */
body.newforms table.table-input tr.ftr { grid-column: 1/-1; display: block; margin-top: 6px; }
body.newforms table.table-input tr.ftr th,
body.newforms table.table-input tr.ftr td {
display: flex; gap: 10px; align-items: center;
height: auto; padding: 0; border: none;
text-align: left; background: none;
}
body.newforms table.table-input tr.ftr button,
body.newforms table.table-input tr.ftr input[type=submit] {
flex: 1 1 auto; border: none;
background: linear-gradient(135deg, #2563eb, #0ea5a4);
color: #fff; font-weight: 600; font-size: 14px;
padding: 11px 20px; border-radius: 10px; cursor: pointer;
box-shadow: 0 6px 16px rgba(37,99,235,.3);
transition: transform .15s ease, box-shadow .15s ease;
}
body.newforms table.table-input tr.ftr button:hover,
body.newforms table.table-input tr.ftr input[type=submit]:hover {
transform: translateY(-2px); box-shadow: 0 10px 22px rgba(37,99,235,.4);
}
/* link .btn nel footer (es. Esporta): niente float, si affiancano al bottone */
body.newforms table.table-input tr.ftr a.btn {
flex: 0 0 auto; float: none; border-radius: 10px;
}
/* ---- Select2 (solo controllo chiuso; il dropdown vive fuori dal form) --- */
body.newforms table.table-input .select2-container { width: 100% !important; }
body.newforms .select2-container--default .select2-selection--single {
height: auto !important; border: 1.5px solid #e2e8f0 !important;
border-radius: 9px !important; padding: 6px 10px !important;
background: #f8fafc !important;
}
body.newforms .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 18px !important; color: #1e293b !important;
font-size: 13px !important; padding-left: 2px !important;
}
body.newforms .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 32px !important;
}