/* ==========================================================================
   IN-Code — tema di marca
   Si carica DOPO style.bundle.css di Metronic e ne sovrascrive le variabili.
   Il tema originale non viene modificato: resta aggiornabile.

   REBRANDING: cambiare solo il blocco "TOKEN DI MARCA" qui sotto.
   ========================================================================== */

/* ---------- TOKEN DI MARCA ---------- */
:root{
  --ic-brand-400:#FF3B4E;
  --ic-brand-500:#DD1527;   /* primario, dal logo IN-Code */
  --ic-brand-600:#C61323;
  --ic-brand-700:#7D0C16;   /* fondo del gradiente di login dell'app */
  --ic-brand-rgb:220,21,39;

  --ic-font-display:'Space Grotesk', system-ui, sans-serif;
  --ic-font-ui:'Inter', system-ui, -apple-system, sans-serif;
  --ic-font-mono:'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  --ic-r:10px;
}

/* ---------- TEMA CHIARO ---------- */
[data-bs-theme="light"]{
  --ic-bg:#F6F7F9; --ic-surface:#FFFFFF; --ic-surface-2:#F1F3F6;
  --ic-border:#E3E7EC; --ic-border-soft:#EDF0F3;
  --ic-text:#11151C; --ic-text-2:#5A6472; --ic-text-3:#8B95A3;
  --ic-success:#16A34A; --ic-warning:#D97706; --ic-danger:#DC2626;
  --ic-shadow:0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.06);
}
/* ---------- TEMA SCURO ---------- */
[data-bs-theme="dark"]{
  --ic-bg:#0A0C10; --ic-surface:#12151B; --ic-surface-2:#181C24;
  --ic-border:#242A35; --ic-border-soft:#1C222B;
  --ic-text:#E8EAEE; --ic-text-2:#9AA3B2; --ic-text-3:#646E7E;
  --ic-success:#22C55E; --ic-warning:#F5A524; --ic-danger:#F04438;
  --ic-shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.25);
}

/* ---------- ponte verso le variabili Bootstrap/Metronic ---------- */
:root,[data-bs-theme]{
  --bs-primary:var(--ic-brand-500);
  --bs-primary-rgb:var(--ic-brand-rgb);
  --bs-link-color:var(--ic-brand-500);
  --bs-link-hover-color:var(--ic-brand-400);
  --bs-body-font-family:var(--ic-font-ui);
  --bs-body-bg:var(--ic-bg);
  --bs-body-color:var(--ic-text);
  --bs-border-color:var(--ic-border);
  --kt-primary:var(--ic-brand-500);
  --kt-app-bg-color:var(--ic-bg);
}

/* ---------- base ---------- */
body{background:var(--ic-bg);color:var(--ic-text);font-family:var(--ic-font-ui)}
h1,h2,h3,h4,.fw-bold.fs-1,.page-title,.card-title{font-family:var(--ic-font-display);letter-spacing:-.02em}
.text-muted{color:var(--ic-text-2)!important}
code,kbd,samp,.ic-mono,td[data-ic-mono]{font-family:var(--ic-font-mono);font-size:.88em}
a{color:var(--ic-brand-500)} a:hover{color:var(--ic-brand-400)}
::selection{background:rgba(var(--ic-brand-rgb),.28)}
*:focus-visible{outline:2px solid var(--ic-brand-500);outline-offset:2px}

/* ---------- SIDEBAR ----------
   Resta SCURA in entrambi i temi, per due motivi:
   1. il logo default-logo.svg e' pensato per fondo scuro: su fondo chiaro
      la parte bianca sparisce e resta solo il blocco rosso;
   2. una barra scura fissa da' continuita' di marca fra tema chiaro e scuro.
   Valori fissi, non token, proprio perche' non devono seguire il tema.        */
.app-sidebar{background:#12151B!important;border-right:1px solid #242A35}
.app-sidebar .menu-item .menu-link{border-radius:var(--ic-r);color:#9AA3B2;font-weight:500}
.app-sidebar .menu-item .menu-link:hover{background:#181C24;color:#E8EAEE}
.app-sidebar .menu-item .menu-link .menu-title{color:inherit}
.app-sidebar .menu-item .menu-link.active{background:#181C24;color:#E8EAEE;position:relative}
.app-sidebar .menu-item .menu-link.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
  border-radius:0 3px 3px 0;background:var(--ic-brand-500);box-shadow:0 0 12px rgba(var(--ic-brand-rgb),.7)}
.app-sidebar .menu-content .menu-heading{color:#646E7E!important;font-size:10.5px;letter-spacing:.1em}
.app-sidebar .menu-item .menu-link .menu-icon i,.app-sidebar .menu-item .menu-link .menu-icon{color:inherit}
.app-sidebar-logo{border-bottom:1px solid #1C222B}

/* ---------- HEADER ---------- */
.app-header{background:var(--ic-surface);border-bottom:1px solid var(--ic-border)}

/* ---------- CARD ---------- */
.card{background:var(--ic-surface);border:1px solid var(--ic-border);border-radius:var(--ic-r);
      box-shadow:var(--ic-shadow)}
.card-header{border-bottom:1px solid var(--ic-border-soft);min-height:auto;padding:14px 18px}
.card-body{padding:18px}

/* ---------- PULSANTI: gerarchia esplicita ---------- */
.btn{border-radius:var(--ic-r);font-family:var(--ic-font-ui);font-weight:500;transition:.15s}
.btn-primary{background:linear-gradient(145deg,var(--ic-brand-500),var(--ic-brand-600));border-color:transparent;
  color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.18),0 4px 14px rgba(var(--ic-brand-rgb),.28)}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{background:var(--ic-brand-400)!important;border-color:transparent!important;
  box-shadow:0 0 0 3px rgba(var(--ic-brand-rgb),.22),0 4px 18px rgba(var(--ic-brand-rgb),.4)}
.btn-secondary,.btn-light{background:var(--ic-surface-2)!important;border:1px solid var(--ic-border)!important;color:var(--ic-text)!important}
.btn-secondary:hover,.btn-light:hover{border-color:var(--ic-text-3)!important}
/* distruttivo: mai pieno, si accende solo al passaggio del mouse.
   Serve a non confonderlo con il rosso di marca dell'azione principale. */
.btn-danger{background:transparent!important;border-color:transparent!important;color:var(--ic-danger)!important;box-shadow:none!important}
.btn-danger:hover{background:color-mix(in srgb,var(--ic-danger) 14%,transparent)!important}
.btn-success{background:var(--ic-success)!important;border-color:transparent!important}
.btn-info{background:var(--ic-surface-2)!important;border:1px solid var(--ic-border)!important;color:var(--ic-text)!important}

/* ---------- FORM ---------- */
.form-control,.form-select{background:var(--ic-bg);border:1px solid var(--ic-border);color:var(--ic-text);
  border-radius:var(--ic-r);font-size:14px}
.form-control:focus,.form-select:focus{border-color:var(--ic-brand-500);
  box-shadow:0 0 0 3px rgba(var(--ic-brand-rgb),.16);background:var(--ic-bg);color:var(--ic-text)}
.form-control::placeholder{color:var(--ic-text-3)}
.form-label{color:var(--ic-text-2);font-size:12.5px;font-weight:500}
.form-check-input:checked{background-color:var(--ic-brand-500);border-color:var(--ic-brand-500)}

/* ---------- TABELLE ---------- */
.table{--bs-table-bg:transparent;color:var(--ic-text);font-size:13.5px;margin-bottom:0}
.table>thead th{background:var(--ic-surface-2);color:var(--ic-text-3);font-size:11px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;padding:10px 16px;border-bottom:1px solid var(--ic-border)}
.table>tbody>tr>td{padding:12px 16px;border-top:1px solid var(--ic-border-soft);vertical-align:middle;color:var(--ic-text)}
.table>tbody>tr:hover>td{background:var(--ic-surface-2)}
.table-responsive{border-radius:var(--ic-r)}

/* intestazioni ordinabili */
th.ic-sortable{cursor:pointer;user-select:none;white-space:nowrap;position:relative;padding-right:26px}
th.ic-sortable:hover{color:var(--ic-text)}
/* indicatore neutro: due frecce sovrapposte, non un trattino (sembrava un segno meno) */
th.ic-sortable::after{content:"";position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:8px;height:13px;opacity:0;transition:opacity .12s ease;
  background:
    linear-gradient(var(--ic-text-3) 0 0) top/8px 5px no-repeat,
    linear-gradient(var(--ic-text-3) 0 0) bottom/8px 5px no-repeat;
  -webkit-mask:
    linear-gradient(#000 0 0) top/8px 5px no-repeat,
    linear-gradient(#000 0 0) bottom/8px 5px no-repeat;
  clip-path:polygon(50% 0,100% 38%,0 38%,0 62%,100% 62%,50% 100%)}
th.ic-sortable:hover::after,th.ic-sortable:focus-visible::after{opacity:.45}
th.ic-sortable[data-ic-dir="asc"]::after,th.ic-sortable[data-ic-dir="desc"]::after{opacity:1;
  background:linear-gradient(var(--ic-brand-500) 0 0) center/8px 1.5px no-repeat}
th.ic-sortable[data-ic-dir="asc"]::after{clip-path:polygon(50% 0,100% 100%,0 100%);
  background:var(--ic-brand-500);width:8px;height:6px}
th.ic-sortable[data-ic-dir="desc"]::after{clip-path:polygon(0 0,100% 0,50% 100%);
  background:var(--ic-brand-500);width:8px;height:6px}

/* ---------- BADGE ---------- */
.badge{border-radius:99px;font-weight:600;font-size:11.5px;padding:4px 10px}
.badge.bg-primary{background:rgba(var(--ic-brand-rgb),.15)!important;color:var(--ic-brand-400)!important}
.badge.bg-success{background:color-mix(in srgb,var(--ic-success) 15%,transparent)!important;color:var(--ic-success)!important}
.badge.bg-warning{background:color-mix(in srgb,var(--ic-warning) 16%,transparent)!important;color:var(--ic-warning)!important}
.badge.bg-danger{background:color-mix(in srgb,var(--ic-danger) 15%,transparent)!important;color:var(--ic-danger)!important}

/* ---------- PAGINAZIONE ---------- */
.page-link{background:transparent;border:1px solid var(--ic-border);color:var(--ic-text-2);border-radius:8px;margin:0 2px}
.page-item.active .page-link{background:var(--ic-brand-500);border-color:var(--ic-brand-500);color:#fff}

/* ==========================================================================
   RESPONSIVE-FIRST — sotto i 768px ogni tabella diventa un elenco di card
   I data-label vengono generati da incode-ui.js leggendo le intestazioni.
   ========================================================================== */
.ic-sort-mobile{display:none}

@media (max-width:767.98px){
  .ic-sort-mobile{display:flex;gap:8px;align-items:center;margin:0 0 12px}
  .ic-sort-mobile select{flex:1}

  table.ic-cards, table.ic-cards>tbody, table.ic-cards>tbody>tr, table.ic-cards>tbody>tr>td{display:block;width:100%}
  table.ic-cards>thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  table.ic-cards>tbody>tr{
    background:var(--ic-surface);border:1px solid var(--ic-border);border-radius:var(--ic-r);
    box-shadow:var(--ic-shadow);margin-bottom:12px;padding:4px 0;overflow:hidden}
  table.ic-cards>tbody>tr:hover>td{background:transparent}
  table.ic-cards>tbody>tr>td{
    border:0;border-top:1px solid var(--ic-border-soft);padding:9px 14px;
    display:flex;gap:12px;align-items:flex-start;justify-content:space-between;text-align:right}
  table.ic-cards>tbody>tr>td:first-child{border-top:0}
  table.ic-cards>tbody>tr>td::before{
    content:attr(data-label);flex:0 0 40%;text-align:left;
    font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
    color:var(--ic-text-3);padding-top:2px}
  /* celle senza etichetta (azioni) occupano tutta la larghezza */
  table.ic-cards>tbody>tr>td[data-label=""]::before{display:none}
  table.ic-cards>tbody>tr>td[data-label=""]{justify-content:flex-end;background:var(--ic-surface-2)}

  .card-header{flex-direction:column;align-items:stretch;gap:10px}
  .card-body{padding:14px}
  .btn{width:auto}
  .table-responsive{overflow:visible}
}

/* schermi molto stretti: niente affiancamento etichetta/valore */
@media (max-width:400px){
  table.ic-cards>tbody>tr>td{flex-direction:column;text-align:left;gap:2px}
  table.ic-cards>tbody>tr>td::before{flex:none}
}

/* ==========================================================================
   PAGINA DI ACCESSO (authentication/sign-in.html)
   Usa lo stesso stack Metronic del gestionale, quindi eredita i token qui sopra.
   ========================================================================== */
.ic-auth-logo{width:100%;max-width:280px;height:auto;display:block}
.ic-auth-claim{
  font-family:var(--ic-font-display);
  font-size:clamp(18px,2.2vw,26px);
  font-weight:500;letter-spacing:-.01em;
  color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.55);
}
.ic-auth-card{
  align-self:center;   /* altrimenti si allunga per tutta l'altezza del contenitore */
  background:rgba(18,21,27,.88);
  border:1px solid var(--ic-border);
  box-shadow:0 1px 2px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.5);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
[data-bs-theme="light"] .ic-auth-card{
  background:rgba(255,255,255,.94);
  box-shadow:0 1px 2px rgba(16,24,40,.06), 0 24px 60px rgba(16,24,40,.18);
}
.ic-auth-card h1{font-family:var(--ic-font-display);color:var(--ic-text)!important;letter-spacing:-.02em}
.ic-auth-card .text-gray-500{color:var(--ic-text-2)!important}
.ic-auth-card .form-control{
  background:var(--ic-surface-2)!important;
  border:1px solid var(--ic-border);
  color:var(--ic-text);
  border-radius:9px;
  padding:.7rem .9rem;
}
.ic-auth-card .form-control::placeholder{color:var(--ic-text-3)}
.ic-auth-card .form-control:focus{
  border-color:var(--ic-brand-500);
  box-shadow:0 0 0 3px rgba(var(--ic-brand-rgb),.22);
}
/* autofill di Chrome: senza questo il campo torna bianco */
.ic-auth-card .form-control:-webkit-autofill,
.ic-auth-card .form-control:-webkit-autofill:hover,
.ic-auth-card .form-control:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ic-text);
  -webkit-box-shadow:0 0 0 1000px var(--ic-surface-2) inset;
  caret-color:var(--ic-text);
  transition:background-color 9999s ease-in-out 0s;
}
.ic-auth-card .btn-primary{
  background:var(--ic-brand-500);border-color:var(--ic-brand-500);color:#fff;
  border-radius:9px;font-weight:600;padding:.72rem 1.1rem;
  box-shadow:0 6px 18px rgba(var(--ic-brand-rgb),.30);
}
.ic-auth-card .btn-primary:hover,.ic-auth-card .btn-primary:focus{
  background:var(--ic-brand-400);border-color:var(--ic-brand-400);
  box-shadow:0 8px 22px rgba(var(--ic-brand-rgb),.38);
}
.ic-auth-card .btn-primary:active{background:var(--ic-brand-600);border-color:var(--ic-brand-600)}

@media (max-width:991.98px){
  .ic-auth-logo{max-width:200px}
  .ic-auth-claim{text-align:center}
}

/* ---------- pagine di errore 404 / 500 ---------- */
.ic-error-card{max-width:100%}
.ic-error-code{
  font-family:var(--ic-font-display);
  font-size:clamp(56px,12vw,104px);
  font-weight:700;line-height:1;letter-spacing:-.04em;margin-bottom:6px;
  background:linear-gradient(145deg,var(--ic-brand-400),var(--ic-brand-700));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ic-error-title{
  font-family:var(--ic-font-display);
  font-size:clamp(19px,2.4vw,24px);font-weight:600;letter-spacing:-.02em;
  color:var(--ic-text);margin:0 0 10px;
}
.ic-error-text{color:var(--ic-text-2);font-size:14.5px;line-height:1.6;margin:0 0 26px}
.btn-ic-ghost{
  background:transparent;border:1px solid var(--ic-border);color:var(--ic-text-2);
  border-radius:9px;font-weight:600;padding:.62rem 1.1rem;
}
.btn-ic-ghost:hover{border-color:var(--ic-text-3);color:var(--ic-text)}

/* ---------- grafici e stati vuoti ---------- */
.ic-chart{position:relative;width:100%;height:320px}
.ic-chart>canvas{width:100%!important;height:100%!important}
@media (max-width:575.98px){ .ic-chart{height:250px} }

.ic-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  min-height:180px;padding:24px;text-align:center;
  border:1px dashed var(--ic-border);border-radius:var(--ic-r);
  background:var(--ic-surface-2);color:var(--ic-text-3);font-size:14px;
}
.ic-empty i{font-size:22px;opacity:.55}
/* stessa cosa per le tabelle senza righe */
tbody:empty::after{content:""}
.ic-empty-row td{
  color:var(--ic-text-3);text-align:center;padding:34px 16px!important;font-size:14px;
}

/* ---------- palette dei grafici ----------
   Ordine fisso, mai ciclato oltre l'ultimo slot: dal settimo in poi si accorpa
   in "Altro" lato server. Le due varianti sono state validate separatamente
   (banda di luminosita, soglia di croma, separazione per daltonismo,
   contrasto sulla superficie della card): NON scambiare i valori fra i temi. */
[data-bs-theme="light"]{
  --ic-viz-1:#DD1527;  /* rosso di marca */
  --ic-viz-2:#2A78D6;
  --ic-viz-3:#EDA100;
  --ic-viz-4:#1BAF7A;
  --ic-viz-5:#4A3AA7;
  --ic-viz-6:#E87BA4;
  --ic-viz-surface:#FFFFFF;   /* fondo card: serve come stacco fra i segmenti */
}
[data-bs-theme="dark"]{
  --ic-viz-1:#FF3B4E;
  --ic-viz-2:#3987E5;
  --ic-viz-3:#C98500;
  --ic-viz-4:#199E70;
  --ic-viz-5:#9085E9;
  --ic-viz-6:#D55181;
  --ic-viz-surface:#12151B;
}

/* ---------- paginazione ---------- */
.ic-pager{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 16px;border-top:1px solid var(--ic-border);
}
.ic-pager-info{color:var(--ic-text-2);font-size:13px;white-space:nowrap}
.ic-pager-pagine{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-left:auto}
.ic-pager-btn{
  min-width:32px;height:32px;padding:0 9px;
  border:1px solid var(--ic-border);border-radius:8px;
  background:var(--ic-surface);color:var(--ic-text-2);
  font-size:13px;font-weight:600;line-height:1;
  cursor:pointer;transition:border-color .12s ease,color .12s ease,background-color .12s ease;
}
.ic-pager-btn:hover:not(:disabled){border-color:var(--ic-text-3);color:var(--ic-text)}
.ic-pager-btn.attiva{
  background:var(--ic-brand-500);border-color:var(--ic-brand-500);color:#fff;
}
.ic-pager-btn:disabled{opacity:.4;cursor:default}
.ic-pager-punti{color:var(--ic-text-3);padding:0 2px}
.ic-pager-dim{width:auto;min-width:132px}

@media (max-width:575.98px){
  .ic-pager{gap:10px}
  .ic-pager-pagine{margin-left:0;width:100%;justify-content:center}
  .ic-pager-dim{width:100%}
}

/* ---------- colonna azioni ----------
   Le icone stavano una sotto l'altra e allungavano la riga: qui vanno
   su una riga sola, con area cliccabile decente (24x24 e' troppo poco). */
td.colonna-azioni,
th.colonna-azioni{white-space:nowrap;width:1%}
td.colonna-azioni > form,
td.colonna-azioni{vertical-align:middle}
td.colonna-azioni form,
td.colonna-azioni .azioni{display:flex;align-items:center;gap:2px;flex-wrap:nowrap}
td.colonna-azioni .btn{
  width:32px;height:32px;padding:0;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;background:transparent;
}
td.colonna-azioni .btn:hover{background:var(--ic-surface-2)}
td.colonna-azioni .btn i{font-size:14px}
td.colonna-azioni .spaced{margin:0}
/* in vista card le azioni restano in fondo, allineate a destra */
@media (max-width:767.98px){
  table.ic-cards td.colonna-azioni form{justify-content:flex-end;width:100%}
}

/* ---------- riquadri di riepilogo della dashboard ---------- */
.ic-stat{
  display:flex;flex-direction:column;gap:4px;height:100%;
  padding:20px;text-decoration:none;
  background:var(--ic-surface);border:1px solid var(--ic-border);border-radius:var(--ic-r);
  transition:border-color .14s ease, transform .14s ease;
}
.ic-stat:hover{border-color:var(--ic-brand-500);transform:translateY(-2px);text-decoration:none}
.ic-stat-icona{
  width:38px;height:38px;border-radius:10px;margin-bottom:8px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(var(--ic-brand-rgb),.14);color:var(--ic-brand-500);font-size:16px;
}
.ic-stat-numero{
  font-family:var(--ic-font-display);font-size:30px;font-weight:700;
  line-height:1.05;letter-spacing:-.03em;color:var(--ic-text);
}
.ic-stat-titolo{color:var(--ic-text-2);font-size:13px;font-weight:500}

/* ---------- collegamenti rapidi ---------- */
.ic-collegamenti{display:flex;flex-direction:column;gap:2px}
.ic-collegamenti a{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:9px;
  color:var(--ic-text-2);font-size:14px;font-weight:500;text-decoration:none;
  transition:background-color .12s ease,color .12s ease;
}
.ic-collegamenti a:hover{background:var(--ic-surface-2);color:var(--ic-text);text-decoration:none}
.ic-collegamenti i{width:18px;text-align:center;color:var(--ic-text-3);font-size:14px}
.ic-collegamenti a:hover i{color:var(--ic-brand-500)}

/* sul fondo scuro il rosso 500 si spegne: per le icone si usa il 400 */
[data-bs-theme="dark"] .ic-stat-icona{background:rgba(var(--ic-brand-rgb),.20);color:var(--ic-brand-400)}
[data-bs-theme="dark"] .ic-collegamenti a:hover i{color:var(--ic-brand-400)}

/* ---------- pulsanti: chiusura del blu di Metronic ----------
   Metronic definisce gli stati con selettori molto specifici
   (.btn.btn-primary:hover:not(.btn-active), .btn-check:active + .btn…):
   piu' specifici dei nostri, quindi al passaggio del mouse il pulsante
   tornava blu. Qui si coprono tutti gli stati, una volta sola, per tutto
   il gestionale e per le pagine di accesso. */
.btn.btn-primary,
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary.active,
.btn.btn-primary.show,
.btn.btn-primary:hover:not(.btn-active),
.btn.btn-primary:focus:not(.btn-active),
.btn.btn-primary:active:not(.btn-active),
.btn.btn-primary.active:not(.btn-active),
.btn.btn-primary.show:not(.btn-active),
.show > .btn.btn-primary.dropdown-toggle,
.btn-check:checked + .btn.btn-primary,
.btn-check:active + .btn.btn-primary{
  background-color:var(--ic-brand-500)!important;
  border-color:var(--ic-brand-500)!important;
  color:#fff!important;
}
.btn.btn-primary:hover:not(:disabled),
.btn.btn-primary:focus-visible{
  background-color:var(--ic-brand-400)!important;
  border-color:var(--ic-brand-400)!important;
}
.btn.btn-primary:active:not(:disabled),
.btn.btn-primary.active{
  background-color:var(--ic-brand-600)!important;
  border-color:var(--ic-brand-600)!important;
}
.btn.btn-primary:focus-visible{
  box-shadow:0 0 0 3px rgba(var(--ic-brand-rgb),.35)!important;
}
.btn.btn-primary:disabled,.btn.btn-primary.disabled{
  background-color:var(--ic-brand-600)!important;border-color:transparent!important;opacity:.5;
}

/* stessa cosa per i link "primary" e per gli stati testuali del tema */
.link-primary,.text-primary{color:var(--ic-brand-500)!important}
.link-primary:hover,a.text-hover-primary:hover{color:var(--ic-brand-400)!important}
.btn.btn-light-primary,
.btn.btn-light-primary:hover:not(.btn-active),
.btn.btn-light-primary:focus:not(.btn-active){
  background-color:rgba(var(--ic-brand-rgb),.14)!important;
  color:var(--ic-brand-500)!important;border-color:transparent!important;
}
[data-bs-theme="dark"] .link-primary,
[data-bs-theme="dark"] .btn.btn-light-primary{color:var(--ic-brand-400)!important}

/* i pulsanti secondari non devono virare al blu al passaggio del mouse */
.btn.btn-secondary,
.btn.btn-secondary:hover:not(.btn-active),
.btn.btn-secondary:focus:not(.btn-active),
.btn.btn-secondary:active:not(.btn-active){
  background-color:var(--ic-surface-2)!important;
  border-color:var(--ic-border)!important;
  color:var(--ic-text)!important;
}
.btn.btn-secondary:hover:not(:disabled){border-color:var(--ic-text-3)!important}

/* ---------- verbo che ruota sotto lo slogan ----------
   Cinque parole nella stessa cella di griglia: una alla volta, 2 secondi
   ciascuna, ciclo di 10. Nessuna libreria, nessun JavaScript.
   Solo verbi che il prodotto fa gia' oggi: "pianifica" entrera' quando
   esistera' davvero. */
.ic-verbi{
  display:inline-grid;
  margin:6px 0 0;
  min-height:1.6em;
  font-family:var(--ic-font-display);
  font-size:clamp(15px,1.6vw,19px);
  font-weight:500;
  letter-spacing:.01em;
  color:var(--ic-brand-400);
  text-shadow:0 2px 14px rgba(0,0,0,.5);
}
.ic-verbi span{
  grid-area:1 / 1;
  opacity:0;
  animation:ic-verbo 10s infinite;
}
@keyframes ic-verbo{
  0%   { opacity:0; transform:translateY(6px) }
  3%   { opacity:1; transform:none }
  17%  { opacity:1; transform:none }
  20%  { opacity:0; transform:translateY(-6px) }
  100% { opacity:0 }
}
/* chi ha chiesto meno animazioni vede solo la prima parola, ferma */
@media (prefers-reduced-motion: reduce){
  .ic-verbi span{animation:none;opacity:0}
  .ic-verbi span:first-child{opacity:1}
}
@media (max-width:991.98px){
  .ic-verbi{justify-items:center;text-align:center}
}

/* ---------- le pagine di accesso restano scure anche in tema chiaro ----------
   Stesso motivo della sidebar: il logo e' bianco su trasparente e sul fondo
   chiaro la scritta CODE spariva. Qui il tema chiaro non si applica. */
[data-bs-theme="light"] .ic-auth-card{
  background:rgba(18,21,27,.88);
  border-color:#242A35;
  box-shadow:0 1px 2px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.5);
}
[data-bs-theme="light"] .ic-auth-card h1,
[data-bs-theme="light"] .ic-auth-card .text-gray-900{color:#E8EAEE!important}
[data-bs-theme="light"] .ic-auth-card .text-gray-500{color:#9AA3B2!important}
[data-bs-theme="light"] .ic-auth-card .form-control{
  background:#181C24!important;border-color:#242A35;color:#E8EAEE;
}
[data-bs-theme="light"] .ic-auth-card .form-control::placeholder{color:#646E7E}
[data-bs-theme="light"] .ic-auth-card .form-control:-webkit-autofill,
[data-bs-theme="light"] .ic-auth-card .form-control:-webkit-autofill:hover,
[data-bs-theme="light"] .ic-auth-card .form-control:-webkit-autofill:focus{
  -webkit-text-fill-color:#E8EAEE;
  -webkit-box-shadow:0 0 0 1000px #181C24 inset;
}
[data-bs-theme="light"] .ic-auth-card .link-primary{color:var(--ic-brand-400)!important}
[data-bs-theme="light"] .ic-error-title{color:#E8EAEE}
[data-bs-theme="light"] .ic-error-text{color:#9AA3B2}
[data-bs-theme="light"] .btn-ic-ghost{border-color:#242A35;color:#9AA3B2}
[data-bs-theme="light"] .btn-ic-ghost:hover{border-color:#646E7E;color:#E8EAEE}
[data-bs-theme="light"] .ic-verbi{color:var(--ic-brand-400)}

/* ---------- btn-success = azione principale ----------
   Nei template i pulsanti "Salva", "Aggiungi", "Conferma", "Accetta" sono
   tutti .btn-success: 55 pulsanti verdi che sono in realta' l'azione
   principale della pagina, non uno stato di successo. Invece di toccare 55
   template, si rimappa qui: il verde resta disponibile per i badge di stato,
   dove significa davvero "va bene". */
.btn.btn-success,
.btn.btn-success:hover:not(.btn-active),
.btn.btn-success:focus:not(.btn-active),
.btn.btn-success:active:not(.btn-active),
.btn.btn-success.active,
.btn.btn-success.show,
.btn-check:checked + .btn.btn-success{
  background-color:var(--ic-brand-500)!important;
  border-color:var(--ic-brand-500)!important;
  color:#fff!important;
}
.btn.btn-success:hover:not(:disabled){
  background-color:var(--ic-brand-400)!important;
  border-color:var(--ic-brand-400)!important;
}
.btn.btn-success:active:not(:disabled){
  background-color:var(--ic-brand-600)!important;
  border-color:var(--ic-brand-600)!important;
}
/* le icone-azione dentro le tabelle restano colorate per semantica */
td.colonna-azioni .btn.text-success{color:var(--ic-success)!important;background:transparent!important}

/* ---------- colonna azioni: tutte le icone su una riga sola ----------
   Nei template la cella azioni non ha una classe sua: e' marcata con
   .white-space-nowrap, che era una classe del vecchio tema Falcon e in
   Metronic non esiste. Risultato: le icone andavano a capo 2+2.
   Qui si ripristina quella classe e si rende il gruppo di icone un blocco
   in linea che non va mai a capo, qualunque sia il numero di icone. */
.white-space-nowrap{white-space:nowrap!important}

td:has(> form) , td.colonna-azioni{white-space:nowrap;width:1%}
td > form{
  display:inline-flex;flex-wrap:nowrap;align-items:center;
  gap:2px;margin:0;vertical-align:middle;
}
td.text-end > form{justify-content:flex-end}
td > form > .btn,
td.colonna-azioni .btn{
  flex:0 0 auto;
  width:32px;height:32px;padding:0;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;background:transparent;margin:0;
}
td > form > .btn:hover{background:var(--ic-surface-2)}
td > form > .btn i{font-size:14px}
/* le icone conservano il loro colore: verde = apri, rosso = elimina */
td > form > .btn.text-danger{color:var(--ic-danger)!important}
td > form > .btn.text-success{color:var(--ic-success)!important}
td > form > .btn.text-primary{color:var(--ic-brand-500)!important}
[data-bs-theme="dark"] td > form > .btn.text-primary{color:var(--ic-brand-400)!important}

/* in vista card le azioni restano in fondo, allineate a destra */
@media (max-width:767.98px){
  table.ic-cards td > form{justify-content:flex-end;width:100%}
}

/* Le icone azione erano tre rosse e una verde per riga: su venti righe
   diventa una parete di colore che non distingue piu' niente. A riposo
   sono neutre, il colore compare al passaggio del mouse - e resta solo
   l'eliminazione a essere rossa, perche' e' l'unica irreversibile. */
td > form > .btn.text-primary,
td > form > .btn.text-success,
td > form > .btn.text-danger,
td.colonna-azioni .btn{color:var(--ic-text-3)!important}

td > form > .btn.text-primary:hover,
td > form > .btn.text-success:hover{color:var(--ic-brand-500)!important;background:var(--ic-surface-2)}
[data-bs-theme="dark"] td > form > .btn.text-primary:hover,
[data-bs-theme="dark"] td > form > .btn.text-success:hover{color:var(--ic-brand-400)!important}

td > form > .btn.text-danger:hover{
  color:var(--ic-danger)!important;
  background:color-mix(in srgb, var(--ic-danger) 12%, transparent);
}

/* ---------- obbligatorio / facoltativo ----------
   I due segni li aggiunge incode-ui.js leggendo l'attributo "required":
   una sola fonte di verita', nessuna dicitura da mantenere a mano. */
.ic-obbligatorio{
  color:var(--ic-brand-500);
  font-weight:700;
  margin-left:3px;
  cursor:help;
}
[data-bs-theme="dark"] .ic-obbligatorio{color:var(--ic-brand-400)}

.ic-facoltativo{
  margin-left:8px;
  color:var(--ic-text-3);
  font-size:11px;
  font-weight:500;
  letter-spacing:.04em;
  text-transform:lowercase;
  font-style:italic;
}

/* ---------- finestra di conferma ----------
   Sostituisce il confirm() del browser. Vive dentro incode-ui.js, non serve
   markup nei template. */
.ic-modale-sfondo{
  position:fixed;inset:0;z-index:10000;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(3,5,8,.62);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;
  transition:opacity .14s ease, visibility .14s ease;
}
.ic-modale-sfondo.visibile{opacity:1;visibility:visible}

.ic-modale{
  width:100%;max-width:420px;
  background:var(--ic-surface);
  border:1px solid var(--ic-border);
  border-radius:14px;
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 24px 60px rgba(0,0,0,.4);
  padding:28px 26px 22px;
  text-align:center;
  transform:translateY(10px) scale(.98);
  transition:transform .16s cubic-bezier(.2,.8,.3,1);
}
.ic-modale-sfondo.visibile .ic-modale{transform:none}

.ic-modale-icona{
  width:52px;height:52px;margin:0 auto 16px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
  background:rgba(var(--ic-brand-rgb),.14);
  color:var(--ic-brand-500);
}
.ic-modale-distruttiva .ic-modale-icona{
  background:color-mix(in srgb, var(--ic-danger) 14%, transparent);
  color:var(--ic-danger);
}
[data-bs-theme="dark"] .ic-modale-icona{color:var(--ic-brand-400)}

.ic-modale-titolo{
  font-family:var(--ic-font-display);
  font-size:19px;font-weight:600;letter-spacing:-.01em;
  color:var(--ic-text);margin:0 0 8px;
}
.ic-modale-testo{
  color:var(--ic-text-2);font-size:14.5px;line-height:1.55;margin:0 0 22px;
}
.ic-modale-testo strong{color:var(--ic-text);font-weight:600}

.ic-modale-azioni{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.ic-modale-azioni .btn{min-width:132px}
/* il pulsante che distrugge e' rosso pieno solo qui, dove la scelta e' esplicita */
.ic-modale-azioni .btn.ic-distruttivo,
.ic-modale-azioni .btn.btn-primary.ic-distruttivo{
  background-color:var(--ic-danger)!important;
  border-color:var(--ic-danger)!important;
  color:#fff!important;
  box-shadow:none!important;
}
.ic-modale-azioni .btn.ic-distruttivo:hover{filter:brightness(1.08)}

@media (max-width:479.98px){
  .ic-modale-azioni{flex-direction:column-reverse}
  .ic-modale-azioni .btn{width:100%}
}
.ic-modale-icona i{color:inherit}

/* ---------- scheda utente ---------- */
.ic-profilo-testa{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap}
.ic-avatar{
  width:64px;height:64px;flex:0 0 64px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ic-font-display);font-size:22px;font-weight:700;letter-spacing:.02em;
  background:linear-gradient(145deg,var(--ic-brand-500),var(--ic-brand-700));color:#fff;
}
.ic-profilo-identita{flex:1 1 260px;min-width:0}
.ic-profilo-nome{
  font-family:var(--ic-font-display);font-size:22px;font-weight:600;
  letter-spacing:-.02em;color:var(--ic-text);margin:0 0 2px;
}
.ic-profilo-azienda{color:var(--ic-text-2);font-size:14px;margin:0 0 10px}
.ic-profilo-etichette{display:flex;gap:6px;flex-wrap:wrap}
.ic-profilo-azioni{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}

.ic-profilo-dati{
  display:grid;gap:2px 28px;margin-top:22px;padding-top:20px;
  border-top:1px solid var(--ic-border-soft);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.ic-dato{display:flex;flex-direction:column;gap:3px;padding:8px 0}
.ic-dato-etichetta{
  font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ic-text-3);
}
.ic-dato-valore{font-size:14.5px;color:var(--ic-text);word-break:break-word}
a.ic-dato-valore{color:var(--ic-brand-500);text-decoration:none}
a.ic-dato-valore:hover{text-decoration:underline;text-underline-offset:3px}
[data-bs-theme="dark"] a.ic-dato-valore{color:var(--ic-brand-400)}

/* ---------- elenchi cronologici ---------- */
.ic-cronologia{list-style:none;margin:0;padding:0}
.ic-cronologia > li{
  display:flex;align-items:baseline;gap:16px;
  padding:11px 0;border-top:1px solid var(--ic-border-soft);
}
.ic-cronologia > li:first-child{border-top:0}
.ic-cronologia-testo{flex:1;min-width:0;color:var(--ic-text);font-size:14px;line-height:1.45}
.ic-cronologia-testo small{display:block;color:var(--ic-text-3);font-size:12px;margin-top:2px}
.ic-cronologia-quando{
  flex:0 0 auto;color:var(--ic-text-3);font-size:12px;
  font-family:var(--ic-font-mono);white-space:nowrap;
}
.ic-cronologia-data > li{align-items:center}
.ic-data-blocco{
  flex:0 0 46px;width:46px;border-radius:10px;padding:5px 0;text-align:center;
  background:var(--ic-surface-2);border:1px solid var(--ic-border);
}
.ic-data-mese{
  display:block;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ic-brand-500);
}
[data-bs-theme="dark"] .ic-data-mese{color:var(--ic-brand-400)}
.ic-data-giorno{
  display:block;font-family:var(--ic-font-display);
  font-size:17px;font-weight:600;line-height:1.1;color:var(--ic-text);
}
.badge.bg-secondary{background:var(--ic-surface-2)!important;color:var(--ic-text-2)!important}

@media (max-width:575.98px){
  .ic-profilo-azioni{margin-left:0;width:100%}
  .ic-profilo-azioni .btn{flex:1}
}

/* Rete di sicurezza: pulsanti scritti senza la classe .btn (Bootstrap
   applicherebbe solo il colore di sfondo, senza forma ne' spaziatura:
   veniva fuori un rettangolo verde acido attorno al testo). */
a[class*="btn-"]:not(.btn):not(.btn-close):not(.btn-check),
button[class*="btn-"]:not(.btn):not(.btn-close):not(.btn-check){
  display:inline-flex;align-items:center;gap:6px;
  padding:.36rem .7rem;border-radius:8px;
  background:var(--ic-surface-2)!important;
  border:1px solid var(--ic-border)!important;
  color:var(--ic-text)!important;
  font-size:13px;font-weight:600;text-decoration:none;
}

.ic-empty.ic-empty-grande{min-height:260px;gap:14px;padding:44px 24px;max-width:660px;margin:0 auto;line-height:1.6}
.ic-empty.ic-empty-grande i{font-size:30px}
.ic-empty.ic-empty-grande strong{color:var(--ic-text);font-size:16px}

/* ---------- dimensione dei pulsanti ----------
   Metronic li fa molto generosi (.75rem 1.5rem, 1.15rem di testo): in una
   pagina con cinque azioni in fila diventano ingombranti. Qui una taglia
   piu' compatta, coerente con la densita' delle tabelle. */
.btn{
  --bs-btn-padding-y:.5rem;
  --bs-btn-padding-x:.95rem;
  --bs-btn-font-size:13.5px;
  padding:.5rem .95rem;
  font-size:13.5px;
  line-height:1.35;
  border-radius:9px;
}
.btn.btn-sm{
  --bs-btn-padding-y:.34rem;
  --bs-btn-padding-x:.7rem;
  --bs-btn-font-size:12.5px;
  padding:.34rem .7rem;
  font-size:12.5px;
  border-radius:8px;
}
.btn.btn-lg{padding:.62rem 1.2rem;font-size:15px}
.btn i{font-size:13px}
.btn.btn-sm i{font-size:12px}
/* le icone-azione nelle tabelle hanno gia' la loro misura: non toccarle */
td > form > .btn,
td.colonna-azioni .btn{padding:0;font-size:inherit}