/* =====================================================================
   nutramis - restyling grafico basato su Material Admin 3.0
   Foglio aggiuntivo: va caricato DOPO app.min.css e style-nutramis.css.
   Non sostituisce il tema, ne aggiorna bottoni, badge, box con bordo,
   card, tabelle e riquadri della home.
   ===================================================================== */

:root {
  --ma-primary: #1e91ff;
  --ma-primary-dark: #1b82e5;
  --ma-secondary: #4f5762;
  --ma-success: #10b981;
  --ma-success-dark: #0da271;
  --ma-info: #00bcd4;
  --ma-info-dark: #00a5ba;
  --ma-warning: #fea84c;
  --ma-warning-dark: #f59632;
  --ma-danger: #ff6b68;
  --ma-danger-dark: #f25350;
  --ma-teal: #39bbb0;
  --ma-purple: #d066e2;
  --ma-gray-100: #f2f4f8;
  --ma-gray-200: #e5e7eb;
  --ma-gray-300: #d1d5dc;
  --ma-gray-600: #78808c;
  --ma-gray-700: #4f5762;
  --ma-body: #63738c;
  --ma-radius: .375rem;
  --ma-radius-lg: .6rem;
  --ma-radius-xl: 1rem;
  --ma-shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
  --ma-shadow: 0 4px 3px -2px rgba(0, 0, 0, .15), 0 2px 2px 0 rgba(0, 0, 0, .04), 0 1px 5px 0 rgba(0, 0, 0, .02);
  --ma-shadow-hover: 0 8px 16px -6px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .06);
  --ma-transition: all .2s ease-in-out;
}

/* ------------------------------------------------------------------ *
 * BOTTONI
 * ------------------------------------------------------------------ */
.btn {
  border-radius: var(--ma-radius);
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.5;
  padding: .55rem 1rem;
  letter-spacing: 0;
  text-transform: none;
  border-width: 1px;
  box-shadow: none;
  transition: var(--ma-transition);
}
/* le icone dentro i pulsanti seguono la dimensione del testo */
.btn .zmdi { font-size: 1.15em; vertical-align: -1px; }
.btn:focus,
.btn.focus { box-shadow: 0 0 0 .2rem rgba(30, 145, 255, .25); }
.btn:hover { transform: translateY(-1px); }
.btn:active,
.btn.active { transform: translateY(0); }

.btn--raised { box-shadow: var(--ma-shadow); }
.btn--raised:hover { box-shadow: var(--ma-shadow-hover); }

.btn-lg { padding: .75rem 1.5rem; font-size: 1rem; border-radius: var(--ma-radius-lg); }
.btn-lg .zmdi { font-size: 1.25em; }
.btn-sm { padding: .4rem .75rem; font-size: .8125rem; }

.btn-primary   { background-color: var(--ma-primary);   border-color: var(--ma-primary);   color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active { background-color: var(--ma-primary-dark); border-color: var(--ma-primary-dark); color: #fff; }

.btn-success   { background-color: var(--ma-success);   border-color: var(--ma-success);   color: #fff; }
.btn-success:hover, .btn-success:focus, .btn-success:active,
.btn-success:not(:disabled):not(.disabled):active { background-color: var(--ma-success-dark); border-color: var(--ma-success-dark); color: #fff; }

.btn-info      { background-color: var(--ma-info);      border-color: var(--ma-info);      color: #fff; }
.btn-info:hover, .btn-info:focus, .btn-info:active,
.btn-info:not(:disabled):not(.disabled):active { background-color: var(--ma-info-dark); border-color: var(--ma-info-dark); color: #fff; }

.btn-warning   { background-color: var(--ma-warning);   border-color: var(--ma-warning);   color: #fff; }
.btn-warning:hover, .btn-warning:focus, .btn-warning:active,
.btn-warning:not(:disabled):not(.disabled):active { background-color: var(--ma-warning-dark); border-color: var(--ma-warning-dark); color: #fff; }

.btn-danger    { background-color: var(--ma-danger);    border-color: var(--ma-danger);    color: #fff; }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active,
.btn-danger:not(:disabled):not(.disabled):active { background-color: var(--ma-danger-dark); border-color: var(--ma-danger-dark); color: #fff; }

.btn-secondary { background-color: var(--ma-secondary); border-color: var(--ma-secondary); color: #fff; }
.btn-link { color: var(--ma-gray-600); box-shadow: none; }
.btn-link:hover { color: var(--ma-primary); transform: none; text-decoration: none; }

/* gruppi di pulsanti nelle tabelle: angoli morbidi solo agli estremi */
.btn-group > .btn:first-child { border-top-left-radius: var(--ma-radius); border-bottom-left-radius: var(--ma-radius); }
.btn-group > .btn:last-child  { border-top-right-radius: var(--ma-radius); border-bottom-right-radius: var(--ma-radius); }
.btn-group > .btn:hover { transform: none; }
/* pulsanti a sola icona negli elenchi: quadrati e leggibili */
td.actions .btn,
.btn-group > .btn {
  min-width: 40px;
  padding: .55rem .7rem;
  text-align: center;
}
td.actions .btn { margin-right: .25rem; margin-bottom: .2rem; }
td.actions .btn .zmdi,
.btn-group > .btn .zmdi { font-size: 1.25em; margin: 0; }

/* ------------------------------------------------------------------ *
 * BADGE
 * ------------------------------------------------------------------ */
.badge {
  padding: .5em .75em;
  font-size: .75rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  border-radius: var(--ma-radius-sm, .25rem);
  border: 1px solid transparent;
}
.badge-pill { border-radius: 10rem; }
/* le icone dentro i badge seguono il colore del testo (anche con .text-white) */
.badge i, .badge .zmdi { color: inherit !important; }

.badge-success   { background-color: rgba(16, 185, 129, .15);  color: #0b8f63;  border-color: rgba(16, 185, 129, .25); }
.badge-danger    { background-color: rgba(255, 107, 104, .15); color: #e04b48;  border-color: rgba(255, 107, 104, .25); }
.badge-warning   { background-color: rgba(254, 168, 76, .18);  color: #c97716;  border-color: rgba(254, 168, 76, .3); }
.badge-info      { background-color: rgba(0, 188, 212, .15);   color: #0093a6;  border-color: rgba(0, 188, 212, .25); }
.badge-primary   { background-color: rgba(30, 145, 255, .15);  color: #1477d6;  border-color: rgba(30, 145, 255, .25); }
.badge-secondary { background-color: rgba(120, 128, 140, .15); color: var(--ma-gray-700); border-color: rgba(120, 128, 140, .25); }

/* ------------------------------------------------------------------ *
 * BOX CON BORDO (i riquadri dei form) e CARD
 * ------------------------------------------------------------------ */
.card {
  border: 0;
  border-radius: var(--ma-radius-lg);
  box-shadow: var(--ma-shadow-sm);
}
.card-shadow { box-shadow: var(--ma-shadow-sm) !important; }
.card-title { font-weight: 600; letter-spacing: 0; }

.border { border: 1px solid var(--ma-gray-200) !important; }
[class*="border border-"] {
  border-radius: var(--ma-radius-lg);
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: .75rem;
  transition: var(--ma-transition);
}
.border-primary { border-color: rgba(30, 145, 255, .25) !important; background-color: rgba(30, 145, 255, .04); }
.border-warning { border-color: rgba(254, 168, 76, .35) !important; background-color: rgba(254, 168, 76, .06); }
.border-success { border-color: rgba(16, 185, 129, .25) !important;  background-color: rgba(16, 185, 129, .04); }
.border-danger  { border-color: rgba(255, 107, 104, .25) !important; background-color: rgba(255, 107, 104, .04); }
.border-info    { border-color: rgba(0, 188, 212, .25) !important;   background-color: rgba(0, 188, 212, .04); }

/* ------------------------------------------------------------------ *
 * FORM, TABELLE, MODALI, ALERT
 * ------------------------------------------------------------------ */
.form-control {
  border-radius: var(--ma-radius);
  border: 1px solid var(--ma-gray-200);
  transition: var(--ma-transition);
}
.form-control:focus {
  border-color: var(--ma-primary);
  box-shadow: 0 0 0 .2rem rgba(30, 145, 255, .15);
}

.table thead th {
  border-top: 0;
  border-bottom: 1px solid var(--ma-gray-200);
  font-weight: 600;
  color: var(--ma-gray-700);
  text-transform: capitalize;
}
.table td, .table th { border-top: 1px solid var(--ma-gray-100); vertical-align: middle; }
.table-hover tbody tr { transition: background-color .15s ease-in-out; }
.table-hover tbody tr:hover { background-color: rgba(30, 145, 255, .04); }

.modal-content { border: 0; border-radius: var(--ma-radius-lg); box-shadow: 0 1rem 3rem rgba(0, 0, 0, .18); }
.modal-header, .modal-footer { border-color: var(--ma-gray-100); }

.alert { border: 0; border-radius: var(--ma-radius-lg); }
.alert-success { background-color: rgba(16, 185, 129, .12);  color: #0b8f63; }
.alert-danger,
.alert-error   { background-color: rgba(255, 107, 104, .12); color: #e04b48; }
.alert-warning { background-color: rgba(254, 168, 76, .15);  color: #c97716; }
.alert-info    { background-color: rgba(0, 188, 212, .12);   color: #0093a6; }

/* ------------------------------------------------------------------ *
 * RIQUADRI DELLA HOME (quick stats) e mini grafici
 * ------------------------------------------------------------------ */
.quick-stats__item {
  border-radius: var(--ma-radius-lg);
  box-shadow: var(--ma-shadow-sm);
  transition: var(--ma-transition);
  overflow: hidden;
}
.quick-stats__item:hover { box-shadow: var(--ma-shadow-hover); transform: translateY(-2px); }
.quick-stats__info h2 { font-weight: 600; letter-spacing: -.5px; }
.quick-stats__info small { opacity: .85; }

.quick-stats .bg-lime { background: linear-gradient(135deg, #10b981, #0da271) !important; }
.quick-stats .bg-blue { background: linear-gradient(135deg, #1e91ff, #1b82e5) !important; }
.quick-stats .bg-teal { background: linear-gradient(135deg, #39bbb0, #2ea79d) !important; }
.quick-stats .bg-red  { background: linear-gradient(135deg, #ff6b68, #f25350) !important; }

/* barre dei mini grafici: niente canvas, solo CSS */
.mini-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 42px;
  margin-top: .5rem;
}
.mini-bars span {
  flex: 1 1 auto;
  min-width: 4px;
  border-radius: 3px 3px 0 0;
  background-color: rgba(255, 255, 255, .55);
  transition: height .35s ease-in-out, background-color .2s ease-in-out;
}
.mini-bars span:hover { background-color: rgba(255, 255, 255, .95); }
.mini-bars span.is-last { background-color: rgba(255, 255, 255, .95); }
.mini-bars--empty { opacity: .35; }

/* ------------------------------------------------------------------ *
 * BARRA IMPERSONIFICAZIONE (Fase 5)
 * ------------------------------------------------------------------ */
.impersonate-bar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: linear-gradient(135deg, #fea84c, #f59632);
  color: #fff;
  padding: .6rem 1rem;
  font-size: .875rem;
  text-align: center;
  box-shadow: var(--ma-shadow-sm);
}
.impersonate-bar .btn { vertical-align: baseline; }

/* ------------------------------------------------------------------ *
 * SIDEBAR (proposta chiara)
 * Blocco utente in alto invariato nella struttura, solo ripulito.
 * Voci raggruppate, stato attivo evidente, icone coerenti.
 * ------------------------------------------------------------------ */
.sidebar {
  background-color: #fff;
  border-right: 1px solid #eceff3;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* blocco utente */
.user {
  background-color: #f7f9fc;
  border: 1px solid #eef1f5;
  border-radius: var(--ma-radius-lg);
  margin-bottom: 1rem;
}
.user__info { padding: .75rem; border-radius: var(--ma-radius-lg); }
.user__info:hover { background-color: #f1f5fa; }
.user__img { width: 2.75rem; height: 2.75rem; border: 1px solid #e3e9f0; }
.user__name { color: #21272e; font-size: .8125rem; font-weight: 700; line-height: 1.35; }
.user__name + .user__name { color: #8a95a3; font-weight: 400; font-size: .75rem; }

/* etichette di sezione */
.navigation__label {
  padding: 1rem .85rem .35rem;
  color: #98a2b0;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* voci di primo livello */
.navigation > li > a {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .7rem .85rem;
  margin-bottom: 2px;
  border-radius: var(--ma-radius);
  color: #48525f;
  font-size: .9375rem;
  font-weight: 600;
  transition: var(--ma-transition);
}
.navigation > li > a .zmdi { color: #8a95a3; font-size: 1.2rem; transition: color .2s ease-in-out; }
.navigation > li > a:hover { background-color: #f2f6fb; color: #12559c; }
.navigation > li > a:hover .zmdi { color: #1477d6; }

/* voce attiva */
.navigation__sub--active > a,
.navigation > li > a.active {
  background-color: #e8f2ff;
  color: #12559c;
  font-weight: 700;
}
.navigation__sub--active > a .zmdi,
.navigation > li > a.active .zmdi { color: #1477d6; }
.navigation__sub--active > a::after,
.navigation > li > a.active::after {
  content: "";
  position: absolute;
  right: .6rem;
  top: 50%;
  width: 4px;
  height: 18px;
  margin-top: -9px;
  border-radius: 4px;
  background-color: var(--ma-primary);
}

/* sottovoci */
.navigation__sub > ul { background-color: transparent; padding: 2px 0 6px; }
.navigation__sub > ul > li > a {
  padding: .5rem 1rem .5rem 2.5rem;
  border-radius: var(--ma-radius);
  color: #68727f;
  font-size: .875rem;
  font-weight: 400;
  transition: var(--ma-transition);
}
.navigation__sub > ul > li > a:hover { background-color: #f4f9ff; color: #12559c; }