/* ========================================================================
 * Venduto CU — Tema "ContributoUtile" v1.0 (light, sidebar verticale)
 *
 * Allineato graficamente al gestionale: sfondo light, sidebar dark navy,
 * banner top rosso bordeaux, palette pastello multi-colore per sezione,
 * tabelle bianche con righe alternate.
 *
 * Compatibility: i nomi di classe storici (.card, .dark-table, .btn-lime,
 * .input-dark, .pill-*) sono PRESERVATI ma ridipinti — così i template
 * non devono cambiare nome classe.
 * ====================================================================== */

:root {
  /* === Palette base === */
  --bg:           #f4f6fb;        /* sfondo pagina */
  --surface:      #ffffff;        /* card */
  --surface-alt: #f7f8fc;         /* riga zebra, header tabella */
  --border:       #e5e8f0;        /* bordi delicati */
  --border-strong:#c8cee0;
  --text:         #1a2747;        /* testo body */
  --text-strong:  #0f1d3d;        /* titoli, navy bold */
  --muted:        #6c7794;        /* testo secondario */
  --soft:         #94a0bd;        /* placeholder, dettagli minori */

  /* === Sidebar === */
  --sidebar-bg:        #0d2340;
  --sidebar-bg-hover:  #14305a;
  --sidebar-text:      #d8def0;
  --sidebar-muted:     #8a96b4;
  --sidebar-active-from:#3b82f6;
  --sidebar-active-to:  #60a5fa;

  /* === Banner top rosso === */
  --topbar-red: #8b1538;

  /* === Accent primario (azzurro gestionale) === */
  --primary:      #3b82f6;
  --primary-700:  #1d4ed8;
  --primary-50:   #eff6ff;

  /* === Giallo CU (preservato per Budget + Record) === */
  --lime:         #ffd02e;
  --lime-alt:     #e6b327;
  --lime-on:      #1a1300;        /* testo su giallo */

  /* === Stato === */
  --success:      #10b981;
  --success-50:   #ecfdf5;
  --danger:       #ef4444;
  --danger-50:    #fef2f2;
  --warn:         #f59e0b;
  --warn-50:      #fffbeb;

  /* === Pastello sezione === */
  --sec-home:     #dbeafe; --sec-home-ink:     #1e40af; /* Home / Andamento */
  --sec-comm:     #d1fae5; --sec-comm-ink:     #065f46; /* Commerciali */
  --sec-cli:      #ede9fe; --sec-cli-ink:      #5b21b6; /* Clienti */
  --sec-prod:     #fce7f3; --sec-prod-ink:     #9d174d; /* Prodotti */
  --sec-contr:    #e0f2fe; --sec-contr-ink:    #075985; /* Contratti */
  --sec-budget:   #fef3c7; --sec-budget-ink:   #92400e; /* Budget */
  --sec-amm:      #ffedd5; --sec-amm-ink:      #9a3412; /* Amministrazione */
  --sec-admin:    #e5e7eb; --sec-admin-ink:    #374151; /* Admin */

  /* === Shadow === */
  --shadow-sm: 0 1px 2px rgba(15, 29, 61, 0.04);
  --shadow:    0 2px 8px rgba(15, 29, 61, 0.06), 0 1px 2px rgba(15, 29, 61, 0.04);
  --shadow-lg: 0 8px 24px rgba(15, 29, 61, 0.10);

  /* === Radii === */
  --r-sm:  8px;
  --r:     14px;
  --r-lg:  20px;

  /* === Token legacy retro-compatibili === */
  --ink: var(--bg);
  --panel: var(--surface);
  --card: var(--surface);
  --cardAlt: var(--surface-alt);
  --line: var(--border);
}

/* ========== Base ========== */
* { box-sizing: border-box; }
html, body { background: var(--bg); color: var(--text); }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 { color: var(--text-strong); font-weight: 700; }
h1 { font-size: 2rem; letter-spacing: -0.025em; color: var(--text-strong); }
h2 { font-size: 1.125rem; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-700); }

/* Topbar bordeaux (sottile, fixed top) */
.topbar-red {
  position: fixed; top: 0; left: 0; right: 0;
  height: 6px; background: var(--topbar-red); z-index: 60;
}

/* Loader navigazione: barra di progresso indeterminata sopra la topbar.
   Si attiva su click di link interni / submit form (sidebar.js). */
.nav-loader {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 70; pointer-events: none;
  background: transparent;
  overflow: hidden;
  opacity: 0; transition: opacity 0.15s ease;
}
.nav-loader.is-loading { opacity: 1; }
.nav-loader::before {
  content: ''; display: block; height: 100%;
  background: linear-gradient(90deg, #60a5fa, #3b82f6, #1d4ed8, #3b82f6, #60a5fa);
  background-size: 200% 100%;
  animation: nav-loader-slide 1s linear infinite;
  width: 100%;
}
@keyframes nav-loader-slide {
  0%   { background-position: 200% 0; }
  100% { background-position: 0 0; }
}

/* Spinner overlay (centro pagina) per navigazioni più lente di 350ms.
   Si mostra solo dopo questa soglia per evitare lampeggi su nav rapide. */
.nav-overlay {
  position: fixed; inset: 0; z-index: 65;
  background: rgba(244, 246, 251, 0.55); backdrop-filter: blur(1px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s ease;
  pointer-events: none;
}
.nav-overlay.is-visible { opacity: 1; pointer-events: auto; }
.nav-overlay .spinner {
  width: 48px; height: 48px;
  border: 4px solid #c8cee0; border-top-color: #3b82f6;
  border-radius: 50%;
  animation: nav-spin 0.7s linear infinite;
}
@keyframes nav-spin { to { transform: rotate(360deg); } }

/* ========== Layout app shell ========== */
.app-shell {
  display: flex;
  min-height: 100vh;
  padding-top: 6px; /* spazio per topbar-red */
}
.app-sidebar {
  width: 240px;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex; flex-direction: column;
  position: sticky; top: 6px;
  height: calc(100vh - 6px);
  padding: 18px 14px 14px;
  flex-shrink: 0;
  z-index: 30;
}
.app-sidebar-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 12px;
}
.app-sidebar-logo img { width: 36px; height: 36px; object-fit: contain; }
.app-sidebar-logo .brand { display: flex; flex-direction: column; line-height: 1.15; }
.app-sidebar-logo .brand-1 {
  font-weight: 800; font-size: 0.95rem; letter-spacing: 0.02em; color: #fff;
}
.app-sidebar-logo .brand-2 {
  font-size: 9px; font-weight: 600; letter-spacing: 0.18em;
  color: #ffd02e; text-transform: uppercase;
}
.app-sidebar-logo .brand-ver {
  font-size: 10px; color: var(--sidebar-muted);
  margin-top: 2px; font-variant-numeric: tabular-nums;
}

.app-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; overflow-y: auto; }
.app-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  color: var(--sidebar-text); font-size: 0.875rem; font-weight: 500;
  transition: background 0.15s, color 0.15s;
  position: relative;
}
.app-nav-item:hover { background: var(--sidebar-bg-hover); color: #fff; }
.app-nav-item .icon { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0.85; font-size: 1.05rem; }
.app-nav-item.active {
  background: linear-gradient(90deg, var(--sidebar-active-from), var(--sidebar-active-to));
  color: #fff; font-weight: 600;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
}
.app-nav-item.active .icon { opacity: 1; }
.app-nav-item.active::after {
  content: '›'; position: absolute; right: 12px; font-weight: 700; opacity: 0.85;
}

/* v1.8.10: sub-menu sidebar (parent con children + chevron + lista figli) */
.app-nav-group { display: flex; flex-direction: column; }
.app-nav-group .app-nav-item.parent { padding-right: 32px; }
.app-nav-group .chevron {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  opacity: .6; transition: transform .15s, opacity .15s;
  font-size: .85rem; cursor: pointer;
  padding: 2px 6px; border-radius: 6px;
}
.app-nav-group .chevron:hover { opacity: 1; background: rgba(255,255,255,.08); }
.app-nav-group.open .chevron { transform: translateY(-50%) rotate(180deg); opacity: .95; }
/* Quando il parent è attivo (active::after stampa '›') nascondo il caret per evitare collisione col chevron */
.app-nav-group .app-nav-item.parent.active::after { content: none; }
.app-nav-children {
  display: none; flex-direction: column; gap: 2px;
  margin: 2px 0 4px 36px; padding-left: 8px;
  border-left: 2px solid rgba(255,255,255,.08);
}
.app-nav-group.open .app-nav-children { display: flex; }
.app-nav-subitem {
  padding: 6px 10px; border-radius: 8px;
  color: var(--sidebar-muted, rgba(255,255,255,.6));
  font-size: .78rem; font-weight: 500;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.app-nav-subitem:hover { background: rgba(255,255,255,.08); color: #fff; }
.app-nav-subitem.active {
  color: #fff; background: rgba(59,130,246,.18); font-weight: 600;
}
@media (max-width: 1023px) {
  .app-nav-group.has-active .app-nav-children { display: flex; }
}

/* v1.49.73: widget calendario sidebar rimosso (regole .app-sidebar-cal
   eliminate — l'elemento #sidebarCal non esiste più dal v1.49.72). */

/* Main */
.app-main {
  flex: 1; min-width: 0;
  padding: 28px 32px 60px;
  max-width: 100%;
}
.app-page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 24px;
}
.app-greeting h1 { font-size: 2rem; margin: 0; }
.app-greeting .sub { color: var(--muted); font-size: 0.875rem; margin-top: 4px; }
.user-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 8px 14px 8px 10px;
  box-shadow: var(--shadow-sm);
}
.user-card .avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #60a5fa);
  color: #fff; font-weight: 700; font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
}
.user-card .name { font-weight: 600; color: var(--text-strong); font-size: 0.875rem; }
.user-card .role { color: var(--muted); font-size: 0.7rem; text-transform: capitalize; }
.user-card .logout {
  margin-left: 6px; color: var(--muted); font-size: 1.1rem;
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.user-card .logout:hover { background: var(--danger-50); color: var(--danger); }

/* ========== Card ========== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.card-soft { background: var(--surface-alt); }

/* v1.2: tinte pastello per le box della pagina Amministrazione.
   Sfondo tenue + bordo coordinato; le sub-card interne restano bianche/leggibili. */
.card-tint-green { background: var(--success-50); border-color: #a7f3d0; }
.card-tint-red   { background: var(--danger-50);  border-color: #fecaca; }
.card-tint-blue  { background: var(--primary-50); border-color: #bfdbfe; }
/* Le tabelle dentro le box tintate restano su superficie bianca (righe dispari
   trasparenti → eviterei che la tinta filtri sotto i dati). */
.card-tint-green .dark-table,
.card-tint-red .dark-table,
.card-tint-blue .dark-table { background: var(--surface); border-radius: var(--r-sm); }

/* Card pastello per sezione (icona + tinta) */
.section-card {
  border-radius: var(--r-lg); padding: 20px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  position: relative;
  background: var(--surface);
}
.section-card .sec-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem; margin-bottom: 14px;
}
.section-card.sec-home   { background: linear-gradient(180deg, var(--sec-home), #fff); }
.section-card.sec-comm   { background: linear-gradient(180deg, var(--sec-comm), #fff); }
.section-card.sec-cli    { background: linear-gradient(180deg, var(--sec-cli), #fff); }
.section-card.sec-prod   { background: linear-gradient(180deg, var(--sec-prod), #fff); }
.section-card.sec-contr  { background: linear-gradient(180deg, var(--sec-contr), #fff); }
.section-card.sec-budget { background: linear-gradient(180deg, var(--sec-budget), #fff); }
.section-card.sec-amm    { background: linear-gradient(180deg, var(--sec-amm), #fff); }
.section-card.sec-admin  { background: linear-gradient(180deg, var(--sec-admin), #fff); }

.section-card.sec-home   .sec-icon { background: #bfdbfe; color: var(--sec-home-ink); }
.section-card.sec-comm   .sec-icon { background: #a7f3d0; color: var(--sec-comm-ink); }
.section-card.sec-cli    .sec-icon { background: #ddd6fe; color: var(--sec-cli-ink); }
.section-card.sec-prod   .sec-icon { background: #fbcfe8; color: var(--sec-prod-ink); }
.section-card.sec-contr  .sec-icon { background: #bae6fd; color: var(--sec-contr-ink); }
.section-card.sec-budget .sec-icon { background: #fde68a; color: var(--sec-budget-ink); }
.section-card.sec-amm    .sec-icon { background: #fed7aa; color: var(--sec-amm-ink); }
.section-card.sec-admin  .sec-icon { background: #d1d5db; color: var(--sec-admin-ink); }

/* KPI card (numeri grossi) */
.kpi-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.kpi-card .kpi-label {
  font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.kpi-card .kpi-value {
  font-size: 1.75rem; font-weight: 800; color: var(--text-strong);
  margin-top: 4px; line-height: 1.1;
}
.kpi-card .kpi-sub { font-size: 0.75rem; color: var(--muted); margin-top: 4px; }
.kpi-card.kpi-primary {
  background: linear-gradient(135deg, var(--primary), #60a5fa);
  border-color: transparent; color: #fff;
}
.kpi-card.kpi-primary .kpi-label,
.kpi-card.kpi-primary .kpi-sub { color: rgba(255,255,255,0.85); }
.kpi-card.kpi-primary .kpi-value { color: #fff; }
.kpi-card.kpi-lime {
  background: linear-gradient(135deg, var(--lime), #ffe17a);
  border-color: transparent; color: var(--lime-on);
}
.kpi-card.kpi-lime .kpi-label,
.kpi-card.kpi-lime .kpi-sub { color: rgba(26,19,0,0.7); }
.kpi-card.kpi-lime .kpi-value { color: var(--lime-on); }

/* Bottom card "Obiettivo annuale" stile gestionale */
.obj-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 14px 18px;
  box-shadow: var(--shadow-sm);
}
.obj-card .obj-icon {
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--sec-home); color: var(--sec-home-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
}
.obj-card .obj-body { flex: 1; min-width: 160px; }
.obj-card .obj-title { font-weight: 700; color: var(--text-strong); }
.obj-card .obj-vals { color: var(--muted); font-size: 0.85rem; margin-top: 2px; }
.obj-card .obj-vals .ok { color: var(--success); font-weight: 700; }

/* ========== Pills ========== */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 9999px;
  font-size: 0.7rem; font-weight: 600;
  background: var(--surface-alt); color: var(--muted);
  border: 1px solid var(--border);
}
.pill-lime  { background: var(--lime); color: var(--lime-on); border-color: var(--lime-alt); }
.pill-dark  { background: var(--text-strong); color: #fff; border-color: var(--text-strong); }
.pill-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.pill-outline { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.pill-outline:hover { border-color: var(--primary); color: var(--primary); }
.pill-muted { background: var(--surface-alt); color: var(--muted); border-color: var(--border); }
.pill-success { background: var(--success-50); color: var(--success); border-color: #a7f3d0; }
.pill-danger  { background: var(--danger-50); color: var(--danger); border-color: #fecaca; }
.pill-info    { background: var(--primary-50); color: var(--primary-700); border-color: #bfdbfe; }

/* Pills semantiche per Team (sostituiscono pill-dark/pill-muted) */
.pill-cnp     { background: #e0f2fe; color: #0369a1; border-color: #bae6fd; }
.pill-advisor { background: #c7d2fe; color: #3730a3; border-color: #a5b4fc; }
.pill-neutral { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }

/* ========== Tabelle (light, pastello come il gestionale) ========== */
.dark-table { width: 100%; background: transparent; }
.dark-table thead {
  font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.dark-table thead th {
  padding: 14px 10px; text-align: left;
  border-bottom: 1px solid #bfdbfe;
  font-weight: 700; color: #1d4ed8;
  background: #dbeafe;
}
.dark-table thead th:first-child { border-top-left-radius: var(--r-sm); }
.dark-table thead th:last-child { border-top-right-radius: var(--r-sm); }
.dark-table tbody td {
  padding: 12px 10px; border-bottom: 1px solid var(--border);
  font-size: 0.875rem; color: var(--text);
}
.dark-table tbody tr:nth-child(even) { background: #fafbff; }
.dark-table tbody tr:hover { background: #eef4ff; }
.dark-table tbody tr:last-child td { border-bottom: 0; }
.dark-table .right { text-align: right; font-variant-numeric: tabular-nums; }
/* v1.49.38: larghezze colonne Uff. Tecnico. Applicate SOLO nella macro
   pratiche_table → nessun impatto sulle altre .dark-table.
   .col-compact = shrink-to-fit (trucco width:1% + nowrap): la colonna N. contratto
   prende solo lo spazio del contenuto (è sempre una sigla corta senza spazi), e
   lo spazio liberato va alla ragione sociale.
   NB v1.49.38: rimosso il precedente min-width:280px su .col-wide — allargava la
   tabella oltre il viewport e, con centinaia di righe, la scrollbar orizzontale
   finiva irraggiungibile in fondo. Le larghezze le controlla ora l'utente
   (colonne ridimensionabili, resizable-cols.js). */
.dark-table th.col-compact, .dark-table td.col-compact { white-space: nowrap; width: 1%; }

/* v1.49.39: colonne ridimensionabili (resizable-cols.js). Solo tabelle .resizable.
   table-layout:fixed lo imposta il JS DOPO aver misurato i default; qui solo
   l'handle e il taglio dell'eccesso nelle celle-dati (non sui th, per non tagliare
   i dropdown dei filtri Excel che escono dalla cella). */
.dark-table.resizable tbody td { overflow: hidden; }
/* containing block per gli handle di resize (absolute). La prima riga header nel
   box scrollabile diventa sticky (specificità maggiore) senza perdere l'handle. */
.dark-table.resizable thead th { position: relative; }

/* v1.49.41: box scrollabile per le tabelle UF. La scrollbar orizzontale prima
   era in fondo alla tabella (centinaia di righe) → irraggiungibile. Vincolando
   l'altezza del box, la barra orizzontale resta sempre in fondo alla VIEWPORT
   del box; l'header (prima riga) è sticky così resta visibile scrollando. */
.ut-table-scroll { max-height: calc(100vh - 250px); overflow: auto; }
/* !important: vince sul position:relative dato agli th resizable (containing
   block dell'handle). Senza, la cascata non applicava lo sticky in modo
   affidabile. */
.ut-table-scroll thead tr:first-child th { position: sticky !important; top: 0; z-index: 11; }
/* v1.49.47: Scadenziario — header a 2 livelli. La 1ª riga (mesi) è già sticky
   sopra; qui rendo sticky anche la 2ª riga (settimane) subito sotto, così non
   sparisce scrollando. L'offset = altezza REALE della 1ª riga, misurata a runtime
   da scadenziario.js in --scad-h1 (robusto a font/padding/zoom); 44px è solo il
   fallback iniziale. Scoping su #tblScad per non toccare le righe filtri delle
   altre tabelle UT. */
.ut-table-scroll #tblScad thead tr:nth-child(2) th { position: sticky !important; top: var(--scad-h1, 44px); z-index: 10; }
/* v1.49.48: controlli filtro dentro le intestazioni delle prime 4 colonne.
   Annullo l'ereditarietà del thead (uppercase/bold/blu) e li rendo a blocco
   sotto l'etichetta. Filtri gestiti da excel-filter.js (data-col = indice cella). */
#tblScad thead th .scad-filter {
  /* v1.49.55: width non 100% ma con un margine a destra, così l'handle di resize
     (9px, absolute right:0) NON si sovrappone al filtro (nella stessa cella). */
  display: block; margin-top: 6px; width: calc(100% - 14px); box-sizing: border-box;
  font-weight: 400; text-transform: none; letter-spacing: normal;
  color: var(--text); font-size: 0.72rem; text-align: left;
  padding: 3px 6px; border: 1px solid #bfdbfe; border-radius: 4px;
  background: #fff; cursor: pointer; user-select: text;
}
#tblScad thead th input.scad-filter { cursor: text; }
/* v1.49.56: l'etichetta ordinabile mostra il cursore "click per ordinare" */
#tblScad thead th .sort-label { cursor: pointer; }
/* v1.49.49: stato attivo del toggle "solo con previsione" (il .pill-outline non
   ha una variante .active: la aggiungo qui). */
#scadToggleForecast.active { background: var(--primary); color: #fff; border-color: var(--primary); }
/* v1.49.53: celle editabili Scadenziario più visibili (prima bordo grigio molto
   chiaro su bianco, poco distinguibile). Bordo più marcato + sfondo tenue; al
   focus si evidenziano in blu. */
#tblScad .scad-cell,
#tblScad .scad-benef {
  text-align: right; border: 1px solid #94a3b8; border-radius: 4px;
  padding: 2px 6px; background: #f1f5f9; color: var(--text);
}
#tblScad .scad-cell { width: 96px; }
#tblScad .scad-benef { width: 120px; }
#tblScad .scad-cell:hover,
#tblScad .scad-benef:hover { border-color: #64748b; background: #e9eef5; }
#tblScad .scad-cell:focus,
#tblScad .scad-benef:focus {
  border-color: var(--primary); background: #fff; outline: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
}
.col-resize-handle {
  position: absolute; top: 0; right: 0; width: 9px; height: 100%;
  cursor: col-resize; user-select: none; z-index: 5;
}
/* v1.49.40: separatore verticale SEMPRE visibile (prima l'handle era
   trasparente → i bordi trascinabili erano invisibili e poco intuitivi). */
.col-resize-handle::after {
  content: ''; position: absolute; right: 3px; top: 22%;
  width: 2px; height: 56%; border-radius: 1px;
  background: rgba(29, 78, 216, 0.45);
}
.col-resize-handle:hover { background: rgba(37, 99, 235, 0.10); }
.col-resize-handle:hover::after,
.col-resize-handle:active::after {
  background: rgba(29, 78, 216, 0.95); width: 3px; top: 0; height: 100%;
}
.dark-table tfoot td {
  padding: 14px 10px;
  background: #fef3c7;
  border-top: 2px solid #fbbf24;
  font-weight: 700; color: #92400e;
}
.dark-table tfoot td:first-child { border-bottom-left-radius: var(--r-sm); }
.dark-table tfoot td:last-child { border-bottom-right-radius: var(--r-sm); }

/* Riga filtri (sotto header tabelle con Excel-style filters) */
.dark-table thead .filters th { background: #eff6ff; border-bottom: 1px solid #bfdbfe; }

/* Header sortable */
.dark-table.sortable thead th[data-sort] { cursor: pointer; user-select: none; transition: color 0.15s; }
.dark-table.sortable thead th[data-sort]:hover { color: var(--primary); }
.dark-table.sortable thead th[data-sort-active] { color: var(--primary); }
.sort-arrow { color: var(--primary); font-size: 0.7em; margin-left: 0.2em; }

/* Helpers di colore (riusate ovunque) — !important per battere Tailwind CDN */
.text-soft   { color: var(--muted); }
.text-muted  { color: var(--soft); }
.text-strong { color: var(--text-strong) !important; }
.text-lime    { color: var(--success) !important; font-weight: 700; }
.text-danger  { color: var(--danger) !important; font-weight: 700; }
.text-warning { color: #f59e0b !important; font-weight: 700; }
.bg-card     { background: var(--surface); }
.bg-cardAlt  { background: var(--surface-alt); }
.bg-lime     { background: var(--lime); }
.bg-ink      { background: var(--bg); }

/* Override globale Tailwind: in tema light il `text-white` ereditato dai
   template legacy diventa navy bold (era leggibile solo su sfondo dark).
   Eccezione: dentro elementi `.btn-primary`, `.kpi-card.kpi-primary`,
   `.app-sidebar`, banner toast → resta bianco perché il fondo è scuro. */
.text-white { color: var(--text-strong) !important; font-weight: 600; }
.btn-primary .text-white,
.btn-lime .text-white,
.btn-danger .text-white,
.app-sidebar .text-white,
.kpi-card.kpi-primary .text-white,
.user-card .avatar.text-white { color: #fff !important; }
/* Bottoni stessi (testo via classe direct) */
.btn-primary, .btn-lime { color: #fff !important; }
.btn-yellow { color: var(--lime-on) !important; }

/* Box su sfondo dark (es. budget mini-card sidebar) — se i template
   usano ancora background dark inline, neutralizza tipografia interna. */
.on-dark { color: #fff; }
.on-dark .text-soft { color: #cbd5e1; }
.on-dark .text-muted { color: #94a3b8; }

/* ========== Progress bar ========== */
.progress {
  background: var(--surface-alt);
  border-radius: 9999px; overflow: hidden; height: 8px;
}
.progress > div { height: 100%; border-radius: 9999px; transition: width 0.4s ease; }
.progress-lime > div { background: linear-gradient(90deg, var(--lime-alt), var(--lime)); }
.progress-amber > div { background: var(--warn); }
.progress-red > div   { background: var(--danger); }
.progress-blue > div  { background: linear-gradient(90deg, var(--primary-700), var(--primary)); }

/* ========== Input ========== */
.input-dark {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 9px 12px;
  color: var(--text);
  width: 100%;
  font-size: 0.875rem;
  font-family: inherit;
}
.input-dark:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.input-dark::placeholder { color: var(--soft); }
.input-dark[disabled] { background: var(--surface-alt); color: var(--muted); cursor: not-allowed; }

/* ========== Buttons ========== */
.btn-lime, .btn-primary {
  background: linear-gradient(135deg, var(--primary), #60a5fa);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 9px 18px;
  font-weight: 600; font-size: 0.875rem;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; transition: filter 0.15s, transform 0.05s;
  box-shadow: 0 2px 6px rgba(59,130,246,0.25);
}
.btn-lime:hover, .btn-primary:hover { filter: brightness(1.05); }
.btn-lime:active, .btn-primary:active { transform: translateY(1px); }
.btn-lime:disabled, .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* Variante budget/record: giallo CU */
.btn-yellow {
  background: linear-gradient(135deg, var(--lime-alt), var(--lime));
  color: var(--lime-on);
  border: none; border-radius: 10px;
  padding: 9px 18px;
  font-weight: 700; font-size: 0.875rem;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; box-shadow: 0 2px 6px rgba(255,208,46,0.3);
}

.btn-dark {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 0.875rem;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; transition: background 0.15s;
}
.btn-dark:hover { background: var(--surface-alt); }

.btn-danger {
  background: var(--danger); color: #fff;
  border: none; border-radius: 10px; padding: 8px 14px;
  font-weight: 600; cursor: pointer;
}

/* ========== Scrollbar ========== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--soft); }

/* ========== Pannelli collassabili (data-panel-id) ========== */
.btn-collapse {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.18s ease, color 0.18s ease;
  user-select: none;
  line-height: 1;
}
.btn-collapse:hover { color: var(--primary); border-color: var(--primary); }
section[data-panel-id].collapsed .panel-body { display: none; }
section[data-panel-id].collapsed .btn-collapse { transform: rotate(-90deg); }
section[data-panel-id].collapsed { padding-bottom: 16px; }

/* ========== Mobile responsive ========== */
.sidebar-toggle {
  display: none;
  background: var(--surface); border: 1px solid var(--border);
  width: 42px; height: 42px; border-radius: 50%;
  align-items: center; justify-content: center;
  box-shadow: var(--shadow);
  position: fixed; top: 14px; left: 14px; z-index: 50;
  cursor: pointer; color: var(--text-strong);
}
.sidebar-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(15,29,61,0.5);
  z-index: 25;
}
@media (max-width: 1023px) {
  .app-sidebar {
    position: fixed; top: 6px; left: 0; bottom: 0;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    height: calc(100vh - 6px); width: 260px;
  }
  .app-shell.menu-open .app-sidebar { transform: translateX(0); }
  .app-shell.menu-open .sidebar-backdrop { display: block; }
  .sidebar-toggle { display: flex; }
  .app-main { padding: 70px 16px 60px; }
  .app-page-header { gap: 12px; }
}

/* ========== Helper layout ========== */
.right { text-align: right; }
.center { text-align: center; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ========== KPI pastel highlights (v1.6.4, CNP Live) ==========
   Box con sfondo pastello tenue per dare maggior visibilità ai KPI quando
   sono molti e impilati sullo stesso card. Sottile tinta + left-border colorato. */
.kpi-pastel { border-left: 3px solid transparent; transition: filter 0.15s; }
.kpi-pastel-blue   { background: rgba(126, 158, 255, 0.10); border-left-color: #7e9eff; }
.kpi-pastel-cyan   { background: rgba( 91, 214, 195, 0.10); border-left-color: #5bd6c3; }
.kpi-pastel-lime   { background: rgba(168, 220, 110, 0.12); border-left-color: #b2dc6e; }
.kpi-pastel-amber  { background: rgba(255, 208, 46,  0.10); border-left-color: #ffd02e; }
.kpi-pastel-orange { background: rgba(237, 134, 79,  0.10); border-left-color: #ed864f; }
.kpi-pastel-red    { background: rgba(220,  90, 90,  0.10); border-left-color: #dc5a5a; }

/* ========== Info-tip riusabile (v1.6.5, CNP Live) ==========
   Piccola icona ⓘ che mostra tooltip al hover. Uso: <span class="info-tip"
   data-tip="testo">i</span>. Tooltip stilato dark, larghezza max 280px. */
.info-tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  color: #b6c0d8;
  font-size: 10px; font-weight: bold;
  margin-left: 4px;
  cursor: help;
  position: relative;
  vertical-align: middle;
  font-style: normal; line-height: 1;
  border: 1px solid rgba(255,255,255,0.12);
  user-select: none;
}
.info-tip:hover { background: #ffd02e; color: #0f1d3d; border-color: #ffd02e; }
.info-tip::after {
  content: attr(data-tip);
  display: none;
  position: absolute;
  bottom: 130%; left: 50%; transform: translateX(-50%);
  background: #0f1d3d;
  border: 1px solid #3a4d75;
  border-radius: 6px;
  padding: 9px 11px;
  font-size: 11.5px; font-weight: normal;
  color: #e7ecf3;
  white-space: normal;
  width: max-content;
  max-width: 280px;
  text-align: left;
  z-index: 200;
  line-height: 1.45;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.info-tip:hover::after { display: block; }
.info-tip.info-tip-left::after { left: auto; right: 0; transform: none; }

/* v1.8.8: overlay + spinner per tabelle .sortable durante l'ordinamento
   client-side (tabelle grosse possono prendere centinaia di ms con i parser
   IT delle celle). Il parent della tabella deve avere `position:relative`
   (settata via JS al volo se è static). */
.sort-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(1px);
  z-index: 50;
  align-items: center;
  justify-content: center;
  pointer-events: all;
}
.sort-spinner {
  width: 42px;
  height: 42px;
  border: 4px solid rgba(29, 78, 216, 0.18);
  border-top-color: var(--primary, #1d4ed8);
  border-radius: 50%;
  animation: sort-spin 0.8s linear infinite;
}
@keyframes sort-spin {
  to { transform: rotate(360deg); }
}