/*
* SAVE srl - veste grafica (25/09/2026)
* Si carica DOPO il tema Gentelella (custom.min.css / custom.css) e ne corregge solo l'aspetto:
* nessuna classe nuova obbligatoria nel markup, nessuna funzione toccata. Togliere il = tornare a prima.
* Colori della casa mantenuti: navy #2A3F54 / #34495E, verde #1ABB9C, rosso #E74C3C.
* Il verde pieno non regge il testo bianco (contrasto 2,5:1): sui pulsanti si usa la sua tinta scura.
*/
:root {
--s-navy-900: #1f3043;
--s-navy-800: #2A3F54;
--s-navy-700: #34495E;
--s-ink: #22313f;
--s-ink-2: #3d4f61;
--s-muted: #5b6b7c;
--s-line: #e2e7ec;
--s-line-soft: #eef1f4;
--s-canvas: #f5f7f9;
--s-surface: #ffffff;
--s-field: #f1f4f7;
--s-accent: #1ABB9C;
--s-accent-strong: #11806b;
--s-accent-hover: #0e6f5d;
--s-accent-soft: #e6f6f2;
--s-danger: #E74C3C;
--s-danger-strong: #c0392b;
--s-danger-soft: #fdecea;
--s-warn-soft: #fff4e5;
--s-warn-ink: #8a5300;
--s-radius-sm: 6px;
--s-radius: 8px;
--s-radius-lg: 12px;
--s-shadow: 0 1px 2px rgba(31, 48, 67, .05), 0 4px 14px rgba(31, 48, 67, .05);
--s-shadow-pop: 0 6px 24px rgba(31, 48, 67, .14), 0 2px 6px rgba(31, 48, 67, .08);
--s-ring: 0 0 0 3px rgba(26, 187, 156, .22);
--s-font: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
--s-ease: cubic-bezier(.22, .61, .36, 1);
}
/* ---------------------------------------------------------------- base */
html { -webkit-text-size-adjust: 100%; }
body,
body.nav-md,
body.nav-sm {
font-family: var(--s-font);
font-size: 14px;
line-height: 1.5;
color: var(--s-ink);
background: var(--s-navy-800);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body .right_col,
body.nav-md .container.body .right_col,
body.nav-sm .container.body .right_col { background: var(--s-canvas); padding: 20px 24px 32px; }
body .main_container .top_nav { background: var(--s-surface); }
h1, h2, h3, h4, h5, h6 { font-family: var(--s-font); color: var(--s-navy-700); letter-spacing: -0.01em; }
a { color: var(--s-accent-strong); }
a:hover, a:focus { color: var(--s-accent-hover); }
::selection { background: rgba(26, 187, 156, .25); }
:focus-visible { outline: 2px solid var(--s-accent); outline-offset: 2px; }
/* numeri allineati nelle tabelle e nei campi */
table, .form-control, .badge { font-variant-numeric: tabular-nums; }
/* ------------------------------------------------------------- sidebar */
body .left_col { background: var(--s-navy-800); }
body .nav_title { background: var(--s-navy-800); border-bottom: 1px solid rgba(255, 255, 255, .06); }
body .site_title {
font-family: var(--s-font);
font-weight: 700;
font-size: 20px;
letter-spacing: -0.02em;
padding-left: 18px;
color: #fff;
}
body .site_title .fa-paw { display: none; }
body .site_title span { color: #fff; }
body .site_title:hover, body .site_title:focus { color: #fff; text-decoration: none; }
/* il marchio vero al posto della scritta: targhetta bianca, come l'adesivo sul furgone.
Il nome resta nel link per i lettori di schermo. */
body .nav_title { height: auto; padding: 14px 14px 12px; }
body .site_title {
display: flex;
align-items: center;
height: auto;
line-height: 1;
padding: 0;
width: 100%;
}
body .site_title::before {
content: "";
display: block;
width: 100%;
max-width: 176px;
height: 58px;
border-radius: var(--s-radius);
background: #fff url("../img/logo-save.png") center / contain no-repeat;
background-origin: content-box;
padding: 8px 12px;
box-sizing: border-box;
}
body .site_title > span {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* menu chiuso (solo icone): targhetta piccola */
body.nav-sm .nav_title { padding: 10px 8px; }
body.nav-sm .site_title::before { height: 34px; padding: 4px; }
body .profile { padding: 14px 0 6px; }
body .profile_info span { color: rgba(255, 255, 255, .6); font-size: 12px; }
body .profile_info h2 { color: #fff; font-size: 15px; font-weight: 600; margin-top: 2px; }
body .img-circle.profile_img { border: 2px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .08); }
body .main_menu_side h3,
body .menu_section h3 { color: rgba(255, 255, 255, .45); font-size: 11px; font-weight: 600; letter-spacing: .04em; }
body .nav.side-menu > li > a {
color: rgba(255, 255, 255, .78);
font-weight: 500;
font-size: 14px;
padding: 11px 16px;
margin: 1px 10px;
border-radius: var(--s-radius);
text-shadow: none;
transition: background-color .18s var(--s-ease), color .18s var(--s-ease);
}
body .nav.side-menu > li > a > .fa { color: rgba(255, 255, 255, .55); width: 22px; font-size: 16px; }
body .nav.side-menu > li > a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
body .nav.side-menu > li.active,
body .nav.side-menu > li.current-page {
border-right: 0;
background: transparent;
box-shadow: none;
}
body .nav.side-menu > li.active > a,
body .nav.side-menu > li.current-page > a {
background: rgba(26, 187, 156, .14);
color: #fff;
text-shadow: none;
box-shadow: none;
}
body .nav.side-menu > li.active > a > .fa,
body .nav.side-menu > li.current-page > a > .fa { color: var(--s-accent); }
body .nav.side-menu > li > a .fa-chevron-down { color: rgba(255, 255, 255, .4); font-size: 10px; margin-top: 5px; }
body .nav.child_menu { background: transparent; }
body .nav.child_menu li { padding-left: 0; }
body .nav.child_menu li:before,
body .nav.child_menu li:after,
body .nav.child_menu > li > a:before { display: none; }
body .nav.child_menu > li > a,
body .nav.side-menu .child_menu > li > a {
color: rgba(255, 255, 255, .66);
font-size: 13px;
font-weight: 500;
padding: 8px 16px 8px 50px;
margin: 1px 10px;
border-radius: var(--s-radius-sm);
}
body .nav.child_menu > li > a:hover { color: #fff; background: rgba(255, 255, 255, .05); }
body .nav.child_menu > li.current-page > a,
body .nav.child_menu > li.active > a { color: #fff; background: rgba(255, 255, 255, .08); }
body .sidebar-footer { background: var(--s-navy-900); }
body .sidebar-footer a { background: var(--s-navy-900); color: rgba(255, 255, 255, .55); }
body .sidebar-footer a:hover { background: var(--s-navy-800); color: #fff; }
/* ------------------------------------------------------------ top bar */
body .nav_menu {
background: var(--s-surface);
border-bottom: 1px solid var(--s-line);
margin-bottom: 0;
min-height: 57px;
}
body .toggle a { color: var(--s-ink-2); }
body .toggle a:hover { color: var(--s-ink); }
body .nav.navbar-nav > li > a,
body .top_nav .navbar-right > li > a { color: var(--s-ink-2); font-weight: 500; }
body .top_nav .nav > li > a:hover,
body .top_nav .nav > li > a:focus,
body .top_nav .nav .open > a { background: var(--s-canvas); color: var(--s-ink); }
body .user-profile img { border: 1px solid var(--s-line); }
body .dropdown-menu {
border: 1px solid var(--s-line);
border-radius: var(--s-radius);
box-shadow: var(--s-shadow-pop);
padding: 6px;
}
body .dropdown-menu > li > a { border-radius: var(--s-radius-sm); padding: 8px 12px; color: var(--s-ink); }
body .dropdown-menu > li > a:hover { background: var(--s-canvas); }
/* ------------------------------------------------------ page, pannelli */
body .page-title {
padding: 6px 0 14px;
min-height: 0;
height: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 12px;
}
body .page-title .title_left { width: auto; float: none; padding: 0; }
body .page-title .title_right { width: auto; float: none; margin-left: auto; padding: 0; }
/* il numero del documento sta accanto al titolo, non a mezz'aria */
body .page-title > .panel_toolbox { float: none; margin: 0; padding: 0; min-width: 0; }
body .page-title > .panel_toolbox .pull-right { float: none !important; }
body .page-title .title_left h3 {
font-size: 22px;
font-weight: 600;
color: var(--s-navy-700);
margin: 8px 0 4px;
}
body .x_panel {
background: var(--s-surface);
border: 1px solid var(--s-line);
border-radius: var(--s-radius-lg);
box-shadow: var(--s-shadow);
padding: 18px 22px 20px;
margin-bottom: 18px;
}
body .x_title {
border-bottom: 1px solid var(--s-line);
padding: 0 0 12px;
margin-bottom: 16px;
}
body .x_title h2 {
font-size: 16px;
font-weight: 600;
color: var(--s-navy-700);
margin: 6px 0 0;
}
body .x_title h2 small { color: var(--s-muted); }
/* il titolo del riquadro e' flottante: la riga sotto deve stare sotto anche se manca il clearfix nel markup */
body .x_title::after { content: ""; display: table; clear: both; }
body .x_content { padding: 0; margin-top: 0; }
body footer {
background: var(--s-surface);
border-top: 1px solid var(--s-line);
color: var(--s-muted);
padding: 14px 24px;
font-size: 12.5px;
}
/* il numero del documento accanto al titolo (2026/0090, 2026/1143) */
body .badge.bg-red {
background: var(--s-navy-800) !important;
border-color: var(--s-navy-800) !important;
color: #fff;
font-weight: 600;
letter-spacing: .01em;
border-radius: var(--s-radius-sm);
padding: 2px 10px;
box-shadow: none;
}
body .badge.bg-red h5 { margin: 4px 0; font-size: 13px; color: #fff; font-weight: 600; }
/* --------------------------------------------------------------- form */
body label,
body .control-label {
font-size: 12.5px;
font-weight: 600;
color: var(--s-ink-2);
margin-bottom: 6px;
}
body .form-control {
height: 40px;
padding: 8px 12px;
font-size: 14px;
color: var(--s-ink);
background-color: var(--s-surface);
border: 1px solid #d3dbe3;
border-radius: var(--s-radius);
box-shadow: none;
transition: border-color .15s var(--s-ease), box-shadow .15s var(--s-ease);
}
body textarea.form-control { height: auto; min-height: 96px; line-height: 1.55; resize: vertical; }
body .form-control::placeholder { color: #6a7886; opacity: 1; } /* 4,5:1 sul bianco */
body .text-muted { color: var(--s-muted); }
body .form-control:hover { border-color: #b9c5d1; }
body .form-control:focus {
border-color: var(--s-accent);
box-shadow: var(--s-ring);
outline: 0;
}
/* campi di sola lettura (indirizzo, telefono...): devono restare leggibili */
body .form-control[disabled],
body .form-control[readonly],
body fieldset[disabled] .form-control {
background-color: var(--s-field);
color: var(--s-ink-2);
border-color: var(--s-line);
cursor: default;
opacity: 1;
}
body select.form-control { padding-right: 28px; }
body .input-group .form-control { border-radius: var(--s-radius) 0 0 var(--s-radius); }
body .input-group-addon {
background: var(--s-canvas);
border: 1px solid #d3dbe3;
border-radius: 0 var(--s-radius) var(--s-radius) 0;
color: var(--s-ink-2);
min-width: 42px;
}
body .input-group-addon:first-child {
border-radius: var(--s-radius) 0 0 var(--s-radius);
border-right: 0;
}
body .input-group-addon:first-child + .form-control { border-radius: 0 var(--s-radius) var(--s-radius) 0; }
body .form-group { margin-bottom: 16px; }
/* pulsanti accanto all'indirizzo del cantiere: in riga, vanno a capo puliti */
body .form-group:has(> #CopiaIndirizzoCliente) { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
body .form-group > #CopiaIndirizzoCliente,
body .form-group > #ApriMappa { margin: 0; }
/* colonne strette (Cap, Prov): meno margine interno, cosi' il valore non si taglia */
body .col-md-1 .form-control,
body .col-sm-1 .form-control { padding-left: 8px; padding-right: 8px; }
body .input-group.date .form-control { padding-left: 9px; padding-right: 6px; min-width: 0; }
body .input-group.date .input-group-addon { min-width: 36px; padding: 6px 8px; }
/* campi senza classe del tema (anno proposto accanto a "Nuovo") */
body input[type="number"]:not(.form-control),
body input[type="text"]:not(.form-control):not(.select2-search__field):not([class*="dt"]) {
height: 36px;
padding: 6px 10px;
border: 1px solid #d3dbe3;
border-radius: var(--s-radius);
font-size: 14px;
color: var(--s-ink);
background: var(--s-surface);
}
body input[type="number"]:not(.form-control):focus { border-color: var(--s-accent); box-shadow: var(--s-ring); outline: 0; }
/* select2 allineato ai campi: sempre largo quanto la sua colonna (su telefono si calcolava minuscolo) */
body .form-group .select2-container { width: 100% !important; display: block; }
/* select2 allineato ai campi */
body .select2-container--default .select2-selection--single,
body .select2-container--default .select2-selection--multiple {
min-height: 40px;
border: 1px solid #d3dbe3;
border-radius: var(--s-radius);
background: var(--s-surface);
}
body .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 38px;
padding-left: 12px;
color: var(--s-ink);
font-size: 14px;
}
body .select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; right: 6px; }
body .select2-container--default.select2-container--focus .select2-selection--single,
body .select2-container--default.select2-container--open .select2-selection--single,
body .select2-container--default.select2-container--focus .select2-selection--multiple {
border-color: var(--s-accent);
box-shadow: var(--s-ring);
}
body .select2-container--default.select2-container--disabled .select2-selection--single { background: var(--s-field); }
body .select2-dropdown {
border: 1px solid var(--s-line);
border-radius: var(--s-radius);
box-shadow: var(--s-shadow-pop);
overflow: hidden;
}
body .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--s-accent-strong); }
/* la voce vuota in cima (nessun filtro) era una barra senza testo: ora dice "Tutti" */
body .select2-results__option:empty::before { content: "Tutti"; color: var(--s-muted); }
body .select2-results__option--highlighted:empty::before { color: #fff; }
body .select2-container--default .select2-search--dropdown .select2-search__field {
border: 1px solid #d3dbe3;
border-radius: var(--s-radius-sm);
padding: 6px 10px;
}
/* bootstrap-select (scelta dei tecnici) */
body .bootstrap-select > .dropdown-toggle,
body .bootstrap-select > .btn.dropdown-toggle {
height: 40px;
border: 1px solid #d3dbe3;
border-radius: var(--s-radius);
background: var(--s-surface);
color: var(--s-ink);
box-shadow: none;
font-weight: 400;
}
body .bootstrap-select.disabled > .dropdown-toggle,
body .bootstrap-select > .dropdown-toggle.disabled { background: var(--s-field); color: var(--s-ink-2); opacity: 1; }
/* caricamento foto: riquadro tratteggiato nei colori della casa (prima blu #007bff) */
body input.dropzone-input {
border: 1px dashed #b9c5d1;
border-radius: var(--s-radius-lg);
background: #fafbfc;
padding: 26px 20px;
color: var(--s-muted);
transition: border-color .15s var(--s-ease), background-color .15s var(--s-ease);
}
body input.dropzone-input:hover { border-color: var(--s-accent); background: var(--s-accent-soft); }
body input[type="file"]::file-selector-button {
font-family: var(--s-font);
font-weight: 600;
font-size: 13px;
color: var(--s-ink);
background: var(--s-surface);
border: 1px solid #cfd8e1;
border-radius: var(--s-radius);
padding: 7px 12px;
margin-right: 10px;
cursor: pointer;
}
body input[type="file"]::file-selector-button:hover { background: var(--s-canvas); border-color: #b9c5d1; }
/* riquadro allegati del rapportino (prima bordo "a rilievo" e altezza fissa) */
body .bord {
border: 1px solid var(--s-line);
border-style: solid;
border-radius: var(--s-radius-lg);
height: auto;
min-height: 0;
padding: 14px 16px;
margin: 6px 0 16px;
background: #fafbfc;
}
body .bord .table-responsive { border: 0; margin: 0; }
body #tableDocumenti { width: 100% !important; }
/* caselle: tipi di intervento, automezzi */
body input[type="checkbox"],
body input[type="radio"] { accent-color: var(--s-accent-strong); width: 16px; height: 16px; vertical-align: -3px; }
body .mif-voce { color: var(--s-ink); font-weight: 500; font-size: 13.5px; padding: 3px 0; }
body .mif-griglia { gap: 6px 18px; }
/* ------------------------------------------------------------ pulsanti */
body .btn {
font-family: var(--s-font);
font-weight: 600;
font-size: 13.5px;
border-radius: var(--s-radius);
padding: 8px 14px;
line-height: 1.3;
border: 1px solid transparent;
box-shadow: none;
text-shadow: none;
transition: background-color .15s var(--s-ease), border-color .15s var(--s-ease), color .15s var(--s-ease), transform .08s var(--s-ease);
}
body .btn:active,
body .btn.active { transform: translateY(1px); box-shadow: none; }
body .btn:focus-visible { outline: 0; box-shadow: var(--s-ring); }
body .btn.disabled,
body .btn[disabled] { opacity: .5; }
body .btn-sm { padding: 6px 11px; font-size: 13px; }
body .btn-xs { padding: 3px 8px; font-size: 12px; border-radius: var(--s-radius-sm); }
/* azione principale: una sola tinta, il verde della casa */
body .btn-success,
body .btn-primary {
background: var(--s-accent-strong);
border-color: var(--s-accent-strong);
color: #fff;
}
body .btn-success:hover, body .btn-success:focus,
body .btn-primary:hover, body .btn-primary:focus {
background: var(--s-accent-hover);
border-color: var(--s-accent-hover);
color: #fff;
}
/* tutto il resto e' secondario: stessa forma, niente arcobaleno */
body .btn-default,
body .btn-info,
body .btn-warning {
background: var(--s-surface);
border-color: #cfd8e1;
color: var(--s-ink);
}
body .btn-default:hover, body .btn-default:focus,
body .btn-info:hover, body .btn-info:focus,
body .btn-warning:hover, body .btn-warning:focus {
background: var(--s-canvas);
border-color: #b9c5d1;
color: var(--s-ink);
}
/* il rosso resta solo per cancellare */
body .btn-danger {
background: var(--s-surface);
border-color: #efb6af;
color: var(--s-danger-strong);
}
body .btn-danger:hover, body .btn-danger:focus {
background: var(--s-danger-soft);
border-color: var(--s-danger);
color: var(--s-danger-strong);
}
/* "Esci senza modificare" non cancella niente: pulsante secondario, non rosso */
body #annulla.btn-danger,
body #Annulla.btn-danger {
background: var(--s-surface);
border-color: #cfd8e1;
color: var(--s-ink);
}
body #annulla.btn-danger:hover,
body #Annulla.btn-danger:hover { background: var(--s-canvas); border-color: #b9c5d1; }
body .azioni-scheda { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
/* schede (Destinazioni del cliente) */
body .nav-tabs,
body .nav-tabs.bar_tabs { border-bottom: 1px solid var(--s-line); background: transparent; padding: 0; margin: 0 0 14px; }
body .nav-tabs > li > a,
body .bar_tabs > li a {
border: 0 !important;
border-bottom: 2px solid transparent !important;
border-radius: 0;
background: transparent !important;
color: var(--s-muted);
font-weight: 600;
padding: 10px 14px;
margin: 0 4px -1px 0;
}
body .nav-tabs > li.active > a,
body .nav-tabs > li.active > a:hover,
body .bar_tabs > li.active a { color: var(--s-navy-800); border-bottom-color: var(--s-accent) !important; }
body .bar_tabs > li { border: 0 !important; background: transparent !important; margin: 0; }
body .bar_tabs > li.active { border: 0 !important; }
/* pulsanti in alto nelle schede (Stampa, Salva, Esci, Ripeti) */
body .panel_toolbox { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
body .panel_toolbox > .btn,
body .panel_toolbox > li > .btn { margin: 0; }
body .x_title .panel_toolbox { float: right; }
/* icone d'azione nelle tabelle: quadrate, stessa misura, distinguibili dal colore dell'icona */
body td.btn-ok { white-space: nowrap; width: 1%; }
body td.btn-ok .btn,
body td.btn-ok a.btn {
width: 34px;
height: 34px;
padding: 0;
margin: 2px 2px 2px 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--s-radius);
font-size: 13px;
vertical-align: middle;
}
body td.btn-ok .btn-success { background: var(--s-accent-soft); border-color: #bfe8de; color: var(--s-accent-strong); }
body td.btn-ok .btn-success:hover { background: #d3f0e9; border-color: var(--s-accent); color: var(--s-accent-hover); }
body td.btn-ok .btn-primary { background: var(--s-surface); border-color: #cfd8e1; color: var(--s-navy-700); }
body td.btn-ok .btn-primary:hover { background: var(--s-canvas); color: var(--s-ink); }
body td.btn-ok .btn-default .fa-map-marker { color: var(--s-navy-700); font-size: 15px; }
/* ------------------------------------------------------------- tabelle */
body .dataTables_wrapper { font-size: 13.5px; color: var(--s-ink); }
body table.dataTable,
body .table {
border-collapse: separate !important;
border-spacing: 0;
/* il contorno e' un'ombra da 1px e non un bordo: un bordo allargava la tabella di 2px
oltre il contenitore e faceva comparire una barra di scorrimento orizzontale */
border: 0 !important;
box-shadow: 0 0 0 1px var(--s-line);
border-radius: var(--s-radius-lg);
overflow: hidden;
background: var(--s-surface);
margin-top: 10px !important;
margin-bottom: 10px !important;
}
/* DataTables fissa la larghezza in pixel quando parte, prima che arrivi il carattere nuovo:
qualche pixel in piu' bastava a far comparire la barra di scorrimento */
body .dataTables_wrapper table.dataTable:not(.dataTables_scrollBody table) { width: 100% !important; }
body .table-bordered,
body .table-bordered > thead > tr > th,
body .table-bordered > tbody > tr > td,
body .table-bordered > tfoot > tr > th,
body .table-bordered > tfoot > tr > td { border-left: 0; border-right: 0; }
body .table-bordered { border: 0; }
body table.dataTable thead th,
body .table > thead > tr > th {
background: #f4f6f8;
color: var(--s-ink-2);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
border-bottom: 1px solid var(--s-line) !important;
border-top: 0;
padding: 11px 12px;
vertical-align: bottom;
white-space: normal;
}
body table.dataTable tbody td,
body .table > tbody > tr > td {
padding: 11px 12px;
border-top: 1px solid var(--s-line-soft);
vertical-align: top;
line-height: 1.45;
}
body table.dataTable tbody tr:first-child td { border-top: 0; }
body .table-striped > tbody > tr:nth-of-type(odd),
body table.dataTable.table-striped > tbody > tr:nth-of-type(odd) { background: #fbfcfd; }
body table.dataTable tbody tr { transition: background-color .12s var(--s-ease); }
body table.dataTable.table-hover tbody tr:hover,
body table.dataTable tbody tr:hover { background: #f3f7f6; }
body table.dataTable tfoot th { background: #f4f6f8; border-top: 1px solid var(--s-line); font-weight: 600; padding: 10px 12px; }
/* frecce d'ordinamento piu' discrete */
body table.dataTable thead .sorting:after,
body table.dataTable thead .sorting_asc:after,
body table.dataTable thead .sorting_desc:after { opacity: .28; font-size: 10px; bottom: 12px; }
body table.dataTable thead .sorting_asc:after,
body table.dataTable thead .sorting_desc:after { opacity: .7; color: var(--s-accent-strong); }
/* priorita' a colpo d'occhio (ripristino chiesto dall'ufficio 28/09): URGENTE giallo, TASSATIVO rosso */
body table.dataTable tbody tr.riga-urgente,
body table.dataTable.table-striped tbody tr.riga-urgente,
body table.dataTable.table-striped tbody tr.riga-urgente td { background: #ffe066; }
body table.dataTable tbody tr.riga-urgente:hover,
body table.dataTable tbody tr.riga-urgente:hover td { background: #ffd633; }
body table.dataTable tbody tr.riga-tassativa,
body table.dataTable.table-striped tbody tr.riga-tassativa,
body table.dataTable.table-striped tbody tr.riga-tassativa td { background: #ff9c8f; }
body table.dataTable tbody tr.riga-tassativa:hover,
body table.dataTable tbody tr.riga-tassativa:hover td { background: #ff8577; }
/* testo leggibile sulle righe colorate */
body table.dataTable tbody tr.riga-urgente td { color: #4a3800; }
body table.dataTable tbody tr.riga-tassativa td { color: #5c1109; }
body table.dataTable tbody tr.riga-urgente td:nth-child(2),
body table.dataTable tbody tr.riga-tassativa td:nth-child(2) { font-weight: 700; }
/* pulsante "+" delle tabelle su schermo stretto */
body table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
body table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
background: var(--s-accent-soft);
color: var(--s-accent-strong);
border: 1px solid #bfe8de;
box-shadow: none;
font-family: var(--s-font);
font-weight: 700;
line-height: 14px;
top: 12px;
}
body table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before,
body table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
background: var(--s-navy-700);
color: #fff;
border-color: var(--s-navy-700);
}
body table.dataTable > tbody > tr.child ul.dtr-details { width: 100%; }
body table.dataTable > tbody > tr.child ul.dtr-details > li { border-bottom: 1px solid var(--s-line-soft); padding: 8px 0; }
body table.dataTable > tbody > tr.child span.dtr-title { color: var(--s-muted); font-weight: 600; min-width: 90px; }
/* ricerca, pulsanti di esportazione, paginazione */
/* il tema fissa il riquadro di ricerca al 50% della colonna: troppo stretto per "Cerca" + campo */
body div.dataTables_wrapper div.dataTables_filter { width: auto; float: right; }
body div.dataTables_wrapper div.dataTables_filter label {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
font-weight: 500;
color: var(--s-muted);
}
/* il CSS di DataTables aggiunge un margine a sinistra e il campo usciva dal bordo: misura fissa */
body div.dataTables_wrapper div.dataTables_filter input { margin-left: 0; width: 220px; flex: 0 0 auto; }
body .dataTables_filter input {
height: 36px;
border: 1px solid #d3dbe3;
border-radius: var(--s-radius);
padding: 6px 10px;
font-size: 13.5px;
color: var(--s-ink);
transition: border-color .15s var(--s-ease), box-shadow .15s var(--s-ease);
}
body .dataTables_filter input:focus { border-color: var(--s-accent); box-shadow: var(--s-ring); outline: 0; }
body .dt-buttons { margin-bottom: 6px; display: inline-flex; flex-wrap: wrap; gap: 6px; }
body .dt-buttons .btn,
body .dt-buttons .dt-button,
body button.dt-button,
body a.dt-button {
background: var(--s-surface);
background-image: none;
border: 1px solid #cfd8e1;
border-radius: var(--s-radius);
color: var(--s-ink);
font-family: var(--s-font);
font-weight: 600;
font-size: 12.5px;
padding: 6px 12px;
margin: 0;
box-shadow: none;
line-height: 1.3;
}
body .dt-buttons .btn:hover,
body button.dt-button:hover:not(.disabled),
body a.dt-button:hover:not(.disabled) {
background: var(--s-canvas);
background-image: none;
border-color: #b9c5d1;
color: var(--s-ink);
}
body .dataTables_info { color: var(--s-muted); font-size: 12.5px; padding-top: 12px; }
body .dataTables_paginate { padding-top: 6px; }
body .pagination { margin: 4px 0; }
/* il tema forza grigio con !important su ".dataTables_paginate a": qui serve altrettanto */
body .dataTables_paginate .pagination > li > a,
body .dataTables_paginate .pagination > li > span,
body .pagination > li > a,
body .pagination > li > span {
background: var(--s-surface) !important;
border: 1px solid var(--s-line) !important;
color: var(--s-ink);
margin-left: 4px;
border-radius: var(--s-radius) !important;
min-width: 36px;
text-align: center;
padding: 6px 10px !important;
font-weight: 500;
transition: background-color .15s var(--s-ease), border-color .15s var(--s-ease);
}
body .dataTables_paginate .pagination > li > a:hover,
body .pagination > li > a:hover { background: var(--s-canvas) !important; color: var(--s-ink); border-color: #cfd8e1 !important; }
body .dataTables_paginate .pagination > .active > a,
body .dataTables_paginate .pagination > .active > a:hover,
body .pagination > .active > a,
body .pagination > .active > a:hover,
body .pagination > .active > span {
background: var(--s-navy-800) !important;
border-color: var(--s-navy-800) !important;
color: #fff;
}
body .dataTables_paginate .pagination > .disabled > a,
body .dataTables_paginate .pagination > .disabled > a:hover,
body .pagination > .disabled > a,
body .pagination > .disabled > a:hover { background: var(--s-surface) !important; color: #b3bec9; border-color: var(--s-line-soft) !important; }
/* DataTables 1.x senza bootstrap: pulsanti di pagina semplici () */
body .dataTables_wrapper .dataTables_paginate a.paginate_button {
border-radius: var(--s-radius) !important;
border: 1px solid var(--s-line) !important;
background: var(--s-surface) !important;
color: var(--s-ink) !important;
margin-left: 4px;
min-width: 36px;
}
body .dataTables_wrapper .dataTables_paginate a.paginate_button.current {
background: var(--s-navy-800) !important;
border-color: var(--s-navy-800) !important;
color: #fff !important;
}
body .dataTables_wrapper .dataTables_paginate a.paginate_button:hover:not(.current):not(.disabled) {
background: var(--s-canvas) !important;
color: var(--s-ink) !important;
}
body .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled { color: #b3bec9 !important; }
body .dataTables_wrapper .dataTables_paginate li.paginate_button { padding: 0; margin: 0; border: 0; background: none; }
/* ------------------------------------------------ finestre e messaggi */
body .modal-content { border: 0; border-radius: var(--s-radius-lg); box-shadow: var(--s-shadow-pop); }
body .modal-header { border-bottom: 1px solid var(--s-line); }
body .modal-footer { border-top: 1px solid var(--s-line); }
body .modal-title { color: var(--s-ink); font-weight: 600; line-height: 1.45; }
body .modal-backdrop.in { opacity: .45; background: var(--s-navy-900); }
body .ui-pnotify .alert,
body .ui-pnotify-container { border-radius: var(--s-radius) !important; box-shadow: var(--s-shadow-pop) !important; }
body .alert-success,
body .ui-pnotify .alert-success { background: var(--s-accent-strong); border-color: var(--s-accent-strong); color: #fff; }
/* avvisi della campanella */
/* il tema mette il verde chiaro con !important: col bianco sopra era 2,4:1 */
body .badge.bg-green { background: var(--s-accent-strong) !important; border-color: var(--s-accent-strong) !important; }
/* ---------------------------------------------------------- login */
body.login {
background: var(--s-canvas);
color: var(--s-ink);
min-height: 100dvh;
}
body.login .login_wrapper {
max-width: 380px;
margin: 9vh auto 0;
padding: 0 16px;
}
/* il tema mette il modulo in posizione assoluta (per un'animazione non usata): usciva dallo schermo del telefono */
body.login .login_form,
body.login .animate.form { position: static; width: auto; }
body.login .login_content {
background: var(--s-surface);
border: 1px solid var(--s-line);
border-radius: var(--s-radius-lg);
box-shadow: var(--s-shadow);
padding: 30px 28px 18px;
text-shadow: none;
text-align: left;
margin-top: 0;
}
body.login .login_content h1 {
font-family: var(--s-font);
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--s-navy-800);
text-align: left;
margin: 0 0 22px;
}
body.login .login_content h1:before,
body.login .login_content h1:after { display: none; }
body.login .login_content form input[type="text"],
body.login .login_content form input[type="password"],
body.login .login_content form input[type="email"] {
height: 44px;
margin-bottom: 14px;
border-radius: var(--s-radius);
border: 1px solid #d3dbe3;
box-shadow: none;
font-size: 15px;
padding: 10px 12px;
}
body.login .login_content form input:focus { border-color: var(--s-accent); box-shadow: var(--s-ring); }
body.login .login_content .btn.submit,
body.login .login_content .btn-default.submit {
display: block;
width: 100%;
margin: 6px 0 0;
height: 44px;
font-size: 15px;
background: var(--s-accent-strong);
border-color: var(--s-accent-strong);
color: #fff;
float: none;
}
body.login .login_content .btn.submit:hover { background: var(--s-accent-hover); border-color: var(--s-accent-hover); color: #fff; }
body.login .login_content .separator { border-top: 1px solid var(--s-line); margin-top: 22px; padding-top: 14px; color: var(--s-muted); font-size: 12.5px; }
body.login .login_content .separator h1 { font-size: 15px; margin: 0; color: var(--s-navy-800); }
body.login .login_content .separator h1 .fa { display: none; }
body.login .separator img[src=""] { display: none; }
body.login .separator h2 { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--s-muted); margin: 0; }
body.login .separator .container-fluid,
body.login .separator .row,
body.login .separator [class*="col-"] { padding: 0; margin: 0; width: auto; float: none; }
body.login .separator br { display: none; }
body.login #message { display: block; margin: 4px 0 8px; font-size: 13px; color: var(--s-danger-strong) !important; }
/* ------------------------------------------- testata, filtri, anagrafiche */
/* markup delle pagine elenco riordinato il 25/09: titolo + sottotitolo a sinistra, "Anno + Nuovo" a destra,
i filtri in una riga sola che va a capo pulita (.riga-campi), niente piu' padding-top a mano */
body .page-title { padding: 4px 0 18px; }
/* con il sottotitolo, "Anno + Nuovo" si allinea al fondo del blocco titolo; nelle schede il numero resta centrato sul titolo */
body .page-title:has(.sottotitolo) { align-items: flex-end; }
body .page-title .title_left h3 {
font-size: 26px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--s-navy-800);
margin: 6px 0 2px;
}
body .page-title .sottotitolo { margin: 0; font-size: 14.5px; color: var(--s-muted); }
body .page-title .title_right.azione-nuovo { display: flex; align-items: center; gap: 8px; }
body .azione-nuovo label { margin: 0; font-size: 13px; font-weight: 600; color: var(--s-ink-2); }
body .azione-nuovo #AnnoProposto { width: 92px; height: 40px; text-align: center; }
body .azione-nuovo .btn { height: 40px; padding: 8px 18px; }
body .pannello-filtri { padding: 16px 20px 18px; }
/* sta direttamente nella .row (senza colonna): stessi margini del pannello dei risultati */
/* flow-root: il pannello contiene il suo .x_content, che nel tema e' flottante (con display:block i campi uscivano sotto) */
body .row > .x_panel.pannello-filtri { display: flow-root; margin-left: 10px; margin-right: 10px; width: auto; }
body .riga-campi {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 14px 16px;
margin: 0;
}
body .riga-campi::before,
body .riga-campi::after { display: none; }
body .riga-campi > .form-group {
float: none;
width: auto;
flex: 1 1 180px;
min-width: 0;
margin: 0;
padding: 0 !important;
}
/* anno e numero: pochi caratteri, campo stretto */
body .riga-campi > .form-group:has(> #Anno),
body .riga-campi > .form-group:has(> #Numero) { flex: 0 1 110px; }
/* cliente e cantiere: nomi lunghi, piu' spazio */
body .riga-campi > .form-group:has(> #idcliente),
body .riga-campi > .form-group:has(> #cantiere_ricerca) { flex: 2 1 240px; }
/* pulsanti e interruttori: larghi quanto il loro contenuto, allineati al fondo dei campi */
body .riga-campi > .form-group:has(.btn),
body .riga-campi > .form-group:has(.js-switch) { flex: 0 0 auto; }
body .riga-campi > .form-group:has(.js-switch) { display: flex; flex-direction: column; gap: 6px; }
body .riga-campi > .form-group:has(.js-switch) label { margin: 0; }
body .riga-campi > .form-group:has(.js-switch) .switchery { margin: 4px 0; }
body .riga-campi .group-btn { float: none !important; display: block; }
/* il calendario del tema ha 10px sotto: Dal/Al stavano piu' in alto degli altri campi */
body .riga-campi .input-group { margin-bottom: 0; }
body .riga-campi .btn { height: 40px; margin: 0; }
body .riga-campi label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--s-ink-2); }
/* Cerca: secondario ma deciso, nel blu della barra laterale */
body .btn-cerca { min-width: 104px; border-color: var(--s-navy-700); color: var(--s-navy-800); }
body .btn-cerca:hover,
body .btn-cerca:focus { background: var(--s-navy-800); border-color: var(--s-navy-800); color: #fff; }
/* schede (rapportino, cantiere, cliente): le colonne del tema sono percentuali e sotto ~1100px le "2" non bastano
per data, cliente, tecnico ("25/09/202", "Collaudo gr..."). Righe flessibili con una larghezza minima per campo:
quello che non ci sta va a capo. I clearfix del markup restano gli "a capo" voluti. */
@media (min-width: 768px) {
body form .form-row { display: flex; flex-wrap: wrap; align-items: flex-start; }
body form .form-row > .clearfix { flex-basis: 100%; height: 0; }
body form .form-row > [class*="col-md-"] { float: none; }
body form .form-row > .col-md-1 { min-width: 96px; }
body form .form-row > .col-md-2 { min-width: 180px; }
body form .form-row > .col-md-3 { min-width: 230px; }
body form .form-row > .form-group:has(> #idcliente) { min-width: 280px; }
body form .form-row > .form-group:has(.input-group.date) { min-width: 200px; }
body form .form-row > .form-group:has(> #idtecnico),
body form .form-row > .form-group:has(> #idcantiere),
body form .form-row > .form-group:has(> #stato) { min-width: 240px; }
/* pulsanti della scheda cliente: in riga sotto i campi, non impilati accanto all'email */
body form .form-row > .azioni-scheda { flex-basis: 100%; min-width: 0; padding-top: 4px !important; }
}
/* il posto del pulsante Mappa quando non c'e' indirizzo: niente buco vuoto nella scheda */
body .form-group:has(> #ApriMappa[style*="display:none"]),
body .form-group:has(> #ApriMappa[style*="display: none"]) { display: none; }
body form .form-row #cap.text-right { text-align: left; }
/* campi annidati (Riferimento lavori, Materiali): niente secondo rientro rispetto agli altri campi */
body form .form-row > .form-group > .form-group[class*="col-"] { float: none; width: 100%; padding-left: 0; padding-right: 0; }
/* "Esci senza conferma" non cancella niente: secondario, non rosso (anche con l'id minuscolo) */
body #annulla.btn-danger { background: var(--s-surface); border-color: #cfd8e1; color: var(--s-ink); }
body #annulla.btn-danger:hover { background: var(--s-canvas); border-color: #b9c5d1; }
/* stato nelle tabelle (APERTO, CHIUSO...): etichetta invece del testo nudo. La mette save-skin.js a ogni disegno. */
body .stato-etichetta {
display: inline-block;
padding: 3px 8px;
border-radius: var(--s-radius-sm);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .03em;
line-height: 1.4;
white-space: nowrap;
background: var(--s-line-soft);
color: var(--s-ink-2);
}
body .stato-aperto { background: #e8eef5; color: var(--s-navy-800); }
body .stato-completato { background: var(--s-accent-soft); color: #0b5e4f; }
body .stato-chiuso { background: var(--s-line-soft); color: var(--s-ink-2); }
body .stato-annullato { background: var(--s-danger-soft); color: #a3281c; }
body .stato-assente,
body .stato-attesi-interventi { background: var(--s-warn-soft); color: var(--s-warn-ink); }
/* app tecnici, "I tuoi lavori": una scheda per intervento (disegnata da tecnici/libjs/ordinilavoro.js).
La tabella resta nel DOM per ricerca, Excel, Stampa e pagine, ma non si vede. */
body .lavori-come-schede table.dataTable,
body .lavori-come-schede .dataTables_scrollHead { display: none !important; }
body .lavori-come-schede { padding-top: 16px; }
body .schede-lavori {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 14px;
margin: 14px 0 6px;
}
body .lavoro {
display: flex;
flex-direction: column;
gap: 6px;
padding: 16px 18px 18px;
background: var(--s-surface);
border: 1px solid var(--s-line);
border-radius: var(--s-radius-lg);
box-shadow: 0 1px 2px rgba(31, 48, 67, .04);
}
body .lavoro-testa { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 2px; }
body .lavoro-data { font-size: 15px; font-weight: 700; color: var(--s-navy-800); font-variant-numeric: tabular-nums; }
body .lavoro-numero { font-size: 13px; color: var(--s-muted); font-variant-numeric: tabular-nums; }
body .lavoro-testa .stato-etichetta { margin-left: auto; }
body .lavoro-priorita {
display: inline-block;
padding: 3px 8px;
border-radius: var(--s-radius-sm);
font-size: 11.5px;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
}
/* badge priorita' schede tecnici: URGENTE giallo, TASSATIVO rosso (come le righe dell'ufficio) */
body .priorita-urgente { background: #ffd21f; color: #4a3800; }
body .priorita-tassativa { background: var(--s-danger-strong); color: #fff; }
body .lavoro-cliente { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--s-ink); letter-spacing: -0.01em; }
body .lavoro-cantiere { margin: 0; font-size: 15px; color: var(--s-ink-2); }
body .lavoro-indirizzo { margin: 2px 0 0; font-size: 14.5px; color: var(--s-ink-2); }
body .lavoro-indirizzo .fa { color: var(--s-accent-strong); width: 14px; text-align: center; }
body .lavoro-senza { color: var(--s-muted); font-style: italic; }
body .lavoro-dettagli { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 6px 0 0; font-size: 14px; }
body .lavoro-dettagli dt { font-size: 12px; font-weight: 600; color: var(--s-muted); }
body .lavoro-dettagli dd { margin: 0; color: var(--s-ink); }
body .lavoro-azioni { display: flex; gap: 8px; margin-top: auto; padding-top: 12px; }
body .lavoro-azioni .btn { min-height: 44px; font-size: 15px; }
body .lavoro-azioni .apri-rapportino { flex: 1 1 auto; }
body .lavori-vuoto { margin: 18px 0; color: var(--s-muted); font-size: 15px; }
body .conta-titolo:not(:empty) {
display: inline-block;
min-width: 28px;
margin-left: 6px;
padding: 2px 9px;
border-radius: 999px;
background: var(--s-accent-soft);
color: #0b5e4f;
font-size: 15px;
font-weight: 700;
text-align: center;
vertical-align: 4px;
letter-spacing: 0;
}
@media (max-width: 767px) {
body .schede-lavori { grid-template-columns: 1fr; }
body .lavori-come-schede { padding: 12px; }
}
/* rapportino (25/09 notte): tipi di intervento come scelte da toccare */
body .mif-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; padding: 4px 0; }
body .mif-voce {
display: flex;
align-items: center;
gap: 10px;
min-height: 44px;
margin: 0;
padding: 9px 12px;
border: 1px solid #cfd8e1;
border-radius: var(--s-radius);
background: var(--s-surface);
white-space: normal;
line-height: 1.3;
font-weight: 500;
cursor: pointer;
transition: background-color .15s var(--s-ease), border-color .15s var(--s-ease);
}
body .mif-voce input { margin: 0; flex: 0 0 auto; }
body .mif-voce:hover { border-color: var(--s-accent-strong); }
body .mif-voce:has(input:checked) { background: var(--s-accent-soft); border-color: var(--s-accent-strong); color: #0b5e4f; font-weight: 600; }
body .mif-voce:has(input:focus-visible) { box-shadow: var(--s-ring); }
body .mif-voce:has(input:disabled) { cursor: default; }
body .mif-voce:has(input:disabled):hover { border-color: #cfd8e1; }
/* il tecnico non cambia i tipi nel rapportino assegnato: vede solo quelli scelti dall'ufficio */
body #boxInterventi.solo-scelti .mif-griglia { display: flex; flex-wrap: wrap; }
body #boxInterventi.solo-scelti .mif-voce:not(:has(input:checked)) { display: none; }
body #boxInterventi.solo-scelti .mif-voce input { display: none; }
body #boxInterventi.solo-scelti .mif-voce { min-height: 0; padding: 6px 12px; }
/* allegati: un pulsante solo, il file si carica appena scelto */
body .nascosto-accessibile { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; padding: 0; }
body .carica-allegato { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 4px 10px; }
body .carica-allegato .btn-carica { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 18px; font-size: 15px; margin: 0; }
body .carica-allegato:focus-within .btn-carica { box-shadow: var(--s-ring); }
body .carica-nota { margin: 0; font-size: 13.5px; color: var(--s-muted); }
/* ore: "Adesso" accanto al campo */
body .form-group:has(> .btn-adesso) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: end; }
body .form-group:has(> .btn-adesso) > label { grid-column: 1 / -1; }
body .form-group:has(> .btn-adesso) > .input-group { margin-bottom: 0; }
body .btn-adesso { height: 40px; margin: 0; }
/* ------------------------------------------------------ schermo stretto */
@media (max-width: 991px) {
body .right_col { padding: 14px 14px 28px; }
body .x_panel { padding: 16px 16px 18px; border-radius: 10px; }
}
@media (max-width: 767px) {
/* 16px: sotto questa misura iPhone ingrandisce la pagina quando si tocca un campo */
body .form-control,
body .select2-container--default .select2-selection--single .select2-selection__rendered,
body .dataTables_filter input { font-size: 16px; }
body .form-control,
body .bootstrap-select > .dropdown-toggle { height: 44px; }
body .select2-container--default .select2-selection--single { min-height: 44px; }
body .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 42px; }
body .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }
body .btn { min-height: 44px; padding: 10px 16px; font-size: 15px; }
body td.btn-ok .btn,
body td.btn-ok a.btn { width: 38px; height: 38px; min-height: 38px; font-size: 15px; margin-right: 1px; }
/* celle piu' strette: cosi' sul telefono restano visibili anno, numero e pulsanti */
body table.dataTable thead th,
body table.dataTable tbody td { padding: 10px 8px; }
body table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child { padding-left: 32px; }
body table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before { left: 6px; }
body .dt-buttons .btn,
body button.dt-button,
body a.dt-button { min-height: 36px; font-size: 13px; }
body .page-title .title_left h3 { font-size: 22px; }
/* su telefono ogni campo prende tutta la riga (prima si restringevano attorno al contenuto) */
body .row > .form-group[class*="col-"],
body .form-row > .form-group[class*="col-"],
body .form-row > [class*="col-"],
body form .form-group[class*="col-"] { float: none; width: 100%; padding-left: 0; padding-right: 0; }
/* le colonne interne di DataTables su telefono si stringevano attorno al contenuto (tabella allegati a meta' larghezza) */
body .dataTables_wrapper > .row > [class*="col-"] { float: none; width: 100%; }
/* testata: su telefono "Anno + Nuovo" va sotto il titolo, a tutta riga */
body .page-title .title_right.azione-nuovo { margin-left: 0; width: 100%; }
body .azione-nuovo #AnnoProposto { height: 44px; font-size: 16px; }
body .azione-nuovo .btn { flex: 1 1 auto; height: 44px; }
/* filtri: un campo per riga, pulsante Cerca a tutta larghezza */
body .riga-campi > .form-group,
body .riga-campi > .form-group:has(> #Anno),
body .riga-campi > .form-group:has(> #Numero),
body .riga-campi > .form-group:has(.btn) { flex: 1 1 100%; }
body .riga-campi .btn { width: 100%; height: 44px; }
/* scheda: Cap, Citta' e Prov sulla stessa riga */
body form .form-row { display: flex; flex-wrap: wrap; column-gap: 10px; }
body form .form-row > .form-group:has(> #cap) { flex: 0 0 70px; width: auto; }
body form .form-row > .form-group:has(> #citta) { flex: 1 1 0; width: auto; min-width: 0; }
body form .form-row > .form-group:has(> #prov) { flex: 0 0 48px; width: auto; }
body form .form-row #cap,
body form .form-row #citta,
body form .form-row #prov { padding-left: 8px; padding-right: 8px; }
body form .form-row > .clearfix { flex-basis: 100%; height: 0; }
body .mif-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body .btn-adesso { height: 44px; }
/* tabelle senza "+" (Stati, Operatori, Tecnici): su telefono le colonne vanno a capo,
cosi' i pulsanti Azioni restano sullo schermo invece che oltre il bordo destro */
body table.dataTable:not(.dtr-inline) { width: 100% !important; table-layout: auto; }
body table.dataTable:not(.dtr-inline) thead th,
body table.dataTable:not(.dtr-inline) tbody td { white-space: normal; overflow-wrap: anywhere; padding: 10px 6px; }
body table.dataTable:not(.dtr-inline) td.btn-ok { white-space: nowrap; }
/* campi corti a coppie, cosi' i filtri non occupano piu' di uno schermo */
body .riga-campi > .form-group:has(.input-group.date),
body .riga-campi > .form-group:has(> #Anno),
body .riga-campi > .form-group:has(> #Numero),
body .riga-campi > .form-group:has(> #idtecnico),
body .riga-campi > .form-group:has(> #stato),
body .riga-campi > .form-group:has(> #telefono_ricerca),
body .riga-campi > .form-group:has(> #comune_ricerca) { flex: 1 1 calc(50% - 8px); }
body .riga-campi .input-group.date .input-group-addon { min-width: 40px; }
/* "Solo oggi": scritta e interruttore sulla stessa riga */
body .riga-campi > .form-group:has(.js-switch) { flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: space-between; }
body .x_title h2 { font-size: 15px; }
/* nelle schede lunghe i pulsanti Salva / Esci restano a portata di pollice */
body .x_panel > .x_title:has(#Salva) {
position: sticky;
top: 0;
z-index: 30;
background: var(--s-surface);
margin: -16px -16px 16px;
padding: 12px 16px;
border-radius: 10px 10px 0 0;
box-shadow: 0 1px 0 var(--s-line), 0 6px 12px -8px rgba(31, 48, 67, .18);
}
body .x_title .panel_toolbox { float: none; width: 100%; margin-top: 10px; }
body .x_title .panel_toolbox > .btn { flex: 1 1 auto; }
/* barra fissa piu' bassa: il titolo del riquadro c'e' gia' in cima alla pagina, e i pulsanti restano da 40px */
body .x_panel > .x_title:has(#Salva) { padding: 8px 12px; margin: -16px -16px 14px; }
body .x_panel > .x_title:has(#Salva) h2 { display: none; }
body .x_panel > .x_title:has(#Salva) .panel_toolbox { margin-top: 0; gap: 6px; }
body .x_panel > .x_title:has(#Salva) .panel_toolbox > .btn { min-height: 40px; padding: 8px 10px; font-size: 14px; }
/* quando si tocca un campo il browser lo porta sotto la barra fissa, non dietro */
html:has(.x_title #Salva) { scroll-padding-top: 120px; }
body .dataTables_filter,
body div.dataTables_wrapper div.dataTables_filter { text-align: left; width: 100%; float: none; }
body .dataTables_filter label { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; }
/* il campo di ricerca della tabella allargava la pagina oltre lo schermo */
body .dataTables_filter input,
body div.dataTables_wrapper div.dataTables_filter input { flex: 1 1 0; min-width: 0; width: auto !important; margin-left: 0; }
body.login .login_wrapper { margin-top: 6vh; }
}
@media (prefers-reduced-motion: reduce) {
* { transition-duration: 0s !important; }
}
@media print {
body .left_col, body .top_nav, body footer, body .dt-buttons, body .dataTables_filter { display: none !important; }
body .right_col { margin-left: 0 !important; background: #fff; }
body .x_panel { box-shadow: none; border: 0; }
}