/*
 * modern.css - restyling "leggero" per Bootstrap 3 + SB Admin 2
 *
 * COME USARLO: caricarlo per ULTIMO, dopo sb-admin-2.css e custom.css
 *   <link rel="stylesheet" href="css/modern.css?v=1">
 * ROLLBACK: togliere quella riga. I file esistenti non vengono modificati.
 *
 * Cosa fa: solo colori, raggi, ombre, font, bordi.
 * Cosa NON fa: nessuna modifica a width/height, display, position, float,
 * margin/padding strutturali (tranne le voci della sidebar, vedi sotto).
 *
 * Tutto il tema e' governato dalle variabili qui sotto.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --im-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --im-primary: #2f6fc0;
  --im-primary-hover: #265da3;
  --im-primary-ring: rgba(47, 111, 192, .22);
  --im-topbar: var(--im-primary);

  --im-success: #2e9e6b;
  --im-success-hover: #258457;
  --im-info: #2fa8d6;
  --im-info-hover: #2790b8;
  --im-warning: #e99a1c;
  --im-warning-hover: #d08610;
  --im-danger: #dc4a4a;
  --im-danger-hover: #c33b3b;

  --im-text: #1f2937;
  --im-muted: #6b7280;
  --im-border: #e3e7ee;
  --im-input-border: #d5dae3;

  /* sfondo area contenuti: metti #fff per tornare al bianco pieno */
  --im-page-bg: #f4f6f9;

  --im-r: 8px;
  --im-r-lg: 12px;
  --im-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04);
}

/* ---------- Base ---------- */
html, body { font-family: var(--im-font); }
body { color: var(--im-text); background-color: #fff; }
#page-wrapper { background-color: var(--im-page-bg); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600; }
h1, h2, h3, .h1, .h2, .h3 { letter-spacing: -.01em; }

a { color: var(--im-primary); }
a:hover, a:active, a:focus { color: var(--im-primary-hover); }

hr { border-top-color: var(--im-border); }
.page-header { border-bottom-color: var(--im-border); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--im-primary); }

/* ---------- Top bar ---------- */
#top-nav {
  background-color: var(--im-topbar);
  border-color: var(--im-topbar);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .18);
}
#top-nav .dropdown-toggle:hover,
#top-nav .dropdown-toggle:focus,
#top-nav .open > .dropdown-toggle { background-color: rgba(255, 255, 255, .14); }
.navbar-toggle { border-radius: var(--im-r); }

/* ---------- Sidebar ---------- */
.sidebar,
.sidebar .sidebar-nav { background-color: #fff; }
.sidebar ul li { border-bottom-color: transparent; }
.sidebar .nav > li > a { margin: 0 8px; border-radius: var(--im-r); }
.sidebar .nav > li > a:hover,
.sidebar .nav > li > a:focus { background-color: #f0f3f8; }
.sidebar ul li a.active { background-color: #e8f0fb; color: var(--im-primary); }
.sidebar .nav > li > a.active:hover,
.sidebar .nav > li > a.active:focus { background-color: #e8f0fb; }

/* ---------- Pannelli ---------- */
.panel {
  border-radius: var(--im-r-lg);
  box-shadow: var(--im-shadow);
}
.panel-heading {
  border-radius: calc(var(--im-r-lg) - 1px) calc(var(--im-r-lg) - 1px) 0 0;
  font-weight: 600;
}
.panel > .panel-heading:last-child { border-radius: calc(var(--im-r-lg) - 1px); }
.panel-footer { border-radius: 0 0 calc(var(--im-r-lg) - 1px) calc(var(--im-r-lg) - 1px); }

.panel-default { border-color: var(--im-border); }
.panel-default > .panel-heading { background-color: #f8fafc; border-color: var(--im-border); color: #374151; }
.panel-primary { border-color: var(--im-primary); }
.panel-primary > .panel-heading { background-color: var(--im-primary); border-color: var(--im-primary); }
.panel-success { border-color: #bfe3cf; }
.panel-success > .panel-heading { background-color: #e8f6ee; border-color: #bfe3cf; color: #1e7a4f; }
.panel-info { border-color: #bcdcf2; }
.panel-info > .panel-heading { background-color: #e8f3fc; border-color: #bcdcf2; color: #1f5f8f; }
.panel-warning { border-color: #f3d89b; }
.panel-warning > .panel-heading { background-color: #fff6e0; border-color: #f3d89b; color: #8a5a0a; }
.panel-danger { border-color: #f1c2c2; }
.panel-danger > .panel-heading { background-color: #fdeeee; border-color: #f1c2c2; color: #b3261e; }

.well {
  background-color: #fff;
  border-color: var(--im-border);
  border-radius: var(--im-r-lg);
  box-shadow: none;
}

/* ---------- Form ---------- */
.form-control {
  border-color: var(--im-input-border);
  border-radius: var(--im-r) !important;   /* custom.css usa !important a 0 */
  background-color: #fff;
  color: var(--im-text);
  box-shadow: none;
}
.form-control::placeholder { color: #9aa3b2; opacity: 1; }
.form-control:focus {
  border-color: var(--im-primary);
  box-shadow: 0 0 0 3px var(--im-primary-ring);
  outline: 0;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control { background-color: #f3f5f8; }

/* input-group: angoli interni dritti (ripristino regole BS3 battute dall'!important) */
.input-group .form-control:first-child { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group .form-control:last-child  { border-top-left-radius: 0 !important;  border-bottom-left-radius: 0 !important; }
.input-group .form-control:not(:first-child):not(:last-child) { border-radius: 0 !important; }
.input-group-addon {
  background-color: #f3f5f8;
  border-color: var(--im-input-border);
  color: #4b5563;
  border-radius: var(--im-r);
}
.input-group-addon:not(:first-child):not(:last-child) { border-radius: 0; }

/* ---------- Pulsanti ---------- */
.btn {
  border-radius: var(--im-r);
  font-weight: 500;
  box-shadow: none;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn:active, .btn.active { box-shadow: none; }
.btn:focus, .btn.focus,
.btn:active:focus, .btn.active:focus { outline: 0; }
.btn:focus-visible { box-shadow: 0 0 0 3px var(--im-primary-ring); }
.btn-lg { border-radius: 10px; }
.btn-sm, .btn-xs { border-radius: 6px; }

.btn-primary { --im-b: var(--im-primary); --im-bh: var(--im-primary-hover); }
.btn-success { --im-b: var(--im-success); --im-bh: var(--im-success-hover); }
.btn-info    { --im-b: var(--im-info);    --im-bh: var(--im-info-hover); }
.btn-warning { --im-b: var(--im-warning); --im-bh: var(--im-warning-hover); }
.btn-danger  { --im-b: var(--im-danger);  --im-bh: var(--im-danger-hover); }

/* pieni */
.btn:is(.btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger):not(.btn-outline) {
  background-color: var(--im-b);
  border-color: var(--im-b);
  color: #fff;
}
.btn:is(.btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger):not(.btn-outline):not(.disabled):not([disabled]):is(:hover, :focus, :active, .active),
.open > .dropdown-toggle.btn:is(.btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger):not(.btn-outline) {
  background-color: var(--im-bh);
  border-color: var(--im-bh);
  color: #fff;
}

/* outline (sb-admin) */
.btn-outline:is(.btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger) {
  background-color: transparent;
  border-color: var(--im-b);
  color: var(--im-b);
}
.btn-outline:is(.btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger):is(:hover, :focus, :active, .active) {
  background-color: var(--im-b);
  border-color: var(--im-b);
  color: #fff;
}

/* default */
.btn-default:not(.btn-outline) {
  background-color: #fff;
  border-color: var(--im-input-border);
  color: #374151;
}
.btn-default:not(.btn-outline):is(:hover, :focus, :active, .active),
.open > .dropdown-toggle.btn-default:not(.btn-outline) {
  background-color: #f3f5f8;
  border-color: #c3cad6;
  color: #1f2937;
}

/* i pulsanti tondi di sb-admin devono restare tondi */
.btn.btn-circle,
.btn.btn-circle.btn-lg,
.btn.btn-circle.btn-xl { border-radius: 50%; }

/* ---------- Tabelle (solo colori, nessuna dimensione) ---------- */
.table > thead > tr > th {
  background-color: #f8fafc;
  color: #475467;
  border-bottom-color: var(--im-border);
}
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th { border-top-color: #edf0f4; }
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td { border-color: var(--im-border); }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: #fafbfc; }
.table-hover > tbody > tr:hover { background-color: #f1f5f9; }

/* righe colorate: stessi selettori di custom.css, toni pastello */
.table > :is(thead, tbody, tfoot) > tr > :is(td, th).success,
.table > :is(thead, tbody, tfoot) > tr.success > :is(td, th) { background-color: #e6f5ec; }
.table > :is(thead, tbody, tfoot) > tr > :is(td, th).danger,
.table > :is(thead, tbody, tfoot) > tr.danger > :is(td, th)  { background-color: #fdeaea; }
.table > :is(thead, tbody, tfoot) > tr > :is(td, th).info,
.table > :is(thead, tbody, tfoot) > tr.info > :is(td, th)    { background-color: #e5f1fb; }
.table > :is(thead, tbody, tfoot) > tr > :is(td, th).warning,
.table > :is(thead, tbody, tfoot) > tr.warning > :is(td, th) { background-color: #fff4cf; }

.table-hover > tbody > tr > :is(td, th).success:hover,
.table-hover > tbody > tr.success:hover > :is(td, th),
.table-hover > tbody > tr:hover > .success { background-color: #d6eede; }
.table-hover > tbody > tr > :is(td, th).danger:hover,
.table-hover > tbody > tr.danger:hover > :is(td, th),
.table-hover > tbody > tr:hover > .danger  { background-color: #fadada; }
.table-hover > tbody > tr > :is(td, th).info:hover,
.table-hover > tbody > tr.info:hover > :is(td, th),
.table-hover > tbody > tr:hover > .info    { background-color: #d4e8f8; }
.table-hover > tbody > tr > :is(td, th).warning:hover,
.table-hover > tbody > tr.warning:hover > :is(td, th),
.table-hover > tbody > tr:hover > .warning { background-color: #ffebb0; }

/* ---------- Label, paginazione, breadcrumb ---------- */
.label { border-radius: 999px; font-weight: 600; }
.label-default { background-color: #7b8494; }
.label-primary { background-color: var(--im-primary); }
.label-success { background-color: var(--im-success); }
.label-info    { background-color: var(--im-info); }
.label-warning { background-color: var(--im-warning); }
.label-danger  { background-color: var(--im-danger); }

.pagination > li:first-child > a,
.pagination > li:first-child > span { border-top-left-radius: var(--im-r); border-bottom-left-radius: var(--im-r); }
.pagination > li:last-child > a,
.pagination > li:last-child > span  { border-top-right-radius: var(--im-r); border-bottom-right-radius: var(--im-r); }
.pagination > li > a,
.pagination > li > span { border-color: var(--im-border); color: var(--im-primary); }
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  background-color: var(--im-primary);
  border-color: var(--im-primary);
  color: #fff;
}

.breadcrumb { background-color: transparent; }

/* ---------- Dropdown, modal, alert, varie ---------- */
.dropdown-menu {
  border-radius: 10px;
  border-color: var(--im-border);
  box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
}
.modal-content {
  border: 0;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(16, 24, 40, .25);
}
.modal-header { border-bottom-color: var(--im-border); border-radius: 14px 14px 0 0; }
.modal-footer { border-top-color: var(--im-border); border-radius: 0 0 14px 14px; }
.alert { border-radius: 10px; }
.progress { border-radius: 999px; box-shadow: none; }
.progress-bar { box-shadow: none; }
.nav-tabs > li > a { border-radius: var(--im-r) var(--im-r) 0 0; }
.nav-pills > li > a { border-radius: var(--im-r); }
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus { background-color: var(--im-primary); }
.tooltip-inner { border-radius: 6px; }
.img-thumbnail, .thumbnail { border-radius: 10px; border-color: var(--im-border); }

/* =====================================================================
 * v2 - secondo passaggio
 * ===================================================================== */

/* ---------- Titolo pagina piu' sobrio (BS3 default: 36px) ---------- */
#page-wrapper h1 { font-size: 28px; }

/* ---------- Select native: freccia coerente con bootstrap-select ----------
 * Escluse multiple e size>1. bootstrap-select nasconde la select originale,
 * quindi non viene toccato. */
select.form-control:not([multiple]):not([size]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
}

/* ---------- bootstrap-select 1.6.x ---------- */
/* stessa freccia (chevron) al posto del triangolo; solo dentro bootstrap-select */
.bootstrap-select.btn-group .dropdown-toggle .caret {
  border: 0;
  width: 12px;
  height: 8px;
  margin-top: -4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 12px 8px;
}
/* voce selezionata nei menu a tendina: stesso blu del tema */
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  background-color: var(--im-primary);
  color: #fff;
}

/* ---------- Riquadri colorati della dashboard (SB Admin) ---------- */
.panel-green  { border-color: var(--im-success); }
.panel-green  .panel-heading { border-color: var(--im-success); background-color: var(--im-success); }
.panel-green  a { color: var(--im-success-hover); }
.panel-green  a:hover { color: #1b6644; }

.panel-yellow { border-color: #c9790a; }
.panel-yellow .panel-heading { border-color: #c9790a; background-color: #c9790a; }
.panel-yellow a { color: #a8680a; }          /* prima arancione chiaro, poco leggibile */
.panel-yellow a:hover { color: #85520a; }

.panel-red    { border-color: var(--im-danger); }
.panel-red    .panel-heading { border-color: var(--im-danger); background-color: var(--im-danger); }
.panel-red    a { color: var(--im-danger-hover); }
.panel-red    a:hover { color: #a52f2f; }

/* =====================================================================
 * v3 - fix navbar: link e icone sulla barra blu devono restare bianchi
 * (il colore link globale "a" era identico allo sfondo della barra).
 * !important come gia' fa custom.css; esclusi i menu a tendina (sfondo bianco).
 * ===================================================================== */
#top-nav .navbar-top-links > li > a,
#top-nav .navbar-top-links > li > a:hover,
#top-nav .navbar-top-links > li > a:focus,
#top-nav .navbar-top-links > li > a:active,
#top-nav .navbar-top-links > .open > a,
#top-nav .navbar-top-links > .open > a:hover,
#top-nav .navbar-top-links > .open > a:focus,
#top-nav .navbar-nav > li > a,
#top-nav .navbar-nav > li > a:hover,
#top-nav .navbar-nav > li > a:focus,
#top-nav .navbar-nav > .open > a,
#top-nav .navbar-nav > .open > a:hover,
#top-nav .navbar-nav > .open > a:focus,
#top-nav .navbar-brand,
#top-nav .navbar-toggle,
#top-nav .navbar-toggle:hover,
#top-nav .navbar-toggle:focus,
#top-nav #sidebar-toggle a,
#top-nav #sidebar-toggle a:hover,
#top-nav #sidebar-toggle a:focus {
  color: #fff !important;
}

/* hover/focus/aperto: velo bianco trasparente invece del grigio chiaro di BS3 */
#top-nav .navbar-top-links > li > a:hover,
#top-nav .navbar-top-links > li > a:focus,
#top-nav .navbar-top-links > .open > a,
#top-nav .navbar-top-links > .open > a:hover,
#top-nav .navbar-top-links > .open > a:focus,
#top-nav .navbar-nav > li > a:hover,
#top-nav .navbar-nav > li > a:focus,
#top-nav .navbar-nav > .open > a,
#top-nav .navbar-toggle:hover,
#top-nav .navbar-toggle:focus,
#top-nav #sidebar-toggle a:hover,
#top-nav #sidebar-toggle a:focus {
  background-color: rgba(255, 255, 255, .16) !important;
}

/* focus da tastiera: anello bianco al posto del riquadro nero del browser */
#top-nav a:focus,
#top-nav .navbar-toggle:focus { outline: 0; }
#top-nav a:focus-visible,
#top-nav .navbar-toggle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .75);
  outline-offset: -2px;
}

/* icone (FontAwesome/glyphicon) e barrette dell'hamburger BS3 */
#top-nav .navbar-top-links .fa,
#top-nav .navbar-top-links .glyphicon,
#top-nav #sidebar-toggle .fa { color: inherit; }
#top-nav .navbar-toggle .icon-bar { background-color: #fff; }

/* =====================================================================
 * v4 - pagina di login (layout/login)
 * Tutto ristretto a body.blur-login: nessun effetto sul resto dell'app.
 * ===================================================================== */
html body.blur-login {
  background-color: #f4f6f9;
  background-image: radial-gradient(1100px 480px at 50% -8%, rgba(47, 111, 192, .16), rgba(47, 111, 192, 0) 62%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
}
body.blur-login .container { padding-top: 7vh; padding-bottom: 40px; }

/* logo + riga copyright */
body.blur-login h1 { margin: 0 0 10px; font-size: inherit; }
body.blur-login h1 img { max-width: 100%; height: auto; }
body.blur-login #id-company-text {
  margin: 0 0 28px;
  padding: 0 15px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--im-muted);
}

/* colonna: centrata, larghezza fissa massima (prima col-md-4 = stretta e variabile) */
body.blur-login .col-md-4.col-md-offset-4 {
  float: none;
  width: auto;
  max-width: 450px;
  margin: 0 auto;
}

/* card */
body.blur-login .login-panel {
  margin-top: 0;          /* SB Admin: 25% della larghezza, imprevedibile */
  border: 1px solid var(--im-border);
  border-radius: 16px;
  background-color: #fff;
  box-shadow: 0 12px 32px rgba(16, 24, 40, .08), 0 2px 6px rgba(16, 24, 40, .04);
}
body.blur-login .login-panel > .panel-heading {
  padding: 28px 28px 0;
  background-color: transparent;
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
}
body.blur-login .login-panel .panel-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--im-text);
}
body.blur-login .login-panel > .panel-body { padding: 20px 28px 28px; }

/* link "Sign up" (solo se la registrazione e' attiva): heading in basso, discreto */
body.blur-login .login-panel > .panel-body + .panel-heading {
  padding: 16px 28px;
  background-color: #f8fafc;
  border-top: 1px solid var(--im-border);
  border-radius: 0 0 16px 16px;
  font-size: 14px;
}

/* campi piu' comodi */
body.blur-login .login-panel .form-group { margin-bottom: 16px; }
body.blur-login .login-panel .form-control {
  height: 46px;
  padding: 10px 14px;
  font-size: 15px;
}

/* pulsante: blu del tema invece del verde SB Admin
   (per tornare al verde cancella le 4 righe "background/border" qui sotto) */
body.blur-login .login-panel .btn-lg {
  height: 48px;
  margin-top: 8px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
}
body.blur-login .login-panel .btn-success,
body.blur-login .login-panel .btn-success:focus { background-color: var(--im-primary); border-color: var(--im-primary); }
body.blur-login .login-panel .btn-success:hover,
body.blur-login .login-panel .btn-success:active { background-color: var(--im-primary-hover); border-color: var(--im-primary-hover); }

/* messaggi di errore sopra il form */
body.blur-login .login-panel .alert { margin-bottom: 16px; padding: 10px 14px; font-size: 14px; }

/* =====================================================================
 * v5 - login: occhio mostra/nascondi password + link "password dimenticata"
 * Richiede il markup .has-toggle / .pw-toggle / .login-forgot nella vista.
 * ===================================================================== */
body.blur-login .login-panel .has-toggle { position: relative; }
body.blur-login .login-panel .has-toggle .form-control { padding-right: 46px; }
body.blur-login .login-panel .pw-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 0 var(--im-r) var(--im-r) 0;
  background: transparent;
  color: var(--im-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
body.blur-login .login-panel .pw-toggle:hover { color: var(--im-primary); }
body.blur-login .login-panel .pw-toggle:focus { outline: 0; }
body.blur-login .login-panel .pw-toggle:focus-visible { box-shadow: 0 0 0 3px var(--im-primary-ring); color: var(--im-primary); }

body.blur-login .login-panel .login-forgot {
  margin: -6px 0 4px;
  text-align: right;
  font-size: 13px;
}

/* =====================================================================
 * v6 - dashboard home: riquadri modulo (.stat-tile) al posto dei panel colorati
 * Richiede il markup .stat-grid / .stat-tile.stat-XXX nella vista.
 * ===================================================================== */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr;                       /* mobile: 1 colonna */
  gap: 20px;
  margin-bottom: 10px;
}
@media (min-width: 576px)  { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px)  { .stat-grid { grid-template-columns: repeat(3, 1fr); } }   /* 3 + 2 */
@media (min-width: 1600px) { .stat-grid { grid-template-columns: repeat(5, 1fr); } }   /* 5 affiancati */
.stat-tile {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid var(--im-border);
  border-radius: var(--im-r-lg);
  box-shadow: var(--im-shadow);
  overflow: hidden;
  color: var(--im-text);
  transition: box-shadow .15s, border-color .15s;
}
a.stat-tile:hover,
a.stat-tile:focus {
  color: var(--im-text);
  text-decoration: none;
  border-color: var(--c);
  box-shadow: 0 6px 18px rgba(16, 24, 40, .10);
}
.stat-body {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
}
.stat-icon {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background-color: var(--ct);
  color: var(--c);
  font-size: 26px;
}
.stat-value {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.stat-label {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--im-muted);
}
.stat-link {
  margin-top: auto;                                /* piede sempre in fondo al riquadro */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-top: 1px solid var(--im-border);
  background-color: #fafbfc;
  font-size: 13px;
  font-weight: 500;
  color: var(--cd);
}
.stat-link .fa { transition: transform .15s; }
a.stat-tile:hover .stat-link .fa { transform: translateX(3px); }

/* colore per modulo: --c icona/bordo hover, --cd testo link, --ct sfondo icona */
.stat-qc       { --c: #2790b8; --cd: #1b7396; --ct: #e5f4fa; }
.stat-samples  { --c: #2e9e6b; --cd: #1f7a50; --ct: #e6f5ee; }
.stat-research { --c: #c27a08; --cd: #8a5a0a; --ct: #fdf1dc; }
.stat-proto    { --c: #7c5cd6; --cd: #5b3fb3; --ct: #f0ebfb; }
.stat-computer { --c: #2f6fc0; --cd: #265da3; --ct: #e8f0fb; }

/* =====================================================================
 * v7 - riquadri: varianti per stato, griglia a 4, versione disabilitata
 * ===================================================================== */
/* alias "semantici" (stessi colori dei moduli) + rosso, usato solo per stati reali (es. annullate) */
.stat-primary { --c: #2f6fc0; --cd: #265da3; --ct: #e8f0fb; }
.stat-success { --c: #2e9e6b; --cd: #1f7a50; --ct: #e6f5ee; }
.stat-warning { --c: #c27a08; --cd: #8a5a0a; --ct: #fdf1dc; }
.stat-danger  { --c: #dc4a4a; --cd: #b3261e; --ct: #fdeaea; }

/* griglia da 4 riquadri: 2x2 sui portatili, 4 affiancati sugli schermi larghi (mai 3+1) */
@media (min-width: 992px)  { .stat-grid.stat-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1400px) { .stat-grid.stat-grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* riquadro non cliccabile (permessi insufficienti) */
.stat-tile.stat-disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }
.stat-tile.stat-disabled .stat-link { color: var(--im-muted); }

/* =====================================================================
 * v8 - dashboard campionature: grafico per anno a tutta larghezza + tabella orizzontale
 * Richiede il markup .year-chart / .year-table-wrap / .year-table nella vista.
 * ===================================================================== */
.year-chart #morris-bar-chart { height: 320px; }

/* v9 - varianti riquadri per la sezione Computers */
.stat-info    { --c: #2790b8; --cd: #1b7396; --ct: #e5f4fa; }
.stat-violet  { --c: #7c5cd6; --cd: #5b3fb3; --ct: #f0ebfb; }
.stat-neutral { --c: #6b7280; --cd: #4b5563; --ct: #eff1f4; }

.year-table-wrap {
  margin-top: 16px;
  overflow-x: auto;
  border: 1px solid var(--im-border);
  border-radius: var(--im-r);
}
.year-table.table {
  width: auto;
  min-width: 100%;
  margin: 0;
  white-space: nowrap;
}
.year-table > tbody > tr > td { text-align: center; }
.year-table > tbody > tr:first-child > th,
.year-table > tbody > tr:first-child > td { border-top: 0; }
/* colonna etichette fissa mentre si scorre in orizzontale */
.year-table > tbody > tr > th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 130px;
  background-color: #f8fafc;
  box-shadow: inset -1px 0 0 var(--im-border);
}


/* Pulsanti azione in tabella: uniti senza spazio */
td.cell-ctrls {
    white-space: nowrap !important;
    width: 1%;
}

td.cell-ctrls .btn-group {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important; /* Rimuove lo spazio tra i bottoni */
}

td.cell-ctrls .btn-group > .btn {
    float: none !important;
    border-radius: 0 !important; /* Appiattisce i bordi interni */
}

/* Arrotonda solo l'angolo sinistro del primo pulsante */
td.cell-ctrls .btn-group > .btn:first-child {
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
}

/* Arrotonda solo l'angolo destro dell'ultimo pulsante */
td.cell-ctrls .btn-group > .btn:last-child {
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}

/* Evita il doppio bordo tra pulsanti adiacenti */
td.cell-ctrls .btn-group > .btn + .btn {
    margin-left: -1px !important;
}


/* v10 - pulsanti azione nelle tabelle (td.cell-ctrls): stile "tenue"
   sfondo in tinta chiara, testo e icona colorati, bordo sottile.
   Non tocca i pulsanti principali fuori dalle tabelle (restano pieni). */
td.cell-ctrls .btn-primary { --t-bg: #e8f0fb; --t-bd: #cddcf3; --t-tx: #265da3; --t-bgh: #d6e4f8; }
td.cell-ctrls .btn-success { --t-bg: #e6f5ee; --t-bd: #c4e6d4; --t-tx: #1f7a50; --t-bgh: #d3eddf; }
td.cell-ctrls .btn-info    { --t-bg: #e5f4fa; --t-bd: #c9e6f1; --t-tx: #1b7396; --t-bgh: #d0eaf4; }
td.cell-ctrls .btn-warning { --t-bg: #fdf1dc; --t-bd: #f4dcae; --t-tx: #8a5a0a; --t-bgh: #fbe6bf; }
td.cell-ctrls .btn-danger  { --t-bg: #fdeaea; --t-bd: #f6cdcd; --t-tx: #b3261e; --t-bgh: #fadada; }

td.cell-ctrls .btn:is(.btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger) {
  background-color: var(--t-bg);
  border-color: var(--t-bd);
  color: var(--t-tx);
}
td.cell-ctrls .btn:is(.btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger):is(:hover, :focus, :active, .active):not(.disabled):not([disabled]) {
  background-color: var(--t-bgh);
  border-color: var(--t-bd);
  color: var(--t-tx);
}


/* v11 - legenda dei grafici flot */
.flot-chart .legend table { font-size: 12px !important; color: var(--im-text) !important; }
.flot-chart .legendColorBox > div { border-color: transparent !important; padding: 0 !important; }
.flot-chart .legendColorBox > div > div { border-radius: 3px; }
.flot-chart .legendLabel { padding-left: 6px; }


/* ==========================================================
   STATO DI ERRORE DEI FORM (Modern UI)
   ========================================================== */

/* 1. Label del campo in errore */
.control-group.error .control-label {
    color: #b91c1c; /* Rosso scuro per garantire leggibilità */
    font-weight: 600;
}

/* 2. Bordo e alone sull'input */
.control-group.error .form-control,
.control-group.error input,
.control-group.error select,
.control-group.error textarea {
    border-color: #ef4444 !important;
    background-color: #fffbfb; /* Tinta tenue per evidenziare il campo */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Effetto di focus quando l'utente clicca per correggere */
.control-group.error .form-control:focus,
.control-group.error input:focus,
.control-group.error select:focus,
.control-group.error textarea:focus {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important;
    outline: 0;
}

/* 3. Rimozione dei punti elenco standard dalla lista errori */
.control-group.error ul.help-inline,
.control-group.error ul.help-block {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 6px 0 0 0 !important;
}

/* 4. Formattazione del testo dell'errore con icona SVG di avviso */
.control-group.error ul.help-inline li,
.control-group.error ul.help-block li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #dc2626;
    line-height: 1.4;
}

/* Icona punto esclamativo prima del messaggio */
.control-group.error ul.help-inline li::before,
.control-group.error ul.help-block li::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23dc2626'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z' clip-rule='evenodd'/%3E%3C/svg%3E");
}


/* v12 - sidebar: gerarchia piu' chiara e sottomenu piu' compatti */
.sidebar .nav > li > a { color: var(--im-text); font-weight: 500; }
.sidebar .nav > li > a > .fa:not(.arrow) { color: var(--im-primary); }
.sidebar .nav > li.active > a { color: var(--im-primary); }
.sidebar .nav-second-level li a {
  padding-top: 7px;
  padding-bottom: 7px;
  font-size: 13.5px;
  font-weight: 400;
  color: #4b5563;
}
.sidebar .nav-second-level li a:hover,
.sidebar .nav-second-level li a:focus { color: var(--im-text); }
.sidebar .nav-second-level li a.active { color: var(--im-primary); font-weight: 500; }

/* v14 - navbar e sidebar sempre visibili durante lo scroll */
:root { --im-nav-h: 51px; }   /* altezza reale della navbar: controllala in DevTools */

#top-nav {
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* Desktop: la sidebar resta fissa sotto la navbar e scorre da sola se e' lunga */
@media (min-width: 768px) {
  .sidebar {
    height: calc(100vh - var(--im-nav-h));
    overflow-y: auto;
  }
}

/* Mobile: il menu aperto non deve superare lo schermo */
@media (max-width: 767px) {
  .sidebar .navbar-collapse {
    max-height: calc(100vh - var(--im-nav-h));
    overflow-y: auto;
  }
}

/* v15 - mobile: navbar su una sola riga (logo | utente | hamburger) */
@media (max-width: 767px) {
  #top-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  #top-nav::before,
  #top-nav::after { display: none; }              /* clearfix di bootstrap */

  #top-nav > .navbar-header { display: contents; }  /* brand e toggle diventano figli diretti */
  #top-nav .navbar-brand  { order: 1; float: none; }
  #top-nav .navbar-top-links {
    order: 2;
    margin: 0 0 0 auto;                           /* spinge utente e hamburger a destra */
    float: none;
    display: flex;
    align-items: center;
  }
  #top-nav .navbar-toggle {
    order: 3;
    float: none;
    margin: 0 12px 0 4px;
  }
  #top-nav .navbar-top-links > li > a {
    padding: 0 10px;
    min-height: 0;
    line-height: 50px;
    white-space: nowrap;
  }
  #top-nav .navbar-top-links .dropdown-menu { right: 0; left: auto; }

  /* la sidebar va sotto, a tutta larghezza */
  #top-nav > .sidebar { order: 4; flex: 0 0 100%; width: 100%; }
}