:root{
  --navy:#0f172a;
  --navy-2:#1e293b;
  --gold:#2563eb;
  --gold-soft:#60a5fa;
  --gold-strong:#1d4ed8;   /* accent piu scuro: icone/testo su tinta tenue */
  --accent-wash:#e6f1fb;   /* tinta tenue dell'accent: sfondo chip icona tessere */
  --cream:#f8fafc;
  --ink:#0f172a;
  --muted:#475569;
  --danger:#c0392b;
  --ok:#2e7d54;
  --radius:14px;
  --shadow:0 10px 30px rgba(16,29,56,.12);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* Superfici / tabelle / testo (parametrizzate per il tema; i preset scuri le ridefiniscono) */
  --surface:#ffffff;       /* card, tabelle, modali */
  --surface-2:#f1f5f9;     /* superfici lievemente rialzate (code, note, tile) */
  --border:#e2e8f0;        /* bordi input/tile */
  --line:#eef2f7;          /* linee sottili (separatori) */
  --grid-line:#eef2f7;
  --grid-head-bg:#f8fafc;
  --grid-hover:#f5f8fc;
  --grid-group-bg:#eef4fb;
  --text-strong:#0f172a;   /* testo forte (titoli/label) */
  /* Sidebar (tematizzabile: alcuni temi la vogliono scura anche con contenuto chiaro) */
  --sidebar-bg:#0f172a;
  --sidebar-fg:#cbd5e1;
  --sidebar-fg-muted:#8ba0b8;
  --sidebar-hover:rgba(255,255,255,.06);
  --sidebar-active-bg:rgba(37,99,235,.30);
  --sidebar-active-fg:#ffffff;
  --sidebar-group:#93a4bd;
  /* Header (tematizzabile: alcuni temi lo vogliono chiaro) */
  --header-bg:#ffffff;
  --header-fg:#0f172a;
  --header-fg-soft:#475569;
  --header-chip-bg:#f1f5f9;
  --header-chip-bhov:#e6edf5;
  --header-chip-border:#e2e8f0;
  --header-pill-bg:#eef4fb;
  /* Preferenze utente (Fase 2): dimensione carattere e densità righe */
  --font-size-base:14px;
  --row-py:11px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Ancora la tipografia: 1rem = dimensione base scelta dall'utente (default 14px). Tutti i font in rem scalano. */
html{font-size:var(--font-size-base)}
body{
  font-family:var(--font);
  font-size:var(--font-size-base);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
}

/* ---------- Login ---------- */
.auth-wrap{
  min-height:100vh;
  display:grid;
  place-items:center;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(37,99,235,.18), transparent 60%),
    linear-gradient(160deg,var(--navy) 0%, var(--navy-2) 100%);
  padding:24px;
}
.auth-card{
  width:100%;
  max-width:400px;
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:36px 32px;
}
.brand{
  display:flex;align-items:baseline;gap:2px;
  font-weight:700;font-size:1.857rem;letter-spacing:.2px;
  color:var(--text-strong);margin-bottom:4px;
}
.brand .at{color:var(--gold);font-size:1.286rem;transform:translateY(-8px)}
.subtitle{color:var(--muted);font-size:1rem;margin:0 0 26px}
.field{margin-bottom:16px}
.field label{display:block;font-size:0.929rem;font-weight:600;color:var(--text-strong);margin-bottom:6px}
.field input,.field select{
  width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:10px;
  font-size:1.071rem;background:var(--surface);color:var(--ink);transition:border-color .15s, box-shadow .15s;
}
.field input:focus,.field select:focus{
  outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(37,99,235,.25);
}
.btn{
  width:100%;padding:13px;border:0;border-radius:10px;cursor:pointer;
  font-size:1.071rem;font-weight:700;letter-spacing:.2px;
  background:linear-gradient(135deg,var(--gold),var(--gold-soft));
  color:var(--text-strong);transition:transform .06s, filter .15s;
}
.btn:hover{filter:brightness(1.03)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.msg{margin-top:16px;font-size:1rem;min-height:20px}
.msg.error{color:var(--danger)}
.msg.ok{color:var(--ok)}

/* ---------- App shell ---------- */
.app-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;background:var(--header-bg);color:var(--header-fg);
  border-bottom:1px solid var(--header-chip-border);
}
.app-header .brand{color:var(--header-fg);margin:0}
.app-header .brand .at{color:var(--gold)}
.header-right{display:flex;align-items:center;gap:10px}
.az-logo{height:28px;max-width:130px;object-fit:contain;border-radius:4px;background:#fff;padding:2px 5px}
/* Configurazione azienda a schede (tab) */
.cfg-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:16px}
.cfg-tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);cursor:pointer;
  padding:9px 14px;font-size:0.929rem;font-weight:600;white-space:nowrap;margin-bottom:-1px}
.cfg-tab:hover{color:var(--text-strong)}
.cfg-tab.active{color:var(--text-strong);border-bottom-color:var(--accento,var(--gold))}
.cfg-panel .mov-sub{margin-top:22px}
/* Barra PRIMARIA del guscio "Impostazioni" (impostazioni.js): stile "segmented" a pillole, distinto
   dalle schede interne sottolineate (.cfg-tabs) delle pagine con sotto-schede (Identità, Invio email).
   Gerarchia leggibile: pillole = area di impostazioni; sottolineate sotto = sezione della pagina. */
.cfg-tabs.settings-tabs{display:inline-flex;gap:4px;border-bottom:0;padding:4px;margin-bottom:20px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px}
.cfg-tab.settings-tab{border-bottom:0;border-radius:7px;padding:8px 15px;margin-bottom:0}
.cfg-tab.settings-tab:hover{color:var(--text-strong);background:var(--grid-hover)}
.cfg-tab.settings-tab.active{color:var(--text-strong);border-bottom:0;
  background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.10)}
/* Webmail utente */
.webmail{display:flex;gap:16px;align-items:flex-start}
.wm-side{flex:0 0 240px;max-width:240px}
.wm-caselle{display:flex;flex-direction:column;gap:4px}
.wm-cas{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;
  background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:9px 11px;cursor:pointer;color:var(--ink)}
.wm-cas:hover{background:var(--grid-hover)}
.wm-cas.active{border-color:var(--accento,var(--gold));background:var(--surface)}
.wm-cas-ind{min-width:0;overflow:hidden}
.wm-cas-ind strong{color:var(--text-strong);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wm-main{flex:1 1 auto;min-width:0}
.wm-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.wm-folders{display:flex;gap:6px;margin-bottom:10px}
.wm-folder{background:none;border:1px solid var(--border);border-radius:999px;padding:5px 15px;cursor:pointer;color:var(--muted);font-weight:600;font-size:0.857rem}
.wm-folder:hover{color:var(--text-strong)}
.wm-folder.active{background:var(--surface-2);color:var(--text-strong);border-color:var(--accento,var(--gold))}
.wm-toolbar .filter-input{flex:1 1 220px}
.wm-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.wm-bulk{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;margin-bottom:8px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:8px}
.wm-bulk-count{font-weight:700;color:var(--text-strong);margin-right:2px}
.wm-filtro{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 12px;margin-bottom:8px;background:var(--gold-soft,#dbeafe);border:1px solid var(--border);border-radius:8px;color:var(--text-strong)}
.wm-head{display:grid;grid-template-columns:34px 190px 1fr 130px 100px;gap:10px;padding:8px 12px;
  border-bottom:1px solid var(--grid-line);background:var(--surface-2);align-items:center}
.wm-th{background:none;border:0;padding:0;text-align:left;cursor:pointer;color:var(--muted);font-weight:700;
  font-size:0.786rem;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;display:flex;align-items:center;gap:4px}
.wm-th:hover,.wm-th.active{color:var(--text-strong)}
.wm-th.ra{justify-content:flex-end}
.wm-th-arrow{font-size:.7rem}
.wm-check{display:flex;align-items:center;justify-content:center}
.wm-msg{display:grid;grid-template-columns:34px 190px 1fr 130px 100px;gap:10px;align-items:center;padding:10px 12px;
  border-bottom:1px solid var(--grid-line);cursor:pointer}
.wm-msg:last-child{border-bottom:0}
.wm-msg:hover{background:var(--grid-hover)}
.wm-msg.unread{background:var(--surface-2)}
.wm-msg.sel{background:var(--gold-soft,#dbeafe)}
.wm-msg.unread .wm-from,.wm-msg.unread .wm-subj{font-weight:700;color:var(--text-strong)}
.wm-from{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wm-subj{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wm-date{text-align:right;color:var(--muted);font-size:0.857rem;white-space:nowrap}
.wm-size{text-align:right;color:var(--muted);font-size:0.857rem;white-space:nowrap}
.wm-imgblock{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:8px;padding:8px 12px;margin-bottom:8px;font-size:0.857rem;color:var(--muted)}
.wm-prog-bar{height:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:7px;overflow:hidden}
.wm-prog-fill{height:100%;width:0;background:var(--gold,#2563eb);transition:width .3s ease}
.wm-pager{display:flex;align-items:center;gap:10px;justify-content:flex-end;margin-top:10px}
.wm-detail-head{border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:12px}
.wm-dh-subj{font-weight:700;font-size:1.07rem;color:var(--text-strong);margin-bottom:4px}
.wm-cliente-chip{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:3px 11px;border-radius:999px;background:var(--gold-soft,#dbeafe);color:var(--navy,#1a2b4a);text-decoration:none;font-weight:700;font-size:0.821rem;border:1px solid var(--border)}
.wm-cliente-chip:hover{background:var(--gold,#2563eb);color:#fff}
.wm-html{width:100%;height:55vh;border:1px solid var(--line);border-radius:8px;background:#fff}
.wm-text{white-space:pre-wrap;word-break:break-word;font-family:inherit;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:12px;max-height:55vh;overflow:auto}
.wm-alleg{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.wm-attach-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.wm-attach-chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:4px 6px 4px 11px;font-size:0.857rem}
.wm-attach-x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:1.1rem;line-height:1;padding:0 4px}
.wm-attach-x:hover{color:var(--danger)}
/* Icona+testo nei contenitori webmail (design system UI.ico). */
.wm-imgblock-msg{display:inline-flex;align-items:center;gap:8px}
.wm-filtro-msg{display:inline-flex;align-items:center;gap:6px}
.wm-clip{margin-left:6px;color:var(--muted)}
.wm-clip svg{width:13px;height:13px}
@media (max-width:760px){.webmail{flex-direction:column}.wm-side{max-width:none;flex-basis:auto;width:100%}
  .wm-head,.wm-msg{grid-template-columns:30px 1fr 90px}.wm-from,.wm-size,.wm-th.c-who,.wm-th.c-size{display:none}}
/* Assegnazione caselle email → utenti */
.assign-list{display:flex;flex-direction:column;gap:2px;max-height:340px;overflow:auto}
.assign-row{display:flex;align-items:center;gap:10px;padding:8px 6px;border-bottom:1px solid var(--grid-line);cursor:pointer}
.assign-row:last-child{border-bottom:0}
.assign-row:hover{background:var(--grid-hover)}
.logo-box{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.logo-preview{height:56px;max-width:220px;object-fit:contain;border:1px solid var(--border);border-radius:8px;background:#fff;padding:6px 10px}
.quick-actions{display:inline-flex;gap:8px}

/* ---------- Campanella delle notifiche ----------
   Sta nell'intestazione perché ciò che chiede un'azione non deve dipendere dalla pagina in cui ti
   trovi. Il numero è ambra per le cose da fare, rosso per quelle andate storte. */
.notif-box{position:relative;display:inline-flex}
.notif-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:1px solid var(--header-chip-border,rgba(255,255,255,.18));border-radius:9px;background:var(--header-chip-bg,rgba(255,255,255,.08));
  color:var(--header-fg,#fff);cursor:pointer;padding:0}
.notif-btn:hover{background:var(--header-chip-bhov,rgba(255,255,255,.16))}
.notif-btn svg{width:18px;height:18px;display:block}
/* Badge conteggio notifiche: rosso "notifica" (convenzione universale), con anello nel colore della
   testata che lo stacca dalla campana. Il rosso pieno legge meglio dell'ambra su header chiaro. */
.notif-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:#e5484d;color:#fff;font-size:0.714rem;font-weight:800;line-height:18px;text-align:center;
  box-shadow:0 0 0 2px var(--header-bg,#fff)}
.notif-badge.grave{background:var(--danger,#c0392b)}
.notif-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:290px;max-width:360px;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:6px;color:var(--ink)}
.notif-riga{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:9px;text-decoration:none;color:var(--ink)}
.notif-riga:hover{background:var(--grid-hover)}
.notif-testo{font-size:0.929rem;line-height:1.3}
.notif-vuoto{padding:12px 10px;color:var(--muted);font-size:0.929rem;text-align:center}
.quick-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;color:var(--header-fg);
  background:var(--header-chip-bg);border:1px solid var(--header-chip-border);text-decoration:none;
  font-size:0.929rem;font-weight:600;transition:background .15s,border-color .15s,color .15s}
.quick-btn:hover{background:var(--header-chip-bhov);border-color:var(--gold,#2563eb)}
.quick-btn.active{background:var(--accent-wash,#e6f1fb);color:var(--gold-strong,#1d4ed8);border-color:var(--gold-strong,#1d4ed8);font-weight:700}
.quick-btn svg{width:17px;height:17px;flex:0 0 auto}
@media(max-width:680px){.quick-btn span{display:none}.quick-btn{padding:6px 9px}}
.app-main{max-width:1100px;margin:0 auto;padding:28px 22px}
.pill{
  display:inline-block;padding:4px 10px;border-radius:999px;
  background:var(--header-pill-bg);color:var(--header-fg-soft);font-size:0.857rem;font-weight:600;
}
.pill.clickable{cursor:pointer}
.pill.clickable:hover{background:var(--header-chip-bhov)}
.link-btn{background:none;border:0;color:var(--header-fg-soft);cursor:pointer;font-weight:600}
.az-switch{display:inline-flex;align-items:center;gap:6px;margin-right:12px}
.az-switch .az-label{color:var(--header-fg-soft);font-size:0.857rem;font-weight:600;opacity:.85}
.az-current{color:var(--header-fg);font-size:0.929rem;font-weight:700}
.dash-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-top:6px}
.dash-tile{display:flex;align-items:center;gap:10px;padding:13px 15px;background:var(--surface);border:1px solid var(--border,#e2e6ee);
  border-radius:12px;box-shadow:var(--shadow);text-decoration:none;color:var(--text-strong);font-weight:600;font-size:1rem;
  transition:border-color .12s,transform .06s}
.dash-tile:hover{border-color:var(--gold,#2563eb);transform:translateY(-1px)}
.dash-tile-ico{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;
  background:var(--accent-wash);color:var(--gold-strong);font-size:1.071rem;flex:0 0 auto}
/* Tessera d'HUB (home di dominio): come dash-tile ma col NUMERO in evidenza + tono + stato caricamento.
   Riusabile da tutte le home di dominio (assistenza, e i prossimi iERP/iBRM/azienda). */
.hub-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px;margin-top:6px}
.hub-tile{display:flex;align-items:flex-start;gap:12px;padding:14px 15px;background:var(--surface);border:1px solid var(--border,#e2e6ee);
  border-radius:12px;box-shadow:var(--shadow);text-decoration:none;color:var(--text-strong);transition:border-color .12s,transform .06s}
.hub-tile:hover{border-color:var(--gold,#2563eb);transform:translateY(-1px)}
.hub-tile-ico{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;
  background:var(--accent-wash);color:var(--gold-strong);flex:0 0 auto}
.hub-tile-ico .mg-i svg{width:19px;height:19px}
.hub-tile-b{min-width:0;display:flex;flex-direction:column;gap:1px}
.hub-tile-name{font-weight:700;font-size:.95rem;color:var(--text-strong)}
.hub-tile-kpi{font-size:1.5rem;font-weight:800;letter-spacing:-.3px;line-height:1.18;font-variant-numeric:tabular-nums}
.hub-tile-kpi.ok{color:var(--ok)} .hub-tile-kpi.warn{color:var(--warn,#a06a00)} .hub-tile-kpi.danger{color:var(--danger,#c0392b)}
.hub-tile-kpi.loading{color:var(--muted);opacity:.5}
.hub-tile-sub{font-size:.8rem;color:var(--muted)}
/* Panoramica domini (home globale): fascia di card per-dominio con pochi KPI + link all'hub.
   Riusabile da home tenant e panoramica superadmin (livello "azienda selezionata"). */
.dominio-livello{border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin:6px 0 16px;background:var(--surface)}
.dominio-livello-head{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--text-strong);font-size:.95rem;margin-bottom:10px}
.dominio-livello-head .lvl-tag{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--gold-strong);background:var(--accent-wash);padding:2px 8px;border-radius:999px}
.dominio-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px}
.dominio-card{display:flex;flex-direction:column;gap:10px;padding:13px 15px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);transition:border-color .12s}
.dominio-card:hover{border-color:var(--gold)}
.dominio-card-head{display:flex;align-items:center;justify-content:space-between;text-decoration:none;color:var(--text-strong)}
.dominio-card-name{font-weight:700}
.dominio-card-open{color:var(--gold-strong);font-weight:600;font-size:.85rem}
.dominio-kpis{display:flex;gap:18px;flex-wrap:wrap}
.dominio-kpi{display:flex;flex-direction:column}
.dominio-kpi-num{font-size:1.35rem;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--text-strong)}
.dominio-kpi-num.ok{color:var(--ok)} .dominio-kpi-num.warn{color:var(--warn,#a06a00)} .dominio-kpi-num.danger{color:var(--danger)}
.dominio-kpi-num.loading{color:var(--muted);opacity:.5}
.dominio-kpi-lbl{font-size:.75rem;color:var(--muted)}
/* Dashboard home tenant (cliente-centrica) */
.crm-search{margin-top:6px}
.crm-search label{display:block;font-size:0.786rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--gold-soft,#1d4ed8);margin-bottom:6px}
.crm-results{margin-top:4px;display:flex;flex-direction:column;gap:2px;max-height:260px;overflow:auto}
.crm-res{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--text-strong);font-weight:600;font-size:1rem}
.crm-res:hover{background:rgba(16,29,56,.05)}
.crm-res-meta{color:var(--muted);font-size:0.857rem;font-weight:500}
.crm-topcli{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 2px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text-strong);font-size:0.964rem}
.crm-topcli:last-child{border-bottom:0}
a.crm-topcli:hover{color:var(--gold,#2563eb)}
.crm-posta{margin-bottom:14px}
.crm-posta-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.crm-posta-head h3{margin:0}
.crm-posta-list{display:flex;flex-direction:column;gap:2px}
.crm-posta-cas{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 2px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text-strong)}
.crm-posta-cas:last-child{border-bottom:0}
a.crm-posta-cas:hover{color:var(--gold,#2563eb)}
.crm-posta-ind{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-head-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
/* Elenco coordinate bancarie del tenant (Configurazione → Azienda) */
.banche-list{display:flex;flex-direction:column;gap:8px}
.banca-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}
.banca-info{min-width:0}
.banca-info strong{color:var(--text-strong)}
.banca-act{display:flex;align-items:center;gap:6px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:640px){.banca-row{flex-direction:column;align-items:flex-start}.banca-act{justify-content:flex-start}}
/* Vista "Pratiche": ogni ordine è una scheda espandibile (offerta→ordine→DDT→fattura) con avanzamento e totali. */
.pratica-card{padding:0;overflow:hidden;margin-bottom:10px}
.pratica-head{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;text-align:left;
  background:none;border:0;cursor:pointer;padding:12px 16px;color:var(--ink);font:inherit}
.pratica-head:hover{background:var(--grid-hover)}
.pratica-head-main{min-width:0}
.pratica-title{font-weight:700;color:var(--text-strong);font-size:0.964rem}
.pratica-title .hint{margin-top:0;font-weight:400}
.pratica-steps{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.pratica-step{font-size:0.75rem;font-weight:600;padding:2px 9px;border-radius:999px;
  background:var(--surface-2);color:var(--muted);border:1px solid var(--border)}
.pratica-step.on{background:var(--ok-bg,rgba(46,125,84,.14));color:var(--ok,#1e7e34);border-color:transparent}
.pratica-metrics{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.pratica-metric{font-size:0.857rem;color:var(--muted);white-space:nowrap}
.pratica-metric strong{color:var(--text-strong)}
.pratica-chev{color:var(--muted);font-size:0.8rem;width:12px;text-align:center}
.pratica-body{border-top:1px solid var(--line);padding:4px 12px 8px}
.prat-doc{display:flex;align-items:center;gap:9px;padding:8px 6px;border-bottom:1px solid var(--grid-line);color:var(--ink)}
.prat-doc:last-child{border-bottom:0}
.prat-doc:hover{background:var(--grid-hover)}
.prat-doc .hint{margin-top:0}
.prat-num{font-weight:600;color:var(--text-strong)}
.prat-rif{margin-top:0}
.prat-imp{margin-left:auto;white-space:nowrap;color:var(--text-strong)}
.pag-cell{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pag-cell .hint{margin-top:0}
.prat-st{flex:0 0 auto}
@media (max-width:640px){.pratica-head{flex-direction:column;align-items:flex-start;gap:8px}.pratica-metrics{justify-content:flex-start}}
.az-switch .az-select{padding:4px 8px;border-radius:8px;border:1px solid var(--header-chip-border);
  background:var(--header-chip-bg);color:var(--header-fg);font-size:0.857rem;font-weight:600;cursor:pointer;max-width:220px}
.az-switch .az-select option{color:#101d38}
.role-check{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border:1px solid var(--border,#e2e6ee);border-radius:9px;background:var(--surface-2)}
.role-check .check{display:flex;align-items:center;gap:8px;font-weight:500;margin:0}
.role-check input[disabled]{opacity:.6}
.role-check .mans-row{display:flex;align-items:center;gap:16px}
.role-check .mans-row .check:first-child{min-width:210px}
.role-check .resp-flag{font-size:0.857rem;color:var(--gold-soft,#1d4ed8);font-weight:600}
.perm-matrix td.inherited{background:rgba(37,99,235,.07)}
.form-section{grid-column:1/-1;font-weight:700;color:var(--text-strong);font-size:0.929rem;text-transform:uppercase;
  letter-spacing:.04em;margin:16px 0 2px;padding-bottom:6px;border-bottom:1px solid var(--border,#e2e6ee)}
.form-section:first-child{margin-top:0}
.form-subsection{grid-column:1/-1;font-weight:600;color:var(--gold-soft,#1d4ed8);font-size:0.857rem;
  text-transform:uppercase;letter-spacing:.03em;margin:8px 0 0}

/* Sotto-titolo d'area (raggruppamento funzioni nel form utente e nel catalogo) */
.mans-area{font-weight:600;color:var(--gold-soft,#1d4ed8);font-size:0.786rem;text-transform:uppercase;
  letter-spacing:.03em;margin:12px 0 4px}

/* Organigramma */
.org-h2{font-size:1rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-strong);
  margin:22px 0 10px;padding-bottom:6px;border-bottom:2px solid var(--gold,#2563eb)}
.org-area{font-size:0.857rem;font-weight:700;letter-spacing:.03em;color:var(--text-strong);margin:14px 0 8px}
.org-sub{margin:10px 0 0;padding:8px 0 0 10px;border-left:2px solid var(--border,#e2e6ee)}
.org-sub-name{font-weight:600;font-size:0.929rem;color:var(--text-strong);margin-bottom:2px}

/* Panoramica (piattaforma) */
.pano-nav{position:sticky;top:0;z-index:5;display:flex;gap:8px;flex-wrap:wrap;padding:8px 0;margin-bottom:6px;
  background:var(--bg,#f6f3ec)}
.pano-nav a{font-size:0.857rem;font-weight:600;color:var(--text-strong);background:var(--surface);border:1px solid var(--border,#e2e6ee);
  border-radius:999px;padding:5px 12px;text-decoration:none}
.pano-nav a:hover{border-color:var(--gold,#2563eb)}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:6px 0 18px}
.kpi{background:var(--surface);border:1px solid var(--border,#e2e6ee);border-radius:12px;box-shadow:var(--shadow);
  padding:14px 16px;border-top:3px solid var(--navy)}
.kpi.warn{border-top-color:var(--danger,#c0392b)}
.kpi-num{font-size:1.857rem;font-weight:800;color:var(--text-strong);line-height:1.1}
.kpi.warn .kpi-num{color:var(--danger,#c0392b)}
.kpi-lbl{font-size:0.857rem;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.03em}
.kpi-ok{border-top-color:var(--ok)} .kpi-ok .kpi-num{color:var(--ok)}
.kpi-amber{border-top-color:var(--warn,#a06a00)} .kpi-amber .kpi-num{color:var(--warn,#a06a00)}
.kpi-sub{font-size:0.78rem;color:var(--muted);margin-top:4px}
.pano-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:6px}
@media(max-width:720px){.pano-cols{grid-template-columns:1fr}}
.bar-row{margin:8px 0}
.bar-lbl{display:flex;justify-content:space-between;font-size:0.857rem;color:var(--text-strong);margin-bottom:3px}
.bar-val{font-weight:700}
.bar-track{height:8px;background:#eee6d6;border-radius:6px;overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--navy),var(--gold,#2563eb))}
.anom-grid{display:flex;flex-wrap:wrap;gap:14px}
.anom-card{flex:1 1 280px;max-width:420px;background:var(--surface);border:1px solid var(--border,#e2e6ee);border-radius:12px;
  box-shadow:var(--shadow);padding:12px 14px;border-left:4px solid var(--danger,#c0392b)}
.anom-card.anom-warn{border-left-color:#c8971f}
.anom-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;color:var(--text-strong)}
.anom-list{display:flex;flex-direction:column;gap:4px}
.anom-item{font-size:0.929rem;color:var(--ink)}
.muted-inline{color:var(--muted);font-size:0.857rem}

/* Cruscotto: grafici */
.dash-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:6px}
.chart-card{display:flex;flex-direction:column}
.donut-wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.donut-legend{display:flex;flex-direction:column;gap:4px;font-size:0.857rem;color:var(--ink)}
.legend-row{display:flex;align-items:center;gap:7px}
.legend-dot{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
/* Cruscotto: card per-tenant + chip moduli */
.tenant-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.tenant-card{background:var(--surface);border:1px solid var(--border,#e2e6ee);border-radius:12px;box-shadow:var(--shadow);padding:14px 16px}
.tenant-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.tenant-swatch{width:26px;height:26px;border-radius:7px;flex:0 0 auto;border:1px solid rgba(0,0,0,.08)}
/* Cella "Azienda" nella tabella di panoramica (swatch + nome/città) */
.tenant-cell{display:flex;align-items:center;gap:10px;min-width:0}
.tenant-cell .tenant-swatch{width:20px;height:20px;border-radius:6px}
.tenant-cell strong{color:var(--text-strong);font-weight:700}
.tenant-cell .muted-inline{font-size:0.8rem}
/* Gestione categorie voci */
.cat-list{display:flex;flex-direction:column;gap:6px;max-width:640px}
.cat-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 12px}
.cat-row.off{opacity:.6}
.cat-ord{display:flex;gap:2px}
.cat-nome{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px}
.cat-nome strong{color:var(--text-strong)}
.cat-act{display:flex;gap:6px}
.tenant-title{flex:1 1 auto;min-width:0;color:var(--text-strong)}
.tenant-title strong{color:var(--text-strong)}
.tenant-stats{font-size:0.857rem;color:var(--muted);margin-bottom:12px}
/* Pannello moduli per aree */
.mod-panel-head{display:flex;align-items:center;justify-content:space-between;
  font-size:0.857rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-strong);
  border-top:1px solid var(--line);padding-top:12px;margin-bottom:6px}
.tenant-modcount{font-size:0.786rem;font-weight:700;color:#fff;background:var(--navy);border-radius:999px;padding:3px 10px;letter-spacing:0;text-transform:none}
.mod-panel{display:flex;flex-direction:column;gap:4px}
.mod-area-head{display:flex;align-items:center;gap:8px;margin-top:10px}
.mod-area-head .ma-ico{width:18px;height:18px;color:var(--gold,#2563eb);flex:0 0 auto}
.mod-area-head .ma-ico svg{width:18px;height:18px;display:block}
.mod-area-name{font-weight:700;font-size:0.893rem;color:var(--text-strong)}
.mod-area-count{margin-left:auto;font-size:0.786rem;font-weight:700;color:var(--muted)}
.mod-area-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin-top:6px;align-items:start}
.mod-tile{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--border,#e2e6ee);
  border-radius:10px;background:var(--surface);transition:opacity .12s,border-color .12s}
.mod-tile .mt-ico{width:18px;height:18px;color:var(--text-strong);flex:0 0 auto}
.mod-tile .mt-ico svg{width:18px;height:18px;display:block}
.mod-tile .mt-lbl{flex:1 1 auto;min-width:0;font-size:0.893rem;font-weight:600;color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mod-tile.off{opacity:.55}
.mod-tile.off .mt-ico{color:var(--muted)}
.mod-tile.core{background:var(--surface-2);border-style:dashed}
.mod-tile.dep-locked{border-style:dashed;cursor:help}
.mod-tile .mt-lock{width:16px;height:16px;color:var(--muted);flex:0 0 auto}
.mod-tile .mt-lock svg{width:16px;height:16px;display:block}
.mod-tile .switch{transform:scale(.82);flex:0 0 auto}
/* Sottomoduli: funzioni interne al modulo, sotto la sua tessera. Non sono tessere a loro volta —
   sono spunte, perché dipendono da qualcosa che sta sopra e non vivono da sole. */
.mod-blocco{display:flex;flex-direction:column;gap:6px;background:var(--surface-2);border:1px solid var(--border,#e2e6ee);border-radius:10px;padding:9px 11px}
.mod-sub{display:flex;flex-direction:column;gap:2px;margin:0 0 0 12px;padding-left:8px;border-left:2px solid var(--line,#e6e9ef)}
.mod-sub-row{display:flex;align-items:center;gap:6px;padding:2px 0;cursor:pointer}
.mod-sub-row.off .mod-sub-lbl{color:var(--muted)}
.mod-sub-row.bloccato{cursor:help;opacity:.6}
.mod-sub-lbl{font-size:0.821rem;font-weight:600;color:var(--text-strong);line-height:1.25}
.mod-sub-row input{margin:0;flex:0 0 auto}
/* Concesso ma spento dall'azienda: al superadmin serve saperlo, altrimenti vede l'interruttore
   acceso e non capisce perché il tenant riceve un 403. */
.mod-tile .mt-nota{color:var(--warn,#a06a00);font-size:0.857rem;flex:0 0 auto;cursor:help}
.mod-sub-row.altro-piano .mod-sub-lbl{color:var(--warn,#a06a00)}
/* Ogni modulo è una tessera con lo stesso stile: cornice arrotondata e header senza pillola (bordo
   della cornice al posto della pillola). Piena larghezza quando il modulo è solo nella sua area o ha
   l'elenco "Comprende"; altrimenti sta nella griglia dell'area (documenti del ciclo affiancati). */
.mod-blocco.solo,.mod-blocco.has-comprende{grid-column:1/-1}
.mod-blocco.has-comprende{gap:8px}
.mod-blocco.is-core{border-style:dashed}
.mod-blocco .mod-tile{border:none;background:transparent;padding:0;border-radius:0}
.mod-blocco-sep{height:1px;background:var(--line,#e6e9ef);margin:0}
/* "Comprende": funzioni incluse nel modulo, attaccato al suo header (informativo, sola lettura). */
.mod-comprende{margin:0}
.mod-comprende-lbl{display:block;font-size:0.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:2px}
.mod-comprende-list{font-size:0.82rem;color:var(--muted);line-height:1.5}
/* Voci coperte da una leva che ne raggruppa più d'una (sotto la casella del sottomodulo). */
.mod-sub-voci{font-size:0.74rem;color:var(--muted);line-height:1.25;margin:0 0 2px 24px}
/* Dentro la tessera le leve non hanno il bordo-albero: stanno pulite sotto l'header/separatore. */
.mod-blocco .mod-sub{margin-left:0;padding-left:0;border-left:none;gap:3px}

/* Tema per-tenant: swatch dei preset */
.tema-presets{display:flex;gap:8px;flex-wrap:wrap}
.tema-sw{width:36px;height:36px;border-radius:8px;border:2px solid var(--border,#e2e6ee);cursor:pointer;padding:0}
.tema-sw.sel{border-color:var(--text-strong);box-shadow:0 0 0 2px var(--gold,#2563eb)}
.form-grid input[type=color]{height:40px;padding:2px;cursor:pointer}
.org-grid{display:flex;flex-wrap:wrap;gap:14px}
.org-card{flex:1 1 220px;max-width:320px;background:var(--surface);border:1px solid var(--border,#e2e6ee);
  border-radius:12px;box-shadow:var(--shadow);padding:14px 16px;border-top:3px solid var(--navy)}
.org-card.org-card-carica{border-top-color:var(--gold,#2563eb)}
.org-card.org-card-sic{border-top-color:var(--danger,#c0392b)}
.org-card h4{margin:0 0 8px;font-size:1rem;color:var(--text-strong)}
.org-card-label{font-size:0.786rem;text-transform:uppercase;letter-spacing:.04em;color:#8a94a6;margin:8px 0 3px}
.org-person{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:3px 0}
.org-person-name{font-weight:500}
.org-person-sub{font-size:0.786rem;font-weight:600;color:var(--gold-soft,#1d4ed8);
  background:rgba(37,99,235,.16);border-radius:999px;padding:1px 8px}
.org-none{color:#9aa3b2;font-style:italic;padding:2px 0}
.org-soci{display:flex;flex-direction:column;gap:8px;max-width:640px}
.org-socio{display:grid;grid-template-columns:1fr 200px 56px;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--border,#e2e6ee);border-radius:10px;padding:8px 14px;box-shadow:var(--shadow)}
.quota-bar{height:10px;border-radius:999px;background:rgba(16,29,56,.08);overflow:hidden}
.quota-fill{height:100%;background:var(--gold,#2563eb)}
.org-socio-quota{text-align:right;font-weight:700;color:var(--text-strong)}
@media(max-width:640px){.org-socio{grid-template-columns:1fr 44px}.org-socio .quota-bar{display:none}}
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}

/* ---------- Layout con sidebar ---------- */
.layout{display:flex;min-height:calc(100vh - 56px)}
.sidebar{
  width:230px;flex:0 0 230px;background:var(--sidebar-bg);border-right:1px solid var(--line);
  padding:18px 12px;
}
.nav-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:11px 14px;margin-bottom:4px;border:0;border-radius:10px;
  background:none;color:var(--sidebar-fg);font-size:1rem;font-weight:600;cursor:pointer;
  text-decoration:none;
}
.nav-item:hover{background:var(--sidebar-hover)}
/* Voce corrente. Il solo velo di colore non basta: ogni tema lo declina debole (.18–.22, e nel
   tema chiaro un grigio quasi impercettibile), così la pagina in cui ti trovi spariva. L'evidenza
   arriva quindi da segnali indipendenti dalla palette — barra d'accento, peso, dimensione —
   perché uno sfondo pieno non reggerebbe su tutti i temi (in Graphite l'accento è chiaro e il
   testo bianco ci si perderebbe). */
.nav-item.active{
  background:var(--sidebar-active-bg);color:var(--sidebar-active-fg);
  font-weight:800;letter-spacing:.005em;
  box-shadow:inset 4px 0 0 0 var(--accento,var(--gold));
}
/* L'icona prende il colore del testo attivo, non l'accento: sul velo bluastro l'accento
   rendeva 2.5:1, il colore del testo rende 13:1. */
.nav-item.active .nav-ico{color:var(--sidebar-active-fg);transform:scale(1.15)}
/* Casella dell'icona a misura fissa: i pittogrammi sono più larghi dei simboli monocromatici
   (20.7px contro 18) e, essendo un flex item con min-width:auto, non rientravano nei 18px
   dichiarati — le etichette delle voci con pittogramma partivano più a destra delle altre. */
.nav-ico{
  flex:0 0 20px;min-width:0;display:inline-flex;align-items:center;justify-content:center;
  font-size:.95em;line-height:1;color:var(--sidebar-fg-muted);transition:transform .15s
}
/* Icone disegnate (Dashboard): stesso ingombro dei caratteri, colore ereditato dal testo. */
.nav-ico svg{width:17px;height:17px;display:block}
.nav-group-wrap{margin-top:12px}
.nav-group{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  background:none;border:0;cursor:pointer;text-align:left;
  font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--sidebar-group);
  padding:4px 14px;margin:0 0 4px}
.nav-group:hover{color:var(--gold,#2563eb)}
.nav-config-sep{margin:20px 6px 2px;padding-top:14px;border-top:1px solid var(--line);font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--sidebar-fg-muted)}
/* Pilastri di prodotto (iERP/iBRM/iService): niente maiuscolo (preserva la "i"), un filo più marcati. */
.nav-config-sep.nav-pillar{text-transform:none;font-size:0.8rem;letter-spacing:.01em;font-weight:800;color:var(--sidebar-fg)}
/* Intestazioni delle tessere-pilastro nella dashboard home. */
.dash-pillar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:26px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.dash-pillar-lbl{font-size:1.05rem;font-weight:800;color:var(--text-strong);letter-spacing:.01em}
/* Dashboard — "Da presidiare": riquadri di ciò che richiede un'azione oggi. */
.presidio-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-bottom:6px}
.presidio-card{border-top:3px solid var(--gold,#cba868)}
.presidio-chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 8px}
.presidio-chip{display:inline-flex;align-items:baseline;gap:3px;padding:3px 9px;border-radius:999px;
  background:var(--surface-2,#f4f6fa);border:1px solid var(--line);font-size:0.857rem;color:var(--muted)}
.presidio-chip strong{font-size:1.05rem;color:var(--text-strong)}
.presidio-chip.att{border-color:var(--gold,#cba868)}
.presidio-chip.urg{border-color:var(--danger,#c0392b);background:rgba(192,57,43,.07)}
.presidio-chip.urg strong{color:var(--danger,#c0392b)}
.presidio-list{display:flex;flex-direction:column;gap:2px}
.presidio-riga{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 2px;
  border-bottom:1px solid var(--line);text-decoration:none;color:var(--text-strong)}
.presidio-riga:last-child{border-bottom:0}
a.presidio-riga:hover{color:var(--gold,#2563eb)}
.presidio-r-tit{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.presidio-ok{color:var(--muted);padding:12px 16px}
.nav-group .nav-chev{display:inline-flex;transition:transform .18s;opacity:.75}
.nav-group .nav-chev svg{width:12px;height:12px;display:block}
.nav-group-wrap.collapsed .nav-chev{transform:rotate(-90deg)}
.nav-group-items{overflow:hidden;transition:max-height .22s ease}
/* Gruppo "hub": la tessera-hub è la testata sempre visibile dell'area (nome = link alla dashboard
   dell'area), col chevron accanto per comprimere/espandere le voci subordinate. */
.nav-hub-wrap{margin-top:14px}
.nav-hub-head{display:flex;align-items:center;gap:2px}
/* Testata-hub su UNA riga: il nome dell'area non va mai a capo. Il grassetto + il chevron accanto
   (30px) lasciano poco spazio al testo; per l'etichetta più lunga ("Clienti e Fornitori", ~115px)
   riduco il padding orizzontale così ci sta comoda senza taglio. Vale per tutti gli hub. */
.nav-hub-head .nav-item{flex:1 1 auto;min-width:0;margin-bottom:0;font-weight:700;white-space:nowrap;padding-left:10px;padding-right:10px}
.nav-hub-toggle{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:0;border-radius:8px;background:none;color:var(--sidebar-fg-muted);cursor:pointer;transition:background .12s,color .12s}
.nav-hub-toggle:hover{background:var(--sidebar-hover);color:var(--sidebar-fg)}
.nav-hub-toggle .nav-chev{display:inline-flex;transition:transform .18s}
.nav-hub-toggle .nav-chev svg{width:13px;height:13px;display:block}
.nav-hub-wrap.collapsed .nav-hub-toggle .nav-chev{transform:rotate(-90deg)}
.nav-hub-wrap .nav-group-items .nav-item{padding-left:26px;font-size:0.96rem}
/* Secondo livello: sotto-menu annidato (es. Ciclo commerciale ▸ Impostazioni). */
.nav-subgroup{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 14px;margin-bottom:4px;border:0;border-radius:10px;background:none;color:var(--sidebar-fg);font-size:1rem;font-weight:600;cursor:pointer}
.nav-subgroup:hover{background:var(--sidebar-hover)}
.nav-subgroup .nav-chev{margin-left:auto;display:inline-flex;transition:transform .18s;opacity:.7}
.nav-subgroup .nav-chev svg{width:12px;height:12px;display:block}
.nav-subgroup-wrap.collapsed .nav-chev{transform:rotate(-90deg)}
.nav-subgroup-items{overflow:hidden;transition:max-height .22s ease}
.nav-subgroup-items .nav-item{padding-left:36px;font-size:0.94rem}
/* ── Ricerca "Vai a" (A) + Preferiti (B): per-utente, sopra l'albero del menu ── */
.nav-search{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;width:100%;
  margin:0 0 12px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--sidebar-hover);color:var(--sidebar-fg-muted);cursor:text;
  font-size:0.9rem;font-weight:600;text-align:left;transition:background .12s,color .12s}
.nav-search:hover{background:var(--sidebar-active-bg);color:var(--sidebar-fg)}
.nav-search-ico{flex:0 0 auto;display:inline-flex}
.nav-search-ico svg{width:15px;height:15px;display:block}
.nav-search-lbl{flex:1 1 auto}
.nav-search-kbd{flex:0 0 auto;font-size:0.72rem;font-weight:700;letter-spacing:.02em;
  padding:2px 6px;border-radius:6px;border:1px solid var(--line);opacity:.8}
.nav-fav-wrap,.nav-recent-wrap{margin:0 0 6px}
.nav-fav-title{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--sidebar-group);padding:4px 14px;margin:0 0 2px}
/* "Mostra tutte / meno" (D): controllo discreto in coda al corpo dell'hub. */
.nav-showall{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:7px 14px 7px 26px;margin:1px 0 2px;font-size:0.82rem;font-weight:600;color:var(--sidebar-fg-muted)}
.nav-showall:hover{color:var(--gold,#2563eb)}
/* Etichetta della voce: prende lo spazio, tronca; lascia posto alla stella. */
.nav-lbl{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Stella "preferito": discreta, compare all'hover della voce; se già preferita resta accesa. */
.nav-star{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;padding:0;border:0;border-radius:6px;background:none;
  color:var(--sidebar-fg-muted);cursor:pointer;opacity:0;transition:opacity .12s,color .12s,background .12s}
.nav-star svg{width:14px;height:14px;display:block}
.nav-item.has-star:hover .nav-star{opacity:.7}
.nav-star:hover{opacity:1!important;color:var(--gold,#2563eb);background:var(--sidebar-hover)}
.nav-star.on{opacity:1;color:var(--gold,#f2b705)}
/* Palette "Vai a": overlay ancorato in alto (non centrato come le modali).
   .overlay.palette-overlay: specificità doppia per vincere su .overlay (definita dopo nel file). */
.overlay.palette-overlay{align-items:flex-start;justify-content:center;padding:12vh 20px 20px}
.palette{background:var(--surface);border-radius:var(--radius);box-shadow:0 20px 50px rgba(16,29,56,.3);
  width:100%;max-width:560px;max-height:70vh;display:flex;flex-direction:column;overflow:hidden}
.palette-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.palette-search-ico{display:inline-flex;color:var(--muted)}
.palette-search-ico svg{width:18px;height:18px;display:block}
.palette-input{flex:1 1 auto;min-width:0;border:0;background:none;outline:none;font-size:1.05rem;color:var(--text-strong)}
.palette-list{flex:1 1 auto;overflow:auto;min-height:0;padding:6px}
.palette-row{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;cursor:pointer}
.palette-row.sel{background:var(--surface-2)}
.palette-row .nav-ico{flex:0 0 20px;color:var(--muted)}
.palette-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:600;color:var(--text-strong)}
.palette-domain{flex:0 0 auto;font-size:0.75rem;color:var(--muted);background:var(--surface-2);
  border:1px solid var(--line);border-radius:999px;padding:2px 9px}
.palette-star{color:var(--muted);opacity:.45}
.palette-row:hover .palette-star,.palette-row.sel .palette-star{opacity:.8}
.palette-star.on{opacity:1;color:var(--gold,#f2b705)}
.palette-empty{padding:22px 16px;text-align:center;color:var(--muted)}
/* min-width:0 — senza, la colonna dei contenuti non scende sotto la larghezza minima di ciò
   che contiene (regola dei flex item) e una tabella larga spinge l'INTERA pagina a scorrere
   di lato, invece di lasciar scorrere la sola area della tabella. */
.content{flex:1;min-width:0;padding:26px 34px;max-width:1760px;margin:0 auto;width:100%}

/* ---------- Testata pagina ---------- */
.crumb-dash{display:inline-flex;align-items:center;gap:6px;margin-bottom:12px;font-size:0.857rem;font-weight:600;color:var(--muted);text-decoration:none;transition:color .15s}
.crumb-dash:hover{color:var(--gold)}
.crumb-dash .crumb-ico{color:var(--gold);font-size:0.95rem;line-height:1;display:inline-flex;align-items:center}
.crumb-dash .crumb-ico svg{width:13px;height:13px;display:block}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:16px;flex-wrap:wrap}
.page-head h1{font-size:1.571rem;margin:0;color:var(--text-strong)}
/* Home (hub + Dashboard): icona del menu accanto al titolo. Solo quando presente (.has-ico), così gli
   altri titoli restano invariati. Emoji o SVG a griglia hanno lo stesso ingombro del testo. */
.page-head h1.has-ico{display:inline-flex;align-items:center;gap:10px}
.page-head h1 .head-ico{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;font-size:0.95em;line-height:1;color:var(--gold)}
.page-head h1 .head-ico svg{width:22px;height:22px;display:block}
.page-head .sub{color:var(--muted);font-size:0.929rem;margin-top:2px}

/* ---------- Bottoni (varianti app) ---------- */
.btn-sm{width:auto;padding:9px 16px;font-size:0.929rem;border-radius:9px}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{filter:brightness(1.15)}
.btn-ghost{background:var(--surface);border:1px solid var(--border);color:var(--text-strong)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{filter:brightness(1.06)}
.btn-ok{background:rgba(46,125,84,.14);color:var(--ok);border:1px solid rgba(46,125,84,.32)}
.btn-ok:hover{background:rgba(46,125,84,.22)}
/* Verde pieno per l'azione principale (Approva): testo/icona bianchi su verde */
.btn-ok-solid{background:var(--ok);color:#fff;border:1px solid var(--ok)}
.btn-ok-solid:hover{filter:brightness(1.08)}
/* Distruttiva "in-place": rosso testo/bordo, non pieno (il pieno resta per la conferma nel modal). */
.btn-danger-soft{background:rgba(192,57,43,.10);color:var(--danger);border:1px solid rgba(192,57,43,.30)}
.btn-danger-soft:hover{background:rgba(192,57,43,.18)}
/* Verdetto che rimanda al cliente (Rifiuta): ambra tenue = attenzione, non distruttivo */
.btn-warn-soft{background:rgba(160,106,0,.12);color:var(--warn,#a06a00);border:1px solid rgba(160,106,0,.32)}
.btn-warn-soft:hover{background:rgba(160,106,0,.20)}
/* Variante arancio tenue (prova per Rifiuta) */
.btn-arancio-soft{background:rgba(194,87,10,.12);color:#c2570a;border:1px solid rgba(194,87,10,.34)}
.btn-arancio-soft:hover{background:rgba(194,87,10,.20)}
/* Pulsante di prova/test (connessione, credenziali): sfondo chiaro + accento blu on-brand. */
.btn-test{background:rgba(37,99,235,.10);color:var(--gold);border:1px solid rgba(37,99,235,.30)}
.btn-test:hover{background:rgba(37,99,235,.18)}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Tabelle ---------- */
.table-wrap{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow-x:auto}
table.grid{width:100%;border-collapse:collapse;font-size:var(--font-size-base)}
table.grid th,table.grid td{padding:var(--row-py) 12px;text-align:left;border-bottom:1px solid var(--grid-line);vertical-align:middle}
table.grid th{background:var(--grid-head-bg);color:var(--text-strong);font-weight:700;font-size:calc(var(--font-size-base) - 2px);text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;user-select:none}
table.grid th[title]:hover{color:var(--gold-strong,#1d4ed8)}
table.grid tr:last-child td{border-bottom:0}
table.grid tbody tr:hover td{background:var(--grid-hover)}
table.grid tr.group-sep td{background:var(--grid-group-bg);color:var(--text-strong);font-weight:700;font-size:calc(var(--font-size-base) - 2.5px);text-transform:uppercase;letter-spacing:.3px;padding:7px 16px}
table.grid tr.group-sep:hover td{background:var(--grid-group-bg)}
/* Numeri a destra e riga dei totali: le stesse regole che .data-table aveva già, portate anche
   alla griglia comune — un totale che non si stacca dalle righe non è un totale. */
table.grid th.num,table.grid td.num{text-align:right;white-space:nowrap}
/* Intestazione colonna azioni (tabelle a mano): a destra come i pulsanti (.actions-cell) */
table.grid th.col-act{text-align:right}
table.grid tr.row-tot td{border-top:2px solid var(--border);font-weight:700;color:var(--text-strong);background:var(--surface-2)}
table.grid tr.row-tot:hover td{background:var(--surface-2)}
/* Separatore di riga più marcato tra i dati: var(--grid-line) è troppo tenue per distinguerle. Uso
   var(--border) solo sulle righe del corpo (le intestazioni restano sottili). Robusto su tabelle piatte
   e raggruppate — a differenza della zebra nth-child, che i separatori di gruppo falserebbero. */
table.grid tbody tr td{border-bottom-color:var(--border)}
.actions-cell{display:flex;gap:4px;justify-content:flex-end;flex-wrap:nowrap}
.actions-cell .btn{padding:5px 10px;font-size:0.857rem;border-radius:7px}
/* Casella email: indirizzo (+ eventuale PEC) e nome come sottotitolo. */
.cas-cella{display:flex;flex-direction:column;gap:4px}
.cas-testa{display:flex;align-items:center;gap:6px}
.cella-num{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:nowrap}

/* Comando riferito al dato della cella (es. sospendi il sync accanto al suo stato).
   Stessa forma dei badge che gli stanno a fianco, ma vuota e col bordo: si legge come
   una cosa su cui si agisce, non come un'etichetta di stato. */
.cell-act{display:inline-block;padding:2px 9px;border:1px solid var(--border);border-radius:999px;background:none;
  font:inherit;font-size:0.857rem;font-weight:600;line-height:1.33;color:var(--gold);cursor:pointer;white-space:nowrap;align-self:inherit}
.cell-act:hover{background:var(--soft,rgba(37,99,235,.08));border-color:var(--gold-soft)}
/* Durante un'operazione lunga il comando riporta l'avanzamento ("Sync… 120"): va spento,
   o resterebbe blu e sembrerebbe ancora cliccabile. */
.cell-act:disabled{color:var(--muted);border-style:dashed;cursor:default;background:none}
.cell-acts{display:flex;align-items:center;gap:5px;flex-wrap:nowrap}

/* ---------- Badge ----------
   Il colore dice UNA cosa sola: a che punto è. La scala è la stessa in tutto il programma,
   così chi cambia sezione non deve reimpararla:
     neutro  = non è ancora partito (bozza, archiviato)
     corso   = in lavorazione, nessuno deve fare niente adesso
     attesa  = richiede un'azione (scaduto, non pagata)
     ok      = concluso bene
     ko      = concluso male, o annullato
   Le ETICHETTE che non sono stati (provenienza, ruolo, tipo) non prendono colore dalla scala:
   hanno la forma vuota col contorno (.badge-tag), altrimenti il verde di un ruolo e il verde di
   uno stato direbbero la stessa cosa senza esserla. */
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:0.857rem;font-weight:600}
.badge-neutro{background:rgba(16,29,56,.08);color:var(--text-strong)}
.badge-corso{background:rgba(37,99,235,.18);color:var(--fg-role,#1d4ed8)}
.badge-attesa{background:rgba(180,120,10,.14);color:var(--warn,#a06a00)}
.badge-ok{background:rgba(46,125,84,.14);color:var(--ok)}
.badge-ko{background:rgba(192,57,43,.12);color:var(--danger)}
/* Il bordo occupa 1px per lato: il padding scende di altrettanto, così un'etichetta e uno
   stato affiancati hanno la stessa altezza e la riga non balla. */
.badge-tag{background:none;border:1px solid var(--border);color:var(--muted);font-weight:600;padding:2px 9px}
/* Nomi storici, tenuti come sinonimi finché tutte le viste non sono passate alla scala. */
.badge-role{background:rgba(37,99,235,.18);color:var(--fg-role,#1d4ed8)}
.badge-on{background:rgba(46,125,84,.14);color:var(--ok)}
.badge-off{background:rgba(192,57,43,.12);color:var(--danger)}
.badge-sys{background:rgba(16,29,56,.08);color:var(--text-strong)}
.badge-warn{background:rgba(180,120,10,.14);color:var(--warn,#a06a00)}
/* Esiti di una stessa colonna: pari ampiezza, così la fila si legge in verticale. */
.badge-stato{min-width:62px;text-align:center}

/* ---------- Switch ---------- */
.switch{position:relative;display:inline-block;width:42px;height:24px;cursor:pointer}
.switch input{opacity:0;width:0;height:0}
.switch .track{position:absolute;inset:0;background:#cfd4de;border-radius:999px;transition:.15s}
.switch .track::before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.15s}
.switch input:checked + .track{background:var(--ok)}
.switch input:checked + .track::before{transform:translateX(18px)}
.switch input:disabled + .track{opacity:.5;cursor:not-allowed}

/* ---------- Form ---------- */
/* minmax(0,1fr) e non 1fr: con `1fr` la traccia non scende sotto il min-content dei suoi
   campi, così una select con opzioni lunghe si prendeva 372px lasciandone 206 all'altra
   colonna. Con minmax(0,…) le due colonne restano davvero uguali e il contenuto si adatta. */
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.form-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-grid .full{grid-column:1 / -1}
/* Riquadro di sola lettura con l'aspetto di un campo (Provider, Modalità, Endpoint). */
.field-static{padding:10px 12px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2);color:var(--text-strong);min-height:42px;display:flex;align-items:center;gap:6px}
.form-grid label{display:block;font-size:0.929rem;font-weight:600;color:var(--text-strong);margin-bottom:6px}
.form-grid input,.form-grid select{
  width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:9px;font-size:var(--font-size-base);background:var(--surface);
}
.form-grid input:focus,.form-grid select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(37,99,235,.22)}
.field-err{color:var(--danger);font-size:0.857rem;margin-top:4px}
.hint{color:var(--muted);font-size:0.857rem;margin-top:4px}
.hint.err{color:var(--danger)}
.hint.ok{color:var(--ok,#1e7e34)}
.inline-field{display:flex;gap:6px;align-items:center}
.inline-field input{flex:1 1 auto;min-width:0}
.form-grid input.invalid,.form-grid select.invalid,.form-grid textarea.invalid{
  border-color:var(--danger);box-shadow:0 0 0 3px rgba(192,57,43,.15)
}
/* Campo sconto di riga: toggle % / € + importo (alternativi). */
.sc-cell{display:flex;gap:4px;align-items:center;min-width:0}
.sc-cell input{min-width:0;flex:1}
.row-sc-mode{flex:0 0 auto;width:26px;height:26px;padding:0;line-height:1;cursor:pointer;
  border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--muted);font-weight:700}
.row-sc-mode:hover{border-color:var(--gold);color:var(--gold)}

/* Comandi di ordinamento riga documento: inserisci sopra (＋), sposta su/giù.
   Pastiglie a colore tenue per riconoscerli a colpo d'occhio: verde = aggiunge,
   blu = sposta (il rosso resta al cestino). I picker ⌕/≡ restano neutri di proposito. */
.row-tools{display:inline-flex;gap:2px;align-items:center;flex:0 0 auto}
.row-tool{border:1px solid var(--border);background:var(--surface);border-radius:6px;width:24px;height:24px;
  line-height:1;padding:0;cursor:pointer;color:var(--muted);font-size:.85rem;
  transition:background .12s,border-color .12s,color .12s}
.row-tool-add{background:rgba(46,125,84,.10);border-color:rgba(46,125,84,.35);color:var(--ok)}
.row-tool-add:hover{background:rgba(46,125,84,.20);border-color:var(--ok)}
.row-tool-move{background:rgba(37,99,235,.10);border-color:rgba(37,99,235,.35);color:var(--gold)}
.row-tool-move:hover{background:rgba(37,99,235,.20);border-color:var(--gold)}

/* Campo "scegli anagrafica" (UI.anagraficaField): sostituisce il select a elenco fisso e apre
   un picker con ricerca lato server. Deve somigliare a un select, non a un pulsante. */
.anag-field{width:100%;position:relative}
.anag-field.is-clearable .anag-field-btn{padding-right:34px}
.anag-field-x{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:24px;height:24px;line-height:1;border:0;border-radius:6px;background:transparent;
  color:var(--muted);font-size:1.15rem;cursor:pointer;
}
.anag-field-x:hover{background:rgba(192,57,43,.12);color:var(--danger)}
.anag-field-btn{
  width:100%;text-align:left;padding:10px 12px;border:1px solid var(--border);border-radius:9px;
  font-size:var(--font-size-base);font-family:inherit;background:var(--surface);color:var(--text);cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.anag-field-btn:hover{border-color:var(--gold)}
.anag-field-btn:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(37,99,235,.22)}
.anag-field.is-disabled .anag-field-btn{background:var(--soft,#f1f5f9);color:var(--muted);cursor:not-allowed}
.anag-field.is-disabled .anag-field-btn:hover{border-color:var(--border)}
/* Il campo vuoto parla come il "— seleziona —" che sostituisce. */
.anag-field:not(.field-picked) .anag-field-btn{color:var(--muted)}
/* markPicked evidenzia il contenitore, ma qui è il pulsante a occupare tutta la superficie:
   senza questo, il verde della selezione resterebbe nascosto sotto il fondo bianco del pulsante. */
.anag-field.field-picked{background:transparent!important;border-color:transparent!important}
.anag-field.field-picked .anag-field-btn{
  border-color:var(--ok);background:rgba(46,125,84,.10);font-weight:700;color:var(--text-strong);
}
/* Campo bloccato (es. cliente di un DDT nato da ordine): dev'essere evidente che non si tocca,
   quindi lo stato "spento" vince sull'evidenziazione verde della selezione. */
.anag-field.is-disabled .anag-field-btn,
.anag-field.is-disabled.field-picked .anag-field-btn{
  background:var(--soft,#f1f5f9);border-color:var(--border);color:var(--muted);font-weight:600;cursor:not-allowed;
}

/* Evidenzia una selezione di entità (cliente/fornitore/ticket…) fatta da liste lunghe. */
.field-picked{border-color:var(--ok)!important;background:rgba(46,125,84,.10)!important;font-weight:700;color:var(--text-strong)!important}
.field-picked-note{font-size:.9rem;font-weight:600;color:var(--ok);display:flex;align-items:center;gap:4px}

/* ---------- Modale ---------- */
.overlay{position:fixed;inset:0;background:rgba(16,29,56,.45);display:flex;align-items:center;justify-content:center;padding:20px;z-index:100}
/* Colonna flessibile: a scorrere è il solo corpo, così titolo e pulsanti restano fermi.
   Prima scorreva tutto il modale e nelle schede lunghe il pulsante "Salva" finiva fuori
   schermo: bisognava scorrere fino in fondo per salvare. */
.modal{background:var(--surface);border-radius:var(--radius);box-shadow:0 20px 50px rgba(16,29,56,.3);width:100%;max-width:560px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column}
.modal.modal-wide{max-width:880px}
/* modale extra-largo (es. lettura messaggio email): usa lo spazio dello schermo per dare respiro */
.modal.modal-xwide{max-width:min(1180px,94vw)}
.modal h3{margin:0;padding:20px 22px;border-bottom:1px solid var(--line);color:var(--text-strong);font-size:1.286rem;flex:0 0 auto}
.modal .modal-body{padding:20px 22px;flex:1 1 auto;overflow:auto;min-height:0}
.modal .modal-foot{padding:16px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;flex:0 0 auto}

/* ---------- Matrice permessi ---------- */
.perm-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.perm-tab{padding:8px 14px;border-radius:9px;border:1px solid var(--border);background:var(--surface);color:var(--text-strong);font-weight:600;font-size:0.929rem;cursor:pointer}
.perm-tab.active{background:var(--navy);color:#fff;border-color:var(--text-strong)}
.perm-matrix th.res{ text-transform:none;letter-spacing:0;font-size:0.929rem}
.perm-matrix td.chk{text-align:center}
.perm-note{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:#7a6a45;font-size:0.929rem;margin-bottom:16px}

/* ---------- Toast ---------- */
#toast-root{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;z-index:200}
.toast{background:var(--navy);color:#fff;padding:13px 18px;border-radius:10px;box-shadow:var(--shadow);font-size:1rem;font-weight:600;opacity:0;transform:translateY(10px);transition:.2s}
.toast.show{opacity:1;transform:none}
.toast.ok{background:var(--ok)}
.toast.error{background:var(--danger)}

/* ---------- Aspetto (preferenze utente) ---------- */
.aspetto-group{margin:12px 0}
.aspetto-group>label{display:block;font-size:0.929rem;font-weight:600;color:var(--text-strong);margin-bottom:7px}
.aspetto-row{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:7px 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--ink);font-size:0.929rem;font-weight:600;cursor:pointer}
.chip:hover{border-color:var(--gold)}
.chip.active{border-color:var(--gold);background:rgba(37,99,235,.16);color:var(--text-strong)}
.swatch{position:relative;width:88px;height:54px;border-radius:10px;border:2px solid transparent;box-shadow:0 1px 3px rgba(16,29,56,.15);cursor:pointer;overflow:hidden;padding:0}
.swatch.active{border-color:var(--text-strong);box-shadow:0 0 0 2px var(--gold)}
.swatch-lbl{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.42);color:#fff;font-size:0.786rem;font-weight:600;padding:2px 4px;text-align:center}

/* ---------- Barra filtri ---------- */
.filter-bar{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.flt-lbl{font-size:13px;font-weight:600;color:var(--muted)}
/* Campo che sta mostrando un valore ereditato (es. dall'anagrafica azienda): non modificabile
   ma pienamente leggibile — il punto è proprio vedere quale dato verrà usato. */
input.is-inherited,select.is-inherited{background:var(--surface-2);border-style:dashed;cursor:default}
/* Un select bloccato è disabled: il browser lo sbiadisce, ma qui il valore va letto. */
select.is-inherited:disabled{opacity:1;color:var(--ink)}
.filter-input{padding:10px 12px;border:1px solid var(--border);border-radius:9px;font-size:var(--font-size-base);background:var(--surface)}
.filter-input[type=search]{flex:1;min-width:220px}
.filter-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(37,99,235,.22)}
/* L'esportazione riguarda tutta la barra (esporta cio' che i filtri hanno selezionato):
   sta in fondo, staccata dai campi che compone. */
.filter-exp{margin-left:auto;white-space:nowrap}

/* ---------- Paginazione ---------- */
.pager{display:flex;align-items:center;gap:10px;margin-top:14px;justify-content:flex-end}
.pager-info{color:var(--muted);font-size:0.929rem;margin-right:auto}

/* ---------- Checkbox group ---------- */
.checks{display:flex;gap:16px;flex-wrap:wrap;padding-top:4px}
.check{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--text-strong);font-size:1rem;cursor:pointer}
.check input{width:16px;height:16px}
.form-grid textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:9px;font-size:var(--font-size-base);font-family:inherit;resize:vertical}
.form-grid textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(37,99,235,.22)}

/* ---------- Movimenti magazzino ---------- */
.mov-head{margin-bottom:12px}
.mov-sub{margin:20px 0 10px;color:var(--text-strong);font-size:1.071rem;border-top:1px solid var(--line);padding-top:16px}
.mov-form .btn-row{margin-top:12px;justify-content:flex-end}

/* ---------- Editor righe documento (fatture/offerte) ---------- */
.righe-table{width:100%;border-collapse:collapse;font-size:0.929rem;margin-top:6px}
.righe-table th{font-size:0.786rem;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);text-align:left;padding:4px 6px}
.righe-table td{padding:4px 6px;vertical-align:top}
.righe-table input,.righe-table select{width:100%;padding:7px 8px;border:1px solid var(--border);border-radius:7px;font-size:0.929rem;background:var(--surface)}
.righe-table input:focus,.righe-table select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(37,99,235,.2)}
.righe-table td.num input{text-align:right}
.righe-table td.imp{text-align:right;white-space:nowrap;padding-top:13px;color:var(--text-strong);font-weight:600}
.righe-table .row-del{background:rgba(192,57,43,.10);border:1px solid rgba(192,57,43,.35);border-radius:6px;color:var(--danger);cursor:pointer;font-size:1.1rem;line-height:1;padding:2px 8px;transition:background .12s,border-color .12s}
.righe-table .row-del:hover{background:rgba(192,57,43,.20);border-color:var(--danger)}
/* Righe documento (offerte/ordini/fatture): colonne a larghezza fissa così la
   Descrizione prende tutto lo spazio residuo invece di essere schiacciata dalle
   select Natura/Categoria. La colonna 1 resta auto → assorbe il rimanente. */
.doc-righe{table-layout:fixed}
.doc-righe th:nth-child(2),.doc-righe td:nth-child(2){width:52px}   /* Q.tà */
.doc-righe th:nth-child(3),.doc-righe td:nth-child(3){width:86px}   /* Prezzo */
.doc-righe th:nth-child(4),.doc-righe td:nth-child(4){width:52px}   /* Sconto */
.doc-righe th:nth-child(5),.doc-righe td:nth-child(5){width:56px}   /* IVA% */
.doc-righe th:nth-child(6),.doc-righe td:nth-child(6){width:98px}   /* Natura */
.doc-righe th:nth-child(7),.doc-righe td:nth-child(7){width:112px}  /* Categoria */
.doc-righe th:nth-child(8),.doc-righe td:nth-child(8){width:80px}   /* Importo */
.doc-righe th:nth-child(9),.doc-righe td:nth-child(9){width:32px}   /* elimina */
.doc-righe select{width:100%;max-width:100%;text-overflow:ellipsis;padding:7px 6px;border:1px solid var(--border);border-radius:7px;font-size:0.929rem;background:var(--surface)}
/* Cella descrizione con pulsante "scegli articolo" a sinistra dell'input. */
td.desc-cell{display:flex;gap:4px;align-items:center}
td.desc-cell input{flex:1;min-width:0}
.row-art{flex:0 0 auto;border:1px solid var(--border);background:var(--surface);border-radius:6px;cursor:pointer;padding:6px 8px;color:var(--muted);font-size:.95rem;line-height:1}
.row-art:hover{border-color:var(--gold);color:var(--text-strong)}
.row-art.linked{border-color:var(--gold);color:var(--gold)}

/* Righe documento a "schede" su due livelli (riga 1: listino/descrizione/categoria; riga 2: numeri). */
.riga-list{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.riga-card{border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--surface)}
.riga-card input,.riga-card select{width:100%;padding:7px 8px;border:1px solid var(--border);border-radius:7px;font-size:0.929rem;background:var(--surface)}
.riga-card input:focus,.riga-card select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(37,99,235,.2)}
.riga-l1{display:flex;gap:8px;align-items:center}
.riga-l1 input{flex:1 1 auto;min-width:0}                 /* descrizione: si allunga */
.riga-l1 .row-cat{flex:0 0 190px;width:190px}
.riga-card .row-del{flex:0 0 auto;margin-left:2px;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;background:rgba(192,57,43,.10);border:1px solid rgba(192,57,43,.35);border-radius:8px;color:var(--danger);cursor:pointer;padding:0;transition:background .12s,border-color .12s,color .12s}
.riga-card .row-del:hover{background:rgba(192,57,43,.20);border-color:var(--danger);color:var(--danger)}
.riga-card .row-del svg{display:block}
/* Riga "sezione": etichetta a tutta larghezza per dividere il documento in fasi (non valorizzata). */
.riga-sezione{background:var(--accent-wash,#e6f1fb);border-color:var(--gold-strong,#1d4ed8);border-left:3px solid var(--gold-strong,#1d4ed8)}
.riga-sezione .sezione-tag{flex:0 0 auto;color:var(--gold-strong,#1d4ed8);font-weight:700;font-size:1rem}
.riga-sezione .sezione-input{flex:1 1 auto;min-width:0;font-weight:700;color:var(--navy,#0f172a);background:var(--surface)}
.riga-sezione .sezione-input::placeholder{font-weight:600;color:var(--muted)}
.riga-sezione .sezione-sub{flex:0 0 auto;margin-left:auto;font-weight:700;color:var(--gold-strong,#1d4ed8);white-space:nowrap;font-variant-numeric:tabular-nums}
.riga-sezione .sezione-sub:not(:empty){padding:0 6px}
/* Scadenze come schede su singola riga (su desktop niente wrap; su mobile impila). */
.scad-card .riga-l2{align-items:flex-end;flex-wrap:nowrap}
.fld.scad-data{width:160px;flex:0 0 auto}
.fld.scad-mod{flex:1 1 140px;min-width:120px}
@media(max-width:640px){ .scad-card .riga-l2{flex-wrap:wrap} .fld.scad-data{flex:1 1 100%;width:auto} }
.riga-l2{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-top:8px}
.fld{display:flex;flex-direction:column;gap:3px}
.fld > label{font-size:0.7rem;text-transform:uppercase;letter-spacing:.3px;color:var(--muted)}
.fld.num{width:82px}
.fld.num input{text-align:right}
.fld.iva{width:118px}
.fld.natura{width:126px}
.fld.conto{flex:1 1 200px;min-width:170px}
.fld.imp{margin-left:auto;align-items:flex-end}
.fld.imp .riga-imp{font-weight:600;color:var(--text-strong);white-space:nowrap;padding:7px 0}
@media (max-width:640px){
  .riga-l1{flex-wrap:wrap}
  .riga-l1 .row-cat{flex:1 1 100%;width:auto}
  .fld.conto{flex:1 1 100%}
}
/* Pulsante selettore Codice IVA nella cella IVA%. */
.iva-cell{display:flex;gap:4px;align-items:center}
.iva-cell input{min-width:0}
.row-iva{flex:0 0 auto;border:1px solid var(--border);background:var(--surface);border-radius:6px;cursor:pointer;padding:6px 7px;color:var(--muted);font-size:.9rem;line-height:1}
.row-iva:hover{border-color:var(--gold);color:var(--text-strong)}
.row-iva.linked{border-color:var(--gold);color:var(--gold)}
/* Modale selettore articolo. */
.art-pick-search{width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:8px;font-size:1rem;margin-bottom:10px}
.art-pick-list{max-height:52vh;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.art-pick-item{display:flex;justify-content:space-between;gap:12px;align-items:baseline;width:100%;text-align:left;background:none;border:0;border-radius:7px;padding:9px 10px;cursor:pointer}
.art-pick-item:hover{background:var(--soft, rgba(37,99,235,.08))}
/* Provenienza di un tenant (Aziende): riga sopra i campi, non un campo. */
.origine-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);font-size:13px}
/* Scostamenti fra tenant e anagrafica di provenienza: valore attuale -> valore in anagrafica. */
.scost-box{border:1px solid rgba(180,120,10,.35);background:rgba(180,120,10,.07);border-radius:8px;padding:10px 12px}
.scost-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.scost-list{display:flex;flex-direction:column;gap:3px;font-size:13px}
.scost-riga{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.scost-campo{min-width:150px;color:var(--muted);font-weight:600}
.scost-da{text-decoration:line-through;opacity:.7}
.scost-freccia{opacity:.6}
.scost-a{font-weight:600}
/* Voce mostrata ma non scegliibile (es. anagrafica già diventata tenant): resta leggibile. */
.art-pick-item:disabled{cursor:default;opacity:.6}
.art-pick-item:disabled:hover{background:none}
.art-pick-desc{font-weight:600;color:var(--text-strong)}
.art-pick-meta{color:var(--muted);font-size:.82rem;white-space:nowrap}
.righe-tot{margin-top:14px}
.righe-tot .row{display:flex;justify-content:flex-end;gap:20px;padding:3px 0;font-size:1rem}
.righe-tot .row .lbl{color:var(--muted)}
.righe-tot .row .val{min-width:120px;text-align:right}
.righe-tot .row.grand{font-weight:700;font-size:1.214rem;color:var(--text-strong);border-top:1px solid var(--line);margin-top:6px;padding-top:8px}
/* Sub-totali imponibile per categoria: stesso allineamento del box totali (etichetta + importo staccati). */
.righe-cat-tot{margin-top:10px}
.righe-cat-tot>.lbl{display:block;font-weight:600;color:var(--muted);margin-bottom:2px}
.righe-cat-tot .row{display:flex;justify-content:flex-end;gap:20px;padding:2px 0;font-size:.95rem}
.righe-cat-tot .row .lbl{color:var(--muted)}
.righe-cat-tot .row .val{min-width:120px;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- Sezioni file (contratti) ---------- */
.file-box{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:14px}
.file-title{font-weight:600;color:var(--text-strong);margin-bottom:10px}

/* ---------- 2FA / Sicurezza ---------- */
.qr-box{display:flex;justify-content:center;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:10px;margin:12px 0}
.qr-box svg{width:190px;height:190px;max-width:100%}
.card code, .hint code{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--surface-2);padding:2px 7px;border-radius:5px;font-size:1rem}
.recovery-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:14px}
.recovery-list code{background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:9px 10px;font-size:1.071rem;letter-spacing:1px;text-align:center;font-family:ui-monospace,Menlo,Consolas,monospace}

/* ---------- Stato vuoto ---------- */
.empty{text-align:center;color:var(--muted);padding:40px 20px}
/* Stato vuoto in due righe: cosa non c'è, e sotto il gesto per rimediare (vedi UI.vuoto). */
.empty-cosa{color:var(--text-strong);font-weight:600}
.empty-gesto{margin-top:6px;font-size:0.929rem}

@media (max-width:820px){
  .layout{flex-direction:column}
  .sidebar{width:auto;flex:none;display:flex;gap:6px;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}
  .nav-item{margin-bottom:0;white-space:nowrap}
  /* Sidebar orizzontale: la barra "sei qui" passa da sinistra a sotto la voce. */
  .nav-item.active{box-shadow:inset 0 -3px 0 0 var(--accento,var(--gold))}
  .nav-group,.nav-subgroup,.nav-hub-toggle{display:none}
  .nav-group-wrap,.nav-group-items,.nav-subgroup-wrap,.nav-subgroup-items,.nav-hub-wrap,.nav-hub-head{display:contents}
  /* Barra orizzontale: niente collasso, tutte le voci in linea (anche i corpi hub chiusi). */
  .nav-hub-wrap.collapsed .nav-group-items{max-height:none!important}
  /* Ricerca/preferiti: la ricerca resta come chip iniziale; il titolo "Preferiti" e le stelle
     spariscono (senza hover), i preferiti confluiscono nella barra orizzontale. */
  .nav-search{position:static;flex:0 0 auto;width:auto;margin:0;white-space:nowrap}
  .nav-search-kbd{display:none}
  .nav-fav-title{display:none}
  .nav-fav-wrap,.nav-recent-wrap{display:contents}
  .nav-star,.nav-showall{display:none}
  .form-grid{grid-template-columns:1fr}
  .form-grid.cols-3{grid-template-columns:1fr}
}
/* Prima nota — riquadro quadratura Dare/Avere */
.pn-tot{margin-top:10px;max-width:340px;margin-left:auto}
.pn-tot-row{display:flex;justify-content:space-between;gap:16px;padding:4px 8px}
.pn-tot-row.ok{color:#059669;background:rgba(5,150,105,.08);border-radius:6px}
.pn-tot-row.ko{color:var(--danger);background:rgba(220,38,38,.08);border-radius:6px}
/* Prima nota — striscia riepilogo di periodo + anteprima conti in elenco */
.pn-summary{display:flex;gap:10px;flex-wrap:wrap;margin:2px 0 14px}
.pn-sum-item{background:rgba(127,127,127,.10);border:1px solid var(--border);border-radius:8px;padding:6px 12px;font-size:0.9rem;color:var(--muted)}
.pn-sum-item strong{color:var(--text-strong);font-weight:700}
.pn-mov{margin-top:2px;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34ch}
.pn-cliente-link{color:inherit;text-decoration:none;cursor:pointer;border-bottom:1px dotted var(--border)}
.pn-cliente-link:hover{color:var(--gold,#2563eb);border-bottom-color:currentColor}
/* Bilancio/registri contabili — righe raggruppate e totali */
.data-table tr.row-group td{background:var(--grid-group-bg,#eef4fb);font-weight:700;color:var(--text-strong);text-transform:uppercase;font-size:.8rem;letter-spacing:.03em}
.data-table tr.row-tot td{border-top:2px solid var(--border);font-weight:700;color:var(--text-strong)}
/* Trasmissione SDI — riga "segna manualmente" */
.sdi-mark{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.sdi-mark input[type=text]{flex:1 1 160px;min-width:0}

/* --- Integrazioni: chiavi API e webhook ------------------------------------ */
/* Scelta degli scope: una riga per permesso, casella + spiegazione + codice tecnico. */
.apikey-scopes{display:flex;flex-direction:column;gap:8px}
.apikey-scope{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:9px;cursor:pointer}
.apikey-scope:hover{background:var(--surface-2)}
.apikey-scope input{margin:0}
.apikey-scope span{flex:1}
.apikey-scope code,.apikey-plain{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.apikey-scope code{font-size:.82rem;color:var(--muted)}
/* La chiave in chiaro, mostrata una volta: casella larga, leggibile, accanto al bottone Copia. */
.apikey-plain-row{display:flex;gap:8px;align-items:center;margin:6px 0}
.apikey-plain{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--gold);border-radius:9px;background:var(--surface-2);font-size:.9rem}
/* Payload/URL nei webhook: monospazio, va a capo, non sfonda la modale. */
.wh-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem;word-break:break-all}
.wh-pre{white-space:pre-wrap;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:10px;max-height:240px;overflow:auto}
/* Pulsanti d'azione in coda a una riga di tabella (prova/modifica/elimina). */
.row-actions{display:inline-flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}

/* ---------- Wizard "Crea pacchetto" (conservazione) ----------
   Sorgente = segmented control (come le settings-tabs); tipi documento = pillole (come le
   cartelle webmail); righe selezionabili con evidenza della selezione (come la lista posta). */
.cons-hint{color:var(--muted);font-size:0.857rem;margin:2px 0 12px;line-height:1.4}
.cons-src-lbl,.df-intent-lbl{display:block;font-size:0.929rem;font-weight:600;color:var(--text-strong);margin:14px 0 6px}
.cons-src,.df-intent{display:inline-flex;gap:4px;padding:4px;margin:0 0 6px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;flex-wrap:wrap}
.cons-src-btn,.df-intent-btn{border:0;border-radius:7px;padding:8px 15px;background:none;color:var(--muted);font:inherit;font-size:0.929rem;font-weight:600;cursor:pointer;transition:color .12s,background .12s}
.cons-src-btn:hover,.df-intent-btn:hover{color:var(--text-strong)}
.cons-src-btn.active,.df-intent-btn.active{background:var(--surface);color:var(--text-strong);box-shadow:0 1px 3px rgba(0,0,0,.10)}
/* Docflow — guida ai tipi di campo del modulo: box compatto e discreto sotto "Campi del modulo". */
.df-tipi-guida{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:10px;font-size:0.86rem}
.df-tipi-guida-tit{font-weight:700;color:var(--text-strong);margin-bottom:4px;font-size:0.78rem;text-transform:uppercase;letter-spacing:.04em}
.df-tipi-guida-row{color:var(--muted);line-height:1.55}
.df-tipi-guida-row b{color:var(--text-strong);font-weight:600}
.df-tipi-guida-tip{margin-top:6px;color:var(--muted);font-style:italic;line-height:1.45}
.cons-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0 8px}
.cons-tools .filter-input[type=search]{flex:1 1 180px;min-width:140px}
.cons-count{margin-left:auto;white-space:nowrap;color:var(--muted);font-size:0.857rem}
.cons-count strong{color:var(--text-strong)}
.cons-types{display:flex;gap:6px;flex-wrap:wrap}
.cons-type{background:none;border:1px solid var(--border);border-radius:999px;padding:5px 14px;cursor:pointer;color:var(--muted);font:inherit;font-weight:600;font-size:0.857rem;transition:color .12s,border-color .12s,background .12s}
.cons-type:hover{color:var(--text-strong)}
.cons-type.active{background:rgba(37,99,235,.10);color:var(--text-strong);border-color:var(--gold)}
.cons-list{max-height:320px;overflow:auto;border:1px solid var(--border);border-radius:10px}
.cons-row{display:flex;align-items:center;gap:11px;padding:9px 12px;border-bottom:1px solid var(--grid-line);cursor:pointer;margin:0}
.cons-row:last-child{border-bottom:0}
.cons-row:hover{background:var(--grid-hover)}
.cons-row.sel{background:rgba(37,99,235,.08)}
.cons-row>input[type=checkbox]{width:16px;height:16px;flex:0 0 auto;margin:0;cursor:pointer}
.cons-row-main{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:3px}
.cons-row-t{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.cons-row-num{font-weight:700;color:var(--text-strong)}
.cons-row-sub{font-size:0.821rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cons-row-imp{margin-left:auto;font-weight:600;color:var(--text-strong);white-space:nowrap}
.cons-up{display:grid;grid-template-columns:1fr 150px 1fr auto;gap:8px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--grid-line)}
.cons-up:last-child{border-bottom:0}
.cons-up-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--text-strong)}
.cons-up select,.cons-up input{width:100%;padding:7px 9px;border:1px solid var(--border);border-radius:8px;font-size:0.893rem;background:var(--surface)}
.cons-up select:focus,.cons-up input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(37,99,235,.20)}
.cons-up .row-del{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;background:rgba(192,57,43,.10);border:1px solid rgba(192,57,43,.35);border-radius:8px;color:var(--danger);cursor:pointer;padding:0;font-size:1.05rem;line-height:1}
.cons-up .row-del:hover{background:rgba(192,57,43,.20);border-color:var(--danger)}
.cons-empty{padding:26px 16px;text-align:center;color:var(--muted);font-size:0.929rem}
/* Intervallo date "Dal … al …" nelle barre strumenti */
.cons-daterange{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.cons-dr-lbl{font-size:0.821rem;color:var(--muted);font-weight:600}
.cons-daterange input[type=date]{width:auto;flex:0 0 auto;padding:8px 10px}
/* Barra filtri sopra la tabella dell'archivio pacchetti */
.cons-archivio-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.cons-archivio-tools .filter-input[type=search]{flex:1 1 200px;min-width:150px}
/* KPI di sintesi sopra l'elenco (griglia compatta) */
.cons-kpi{margin:2px 0 16px}
/* Tabella dell'archivio pacchetti: usa table.grid come il resto dell'app, un filo più ariosa + zebra. */
table.grid.cons-grid th,table.grid.cons-grid td{padding-top:calc(var(--row-py) + 3px);padding-bottom:calc(var(--row-py) + 3px)}
table.grid.cons-grid tbody tr:nth-child(even) td{background:var(--surface-2)}
table.grid.cons-grid tbody tr:hover td{background:var(--grid-hover)}
tr.cons-clic{cursor:pointer}
.cons-name{color:var(--gold);font-weight:700;text-decoration:none}
.cons-name:hover{text-decoration:underline}
/* Scheda pacchetto (pagina di dettaglio) */
.cons-back{display:inline-flex;align-items:center;gap:6px;margin-bottom:14px;font-size:0.857rem;font-weight:600;color:var(--muted);text-decoration:none}
.cons-back:hover{color:var(--gold)}
.cons-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:820px){.cons-cards{grid-template-columns:1fr}}
.cons-card-tit{font-size:1rem;font-weight:700;color:var(--text-strong);margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.cons-kv{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;align-items:baseline;margin:0}
.cons-kv dt{color:var(--muted);font-size:0.857rem;font-weight:600;white-space:nowrap}
.cons-kv dd{margin:0;color:var(--text-strong);min-width:0;word-break:break-word}
.cons-hash{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:0.78rem;word-break:break-all;color:var(--muted)}
.cons-detail-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
/* GDPR — testo lungo (finalità) troncato a due righe nell'elenco */
.gdpr-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:440px;color:var(--muted);font-size:0.9rem;line-height:1.35}
/* GDPR — selettore soggetto (anagrafica/utente) nei consensi e nelle richieste */
.gdpr-lookup{margin-top:4px;border:1px solid var(--line);border-radius:8px;max-height:220px;overflow:auto;background:var(--surface)}
.gdpr-lookup-row{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:8px 10px;cursor:pointer;color:var(--text-strong)}
.gdpr-lookup-row:last-child{border-bottom:0}
.gdpr-lookup-row:hover{background:var(--grid-hover)}
.gdpr-chosen{align-items:center;justify-content:space-between;gap:10px;margin-top:4px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}
/* Docflow — checklist in creazione pratica e log notifiche nella scheda */
.df-checklist{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:8px;padding:6px 10px;max-height:240px;overflow:auto}
.df-check-row{display:flex;align-items:flex-start;gap:8px;padding:6px 2px;cursor:pointer;font-weight:400}
.df-check-row input{margin-top:3px}
.df-notif{padding:6px 0;border-top:1px solid var(--line);font-size:.92rem}
.df-notif:first-of-type{border-top:0}
/* Docflow — anteprime pagine nell'upload multi-pagina dell'operatore */
.df-pages{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.df-page{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:8px;padding:6px}
.df-page img{width:46px;height:46px;object-fit:cover;border-radius:6px;flex:0 0 auto}
.df-page .nm{flex:1;font-size:.9rem;color:var(--text-strong)}
.df-pg-btn{border:0;background:var(--surface-2);border-radius:6px;width:30px;height:30px;font-size:15px;cursor:pointer;color:var(--text-strong)}
.df-pg-btn:disabled{opacity:.35;cursor:default}
/* Docflow — costruttore campi del modulo auto-dichiarativo */
.df-campi{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.df-campo-row{display:flex;gap:8px;align-items:center}
.df-campo-row input[type=text],.df-campo-row select{padding:9px 11px;border:1px solid var(--border);border-radius:9px;font-size:var(--font-size-base);background:var(--surface);color:var(--text-strong)}
.df-campo-row input[type=text]{flex:1;min-width:0}
.df-campo-row select{flex:0 0 150px}
.df-campo-row input[type=text]:focus,.df-campo-row select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(37,99,235,.22)}
.df-campo-row .check{font-size:.9rem;color:var(--muted)}
.df-campo-row .df-pg-btn{flex:0 0 auto;color:var(--danger)}
.df-campo-row .df-pg-btn:hover{background:rgba(192,57,43,.12)}
/* Convenzione campo obbligatorio: asterisco rosso + legenda */
.req-star{color:var(--danger);font-weight:700}
.df-legenda{font-size:.82rem;color:var(--muted);margin-top:10px}
/* Input file in stile MakeGest (pulsante nativo ridisegnato) */
.df-file{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:9px;background:var(--surface);font-size:var(--font-size-base);color:var(--muted);cursor:pointer;box-sizing:border-box}
.df-file:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(37,99,235,.22)}
.df-file::file-selector-button{margin-right:12px;padding:8px 14px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--text-strong);font-weight:600;font-size:.9rem;cursor:pointer;transition:background .15s}
.df-file::file-selector-button:hover{background:var(--grid-hover,#eef2f7)}
/* Stato pratica in evidenza accanto al titolo + aiuto contestuale + banner sola lettura */
.df-stato-hero{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;font-weight:700;font-size:.95rem}
.df-stato-hero-ico svg{width:17px;height:17px}
.df-stato-hero-corso{background:rgba(37,99,235,.12);color:var(--gold)}
.df-stato-hero-ok{background:rgba(46,125,84,.14);color:var(--ok)}
.df-stato-hero-neutro{background:rgba(16,29,56,.10);color:var(--muted)}
.df-stato-hero-ko{background:rgba(192,57,43,.12);color:var(--danger)}
.df-stato-help{font-size:.85rem;color:var(--muted);margin-top:6px}
.df-readonly-banner{display:flex;align-items:flex-start;gap:9px;background:rgba(16,29,56,.05);border:1px solid var(--border);border-left:3px solid var(--muted);border-radius:10px;padding:11px 13px;margin-bottom:16px;font-size:.9rem;color:var(--text-strong)}
.df-readonly-ico{flex:0 0 auto;color:var(--muted)}
.df-readonly-ico svg{width:17px;height:17px}
/* Cella Azioni della checklist/condivisi: pulsanti in riga, stessa larghezza, testo centrato */
.df-az{flex-wrap:wrap;gap:6px}
.df-az .btn{min-width:114px;justify-content:center;text-align:center}
/* Docflow — "chip" del link cliente: campo di sola lettura in stile MakeGest */
.df-link{display:flex;align-items:center;gap:8px;flex:1;min-width:240px;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:8px 12px}
.df-link-ico{color:var(--muted);flex:0 0 auto}
.df-link-input{flex:1;min-width:0;border:0;background:transparent;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.84rem;padding:0;text-overflow:ellipsis;cursor:text}
.df-link-input:focus{outline:none}
/* Docflow — titolo di card con direzione del flusso documentale (dal/al cliente) */
.df-flow-tit{display:flex;align-items:center;gap:8px}
.df-flow-ico{color:var(--muted)}
.df-flow-ico svg{width:18px;height:18px}
.df-flow-dir{display:inline-flex;align-items:center;gap:4px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:var(--surface-2);padding:2px 8px 2px 6px;border-radius:999px}
.df-flow-arrow svg{width:12px;height:12px}
/* Docflow — stepper di avanzamento stato: checklist compatta (icone + etichetta corrente) e firma estesa.
   Scale colore del progetto: neutro/attesa(giallo)/corso(blu)/ok(verde)/ko(rosso). */
.df-stp{display:inline-flex;align-items:flex-start;gap:0;flex-wrap:wrap;row-gap:4px}
.df-stp-node{display:inline-flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.df-stp-dot{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--border);background:var(--surface-2);color:var(--muted)}
.df-stp-dot svg{width:14px;height:14px}
.df-stp-lab{font-size:.66rem;color:var(--muted);line-height:1.2;max-width:72px}
.df-stp-conn{flex:0 0 auto;width:18px;height:2px;background:var(--border);margin-top:11px}
.df-stp-c .df-stp-conn{width:12px}
.df-stp-conn.is-done{background:var(--ok)}
.df-stp-node.is-future .df-stp-dot{opacity:.5}
.df-stp-node.is-done .df-stp-dot{background:rgba(46,125,84,.14);border-color:var(--ok);color:var(--ok)}
.df-stp-node.is-cur .df-stp-dot{border-width:2px}
.df-stp-node.is-cur .df-stp-lab{font-weight:700}
.df-stp-node.sc-ok.is-cur .df-stp-dot{background:rgba(46,125,84,.14);border-color:var(--ok);color:var(--ok)}
.df-stp-node.sc-corso.is-cur .df-stp-dot{background:rgba(37,99,235,.12);border-color:var(--gold);color:var(--gold-strong)}
.df-stp-node.sc-attesa.is-cur .df-stp-dot{background:rgba(160,106,0,.12);border-color:var(--warn,#a06a00);color:var(--warn,#a06a00)}
.df-stp-node.sc-ko.is-cur .df-stp-dot{background:rgba(192,57,43,.12);border-color:var(--danger);color:var(--danger)}
.df-stp-node.sc-neutro.is-cur .df-stp-dot{border-color:var(--muted);color:var(--muted)}
.df-stp-node.sc-ok.is-cur .df-stp-lab{color:var(--ok)}
.df-stp-node.sc-corso.is-cur .df-stp-lab{color:var(--gold-strong)}
.df-stp-node.sc-attesa.is-cur .df-stp-lab{color:var(--warn,#a06a00)}
.df-stp-node.sc-ko.is-cur .df-stp-lab{color:var(--danger)}
/* Docflow — icone nelle azioni: SVG inline che eredita il colore del bottone/badge */
.df-i{display:inline-flex;align-items:center;flex:0 0 auto}
.df-i svg{width:15px;height:15px;display:block}
.btn.df-btn-ico{display:inline-flex;align-items:center;gap:6px}
/* Icone/pulsanti-icona condivisi (design system MakeGest, UI.ico/UI.btnIco). */
.mg-i{display:inline-flex;align-items:center;flex:0 0 auto}
.mg-i svg{width:15px;height:15px;display:block}
.btn.btn-ico{display:inline-flex;align-items:center;gap:6px}
/* Docflow — KPI col icona e tono semantico (giallo = attenzione, rosso = problema) */
.df-kpi{display:flex;align-items:center;gap:12px;cursor:pointer;transition:box-shadow .12s,transform .12s}
.df-kpi:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.df-kpi-active{box-shadow:0 0 0 2px rgba(37,99,235,.45)}
.df-kpi-ico{color:var(--muted)}
.df-kpi-ico svg{width:22px;height:22px}
.df-kpi-warn{border-top-color:var(--warn,#a06a00)}
.df-kpi-warn .kpi-num,.df-kpi-warn .df-kpi-ico{color:var(--warn,#a06a00)}
.df-kpi-danger{border-top-color:var(--danger)}
.df-kpi-danger .kpi-num,.df-kpi-danger .df-kpi-ico{color:var(--danger)}
/* Docflow — stato del documento a colpo d'occhio: icona colorata + velatura di riga per stato
   (niente barra laterale: la barra per-cella risultava una linea verticale spezzata) */
.df-stato-cell{display:inline-flex;align-items:center;gap:7px}
.df-st-ico svg{width:16px;height:16px}
.df-row-corso{background:rgba(37,99,235,.045)}
.df-row-attesa{background:rgba(160,106,0,.07)}
.df-row-ok{background:rgba(46,125,84,.05)}
.df-row-ko{background:rgba(192,57,43,.055)}
.df-row-corso .df-st-ico{color:var(--gold)}
.df-row-attesa .df-st-ico{color:var(--warn,#a06a00)}
.df-row-ok .df-st-ico{color:var(--ok)}
.df-row-ko .df-st-ico{color:var(--danger)}
.df-row-neutro .df-st-ico{color:var(--muted)}
/* ── Cestino Docflow ── */
.df-tab-cestino{display:inline-flex;align-items:center;gap:6px}
.df-tab-cestino .df-tab-ico svg{width:15px;height:15px}
.df-tab-cestino.active .df-tab-ico,.df-tab-cestino-full .df-tab-ico{color:var(--danger)}
.df-tab-cnt{min-width:17px;height:17px;padding:0 5px;border-radius:9px;font-size:.72rem;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;background:rgba(192,57,43,.14);color:var(--danger)}
.df-tab-cnt:empty{display:none}
.df-trash-note{display:flex;align-items:flex-start;gap:9px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:10px;padding:11px 13px;margin-bottom:14px}
.df-trash-note-ico{flex:0 0 auto;color:var(--muted)}
.df-trash-note-ico svg{width:17px;height:17px}
.df-trash-row td{background:rgba(192,57,43,.028)}
@media(max-width:640px){.cons-up{grid-template-columns:1fr auto}.cons-up select,.cons-up .cons-up-title{grid-column:1/-1}}

/* ── DPA (contratto sul trattamento dati, art. 28) ── */
.dpa-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.dpa-doc{max-height:56vh;overflow-y:auto;padding:20px 22px;line-height:1.55;color:var(--text)}
.dpa-doc .dpa-sub{color:var(--muted);font-style:italic;margin:0 0 14px}
.dpa-doc h2{font-size:1.07rem;color:var(--text-strong);margin:20px 0 6px;padding-top:12px;border-top:1px solid var(--border)}
.dpa-doc h2:first-of-type{border-top:0;padding-top:0;margin-top:4px}
.dpa-doc p{margin:6px 0}
.dpa-doc ul{margin:6px 0 6px 4px;padding-left:18px}
.dpa-doc li{margin:3px 0}
.dpa-doc .dpa-note{margin-top:16px;padding:11px 13px;background:var(--accent-wash);border-radius:8px;font-size:0.92rem;color:var(--text)}
.dpa-table{width:100%;border-collapse:collapse;margin:8px 0;font-size:0.9rem}
.dpa-table th,.dpa-table td{border:1px solid var(--border);padding:7px 9px;text-align:left;vertical-align:top}
.dpa-table th{background:var(--surface-2,rgba(0,0,0,.03));color:var(--text-strong);font-weight:600}
.dpa-accept{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;padding:14px 16px;
  background:var(--card,#fff);border:1px solid var(--border);border-radius:10px}
.dpa-accept .check{margin:0}
.dpa-accept-done{background:rgba(39,174,96,.08);border-color:rgba(39,174,96,.35);color:var(--text-strong)}
.dpa-accept-wait{background:rgba(230,162,60,.10);border-color:rgba(230,162,60,.4)}
.dpa-accept .dpa-check{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:#27ae60;color:#fff;font-weight:700;flex:0 0 auto}
.dpa-editor{width:100%;font-family:var(--font-mono,ui-monospace,Menlo,Consolas,monospace);font-size:0.86rem;line-height:1.5}
/* Gate bloccante: nasconde la sidebar, il contenuto occupa tutta la larghezza */
body.dpa-gate .sidebar{display:none}
body.dpa-gate .content{max-width:920px;margin:0 auto}
/* Avviso non bloccante per gli operatori */
.dpa-banner{background:rgba(230,162,60,.14);border-bottom:1px solid rgba(230,162,60,.5);
  color:var(--text-strong);padding:9px 20px;font-size:0.92rem;text-align:center}