/* ════════════════════════════════════════════════════════════════════════
   RESTYLE PRO — design system "professionale" per Vibe CRM.
   Sorgente: restyle/Restyle Pro - Mockup.html
   File generato: 2026-04-26 (ios154d4)

   Architettura:
   - tutto è scoped a `.pro-page` → applicato al <main class="main pro-page">.
   - sidebar e topbar (fuori da main) restano col tema Vibe.
   - "Bridge legacy": ridefinisce le CSS var Vibe (--bg, --card, --text,
     --accent, --border, --shadow, --radius, --success/warning/danger)
     puntandole ai valori Pro → tutto il markup esistente che usa
     var(--xxx) prende automaticamente la palette Pro senza riscriverlo.
   - Classi nuove con prefisso `.pro-*` per evitare collisioni.
   - Override per markup legacy comune: .card, .btn, .badge, .stat-card,
     <table>, input/select/textarea, .form-control, .form-select.

   Per fare upgrade del look del CRM in futuro, modificare SOLO questo file.
   index.html lo carica via <link rel="stylesheet">.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Token Pro + bridge legacy ─────────────────────────────────────── */
.pro-page{
  /* Tokens Pro */
  --pro-primary:#2563EB;--pro-primary-600:#1D4ED8;--pro-primary-700:#1E40AF;
  --pro-primary-50:#EFF6FF;--pro-primary-100:#DBEAFE;
  --pro-primary-tint:rgba(37,99,235,.08);
  --pro-bg:#F7F8FA;--pro-surface:#FFFFFF;--pro-surface-2:#FAFBFC;
  --pro-border:#E6E8EC;--pro-border-2:#EEF0F4;
  --pro-fg:#0E1116;--pro-fg-2:#2B313B;--pro-fg-muted:#5B6573;--pro-fg-soft:#8A93A2;
  --pro-success:#0E9F6E;--pro-success-bg:#E6F6F0;
  --pro-warning:#B7791F;--pro-warning-bg:#FDF2D9;
  --pro-danger:#D43F3F;--pro-danger-bg:#FCE7E7;
  --pro-info:#2563EB;--pro-info-bg:#EFF6FF;
  --pro-r-sm:6px;--pro-r:10px;--pro-r-md:12px;--pro-r-lg:16px;--pro-r-xl:20px;--pro-r-pill:999px;
  --pro-d:16px;--pro-row-h:52px;
  --pro-shadow-xs:0 1px 0 rgba(15,17,22,.04);
  --pro-shadow-sm:0 1px 2px rgba(15,17,22,.05),0 1px 3px rgba(15,17,22,.04);
  --pro-shadow-md:0 4px 12px rgba(15,17,22,.06),0 2px 4px rgba(15,17,22,.04);
  --pro-shadow-lg:0 12px 28px rgba(15,17,22,.10);
  --pro-ring-focus:0 0 0 3px rgba(37,99,235,.18);
  --pro-font:'Manrope',-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Roboto,sans-serif;
  --pro-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-family:var(--pro-font);
  background:var(--pro-bg);
  color:var(--pro-fg);
  font-feature-settings:'cv11','ss01';
  -webkit-font-smoothing:antialiased;

  /* Legacy bridge: var Vibe → valori Pro */
  --bg: var(--pro-bg);
  --card: var(--pro-surface);
  --bg-card: var(--pro-surface);
  --surface: var(--pro-surface);
  --bg-2: var(--pro-surface);
  --text: var(--pro-fg);
  --text-primary: var(--pro-fg);
  --text-muted: var(--pro-fg-muted);
  --fg-1: var(--pro-fg);
  --fg-2: var(--pro-fg-2);
  --fg-muted: var(--pro-fg-muted);
  --fg-soft: var(--pro-fg-soft);
  --border: var(--pro-border);
  --border-strong: #CDD2DB;
  --accent: var(--pro-primary);
  --accent2: var(--pro-primary-600);
  --accent-light: var(--pro-primary-tint);
  --primary: var(--pro-primary);
  --primary-light: var(--pro-primary-tint);
  --success: var(--pro-success);
  --warning: var(--pro-warning);
  --danger: var(--pro-danger);
  --shadow: var(--pro-shadow-sm);
  --shadow-lg: var(--pro-shadow-lg);
  --shadow-md: var(--pro-shadow-md);
  --shadow-xs: var(--pro-shadow-xs);
  --radius: var(--pro-r-lg);
  --radius-sm: var(--pro-r);
  --radius-md: var(--pro-r-md);
  --radius-lg: var(--pro-r-lg);
}

/* ── Dark mode override ────────────────────────────────────────────── */
html.dark .pro-page{
  --pro-bg:#0F172A;--pro-surface:#1E293B;--pro-surface-2:#243248;
  --pro-border:#334155;--pro-border-2:#2A3849;
  --pro-fg:#F1F5F9;--pro-fg-2:#CBD5E1;--pro-fg-muted:#94A3B8;--pro-fg-soft:#64748B;
  --pro-success-bg:rgba(16,185,129,.18);--pro-warning-bg:rgba(245,158,11,.20);
  --pro-danger-bg:rgba(239,68,68,.18);--pro-info-bg:rgba(59,130,246,.18);
  /* B045 — testi dei badge stato (success/warning/danger/info) in dark mode
     devono essere chiari per WCAG AA, non i colori scuri del light mode.
     Senza questi override il badge ACCETTATO/ATTIVO/SALDATA mostrava verde
     scuro #0E9F6E su bg dark → contrasto fail. Usiamo emerald-300/orange-300/
     red-300/blue-300 come colori chiari pastello. */
  --pro-success:#6EE7B7;--pro-warning:#FCD34D;--pro-danger:#FCA5A5;--pro-info:#93C5FD;
  --pro-shadow-xs:0 1px 0 rgba(0,0,0,.30);
  --pro-shadow-sm:0 1px 2px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.20);
  --pro-shadow-md:0 4px 12px rgba(0,0,0,.40);
  --pro-shadow-lg:0 12px 28px rgba(0,0,0,.50);
  --border-strong: #475569;
}
/* B045 — la rule .pro-page sopra usa i CSS vars overridden, ma alcuni badge
   hanno regole non-prefixate (.pro-pill.green, .badge-soft-green) che leggono
   --pro-success direttamente: estendiamo l'override anche fuori da .pro-page. */
html.dark{
  --pro-success:#6EE7B7;--pro-success-bg:rgba(16,185,129,.18);
  --pro-warning:#FCD34D;--pro-warning-bg:rgba(245,158,11,.20);
  --pro-danger:#FCA5A5;--pro-danger-bg:rgba(239,68,68,.18);
  --pro-info:#93C5FD;--pro-info-bg:rgba(59,130,246,.18);
  --pro-bg:#0F172A;--pro-surface:#1E293B;--pro-fg-muted:#94A3B8;
}

/* ios154f3: FALLBACK GLOBAL TOKENS — definiti su :root così che .pro-pill
   (e qualunque altro componente Pro) funzioni anche se renderizzato fuori
   dal contesto .pro-page (es. modal dinamico appeso a body root, toast,
   notifiche, ecc.). Senza questi, il browser fa fallback a `inherit` che
   spesso significa transparent/invisible. */
:root{
  --pro-bg:#F7F8FA;--pro-surface:#FFFFFF;--pro-surface-2:#FAFBFC;
  --pro-border:#E6E8EC;--pro-border-2:#EEF0F4;
  --pro-fg:#0E1116;--pro-fg-2:#2B313B;--pro-fg-muted:#5B6573;--pro-fg-soft:#8A93A2;
  --pro-success:#0E9F6E;--pro-success-bg:#E6F6F0;
  --pro-warning:#B7791F;--pro-warning-bg:#FDF2D9;
  --pro-danger:#D43F3F;--pro-danger-bg:#FCE7E7;
  --pro-info:#2563EB;--pro-info-bg:#EFF6FF;
  --pro-primary:#2563EB;--pro-primary-600:#1D4ED8;
  --pro-font:'Manrope',-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Roboto,sans-serif;
  /* §12.14 — Font monospace per importi/valuta. Cross-platform chain con
     fallback robusto: macOS native → modern CSS keyword → mac fallback →
     Win/Linux mono → generico. */
  --pro-font-mono:'.SF NS Mono', ui-monospace, 'SF Mono', Menlo, Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
}

/* ════════════════════════════════════════════════════════════════════
   §12.14 — UTILITY .money / [data-money] / .amount-eur per importi
   monetari. Forza monospace + tabular-nums per allineamento verticale.
   ──────────────────────────────────────────────────────────────────── */
.money,
[data-money],
.amount-eur,
.amount-currency,
/* Auto-hook su contenitori ricorrenti che mostrano sempre valuta */
.sc-kpi-value,                    /* KPI scheda cliente (totale speso, AOV) */
.kpi-value,                       /* generico kpi value */
.kit-prezzo,                      /* kit servizio prezzo */
.pbs-price,                       /* product-bundle service price */
.amount,                          /* classe usata in fatture/preventivi */
/* KPI stat-card riepiloghi pagine Preventivi/Fatture/Vouchers/Cassa */
#prv-stat-valore,
#prv-stat-totale,
#inv-stat-fatturato,
#inv-stat-incassato,
#inv-stat-da-incassare,
#vch-stat-valore,
#vch-stat-residuo,
#cassa-stat-totale,
#cassa-stat-incassi,
#cassa-stat-uscite,
#cassa-stat-saldo,
/* Health/Insights dashboard */
#health-aov,
#health-revenue,
/* Modal incasso/registra/cassa input affixati */
#rp-importo,
#qi-importo,
#completa-importo{
  font-family:var(--pro-font-mono)!important;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.2px;
  font-feature-settings:'tnum' 1;
}
/* Allineamento verticale in tabelle: importi sempre right */
table td.money,
table th.money,
table td.amount,
table th.amount{text-align:right}

/* Auto-hook tabelle principali — totali colonna SEMPRE in mono.
   Selettori per colonna "Totale" che è l'ultima/penultima cella prima
   delle azioni in fatture/preventivi/vouchers/cassa. Identifichiamo
   per cella che inizia con € o per attributo data-amount. */
#prv-list-tbody td[style*="text-align:right"][style*="font-weight:700"],
#inv-list-tbody td[style*="text-align:right"][style*="font-weight:700"],
#vouchers-tbody td[style*="text-align:right"]{
  font-family:var(--pro-font-mono)!important;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.2px;
}

/* Sub-totali e righe totali nei modal preventivi/fatture editor */
.modal [id$="-totale"],
.modal [id$="-totale-eur"],
.modal [id$="-subtotale"],
.modal [id$="-iva"],
.modal [id$="-importo"]{
  font-family:var(--pro-font-mono)!important;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.2px;
}

/* Recharts/Chart.js axis labels € — forza tabular-nums via selettore SVG.
   Chart.js axis usa <span> con font computed; su Recharts <text> SVG. */
.chartjs-render-monitor + .chartjs-tooltip,
.chartjs-tooltip,
canvas.chartjs-render-monitor{
  font-feature-settings:'tnum' 1;
}

/* ════════════════════════════════════════════════════════════════════
   TIPOGRAFIA Pro
   ════════════════════════════════════════════════════════════════════ */
.pro-page .pro-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:1.4px;color:var(--pro-fg-soft);font-weight:700;margin:0 0 6px}
.pro-page .pro-display{font-size:28px;line-height:1.1;letter-spacing:-.6px;font-weight:800;color:var(--pro-fg);margin:0;font-family:var(--pro-font)}
.pro-page .pro-sub{font-size:14px;color:var(--pro-fg-muted);margin:4px 0 0;max-width:64ch}
.pro-page .pro-section-title{font-size:16px;letter-spacing:-.2px;font-weight:700;color:var(--pro-fg);margin:0}
.pro-page .pro-sec-tag{display:inline-flex;align-items:center;gap:6px;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--pro-primary);font-weight:800;padding:3px 8px;background:var(--pro-primary-tint);border-radius:4px;margin-bottom:10px}

/* ── Page header Pro ───────────────────────────────────────────────── */
.pro-page .pro-hdr{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--pro-border);flex-wrap:wrap}
.pro-page .pro-hdr-actions{display:flex;gap:10px;flex-shrink:0;flex-wrap:wrap}

/* ════════════════════════════════════════════════════════════════════
   BUTTONS Pro
   ════════════════════════════════════════════════════════════════════ */
.pro-page .pro-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--pro-r);font:600 13.5px var(--pro-font);letter-spacing:-.1px;border:1px solid transparent;cursor:pointer;transition:background .12s,border-color .12s,color .12s,transform .04s,box-shadow .12s;white-space:nowrap;font-family:var(--pro-font)}
.pro-page .pro-btn:active{transform:translateY(1px)}
.pro-page .pro-btn:focus-visible{outline:0;box-shadow:var(--pro-ring-focus)}
.pro-page .pro-btn-primary{background:var(--pro-primary);color:#fff;box-shadow:0 1px 0 rgba(15,17,22,.04),inset 0 1px 0 rgba(255,255,255,.15)}
.pro-page .pro-btn-primary:hover{background:var(--pro-primary-600)}
.pro-page .pro-btn-secondary{background:var(--pro-surface);color:var(--pro-fg);border-color:var(--pro-border);box-shadow:var(--pro-shadow-xs)}
.pro-page .pro-btn-secondary:hover{background:var(--pro-surface-2);border-color:#D6DAE2}
.pro-page .pro-btn-ghost{background:transparent;color:var(--pro-fg-muted)}
.pro-page .pro-btn-ghost:hover{background:var(--pro-primary-tint);color:var(--pro-primary)}
.pro-page .pro-btn-danger{background:var(--pro-danger);color:#fff}
.pro-page .pro-btn-danger:hover{background:#B33636}
.pro-page .pro-btn-icon{width:32px;height:32px;padding:0;display:grid;place-items:center}
.pro-page .pro-btn-sm{padding:6px 12px;font-size:12.5px;border-radius:8px}
.pro-page .pro-btn-lg{padding:12px 20px;font-size:15px;border-radius:var(--pro-r-md)}

/* ════════════════════════════════════════════════════════════════════
   CARD Pro
   ════════════════════════════════════════════════════════════════════ */
.pro-page .pro-card{background:var(--pro-surface);border:1px solid var(--pro-border);border-radius:var(--pro-r-lg);box-shadow:var(--pro-shadow-xs);overflow:hidden}
.pro-page .pro-card-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--pro-border-2);gap:12px;flex-wrap:wrap}
.pro-page .pro-card-hdr h3{margin:0;font-size:15px;font-weight:700;letter-spacing:-.2px;color:var(--pro-fg)}
.pro-page .pro-card-hdr-sub{font-size:12px;color:var(--pro-fg-muted);margin-top:2px}
.pro-page .pro-card-hdr-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pro-page .pro-card-body{padding:18px}

/* ════════════════════════════════════════════════════════════════════
   CHIPS / TABS Pro
   ════════════════════════════════════════════════════════════════════ */
.pro-page .pro-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pro-page .pro-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-size:12.5px;font-weight:600;border-radius:999px;background:var(--pro-bg);border:1px solid var(--pro-border);color:var(--pro-fg-muted);cursor:pointer;font-family:var(--pro-font);transition:all .12s}
.pro-page .pro-chip:hover{color:var(--pro-fg)}
.pro-page .pro-chip.on{background:var(--pro-primary-tint);color:var(--pro-primary);border-color:transparent}
.pro-page .pro-chip-count{font-size:11px;padding:1px 6px;border-radius:999px;background:rgba(91,101,115,.18);color:inherit;font-weight:700}
.pro-page .pro-chip.on .pro-chip-count{background:var(--pro-primary);color:#fff}

/* Segmented control (3M / 6M / 12M / YTD) */
.pro-page .pro-seg{display:inline-flex;padding:3px;background:var(--pro-bg);border:1px solid var(--pro-border);border-radius:8px}
.pro-page .pro-seg button{padding:5px 11px;border:0;background:transparent;font:600 12px var(--pro-font);color:var(--pro-fg-muted);border-radius:6px;cursor:pointer}
.pro-page .pro-seg button.on{background:var(--pro-surface);color:var(--pro-fg);box-shadow:var(--pro-shadow-xs)}

/* ════════════════════════════════════════════════════════════════════
   TABLE Pro
   ════════════════════════════════════════════════════════════════════ */
.pro-page .pro-table-toolbar{display:flex;gap:10px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--pro-border-2);flex-wrap:wrap}
.pro-page .pro-table-search{flex:1 1 260px;max-width:380px;display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--pro-bg);border:1px solid var(--pro-border);border-radius:8px}
.pro-page .pro-table-search:focus-within{border-color:var(--pro-primary);box-shadow:var(--pro-ring-focus)}
.pro-page .pro-table-search input{flex:1;border:0;background:transparent;outline:0;font:inherit;color:var(--pro-fg);font-size:13px;font-family:var(--pro-font)}
.pro-page .pro-table-search input::placeholder{color:var(--pro-fg-soft)}

.pro-page .pro-tbl{width:100%;border-collapse:collapse;font-size:13.5px;font-family:var(--pro-font)}
.pro-page .pro-tbl thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--pro-fg-soft);font-weight:700;padding:10px 16px;border-bottom:1px solid var(--pro-border);background:var(--pro-bg)}
.pro-page .pro-tbl tbody td{padding:14px 16px;border-bottom:1px solid var(--pro-border-2);vertical-align:middle;color:var(--pro-fg)}
.pro-page .pro-tbl tbody tr:hover{background:var(--pro-surface-2)}
.pro-page .pro-tbl tbody tr:last-child td{border-bottom:0}
.pro-page .pro-tbl-name{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--pro-fg)}
.pro-page .pro-tbl-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;font-size:13px;letter-spacing:.2px;flex-shrink:0}
.pro-page .pro-tbl-meta{font-size:12px;color:var(--pro-fg-muted);margin-top:2px;font-weight:500}
.pro-page .pro-tbl-mono{font-family:var(--pro-mono);font-size:12.5px;color:var(--pro-fg-2)}
.pro-page .pro-tbl-actions{display:flex;gap:6px;justify-content:flex-end;align-items:center}

/* Status pills Pro
   ios154e9: estesi i selettori per coprire ANCHE i contesti fuori da .pro-page
   (es. modal dinamici appesi al body root via _pushModal) e aggiunto variant
   `pink` per scope cliente nelle procedure.
   ios154f1: RIMOSSO il pallino ::before — utente vuole pill puliti come dashboard
   (BOZZA / ACCETTATO). Aggiunto text-transform:uppercase + letter-spacing per
   l'aspetto badge "tag-like". Il pallino era più appropriato per status
   indicators inline ma su badge rendeva tutto rumoroso. */
.pro-page .pro-pill,
body .modal .pro-pill,
body .modal-overlay .pro-pill{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;
  font-weight:700;
  padding:3px 9px;
  border-radius:999px;
  letter-spacing:.5px;
  text-transform:uppercase;
  font-family:var(--pro-font);
  white-space:nowrap;
  line-height:1.4;
}
.pro-page .pro-pill.green,
body .modal .pro-pill.green,
body .modal-overlay .pro-pill.green{background:var(--pro-success-bg);color:var(--pro-success)}
.pro-page .pro-pill.amber,
body .modal .pro-pill.amber,
body .modal-overlay .pro-pill.amber{background:var(--pro-warning-bg);color:var(--pro-warning)}
.pro-page .pro-pill.red,
body .modal .pro-pill.red,
body .modal-overlay .pro-pill.red{background:var(--pro-danger-bg);color:var(--pro-danger)}
.pro-page .pro-pill.blue,
body .modal .pro-pill.blue,
body .modal-overlay .pro-pill.blue{background:var(--pro-info-bg);color:var(--pro-info)}
.pro-page .pro-pill.gray,
body .modal .pro-pill.gray,
body .modal-overlay .pro-pill.gray{background:var(--pro-bg);color:var(--pro-fg-muted)}
.pro-page .pro-pill.violet,
body .modal .pro-pill.violet,
body .modal-overlay .pro-pill.violet{background:rgba(124,58,237,.12);color:#7C3AED}
.pro-page .pro-pill.pink,
body .modal .pro-pill.pink,
body .modal-overlay .pro-pill.pink{background:rgba(236,72,153,.12);color:#DB2777}

/* Footer paginazione */
.pro-page .pro-tbl-foot{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-top:1px solid var(--pro-border-2);font-size:12.5px;color:var(--pro-fg-muted);flex-wrap:wrap;gap:10px}
.pro-page .pro-pagi{display:flex;gap:4px}
.pro-page .pro-pagi button{width:28px;height:28px;border:1px solid var(--pro-border);background:var(--pro-surface);border-radius:6px;font:600 12px var(--pro-font);color:var(--pro-fg-muted);cursor:pointer}
.pro-page .pro-pagi button.on{background:var(--pro-primary);color:#fff;border-color:transparent}

/* Avatars colorate (1..6 hash → colore) */
.pro-page .pro-av-1{background:linear-gradient(135deg,#2563EB,#1E40AF)}
.pro-page .pro-av-2{background:linear-gradient(135deg,#0E9F6E,#047857)}
.pro-page .pro-av-3{background:linear-gradient(135deg,#B7791F,#92400E)}
.pro-page .pro-av-4{background:linear-gradient(135deg,#7C3AED,#5B21B6)}
.pro-page .pro-av-5{background:linear-gradient(135deg,#D43F3F,#991B1B)}
.pro-page .pro-av-6{background:linear-gradient(135deg,#0EA5E9,#0369A1)}

/* Empty state */
.pro-page .pro-empty{text-align:center;padding:48px 20px;border:2px dashed var(--pro-border);border-radius:var(--pro-r-lg);background:var(--pro-surface-2)}
.pro-page .pro-empty-ico{width:60px;height:60px;margin:0 auto 14px;border-radius:16px;background:var(--pro-primary-tint);color:var(--pro-primary);display:grid;place-items:center;font-size:24px}
.pro-page .pro-empty h4{margin:0 0 4px;font-size:16px;font-weight:700;color:var(--pro-fg);font-family:var(--pro-font)}
.pro-page .pro-empty p{margin:0 auto 14px;font-size:13.5px;color:var(--pro-fg-muted);max-width:44ch}

/* ════════════════════════════════════════════════════════════════════
   FORMS Pro — pattern del mock (label/inp/sel/txt/inp-grp/tog/help)
   ════════════════════════════════════════════════════════════════════ */
.pro-page .pro-fld{margin-bottom:14px}
.pro-page .pro-fld:last-child{margin-bottom:0}
.pro-page .pro-fld-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pro-page .pro-lbl{display:block;font-size:12px;font-weight:600;color:var(--pro-fg-2);margin-bottom:6px;letter-spacing:-.05px;font-family:var(--pro-font)}
.pro-page .pro-lbl .pro-req{color:var(--pro-danger);margin-left:2px}
.pro-page .pro-inp,
.pro-page .pro-sel,
.pro-page .pro-txt{width:100%;font:500 14px var(--pro-font);color:var(--pro-fg);padding:9px 12px;border:1px solid var(--pro-border);border-radius:var(--pro-r);background:var(--pro-surface);outline:0;transition:border-color .12s,box-shadow .12s}
.pro-page .pro-inp:hover,.pro-page .pro-sel:hover,.pro-page .pro-txt:hover{border-color:#CDD2DB}
.pro-page .pro-inp:focus,.pro-page .pro-sel:focus,.pro-page .pro-txt:focus{border-color:var(--pro-primary);box-shadow:var(--pro-ring-focus)}
.pro-page .pro-inp::placeholder,.pro-page .pro-txt::placeholder{color:var(--pro-fg-soft)}
.pro-page .pro-txt{resize:vertical;min-height:80px}
.pro-page .pro-inp-grp{display:flex;align-items:center;border:1px solid var(--pro-border);border-radius:var(--pro-r);background:var(--pro-surface);overflow:hidden}
.pro-page .pro-inp-grp:focus-within{border-color:var(--pro-primary);box-shadow:var(--pro-ring-focus)}
.pro-page .pro-inp-grp .pro-pre{padding:0 12px;color:var(--pro-fg-soft);font-size:13px;border-right:1px solid var(--pro-border-2);height:38px;display:grid;place-items:center;background:var(--pro-bg)}
.pro-page .pro-inp-grp input{border:0;padding:9px 12px;font:500 14px var(--pro-font);color:var(--pro-fg);flex:1;outline:0;background:transparent}
.pro-page .pro-help{font-size:11.5px;color:var(--pro-fg-soft);margin-top:4px}

/* Toggle switch Pro */
.pro-page .pro-tog{display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.pro-page .pro-tog .pro-sw{width:36px;height:20px;border-radius:99px;background:#CDD2DB;position:relative;transition:background .15s}
.pro-page .pro-tog .pro-sw::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:2px;left:2px;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .15s}
.pro-page .pro-tog input{display:none}
.pro-page .pro-tog input:checked + .pro-sw{background:var(--pro-primary)}
.pro-page .pro-tog input:checked + .pro-sw::after{left:18px}
.pro-page .pro-tog .pro-lbl-inline{font-size:13px;color:var(--pro-fg);font-weight:500}

/* Modal Pro */
.pro-page .pro-modal-mock{background:var(--pro-surface);border-radius:var(--pro-r-xl);box-shadow:var(--pro-shadow-lg);border:1px solid var(--pro-border);overflow:hidden}
.pro-page .pro-modal-mock-hdr{padding:22px 24px 14px;border-bottom:1px solid var(--pro-border-2)}
.pro-page .pro-modal-mock-hdr h3{margin:0 0 4px;font-size:17px;font-weight:700;letter-spacing:-.3px;color:var(--pro-fg);font-family:var(--pro-font)}
.pro-page .pro-modal-mock-hdr p{margin:0;font-size:13px;color:var(--pro-fg-muted)}
.pro-page .pro-modal-mock-body{padding:18px 24px}
.pro-page .pro-modal-mock-foot{display:flex;gap:8px;justify-content:flex-end;padding:14px 24px;background:var(--pro-bg);border-top:1px solid var(--pro-border-2)}

/* ════════════════════════════════════════════════════════════════════
   ALERTS Pro
   ════════════════════════════════════════════════════════════════════ */
.pro-page .pro-alert{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:var(--pro-r);border:1px solid var(--pro-border);background:var(--pro-surface);font-size:13.5px;font-family:var(--pro-font)}
.pro-page .pro-alert .pro-ai{width:22px;height:22px;flex-shrink:0;display:grid;place-items:center;border-radius:6px;font-size:12px}
.pro-page .pro-alert.success{background:#F2FAF6;border-color:#D6EFE3;color:#0E5A40}
.pro-page .pro-alert.success .pro-ai{background:var(--pro-success);color:#fff}
.pro-page .pro-alert.warning{background:#FEFAEF;border-color:#F5E1A5;color:#7B5410}
.pro-page .pro-alert.warning .pro-ai{background:var(--pro-warning);color:#fff}
.pro-page .pro-alert.info{background:#F4F8FF;border-color:#D7E3FB;color:#1F3F92}
.pro-page .pro-alert.info .pro-ai{background:var(--pro-info);color:#fff}
.pro-page .pro-alert.danger{background:#FCF2F2;border-color:#F1C8C8;color:#8E2A2A}
.pro-page .pro-alert.danger .pro-ai{background:var(--pro-danger);color:#fff}
.pro-page .pro-alert b{font-weight:700}

/* ════════════════════════════════════════════════════════════════════
   LEGACY MARKUP COMPAT — applica look Pro al markup esistente del CRM
   senza riscrivere ogni pagina. Specificità .pro-page > legacy.
   ════════════════════════════════════════════════════════════════════ */

/* Card legacy */
.pro-page .card{background:var(--pro-surface);border:1px solid var(--pro-border);border-radius:var(--pro-r-lg);box-shadow:var(--pro-shadow-xs)}

/* Page header legacy — allineato al pattern Pro (.pro-hdr) per parità visiva
   su tutte le pagine ancora su markup page-header/page-title/page-subtitle */
.pro-page .page-header{align-items:flex-end;gap:24px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--pro-border);flex-wrap:wrap}
.pro-page .page-title{font-family:var(--pro-font);font-size:28px;line-height:1.1;font-weight:800;letter-spacing:-.6px;color:var(--pro-fg)}
.pro-page .page-subtitle{font-family:var(--pro-font);color:var(--pro-fg-muted);font-size:14px;margin-top:4px;max-width:64ch}

/* Bottoni legacy */
.pro-page .btn{font-family:var(--pro-font);border-radius:var(--pro-r);padding:9px 16px}
.pro-page .btn-primary{background:var(--pro-primary)!important;color:#fff!important;box-shadow:0 1px 0 rgba(15,17,22,.04),inset 0 1px 0 rgba(255,255,255,.15)!important;border:1px solid transparent}
.pro-page .btn-primary:hover{background:var(--pro-primary-600)!important;filter:none}
.pro-page .btn-ghost{background:var(--pro-surface);color:var(--pro-fg);border:1px solid var(--pro-border)}
.pro-page .btn-ghost:hover{background:var(--pro-surface-2);border-color:#D6DAE2}
.pro-page .btn-secondary{background:var(--pro-surface);color:var(--pro-fg);border:1px solid var(--pro-border);box-shadow:var(--pro-shadow-xs)}
.pro-page .btn-secondary:hover{background:var(--pro-surface-2);border-color:#D6DAE2}
.pro-page .btn-danger{background:rgba(212,63,63,.12);color:var(--pro-danger);border:1px solid rgba(212,63,63,.20)}
.pro-page .btn-danger:hover{background:rgba(212,63,63,.20)}

/* Tabelle generali (qualsiasi <table> dentro main) */
.pro-page table th{background:var(--pro-bg)!important;color:var(--pro-fg-soft)!important;font-size:11px;text-transform:uppercase;letter-spacing:.6px;font-weight:700;padding:10px 16px;border-bottom:1px solid var(--pro-border)}
.pro-page table td{padding:13px 16px;border-bottom:1px solid var(--pro-border-2);color:var(--pro-fg);font-family:var(--pro-font);font-size:13.5px}
.pro-page table tr:hover td{background:var(--pro-surface-2)}
.pro-page table tr:last-child td{border-bottom:0}

/* Input/select/textarea legacy */
.pro-page input[type="text"],
.pro-page input[type="email"],
.pro-page input[type="tel"],
.pro-page input[type="search"],
.pro-page input[type="number"],
.pro-page input[type="date"],
.pro-page input[type="time"],
.pro-page input[type="password"],
.pro-page select,
.pro-page textarea,
.pro-page .form-control,
.pro-page .form-select{font-family:var(--pro-font);font-size:14px;color:var(--pro-fg);background:var(--pro-surface);border:1px solid var(--pro-border);border-radius:var(--pro-r);padding:9px 12px;outline:0;transition:border-color .12s,box-shadow .12s}
.pro-page input:focus,.pro-page select:focus,.pro-page textarea:focus,.pro-page .form-control:focus,.pro-page .form-select:focus{border-color:var(--pro-primary);box-shadow:var(--pro-ring-focus)}
.pro-page input::placeholder,.pro-page textarea::placeholder{color:var(--pro-fg-soft)}

/* Form group legacy → spacing Pro */
.pro-page .form-group{margin-bottom:14px}
.pro-page .form-group label{display:block;font-size:12px;font-weight:600;color:var(--pro-fg-2);margin-bottom:6px;font-family:var(--pro-font)}

/* ─────────────────────────────────────────────────────────────────────
   ios154f7 — SEARCHABLE DROPDOWN (.crm-sd-wrap): focus ring SOLO quando
   il dropdown è aperto. Prima il `:focus` sulla `.crm-sd-input` lasciava
   un grosso ring blu attorno anche dopo aver chiuso il dropdown
   (l'utente clicca fuori → dropdown si chiude → input mantiene focus →
   ring blu permane fino al blur). UX: il ring deve "raccontare" che
   stai interagendo col dropdown, non che il campo è semplicemente focus.
   Fix: appiattisci il focus quando wrapper NON ha `.open`. */
.pro-page .crm-sd-wrap:not(.open) .crm-sd-input,
.pro-page .crm-sd-wrap:not(.open) .crm-sd-input:focus,
.pro-page .crm-sd-wrap:not(.open) .crm-sd-input:focus-visible{
  border-color:var(--pro-border)!important;
  box-shadow:none!important;
  outline:none!important;
}
.pro-page .crm-sd-wrap.open .crm-sd-input,
.pro-page .crm-sd-wrap.open .crm-sd-input:focus{
  border-color:var(--pro-primary)!important;
  box-shadow:var(--pro-ring-focus)!important;
  outline:none!important;
}
/* Stesso pattern dentro i modali (le pagine con .pro-page già coperte sopra) */
body .modal .crm-sd-wrap:not(.open) .crm-sd-input,
body .modal .crm-sd-wrap:not(.open) .crm-sd-input:focus,
body .modal-overlay .crm-sd-wrap:not(.open) .crm-sd-input:focus{
  border-color:var(--border, #E6E8EC)!important;
  box-shadow:none!important;
  outline:none!important;
}

/* Search-wrap legacy
   ios154f6: la rule generica `.pro-page input[type="text"]{border:1px solid...}`
   ha specificità maggiore (attribute selector) rispetto a `.search-wrap input
   {border:none!important}` legacy. Risultato: l'input dentro search-wrap si
   beccava il SUO bordo Pro oltre a quello del wrapper, sembrando 2 box separati
   (icona + campo). Fix: override esplicito con selettori che battono la
   specificità. Rimosso anche padding interno legacy 9px 12px del Pro che
   creava buco fisico tra icona e cursore. */
.pro-page .search-wrap{background:var(--pro-bg);border:1px solid var(--pro-border);border-radius:var(--pro-r);height:38px}
.pro-page .search-wrap:focus-within{border-color:var(--pro-primary);box-shadow:var(--pro-ring-focus)}
.pro-page .search-wrap input,
.pro-page .search-wrap input[type="text"],
.pro-page .search-wrap input[type="search"],
.pro-page .search-wrap input[type="email"],
.pro-page .search-wrap input[type="tel"]{
  font-family:var(--pro-font)!important;
  color:var(--pro-fg)!important;
  background:transparent!important;
  border:none!important;
  border-radius:0!important;
  padding:0!important;
  height:100%!important;
  box-shadow:none!important;
  outline:none!important;
}
.pro-page .search-wrap input:focus,
.pro-page .search-wrap input[type="text"]:focus,
.pro-page .search-wrap input[type="search"]:focus{
  border:none!important;
  box-shadow:none!important;
  /* il focus visivo lo gestisce il wrapper :focus-within sopra */
}

/* Badge legacy → pill stile Pro */
.pro-page .badge{font-family:var(--pro-font);font-weight:700;border-radius:999px;padding:3px 10px;font-size:11.5px;letter-spacing:.1px;display:inline-flex;align-items:center;gap:5px}
.pro-page .badge-soft-green,.pro-page .badge-green{background:var(--pro-success-bg);color:var(--pro-success)}
.pro-page .badge-soft-red,.pro-page .badge-red{background:var(--pro-danger-bg);color:var(--pro-danger)}
.pro-page .badge-soft-amber,.pro-page .badge-soft-orange,.pro-page .badge-orange{background:var(--pro-warning-bg);color:var(--pro-warning)}
.pro-page .badge-soft-yellow{background:var(--pro-warning-bg);color:var(--pro-warning)}
.pro-page .badge-soft-blue,.pro-page .badge-blue{background:var(--pro-info-bg);color:var(--pro-info)}
.pro-page .badge-soft-purple,.pro-page .badge-purple{background:rgba(124,58,237,.12);color:#7C3AED}
.pro-page .badge-soft-gray{background:var(--pro-bg);color:var(--pro-fg-muted)}

/* KPI stat-card legacy → look Pro */
.pro-page .stat-card{background:var(--pro-surface)!important;border:1px solid var(--pro-border)!important;border-radius:var(--pro-r-lg)!important;box-shadow:var(--pro-shadow-xs)!important;padding:14px 16px!important}
.pro-page .stat-card .stat-icon{width:28px!important;height:28px!important;border-radius:var(--pro-r-sm)!important;font-size:13px!important;background:var(--pro-primary-tint)!important;color:var(--pro-primary)!important}
.pro-page .stat-card .stat-icon.green{background:var(--pro-success-bg)!important;color:var(--pro-success)!important}
.pro-page .stat-card .stat-icon.orange{background:var(--pro-warning-bg)!important;color:var(--pro-warning)!important}
.pro-page .stat-card .stat-icon.blue{background:var(--pro-primary-tint)!important;color:var(--pro-primary)!important}
.pro-page .stat-card .stat-icon.purple{background:rgba(124,58,237,.12)!important;color:#7C3AED!important}
.pro-page .stat-card .stat-icon svg{width:16px!important;height:16px!important}
.pro-page .stat-card .stat-label{font-size:11.5px!important;color:var(--pro-fg-muted)!important;font-weight:600!important;margin-bottom:6px!important;font-family:var(--pro-font)}
.pro-page .stat-card .stat-value{font-family:var(--pro-font)!important;font-size:28px!important;font-weight:800!important;letter-spacing:-.6px!important;color:var(--pro-fg)!important;font-variant-numeric:tabular-nums}
.pro-page .stat-card .stat-trend{font-family:var(--pro-font);font-size:11px}

/* Modal legacy → font + radius Pro */
.pro-page .modal{font-family:var(--pro-font);border-radius:var(--pro-r-xl);box-shadow:var(--pro-shadow-lg);border:1px solid var(--pro-border);background:var(--pro-surface);overflow:hidden}
.pro-page .modal-header{font-family:var(--pro-font);padding:20px 24px 14px;border-bottom:1px solid var(--pro-border-2);background:var(--pro-surface)}
.pro-page .modal-title{font-family:var(--pro-font);font-size:17px;font-weight:700;letter-spacing:-.3px;color:var(--pro-fg)}
.pro-page .modal-body{padding:18px 24px;background:var(--pro-surface)}
.pro-page .modal-footer{display:flex;gap:8px;justify-content:flex-end;padding:14px 24px;background:var(--pro-bg);border-top:1px solid var(--pro-border-2)}
.pro-page .modal-close{color:var(--pro-fg-muted)}
.pro-page .modal-close:hover{color:var(--pro-fg)}

/* Modal-overlay (background) */
.pro-page .modal-overlay,
body .modal-overlay.open{background:rgba(15,17,22,.42);backdrop-filter:blur(2px)}

/* Modal: label form più discrete (uppercase + tracking + colore muted) */
.pro-page .modal label,
.pro-page .modal .lbl,
.pro-page .modal .form-group label,
.pro-page .modal-body label{
  font-family:var(--pro-font);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--pro-fg-soft);
  margin-bottom:6px;
}

/* Asterisco campi obbligatori */
.pro-page .modal .req,
.pro-page .modal label::after,
.pro-page .modal-body .required::after{color:var(--pro-danger)}

/* Pill chiusure ❌ del searchable dropdown (es. "✅ Mattia x") */
.pro-page .crm-sd-tag,
.pro-page .crm-sd-pill,
.pro-page [data-sd-pill],
.pro-page .modal .selected-pill{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--pro-success-bg);color:var(--pro-success);
  padding:3px 8px;border-radius:999px;
  font-size:12px;font-weight:600;font-family:var(--pro-font);
  margin-top:6px;
}

/* Box "PREZZO VARIABILE PER VEICOLO" (alert giallo nei modal servizio) → Pro warning style */
.pro-page .modal .alert-soft-amber,
.pro-page .modal-body .alert-soft-amber{
  background:var(--pro-warning-bg);
  color:var(--pro-warning);
  border:1px solid #F5E1A5;
  border-radius:var(--pro-r);
  padding:10px 14px;
  font-size:13px;
}
.pro-page .modal .alert-soft-orange,
.pro-page .modal-body .alert-soft-orange{
  background:var(--pro-warning-bg);
  color:var(--pro-warning);
  border:1px solid #F5E1A5;
  border-radius:var(--pro-r);
  padding:12px 14px;
}

/* Conditional warning box "CONDIZIONI SPECIALI" — variante giallo soft */
.pro-page .modal .form-group:has(textarea[name*="condizioni"]){
  background:#FFFBEB;border:1px solid #FDE68A;
  border-radius:var(--pro-r);padding:12px 14px;margin-top:8px;
}

/* Footer modal con tasti uniformati a Pro */
.pro-page .modal-footer .btn{font-family:var(--pro-font);border-radius:var(--pro-r);padding:8px 16px;font-size:13.5px}
.pro-page .modal-footer .btn-primary{background:var(--pro-primary)!important;color:#fff!important;box-shadow:0 1px 0 rgba(15,17,22,.04),inset 0 1px 0 rgba(255,255,255,.15)!important;border:1px solid transparent}
.pro-page .modal-footer .btn-primary:hover{background:var(--pro-primary-600)!important}
.pro-page .modal-footer .btn-ghost{background:var(--pro-surface);color:var(--pro-fg);border:1px solid var(--pro-border)}
.pro-page .modal-footer .btn-danger{background:transparent;color:var(--pro-danger);border:1px solid rgba(212,63,63,.30)}
.pro-page .modal-footer .btn-danger:hover{background:var(--pro-danger-bg)}

/* Sezione header con icona + label uppercase: rimuove le icone emoji dalle label
   per allineare al pattern del modal Veicolo (label pulite "CLIENTE *", "TARGA *" ecc) */
.pro-page .modal label .icon-emoji,
.pro-page .modal-body label .icon-emoji,
body .modal-body label .icon-emoji,
body .modal-body label .ss-icon{
  display:none!important;
}

/* Pill verde "✅ X ✕" che il searchable-dropdown mostra sotto i select single-value
   (visibile in Modifica appuntamento sotto Operatore/Cliente/Veicolo/Servizio).
   Nasconde questi span "tag-display" che sono ridondanti col valore già nel select.
   B067 — Esteso a tutti i modal-overlay (anche quelli senza .modal-body wrapper,
   es. appointment-modal usa .form-grid). Aggiunti anche pattern d1fae5 e
   rgba(220,252,231,...) usati da varianti più recenti. */
body .modal-body span[style*="background:#dcfce7"],
body .modal-body span[style*="background: #dcfce7"],
body .modal-body div[style*="background:#dcfce7"],
body .modal-body div[style*="background: #dcfce7"],
body .modal-overlay span[style*="background:#dcfce7"],
body .modal-overlay span[style*="background: #dcfce7"],
body .modal-overlay div[style*="background:#dcfce7"],
body .modal-overlay div[style*="background: #dcfce7"],
body .modal-overlay span[style*="background:#d1fae5"],
body .modal-overlay div[style*="background:#d1fae5"],
body .modal span[style*="background:#dcfce7"],
body .modal div[style*="background:#dcfce7"],
body .modal span[style*="background:#d1fae5"],
body .modal div[style*="background:#d1fae5"],
/* B067-bis (2026-04-26 — feedback live Safari): chip ridondanti hanno
   classi `.crm-sd-tag` / `.crm-sd-pill` / `[data-sd-pill]` / `.selected-pill`
   generate dal searchable-dropdown. Nasconderle dentro qualsiasi modal-overlay. */
body .modal-overlay .crm-sd-tag,
body .modal-overlay .crm-sd-pill,
body .modal-overlay [data-sd-pill],
body .modal-overlay .selected-pill,
body .modal .crm-sd-tag,
body .modal .crm-sd-pill,
body .modal [data-sd-pill],
body .modal .selected-pill{
  display:none!important;
}

/* Asterisco "*" rosso campi obbligatori — uniforma al colore Pro danger */
body .modal-body label span[style*="color:#ef4444"],
body .modal-body label span[style*="color: #ef4444"]{
  color:#D43F3F!important;font-weight:700!important;
}

/* ════════════════════════════════════════════════════════════════════
   MODALI Pro — pass completo refinement (ios154d8)
   Copre tutti i modali del CRM: nuovo cliente, modifica appuntamento,
   modifica servizio, nuovo preventivo, nuova fattura, settings ecc.
   ════════════════════════════════════════════════════════════════════ */

/* Backdrop blur su tutti i modal-overlay (anche fuori da .pro-page).
   ios154f4: RIMOSSI `backdrop-filter` e `will-change:opacity` GLOBALI dal
   default `.modal-overlay` — applicati SOLO con `.open` class.
   ios154f5: ROOT FIX — anche `display:flex` era applicato a tutti gli overlay
   sempre (opacity:0). ~30+ overlay full-viewport + transform sui modal interni
   = Chrome processava layout/transform di tutti ad ogni scroll del main.
   Soluzione: display:none di default + display:flex SOLO con `.open`. Il fade
   resta via @keyframes invece di transition (transition non funziona da display:none).
   Niente più transform processing su modal chiusi. */
body .modal-overlay{
  background:rgba(15,17,22,.42)!important;
  display:none!important;
  /* Quando aperto torna flex (vedi .open sotto) */
}
body .modal-overlay.open{
  display:flex!important;
  align-items:center;
  justify-content:center;
  opacity:1;
  /* Layer compositing + blur solo quando aperto */
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  will-change:opacity;
  animation:proModalOverlayFadeIn .15s ease both;
}
@keyframes proModalOverlayFadeIn{
  from { opacity:0; }
  to   { opacity:1; }
}
/* Modal interno: animation su entrata invece di transition+transform permanente.
   Questo cancella anche il `transform:scale(.94) translateY(16px)` legacy che
   era il motivo principale dei compositing layer permanenti. */
body .modal-overlay.open > .modal{
  animation:proModalIn .2s cubic-bezier(.4,0,.2,1) both;
}
@keyframes proModalIn{
  from { opacity:0; transform:scale(.96) translateY(8px); }
  to   { opacity:1; transform:none; }
}
/* Override del `transform:scale(.94) translateY(16px)` permanente legacy:
   quando il modal-overlay NON è open, il modal interno non deve avere transform
   pre-applicato (evita compositing layer permanente). */
body .modal-overlay:not(.open) > .modal{
  transform:none!important;
  transition:none!important;
}

/* Modal container: max-height + scroll interno + ombra Pro + responsive width
   ios154e9: AZZERATO PADDING globale legacy (.modal{padding:28px} su index.html
   line 2843) — questo era la causa del white space attorno a header/footer.
   Header e footer hanno il loro padding interno; il body o le sezioni hanno
   il loro. Nessun padding esterno sul .modal. */
body .modal{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Roboto,sans-serif!important;
  border-radius:18px!important;
  box-shadow:0 12px 28px rgba(15,17,22,.18),0 4px 12px rgba(15,17,22,.08)!important;
  border:1px solid #E6E8EC;
  background:#fff;
  max-height:90vh;
  /* ios154e2: niente scroll-x, modal si allarga se serve, fino a 95vw */
  max-width:min(95vw, 720px)!important;
  width:auto;
  display:flex;flex-direction:column;
  overflow:hidden;
  padding:0!important;
}
body .modal[style*="max-width:580px"]{max-width:min(95vw, 580px)!important}
body .modal[style*="max-width:640px"]{max-width:min(95vw, 640px)!important}
body .modal[style*="max-width:680px"]{max-width:min(95vw, 680px)!important}
body .modal[style*="max-width:720px"]{max-width:min(95vw, 720px)!important}
body .modal[style*="max-width:820px"]{max-width:min(95vw, 820px)!important}
/* Editor a schermo intero (es. posizionamento campi su PDF): l'inline dichiara
   max-width:96vw → lo lasciamo raggiungere la piena larghezza, stessa logica
   delle larghezze px qui sopra. Opt-in via inline: solo un modal con
   `max-width:96vw` nello style matcha, nessun altro modal è coinvolto. */
body .modal[style*="max-width:96vw"]{max-width:96vw!important}
html.dark body .modal{background:#1E293B;border-color:#334155}

/* Body modal: niente scroll-x, solo verticale */
body .modal-body{overflow-x:hidden!important}
body .modal-body *{max-width:100%}
body .modal-body table{table-layout:auto;width:100%}
body .modal-body img{max-width:100%;height:auto}

/* Header — title + close X
   ios154e8: cambiato bg da `transparent` a colore solido — necessario perché
   con `position:sticky` (modal senza .modal-body) il contenuto scorre SOTTO
   l'header. Header trasparente = contenuto visibile attraverso. Solid bg
   funziona anche col vecchio pattern flex (header in cima al flex column,
   nessun overlap visivo). */
body .modal-header{
  padding:20px 24px 14px!important;
  border-bottom:1px solid #EEF0F4!important;
  background:#fff!important;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-shrink:0;
}
html.dark body .modal-header{background:#1E293B!important;border-bottom-color:#2A3849!important}
body .modal-title{font-family:'Manrope',sans-serif!important;font-size:17px!important;font-weight:700!important;letter-spacing:-.3px!important;color:#0E1116!important;margin:0}
html.dark body .modal-title{color:#F1F5F9!important}

/* Close button "✕"
   Style pro tondeggiante 32×32 con hover bg light. Vale per:
     - .modal-close (markup ufficiale)
     - .btn-close   (alias usato in alcuni modal legacy: SDI, Billing,
                     Waste, Invoice review). Stesso aspetto, evita di
                     dover toccare 9 markup diversi. */
body .modal-close,
body .btn-close{
  width:32px;height:32px;
  display:inline-grid;place-items:center;
  border-radius:8px;border:none;background:transparent;
  color:#5B6573;font-size:16px;cursor:pointer;
  transition:background .12s,color .12s,transform .1s;
  flex-shrink:0;line-height:1;
}
body .modal-close:hover,
body .btn-close:hover{background:#F1F5F9;color:#0E1116}
body .modal-close:active,
body .btn-close:active{transform:scale(.94)}
html.dark body .modal-close,
html.dark body .btn-close{color:#94A3B8}
html.dark body .modal-close:hover,
html.dark body .btn-close:hover{background:#243248;color:#F1F5F9}

/* Body scrollabile internamente.
   ios154e5: aggiunto `min-height:0` — trick CSS essenziale per far funzionare
   `overflow-y:auto` su un flex child. Senza min-height:0, il browser dà al
   child la sua altezza naturale (tutto il contenuto) e il flex container non
   può forzare lo shrink → niente scroll. */
body .modal-body{
  /* B070 — Padding 24→28px per dare respiro al contenuto e separare
     visivamente i campi dai bordi del modal. */
  padding:18px 28px!important;
  background:transparent!important;
  overflow-y:auto!important;
  flex:1 1 auto;
  min-height:0!important;
}
/* Scrollbar interno modal — sottile e Pro */
body .modal-body::-webkit-scrollbar{width:8px;height:8px}
body .modal-body::-webkit-scrollbar-track{background:transparent}
body .modal-body::-webkit-scrollbar-thumb{background:#DADEE6;border-radius:99px}
body .modal-body::-webkit-scrollbar-thumb:hover{background:#C2C7D2}
html.dark body .modal-body::-webkit-scrollbar-thumb{background:#334155}

/* Footer sticky in fondo */
body .modal-footer{
  padding:16px 28px!important;
  background:#F7F8FA!important;
  border-top:1px solid #EEF0F4!important;
  display:flex;gap:12px;justify-content:flex-end;align-items:center;
  flex-shrink:0;
}
/* B070 — i bottoni footer (specialmente Elimina con margin-right:auto e
   Salva primary) erano "incollati" ai bordi del modal. Aumentato padding
   laterale 24→28px e gap 8→12px. Bottone primary ha più margine destro
   per separarsi visivamente dal bordo modal. */

/* ─────────────────────────────────────────────────────────────────────
   FIX UNIVERSALE SCROLL MODAL (ios154e7)
   Alcuni modal NON hanno il wrapper .modal-body — invece usano
   .form-grid (es. #appointment-modal) o <div style="padding:..."> inline
   (es. #support-ticket-modal, #support-detail-modal, #signature-modal,
   #prv-revisions-modal, #hr-doc-modal).
   La rule precedente `body .modal-body{overflow-y:auto;flex:1}` non li
   matcha → scroll bloccato.
   Soluzione: detectare l'ASSENZA di .modal-body con :has() e cambiare
   strategy: il modal stesso diventa scrollable (display:block + overflow-y),
   header/footer diventano sticky per restare visibili.
   :has() è supportato da Safari 15.4+, Chrome 105+, Firefox 121+ (tutti
   i browser target). Per browser molto vecchi c'è fallback graceful:
   il modal scrolla comunque tramite il `max-height:90vh` su .modal,
   solo header/footer non sono sticky.
   ───────────────────────────────────────────────────────────────────── */
body .modal:not(:has(> .modal-body)){
  display:block!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  /* Scrollbar Pro consistente */
  scrollbar-width:thin;
  scrollbar-color:#DADEE6 transparent;
}
body .modal:not(:has(> .modal-body))::-webkit-scrollbar{width:8px;height:8px}
body .modal:not(:has(> .modal-body))::-webkit-scrollbar-track{background:transparent}
body .modal:not(:has(> .modal-body))::-webkit-scrollbar-thumb{background:#DADEE6;border-radius:99px}
body .modal:not(:has(> .modal-body))::-webkit-scrollbar-thumb:hover{background:#C2C7D2}
html.dark body .modal:not(:has(> .modal-body))::-webkit-scrollbar-thumb{background:#334155}

/* Header sticky in alto durante lo scroll.
   ios154f4: RIMOSSO `will-change:transform` — era applicato a tutti i
   modal-header sticky del DOM (~10+) anche quando il modal è chiuso.
   Causava overhead GPU permanente. Sticky funziona perfettamente senza. */
body .modal:not(:has(> .modal-body)) > .modal-header{
  position:sticky;
  top:0;
  z-index:5;
  background:#fff;
  /* Riapplica padding identico al pattern .modal-body per coerenza */
  padding:20px 24px 14px!important;
  border-bottom:1px solid #EEF0F4!important;
}
html.dark body .modal:not(:has(> .modal-body)) > .modal-header{background:#1E293B;border-bottom-color:#2A3849!important}

/* Footer sticky in basso durante lo scroll */
body .modal:not(:has(> .modal-body)) > .modal-footer{
  position:sticky;
  bottom:0;
  z-index:5;
  background:#F7F8FA;
  /* B070 — Padding aumentato per non lasciare i bottoni "incollati" ai bordi
     del modal. Allineato alla rule generale modal-footer (16px 28px) +
     gap 12px tra bottoni. */
  padding:16px 28px!important;
  gap:12px!important;
  border-top:1px solid #EEF0F4!important;
}
html.dark body .modal:not(:has(> .modal-body)) > .modal-footer{background:#0F172A;border-top-color:#2A3849!important}

/* Padding sui content div che sono FIGLI DIRETTI del .modal (no .modal-body).
   ios154f2: regola universale — TUTTI i figli diretti che NON sono
   modal-header/modal-footer/style/script ricevono padding orizzontale 24px
   per non incollarsi ai bordi. Necessario perché il legacy `.modal{padding:28px}`
   è stato azzerato (creava spazi enormi attorno header/footer).
   La regola precedente era ristretta a `> div[id^="ap-"]` e lasciava nudi
   tutti gli altri modal (signature-modal, support-detail-modal, ecc.). */
body .modal:not(:has(> .modal-body)) > .form-grid{
  /* B070 — Padding aumentato 24→28px per dare respiro ai campi del form
     (Modifica appuntamento, Aggiungi cliente, Modifica veicolo). */
  padding:18px 28px 14px!important;
}
body .modal:not(:has(> .modal-body)) > div:not(.modal-header):not(.modal-footer):not(.form-grid),
body .modal:not(:has(> .modal-body)) > p:not(.modal-header):not(.modal-footer),
body .modal:not(:has(> .modal-body)) > label,
body .modal:not(:has(> .modal-body)) > input,
body .modal:not(:has(> .modal-body)) > textarea,
body .modal:not(:has(> .modal-body)) > select,
body .modal:not(:has(> .modal-body)) > canvas{
  /* B070 — Margin laterale 24→28px per uniformare con form-grid */
  margin-left:28px!important;
  margin-right:28px!important;
}
/* B070-bis (2026-04-26 — feedback Mattia): rimosso margin-top:14px
   ereditato che spostava il footer in basso facendo sembrare i bottoni
   "incollati" al bordo modal. Ora padding del footer è gestito solo
   dal padding interno (16px 28px), niente margin esterno. */
body .modal:not(:has(> .modal-body)) > .modal-footer{
  margin:0!important;
}
/* I content div che NON sono form-grid (signature-modal, support-ticket,
   prv-revisions ecc.) hanno bisogno di padding-top intrinseco per non
   incollarsi al modal-header. La maggior parte ha padding inline, ma se
   un div nudo è subito dopo l'header riceve margin-top di sicurezza. */
body .modal:not(:has(> .modal-body)) > .modal-header + div:not([style*="padding"]):not(.form-grid):not(.modal-footer){
  margin-top:18px!important;
}

/* Anti-jitter durante scroll: blocca completamente l'overscroll bounce
   che su Safari iOS può causare il flicker del backdrop */
body .modal:not(:has(> .modal-body)){
  overscroll-behavior:contain;
}

/* ios154f1 — DARK MODE: allineamento background sticky col body del modal.
   Header e footer dark erano #1E293B/#0F172A — leggermente sfasati con
   modal body. Allineato esattamente al modal bg per coerenza. */
html.dark body .modal:not(:has(> .modal-body)) > .modal-header{
  background:#1E293B!important;
  border-bottom-color:rgba(255,255,255,.08)!important;
}
html.dark body .modal:not(:has(> .modal-body)) > .modal-footer{
  background:#0F172A!important;
  border-top-color:rgba(255,255,255,.08)!important;
}

/* ─────────────────────────────────────────────────────────────────────
   ios154e8 — DEFENSIVE RULES per modal con .modal-body (vehicle-modal etc).
   Garantisce che il pattern OLD (display:flex column + .modal-body scroll)
   vinca SEMPRE su questi modal, anche se Safari ha bug con `:has()`.
   Se `:not(:has())` per qualche motivo matcha vehicle-modal (Safari bug,
   caching CSS, ecc.), questa rule riporta lo state correto.
   ───────────────────────────────────────────────────────────────────── */
body #vehicle-modal > .modal,
body #birthday-wishes-modal > .modal,
body .modal:has(> .modal-body){
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
body #vehicle-modal > .modal > .modal-header,
body #birthday-wishes-modal > .modal > .modal-header,
body .modal:has(> .modal-body) > .modal-header,
body #vehicle-modal > .modal > .modal-footer,
body #birthday-wishes-modal > .modal > .modal-footer,
body .modal:has(> .modal-body) > .modal-footer{
  position:static!important;
  flex-shrink:0!important;
}
body #vehicle-modal > .modal > .modal-body,
body #birthday-wishes-modal > .modal > .modal-body,
body .modal:has(> .modal-body) > .modal-body{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
html.dark body .modal-footer{background:#0F172A!important;border-top-color:#2A3849!important}

/* ─────────────────────────────────────────────────────────────────────
   ios154f1 — Action-group dropdown (es. "📧 Invia conferma ▾").
   Solo override del colore della toggle ▾ (da gradient viola → blu Pro).
   NON tocchiamo position/display delle action-menu per evitare regressioni
   sul toggle JS che usa .is-open. La struttura position:absolute originale
   resta intatta.
   ───────────────────────────────────────────────────────────────────── */
body .modal .action-group .ag-toggle{
  background:#F1F5F9!important;
  color:#475569!important;
  border-left:1px solid #E2E8F0!important;
  font-family:'Manrope',sans-serif!important;
  font-weight:700!important;
}
body .modal .action-group .ag-toggle:hover{background:#E2E8F0!important;filter:none!important;color:#0F172A!important}
html.dark body .modal .action-group .ag-toggle{background:#243248!important;color:#CBD5E1!important;border-left-color:#334155!important}
html.dark body .modal .action-group .ag-toggle:hover{background:#334155!important;color:#F1F5F9!important}

/* B073 (2026-04-26 — feedback Mattia) — variante emerald per il dropdown
   "Invia conferma" nella sezione ap-conferma-section. Il blu solido era
   troppo aggressivo nel modal pastello verde. */
body .modal .action-group-emerald .ag-toggle{
  background:rgba(16,185,129,.12)!important;
  color:#047857!important;
  border-left:1px solid rgba(16,185,129,.35)!important;
}
body .modal .action-group-emerald .ag-toggle:hover{
  background:rgba(16,185,129,.22)!important;
  color:#065F46!important;
}
html.dark body .modal .action-group-emerald .ag-toggle{
  background:rgba(16,185,129,.18)!important;
  color:#6EE7B7!important;
  border-left-color:rgba(16,185,129,.35)!important;
}
html.dark body .modal .action-group-emerald .ag-toggle:hover{
  background:rgba(16,185,129,.28)!important;
  color:#A7F3D0!important;
}
/* Hover anche sul bottone primario "Invia conferma" emerald */
body .modal .action-group-emerald #ap-btn-invia-conferma:hover{
  background:rgba(16,185,129,.22)!important;
  color:#065F46!important;
  border-color:rgba(16,185,129,.45)!important;
}
html.dark body .modal .action-group-emerald #ap-btn-invia-conferma{
  background:rgba(16,185,129,.18)!important;
  color:#6EE7B7!important;
  border-color:rgba(16,185,129,.35)!important;
}
html.dark body .modal .action-group-emerald #ap-btn-invia-conferma:hover{
  background:rgba(16,185,129,.28)!important;
  color:#A7F3D0!important;
}

/* Action menu — solo restyling visivo dei contenuti, NON tocchiamo
   position/display/z-index/animazione che vengono dalla rule legacy
   .action-menu (index.html:2659). */
body .modal .action-menu{
  border:1px solid #E6E8EC!important;
  border-radius:12px!important;
  box-shadow:0 12px 28px rgba(15,17,22,.14),0 4px 12px rgba(15,17,22,.06)!important;
  font-family:'Manrope',sans-serif!important;
}
html.dark body .modal .action-menu{background:#1E293B!important;border-color:#334155!important}
body .modal .action-menu .am-item{
  font-family:'Manrope',sans-serif!important;
  font-weight:600!important;
}
html.dark body .modal .action-menu .am-item{color:#F1F5F9!important}
html.dark body .modal .action-menu .am-item:hover{background:#243248!important}
/* B073 — am-item dentro dropdown emerald: hover pastello verde, niente blu */
body .modal .action-group-emerald + .action-menu .am-item:hover,
body .modal .action-group-emerald .action-menu .am-item:hover{background:rgba(16,185,129,.10)!important;color:#065F46!important}
html.dark body .modal .action-group-emerald + .action-menu .am-item:hover,
html.dark body .modal .action-group-emerald .action-menu .am-item:hover{background:rgba(16,185,129,.18)!important;color:#A7F3D0!important}
html.dark body .modal .action-menu .am-divider{background:#2A3849!important}

/* B070-bis (2026-04-26 — feedback Mattia) — il footer e l'header del modal
   ereditavano `margin` da una regola CSS globale (probabile rule
   `.form-grid > * { margin-top: ... }` o simile), che li allontanava
   dai bordi del modal facendo sembrare i bottoni "incollati ai bordi".
   Forzare `margin:0` sull'elemento .modal-footer / .modal-header stesso
   resetta l'eredità. */
body .modal-footer,
body .modal-header,
body .modal > .modal-footer,
body .modal > .modal-header,
body .modal:not(:has(> .modal-body)) > .modal-footer,
body .modal:not(:has(> .modal-body)) > .modal-header{
  margin:0!important;
}

/* Bottoni footer: rinforzo Pro */
body .modal-footer .btn,
body .modal-footer button.btn{
  font-family:'Manrope',sans-serif!important;
  border-radius:10px!important;
  padding:9px 16px!important;
  font-size:13.5px!important;
  font-weight:600!important;
  border:1px solid transparent!important;
}
body .modal-footer .btn-primary{background:#2563EB!important;color:#fff!important}
body .modal-footer .btn-primary:hover{background:#1D4ED8!important}
body .modal-footer .btn-ghost{background:#fff!important;color:#0E1116!important;border-color:#E6E8EC!important}
body .modal-footer .btn-ghost:hover{background:#FAFBFC!important;border-color:#D6DAE2!important}
body .modal-footer .btn-danger{background:transparent!important;color:#D43F3F!important;border-color:rgba(212,63,63,.30)!important}
body .modal-footer .btn-danger:hover{background:rgba(212,63,63,.10)!important}
html.dark body .modal-footer .btn-ghost{background:#1E293B!important;color:#F1F5F9!important;border-color:#334155!important}

/* B069 — Footer modale Pro uniforme (allineamento al pattern "Nuovo contatto"
   esempio): il bottone "Annulla" / "Chiudi" deve essere un LINK BLU pulito
   (no bg, no border), NON un outline grigio.
   Targeting: bottoni nel modal-footer con onclick verso closeModal/closeAllModals
   o type=button con testo "Annulla"/"Chiudi". Sovrascrive lo stile .btn-ghost
   solo per quei casi. */
body .modal-footer button[onclick*="closeModal"],
body .modal-footer button[onclick*="closeAllModals"],
body .modal-footer button[onclick*="closeFn"],
body .modal-footer button.btn-link-cancel,
body .modal-footer button[data-pro-cancel],
body .modal:not(.pro-page-skip) [class*="modal-footer"] > .btn-ghost:first-child[onclick*="close"]{
  background:transparent!important;
  border:none!important;
  border-color:transparent!important;
  color:#2563EB!important;
  padding:9px 14px!important;
  box-shadow:none!important;
}
body .modal-footer button[onclick*="closeModal"]:hover,
body .modal-footer button[onclick*="closeAllModals"]:hover,
body .modal-footer button.btn-link-cancel:hover,
body .modal-footer button[data-pro-cancel]:hover{
  background:rgba(37,99,235,.08)!important;
  color:#1D4ED8!important;
}
html.dark body .modal-footer button[onclick*="closeModal"],
html.dark body .modal-footer button[onclick*="closeAllModals"],
html.dark body .modal-footer button.btn-link-cancel,
html.dark body .modal-footer button[data-pro-cancel]{
  color:#93C5FD!important;
  background:transparent!important;
  border-color:transparent!important;
}
html.dark body .modal-footer button[onclick*="closeModal"]:hover,
html.dark body .modal-footer button[onclick*="closeAllModals"]:hover{
  background:rgba(147,197,253,.10)!important;
}

/* B069 — bottone primary modale: arrotondamento più morbido + ombra più
   marcata per dare il "weight" del primary (come "Salva contatto" del
   pattern Pro esempio). Allineato al primary del 7° screenshot. */
body .modal-footer .btn-primary{
  border-radius:12px!important;
  box-shadow:0 1px 0 rgba(15,17,22,.04),inset 0 1px 0 rgba(255,255,255,.18),0 2px 6px rgba(37,99,235,.18)!important;
}

/* B069 — Bottone "Elimina" rosso del modal Modifica appuntamento/Veicolo/
   Cliente: deve essere outline rosso pulito (no bg pieno) allineato a
   sinistra. Pattern: text rosso, bordo rosso trasparente, hover bg rosso .10. */
body .modal-footer .btn-danger,
body .modal-footer button.btn-danger,
body .modal-footer button[id*="delete-btn"],
body .modal-footer button[id*="del-btn"]{
  margin-right:auto!important;
  background:transparent!important;
  color:#D43F3F!important;
  border:1px solid rgba(212,63,63,.30)!important;
}
body .modal-footer .btn-danger:hover{background:rgba(212,63,63,.08)!important;border-color:rgba(212,63,63,.45)!important}
html.dark body .modal-footer .btn-danger{color:#FCA5A5!important;border-color:rgba(252,165,165,.30)!important}
html.dark body .modal-footer .btn-danger:hover{background:rgba(252,165,165,.10)!important}

/* B069 — Bottone secondario "Salva e nuovo" / "Salva bozza" / "Salva e chiudi":
   outline grigio pulito, NON link (link è solo per Annulla). Pattern del
   7° screenshot: bg bianco + border grigio chiaro + testo scuro. */
body .modal-footer .btn-secondary,
body .modal-footer button.btn-secondary,
body .modal-footer .btn.btn-outline,
body .modal-footer button[onclick*="saveAndNew"],
body .modal-footer button[onclick*="saveAnd"]{
  background:#fff!important;
  color:#0E1116!important;
  border:1px solid #E6E8EC!important;
  border-radius:10px!important;
}
body .modal-footer .btn-secondary:hover{background:#FAFBFC!important;border-color:#D6DAE2!important}
html.dark body .modal-footer .btn-secondary,
html.dark body .modal-footer .btn.btn-outline{
  background:#1E293B!important;color:#F1F5F9!important;border-color:#334155!important;
}

/* Form fields dentro modal: spacing uniforme + label discrete */
body .modal-body .form-group{margin-bottom:14px}
body .modal-body .form-group:last-child{margin-bottom:0}
body .modal-body label,
body .modal-body .lbl{
  font-family:'Manrope',sans-serif!important;
  font-size:11px!important;
  font-weight:700!important;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:#5B6573!important;
  margin-bottom:6px!important;
  display:block;
}
html.dark body .modal-body label,html.dark body .modal-body .lbl{color:#94A3B8!important}

/* Inputs dentro modal — bordo Pro + focus ring blu */
body .modal-body input[type="text"],
body .modal-body input[type="email"],
body .modal-body input[type="tel"],
body .modal-body input[type="number"],
body .modal-body input[type="date"],
body .modal-body input[type="time"],
body .modal-body input[type="password"],
body .modal-body input[type="search"],
body .modal-body select,
body .modal-body textarea,
body .modal-body .form-control,
body .modal-body .form-select{
  font-family:'Manrope',sans-serif!important;
  font-size:14px!important;
  color:#0E1116!important;
  background:#fff!important;
  border:1px solid #E6E8EC!important;
  border-radius:10px!important;
  padding:9px 12px!important;
  outline:0!important;
  transition:border-color .12s,box-shadow .12s;
  width:100%;
  box-sizing:border-box;
}
body .modal-body input:hover,body .modal-body select:hover,body .modal-body textarea:hover,
body .modal-body .form-control:hover,body .modal-body .form-select:hover{border-color:#CDD2DB!important}
body .modal-body input:focus,body .modal-body select:focus,body .modal-body textarea:focus,
body .modal-body .form-control:focus,body .modal-body .form-select:focus{
  border-color:#2563EB!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.18)!important;
}
body .modal-body input::placeholder,body .modal-body textarea::placeholder{color:#8A93A2!important}
html.dark body .modal-body input,html.dark body .modal-body select,html.dark body .modal-body textarea,
html.dark body .modal-body .form-control,html.dark body .modal-body .form-select{
  background:#243248!important;color:#F1F5F9!important;border-color:#334155!important;
}

/* Sub-box dentro modal (es. "INVIA INVITO AL CLIENTE", "COLLEGA PREVENTIVO") */
body .modal-body .form-group.bordered,
body .modal-body div[style*="border:1px solid"],
body .modal-body .check-box{
  border:1px solid #E6E8EC!important;border-radius:10px;padding:12px 14px;background:#FAFBFC;
}
html.dark body .modal-body .form-group.bordered,html.dark body .modal-body .check-box{
  background:#243248!important;border-color:#334155!important;
}

/* Checkbox label — più ariosa, niente uppercase */
body .modal-body label[for]:has(+ input[type="checkbox"]),
body .modal-body label:has(> input[type="checkbox"]){
  text-transform:none!important;font-size:13px!important;font-weight:600!important;
  color:#0E1116!important;letter-spacing:0!important;display:inline-flex;align-items:center;gap:8px;
}
html.dark body .modal-body label:has(> input[type="checkbox"]){color:#F1F5F9!important}

/* Select native arrow Pro */
body .modal-body select{
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235B6573' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")!important;
  background-repeat:no-repeat!important;
  background-position:right 12px center!important;
  padding-right:34px!important;
}
html.dark body .modal-body select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")!important;
}

/* Allineamento section header dentro modal (icona + label uppercase) */
body .modal-body .section-title,
body .modal-body h4{
  font-family:'Manrope',sans-serif!important;
  font-size:11px!important;font-weight:700!important;
  text-transform:uppercase;letter-spacing:.6px;
  color:#5B6573!important;margin:18px 0 8px;
}
html.dark body .modal-body .section-title,html.dark body .modal-body h4{color:#94A3B8!important}

/* Multi-step modal indicator (steps dots) — pulisce stile inconsistente */
body .modal-body .steps-indicator,body .modal-body .wiz-steps{font-family:'Manrope',sans-serif}

/* ════════════════════════════════════════════════════════════════════
   ios154e3 — TOPBAR & TOOLBAR refinements
   ════════════════════════════════════════════════════════════════════ */

/* Topbar: riduci gap tra elementi destra (data/ora ↔ chat/notif/avatar) */
#top-header{gap:10px!important}
#top-header .th-spacer{flex:1}
/* Spazio extra blocco data → ridotto */
#top-header .th-clock,#top-header .th-date{padding:0 2px}

/* ios154e4: NIENTE custom Lucide ::before — l'emoji 🔍 originale del markup
   è già visibile e bastante. La rule precedente creava una doppia lente
   (emoji + svg sovrapposti). Rimossa. Se in futuro vorremo solo Lucide,
   togliere l'emoji dal markup HTML dell'input. */

/* Dropdown search: stile Pro */
#th-search-results{
  background:#fff!important;
  border:1px solid #E6E8EC!important;
  border-radius:12px!important;
  box-shadow:0 12px 28px rgba(15,17,22,.12)!important;
  padding:6px 0!important;
  max-height:480px!important;
  font-family:'Manrope',sans-serif!important;
  overflow:hidden;
}
html.dark #th-search-results{background:#1E293B!important;border-color:#334155!important}
/* Eyebrow sezione "NAVIGA" / "CONTATTI" */
#th-search-results > div[style*="text-transform:uppercase"]{
  font-family:'Manrope',sans-serif!important;
  font-size:10px!important;font-weight:700!important;
  letter-spacing:.6px!important;color:#8A93A2!important;
  padding:8px 14px 4px!important;
}
html.dark #th-search-results > div[style*="text-transform:uppercase"]{color:#94A3B8!important}
/* Items dropdown */
#th-search-results [data-idx]{
  display:flex!important;align-items:center!important;gap:10px!important;
  padding:8px 14px!important;cursor:pointer!important;
  font-family:'Manrope',sans-serif;font-size:13.5px;
  border-radius:0;transition:background .1s;
}
#th-search-results [data-idx]:hover,
#th-search-results [data-idx][style*="background:var(--bg)"]{background:#F7F8FA!important}
html.dark #th-search-results [data-idx]:hover,
html.dark #th-search-results [data-idx][style*="background:var(--bg)"]{background:#243248!important}

/* Toolbar pagine: NO-WRAP — singola riga.
   ios154f5: aggiunto `padding:2px 0` perché `overflow-x:auto` su Chrome clippa
   anche verticalmente i bordi dei figli (es. .search-wrap border 1.5px sparisce
   in alto/basso). Il padding dà 2px di respiro per non troncare i bordi. */
.pro-page .toolbar,
.pro-page .pro-table-toolbar,
/* ios154e6: Preventivi/Fatture hanno toolbar con flex-wrap:wrap inline.
   Override sul container card padre per forzare singola riga. */
#page-preventivi .card > div[style*="display:flex"][style*="flex-wrap:wrap"],
#page-invoices .card > div[style*="display:flex"][style*="flex-wrap:wrap"]{
  flex-wrap:nowrap!important;
  overflow-x:auto;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  padding:2px 0;
}
.pro-page .toolbar::-webkit-scrollbar,
.pro-page .pro-table-toolbar::-webkit-scrollbar,
#page-preventivi .card > div[style*="display:flex"]::-webkit-scrollbar,
#page-invoices .card > div[style*="display:flex"]::-webkit-scrollbar{height:0;display:none}
@media (max-width: 1024px){
  /* Su tablet stretti riconsenti il wrap per leggibilità */
  .pro-page .toolbar,.pro-page .pro-table-toolbar,
  #page-preventivi .card > div[style*="display:flex"],
  #page-invoices .card > div[style*="display:flex"]{flex-wrap:wrap!important;overflow-x:visible}
}

/* ════════════════════════════════════════════════════════════════════
   ios154e4 — Fix bug ricorrenti
   ════════════════════════════════════════════════════════════════════ */

/* B008: select "Ordine" mostra doppia freccia. Il select dentro toolbar
   pagine è ricoperto dal wrapper .crm-sd-wrap (che ha la sua freccia ◇).
   Quindi nascondiamo l'appearance native del select. Valido solo per
   select non-multiplo. */
.pro-page .toolbar select:not([multiple]),
.pro-page .pro-table-toolbar select:not([multiple]),
body .modal-body select:not([multiple]),
.pro-page select.form-select:not([multiple]){
  -webkit-appearance:none!important;appearance:none!important;
}

/* B009: focus border lampeggia mentre digiti.
   Causa probabile: rule globale `.pro-page input:focus` + rule modal
   con !important + transition di 120ms su border-color. La transition
   ricalcola ad ogni keystroke se altri stili cambiano.
   Fix: instant transition (0s) durante focus/keystroke + outline solido. */
body .modal-body input:focus,
body .modal-body select:focus,
body .modal-body textarea:focus,
body .modal-body .form-control:focus,
body .modal-body .form-select:focus,
.pro-page input:focus,
.pro-page select:focus,
.pro-page textarea:focus,
.pro-page .form-control:focus,
.pro-page .form-select:focus{
  transition:none!important;
}
/* Però mantieni transition smooth quando NON in focus (hover → unfocus) */
body .modal-body input:not(:focus),
body .modal-body select:not(:focus),
body .modal-body textarea:not(:focus){
  transition:border-color .12s ease!important;
}

/* B001 ios154e5: la fix corretta è `min-height:0` sul .modal-body (flex child)
   — vedi sopra. Niente più override max-height su modal specifici (causava
   conflitto col flex container). Inoltre forziamo overflow:visible sui
   wrapper interni del body così il loro contenuto non viene clippato. */
body .modal-body > *{overflow:visible}
body .modal{min-height:0}

/* TOAST notifications fuori dal modal — anche queste in stile Pro */
body .toast-container .toast,
body #toast-container .toast,
body .crm-toast{
  font-family:'Manrope',sans-serif!important;
  background:#0E1116!important;color:#fff!important;
  border-radius:10px!important;
  box-shadow:0 12px 28px rgba(15,17,22,.20)!important;
  padding:10px 14px!important;
  font-size:13px!important;font-weight:600!important;
}

/* ════════════════════════════════════════════════════════════════════
   MODAL APPUNTAMENTO — sub-section interne uniformate Pro (ios154d9)
   Tutte le sezioni (Voci aggiuntive, Lavorazione & Fatturazione,
   Procedura di lavorazione, Documenti, Conferma cliente, Sincronizza,
   Collega preventivo) usano box con stile inline custom (background
   colorato + border colorato). Le rendiamo uniformi al pattern Pro.
   ════════════════════════════════════════════════════════════════════ */

/* Tutte le sub-section del modal appuntamento → look uniforme card Pro */
body #ap-extra-section,
body #ap-lavorazione-section,
body #ap-procedura-section,
body #ap-documents-section,
body #ap-conferma-section,
body #ap-sync-section,
body #ap-preventivo-section,
body #ap-macch-parts-section,
body #ap-manodopera-section{
  background:#FAFBFC!important;
  border:1px solid #E6E8EC!important;
  border-radius:12px!important;
  padding:14px 16px!important;
  margin-top:12px!important;
  font-family:'Manrope',sans-serif!important;
}
html.dark body #ap-extra-section,
html.dark body #ap-lavorazione-section,
html.dark body #ap-procedura-section,
html.dark body #ap-documents-section,
html.dark body #ap-conferma-section,
html.dark body #ap-sync-section,
html.dark body #ap-preventivo-section,
html.dark body #ap-macch-parts-section,
html.dark body #ap-manodopera-section{
  background:#243248!important;border-color:#334155!important;
}

/* Header sezione (icona + label uppercase + counter pill) */
body #ap-extra-section > div:first-child,
body #ap-lavorazione-section > div:first-child,
body #ap-procedura-section > div:first-child,
body #ap-documents-section > div:first-child,
body #ap-conferma-section > div:first-child,
body #ap-sync-section > div:first-child{
  display:flex!important;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px!important;
}
body #ap-extra-header-label,
body #ap-procedura-section > div:first-child > div,
body #ap-documents-section > div:first-child > div,
body #ap-conferma-section > div:first-child > div,
body #ap-sync-section > div:first-child > div,
body #ap-lavorazione-section > div:first-child > div{
  font-size:11px!important;font-weight:700!important;
  text-transform:uppercase;letter-spacing:.6px;
  color:#5B6573!important;background:transparent!important;
}
html.dark body #ap-extra-header-label,
html.dark body #ap-procedura-section > div:first-child > div,
html.dark body #ap-documents-section > div:first-child > div,
html.dark body #ap-conferma-section > div:first-child > div,
html.dark body #ap-sync-section > div:first-child > div,
html.dark body #ap-lavorazione-section > div:first-child > div{color:#94A3B8!important}

/* Sub-card dentro sezione (es. "Altri step", "Consenso alla privacy")
   ios154g2 (§12.13): valori color-mode-agnostic — var(--card) + var(--border)
   adattano automaticamente light/dark senza bisogno di override html.dark. */
body #ap-extra-section .ap-extra-row,
body #ap-procedura-section [id^="proc-step-"],
body #ap-documents-section [id^="doc-row-"],
body #ap-procedura-section > div > div[style*="border:1px solid"],
body #ap-documents-section > div > div[style*="border:1px solid"],
body #ap-procedura-section [style*="background:var(--card)"],
body #ap-procedura-section [style*="background: var(--card)"],
body #ap-documents-section [style*="background:var(--card)"],
body #ap-documents-section [style*="background: var(--card)"]{
  background:var(--card)!important;border:1px solid var(--border)!important;border-radius:10px!important;
  padding:10px 14px!important;margin-bottom:8px!important;
}

/* Bottoni dentro queste sezioni — pulisci colori inline */
body #ap-extra-section button,
body #ap-lavorazione-section button,
body #ap-procedura-section button,
body #ap-documents-section button,
body #ap-conferma-section button,
body #ap-sync-section button{
  font-family:'Manrope',sans-serif!important;
  font-size:12.5px!important;font-weight:600!important;
  padding:6px 12px!important;border-radius:8px!important;
  cursor:pointer;transition:background .12s,border-color .12s;
}
/* Bottoni "+ Servizio" (viola), "Lavorazione completata" (verde), "Esegui" (verde),
   "Firma ora", "Carica scansione", "Invia email", "Invia conferma",
   "Apple Calendar", "Google Calendar", "Reinvia invito".
   ios154g2 (§12.13): pastello rgba(...) semi-trasparenti che funzionano
   sia in light sia in dark senza override html.dark. */
body #ap-extra-section button[onclick*="ap-extra-add"],
body #ap-extra-section .btn-add,
body #ap-extra-section button[onclick*="addExtra"]{
  background:rgba(99,102,241,.10)!important;color:#4F46E5!important;border:1px solid rgba(99,102,241,.30)!important;
}
body #ap-extra-section button[onclick*="ap-extra-add"]:hover{background:rgba(99,102,241,.20)!important;border-color:rgba(99,102,241,.50)!important}
html.dark body #ap-extra-section button[onclick*="ap-extra-add"],
html.dark body #ap-extra-section .btn-add,
html.dark body #ap-extra-section button[onclick*="addExtra"]{color:#A5B4FC!important}

body #ap-lavorazione-section button{background:rgba(16,185,129,.10)!important;color:#0E9F6E!important;border:1px solid rgba(16,185,129,.30)!important}
body #ap-lavorazione-section button:hover{background:rgba(16,185,129,.20)!important}
html.dark body #ap-lavorazione-section button{color:#6EE7B7!important}

body #ap-procedura-section button{background:rgba(59,130,246,.10)!important;color:#2563EB!important;border:1px solid rgba(59,130,246,.30)!important}
body #ap-procedura-section button:hover{background:rgba(59,130,246,.20)!important}
html.dark body #ap-procedura-section button{color:#93C5FD!important}

body #ap-documents-section button{background:transparent!important;color:var(--text-muted)!important;border:1px solid var(--border)!important}
body #ap-documents-section button:hover{background:rgba(148,163,184,.10)!important;color:var(--text)!important}
/* "Invia email" specifico — variante blu pastello */
body #ap-documents-section button[onclick*="sendApptDocEmail"]{
  background:rgba(59,130,246,.10)!important;color:#3B82F6!important;border:1px solid rgba(59,130,246,.30)!important;
}
body #ap-documents-section button[onclick*="sendApptDocEmail"]:hover{background:rgba(59,130,246,.20)!important}
html.dark body #ap-documents-section button[onclick*="sendApptDocEmail"]{color:#93C5FD!important}

/* B073-fix (2026-06-02): escludi il dropdown "Invia conferma" (action-group
   emerald + voci .am-item) da questo blu, altrimenti le voci del menu e il
   bottone in light diventano blu invece di emerald/card. */
body #ap-conferma-section button:not(.am-item):not(.ag-toggle):not(#ap-btn-invia-conferma){background:#2563EB!important;color:#fff!important;border:1px solid transparent!important}
body #ap-conferma-section button:not(.am-item):not(.ag-toggle):not(#ap-btn-invia-conferma):hover{background:#1D4ED8!important}

body #ap-sync-section button{background:transparent!important;color:var(--text)!important;border:1px solid var(--border)!important}
body #ap-sync-section button:hover{background:rgba(148,163,184,.10)!important;border-color:var(--text-muted)!important}

/* Counter pill rossi "0/1 obbligatori", "1 obbligatori da firmare" → pill Pro */
body #ap-procedura-section [style*="background:#fee2e2"],
body #ap-documents-section [style*="background:#fee2e2"],
body #ap-procedura-section [style*="background: #fee2e2"]{
  background:#FCE7E7!important;color:#D43F3F!important;border:1px solid rgba(212,63,63,.20)!important;
  border-radius:999px!important;padding:2px 9px!important;
  font-size:11px!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.4px;
}

/* Badge "cliente", "da fare", "blocca", "Obbligatorio" dentro le righe procedura/documenti */
body #ap-procedura-section [style*="background:#dbeafe"],
body #ap-procedura-section [style*="background: #dbeafe"]{
  background:#EFF6FF!important;color:#2563EB!important;border:1px solid #DBEAFE!important;
  border-radius:999px!important;padding:2px 8px!important;font-size:10.5px!important;font-weight:700!important;
}
body #ap-procedura-section [style*="background:#fee2e2"][style*="da fare"],
body [data-step-status="da_fare"]{background:#FCE7E7!important;color:#D43F3F!important;border-radius:999px!important;padding:2px 8px!important;font-size:10.5px!important;font-weight:700!important}
body [data-step-status="blocca"],
body [data-step-blocca]{background:#FDF2D9!important;color:#B7791F!important;border-radius:999px!important;padding:2px 8px!important;font-size:10.5px!important;font-weight:700!important}

body #ap-documents-section [style*="background:#fef3c7"],
body #ap-documents-section [style*="background: #fef3c7"]{
  background:#FDF2D9!important;color:#B7791F!important;border:1px solid #F5E1A5!important;
  border-radius:999px!important;padding:2px 9px!important;font-size:11px!important;font-weight:700!important;
  text-transform:uppercase;letter-spacing:.4px;
}

/* "+ Servizio" button viola in alto a dx VOCI AGGIUNTIVE
   ios154g2 (§12.13): pastello indigo in entrambi i temi. */
body #ap-extra-section [style*="color:#7c3aed"][style*="cursor:pointer"]{
  background:rgba(99,102,241,.10)!important;color:#4F46E5!important;border:1px solid rgba(99,102,241,.30)!important;
  border-radius:8px!important;padding:5px 12px!important;font-weight:600!important;font-size:12px!important;
}
body #ap-extra-section [style*="color:#7c3aed"][style*="cursor:pointer"]:hover{background:rgba(99,102,241,.20)!important;border-color:rgba(99,102,241,.50)!important}
html.dark body #ap-extra-section [style*="color:#7c3aed"][style*="cursor:pointer"]{color:#A5B4FC!important}

/* "Da fatturare €X" in LAVORAZIONE — testo verde Pro */
body #ap-lavorazione-section [style*="color:#059669"],
body #ap-lavorazione-section [style*="color:#10b981"]{color:#0E9F6E!important}

/* "Lavorazione in corso" testo muted Pro */
body #ap-lavorazione-stato-txt{color:#5B6573!important;font-size:12px}

/* "modifica_richiesta" sotto CONFERMA CLIENTE — discreto */
body #ap-conferma-section [style*="font-style:italic"],
body #ap-conferma-section [style*="opacity"]{color:#8A93A2!important;font-size:11px;font-weight:500}

/* COLLEGA PREVENTIVO — sezione search preventivo
   ios154g2 (§12.13): var(--card) + var(--border) per adattarsi a dark. */
body #ap-preventivo-section .crm-sd-trigger,
body #ap-preventivo-section input[placeholder*="reventivo"]{
  background:var(--card)!important;color:var(--text)!important;border:1px solid var(--border)!important;border-radius:8px!important;
}
body #ap-preventivo-section .crm-sd-trigger:hover{border-color:var(--text-muted)!important}

/* Sconto € row — ios154g2 (§12.13): var(--border) adatta light/dark. */
body #ap-extra-section [style*="border-top"]{border-top-color:var(--border)!important}

/* ════════════════════════════════════════════════════════════════════
   ACTION BUTTONS legacy (.btn-action) — auto-fix globale Pro
   Le pagine Appuntamenti / Promemoria / Buoni / Cassa / Servizi /
   Veicoli usano <button class="btn-action is-info|is-primary|...">
   con <span class="ba-emoji">EMOJI</span><span class="ba-label">Label</span>.
   Restyle: nascondiamo l'emoji e stilizziamo il button col look Pro.
   ════════════════════════════════════════════════════════════════════ */
.pro-page .row-actions{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.pro-page .btn-action{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;
  font:600 12.5px var(--pro-font);
  letter-spacing:-.05px;
  background:var(--pro-surface);
  color:var(--pro-fg);
  border:1px solid var(--pro-border);
  border-radius:8px;
  cursor:pointer;
  transition:background .12s,border-color .12s,color .12s,transform .04s;
  white-space:nowrap;
  box-shadow:var(--pro-shadow-xs);
}
.pro-page .btn-action:hover{background:var(--pro-surface-2);border-color:#D6DAE2}
.pro-page .btn-action:active{transform:translateY(1px)}
.pro-page .btn-action:focus-visible{outline:0;box-shadow:var(--pro-ring-focus)}
/* Nasconde l'emoji "decorativa" (ba-emoji) — i tasti restano puliti con label.
   B071/B072 — La rule originale nascondeva ba-emoji SEMPRE, ma molti btn-action
   nel codice hanno SOLO ba-emoji senza ba-label → bottoni vuoti.
   Fix: nascondi ba-emoji SOLO se nello stesso button c'è anche ba-label
   (siblings via :has()). Se ba-label manca, mostra l'emoji come fallback. */
.pro-page .btn-action:has(.ba-label) .ba-emoji{display:none!important}
.pro-page .btn-action:not(:has(.ba-label)) .ba-emoji{display:inline-block;font-size:14px;line-height:1}
.pro-page .btn-action .ba-label{display:inline}
/* Anche fuori da .pro-page (su pagine Settings/Admin che NON usano .pro-page) */
.btn-action:has(.ba-label) .ba-emoji{}
.btn-action:not(:has(.ba-label)) .ba-emoji{display:inline-block!important}
/* Varianti semantiche del btn-action mappate ai colori Pro */
.pro-page .btn-action.is-primary{background:var(--pro-primary);color:#fff;border-color:transparent}
.pro-page .btn-action.is-primary:hover{background:var(--pro-primary-600)}
.pro-page .btn-action.is-success{background:var(--pro-success-bg);color:var(--pro-success);border-color:transparent}
.pro-page .btn-action.is-success:hover{background:rgba(14,159,110,.20)}
.pro-page .btn-action.is-info{background:var(--pro-info-bg);color:var(--pro-primary);border-color:transparent}
.pro-page .btn-action.is-info:hover{background:rgba(37,99,235,.18)}
.pro-page .btn-action.is-warning{background:var(--pro-warning-bg);color:var(--pro-warning);border-color:transparent}
.pro-page .btn-action.is-warning:hover{background:rgba(183,121,31,.20)}
.pro-page .btn-action.is-danger{background:var(--pro-danger-bg);color:var(--pro-danger);border-color:transparent}
.pro-page .btn-action.is-danger:hover{background:rgba(212,63,63,.20)}

/* ════════════════════════════════════════════════════════════════════
   SERVIZI — card stile Veicoli (.pro-svc-card)
   ════════════════════════════════════════════════════════════════════ */
.pro-page .pro-svc-card{background:var(--pro-surface);border:1px solid var(--pro-border);border-radius:var(--pro-r-lg);padding:16px 18px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--pro-shadow-xs);transition:all .15s}
.pro-page .pro-svc-card:hover{border-color:var(--pro-primary);transform:translateY(-1px);box-shadow:var(--pro-shadow-md)}
.pro-page .pro-svc-card.inactive{opacity:.55;background:var(--pro-bg)}
.pro-page .pro-svc-card .psc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.pro-page .pro-svc-card .psc-title{font-size:15px;font-weight:700;color:var(--pro-fg);line-height:1.25;letter-spacing:-.2px;flex:1;min-width:0}
.pro-page .pro-svc-card .psc-cat{font-size:11px;font-weight:600;color:var(--pro-fg-muted);text-transform:uppercase;letter-spacing:.5px}
.pro-page .pro-svc-card .psc-desc{font-size:12.5px;color:var(--pro-fg-muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pro-page .pro-svc-card .psc-meta{display:flex;align-items:center;gap:8px;color:var(--pro-fg);font-size:14px;font-weight:600;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.pro-page .pro-svc-card .psc-meta-item{display:inline-flex;align-items:center;gap:4px}
.pro-page .pro-svc-card .psc-meta-divider{color:var(--pro-fg-soft);opacity:.5;font-weight:400}
.pro-page .pro-svc-card .psc-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;padding-top:6px;border-top:1px solid var(--pro-border-2);opacity:0;transition:opacity .15s}
.pro-page .pro-svc-card:hover .psc-actions{opacity:1}
@media (hover:none){.pro-page .pro-svc-card .psc-actions{opacity:1}}

/* Btn-icon-only (es. Appuntamenti tasti tutti emoji) — convertiti in tile uniforme */
.pro-page .btn-action:not(:has(.ba-label)),
.pro-page .btn-action.btn-icon-only{
  width:32px;height:32px;padding:0;display:inline-grid;place-items:center;
}
/* Anche i bottoni icon-only senza emoji visibile (usati nelle azioni "..." dei dropdown) */
.pro-page .btn-icon-action{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:8px;border:1px solid var(--pro-border);background:var(--pro-surface);cursor:pointer;color:var(--pro-fg-muted);transition:all .12s}
.pro-page .btn-icon-action:hover{background:var(--pro-surface-2);color:var(--pro-fg)}

/* ════════════════════════════════════════════════════════════════════
   APPOINTMENTS — pagina Appuntamenti tasti riga (icona-only)
   Hanno markup tipo <button class="btn-action ...">SOLO emoji</button>
   senza .ba-label. Le rendiamo quadrate uniform.
   ════════════════════════════════════════════════════════════════════ */
.pro-page #appointments-list-tbody .btn-action,
.pro-page #appointments-tbody .btn-action,
.pro-page table .row-actions > .btn-action{min-width:32px}
.pro-page table .row-actions > .btn-action:not(.has-label) .ba-emoji{display:inline!important;font-size:13px;filter:grayscale(.2);opacity:.85}
/* Se vuoi del tutto no-emoji anche su Appuntamenti, sostituirà la regola sopra */

/* ════════════════════════════════════════════════════════════════════
   B076 ios154g3 — STILE PRO per "Insights avanzati" della Dashboard.
   Pattern §12.13: tutti i valori adattano automaticamente light/dark
   usando i token Pro (--pro-surface, --pro-border, --pro-fg, ...).
   Sezioni interessate (dentro #dash-legacy-insights):
   • #dash-health-card           — Salute clienti (4 KPI + AOV + canali)
   • #dash-ai-suggest-card       — Suggerimenti AI (Suggerisci/Analizza)
   • #occupation-widget          — Occupazione del tempo
   • .dash-grid .card            — Contatti per stato + Promemoria scadenza
   • #dash-appts-row .card       — Prossimi/Recenti appuntamenti
   • #dash-revenue-card          — Incasso
   • Ultimi clienti (.card finale)
   ──────────────────────────────────────────────────────────────────── */

/* Wrapper details — header summary in stile Pro */
body #dash-legacy-insights{
  background:transparent;
  border:1px solid var(--pro-border)!important;
  border-radius:14px;
}
body #dash-legacy-insights summary{
  font-family:var(--pro-font);
  padding:14px 18px!important;
  font-size:11.5px!important;
  font-weight:700!important;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--pro-fg-muted)!important;
}
body #dash-legacy-insights summary:hover{color:var(--pro-fg)!important}
body #dash-legacy-insights[open] summary{border-bottom:1px solid var(--pro-border)}
body #dash-legacy-insights > .vibe-legacy-wrap{padding:14px 16px 16px!important}

/* Card sezione: surface Pro che adatta light/dark */
body #dash-legacy-insights #dash-health-card,
body #dash-legacy-insights #dash-ai-suggest-card,
body #dash-legacy-insights #occupation-widget,
body #dash-legacy-insights #dash-revenue-card,
body #dash-legacy-insights .dash-grid > .card,
body #dash-legacy-insights #dash-appts-row > .card,
body #dash-legacy-insights > .vibe-legacy-wrap > .card{
  background:var(--pro-surface)!important;
  border:1px solid var(--pro-border)!important;
  border-radius:14px!important;
  box-shadow:0 1px 2px rgba(15,17,22,.04)!important;
  padding:18px 20px!important;
}

/* Header card: titolo Pro display + sub-label */
body #dash-legacy-insights .card > div:first-child > div:nth-child(2) > div:first-child,
body #dash-legacy-insights #dash-health-card > div:first-child > div > div:first-child,
body #dash-legacy-insights #dash-ai-suggest-card > div:first-child > div > div:first-child{
  font-family:var(--pro-font);
  font-size:14px!important;
  font-weight:700!important;
  letter-spacing:-.1px;
  color:var(--pro-fg)!important;
}
body #dash-legacy-insights .card > div:first-child[style*="font-weight:700"],
body #dash-legacy-insights .card > div:first-child > span:first-child{
  font-family:var(--pro-font);
  font-size:14px!important;
  font-weight:700!important;
  letter-spacing:-.1px;
  color:var(--pro-fg)!important;
}

/* Sub-label "Soglie attive..." sotto al titolo card → muted Pro */
body #dash-legacy-insights .card [id$="-meta"],
body #dash-legacy-insights .card [style*="font-size:11px"][style*="color:var(--text-muted)"]{
  color:var(--pro-fg-muted)!important;
}

/* Bottoni .btn-ghost dentro insights → variante neutra Pro pastello */
body #dash-legacy-insights .btn.btn-ghost{
  background:transparent!important;
  color:var(--pro-fg-muted)!important;
  border:1px solid var(--pro-border)!important;
  border-radius:8px!important;
  padding:6px 12px!important;
  font-family:var(--pro-font)!important;
  font-weight:600!important;
  font-size:12.5px!important;
}
body #dash-legacy-insights .btn.btn-ghost:hover{
  background:rgba(148,163,184,.10)!important;
  color:var(--pro-fg)!important;
  border-color:var(--pro-fg-muted)!important;
}

/* Bottone "Suggerisci" (AI primary action) → indigo pastello */
body #dash-legacy-insights #dash-ai-suggest-btn{
  background:rgba(99,102,241,.10)!important;
  color:#4F46E5!important;
  border:1px solid rgba(99,102,241,.30)!important;
}
body #dash-legacy-insights #dash-ai-suggest-btn:hover{
  background:rgba(99,102,241,.20)!important;
  border-color:rgba(99,102,241,.50)!important;
}
html.dark body #dash-legacy-insights #dash-ai-suggest-btn{color:#A5B4FC!important}

/* KPI sub-cards (Totale clienti, Attivi, A rischio, Persi, AOV, Canali)
   Già usano rgba pastel inline → garantiamo solo il bordo coerente +
   var(--bg) per il neutro che adattano automaticamente. */
body #dash-legacy-insights #dash-health-card > div[style*="grid-template-columns"] > div{
  border-radius:10px!important;
  font-family:var(--pro-font);
}
/* Neutro "Totale clienti" / "AOV medio" / "Top canali": bg → var(--pro-surface-2) */
body #dash-legacy-insights #dash-health-card > div[style*="grid-template-columns"] > div[style*="background:var(--bg)"]{
  background:var(--pro-surface-2)!important;
  border:1px solid var(--pro-border)!important;
}

/* Label uppercase tracked dentro KPI cards */
body #dash-legacy-insights #dash-health-card > div[style*="grid-template-columns"] > div > div:first-child{
  font-family:var(--pro-font)!important;
  letter-spacing:.5px!important;
}

/* Tabelle "Ultimi clienti" + altre card finali: usa Pro fg/border */
body #dash-legacy-insights .card table{
  font-family:var(--pro-font);
}
body #dash-legacy-insights .card table thead th{
  font-size:11px!important;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--pro-fg-muted)!important;
  font-weight:700!important;
  border-bottom:1px solid var(--pro-border)!important;
}
body #dash-legacy-insights .card table tbody td{
  font-size:13px;
  color:var(--pro-fg);
  border-bottom:1px solid var(--pro-border-2,var(--pro-border))!important;
}

/* Chart wrap (donut Contatti per stato): centratura + clean look */
body #dash-legacy-insights .dash-grid .card .chart-wrap{
  padding:8px 0;
}

/* Promemoria in scadenza: lista pulita Pro */
body #dash-legacy-insights #upcoming-acts{
  font-family:var(--pro-font);
}
body #dash-legacy-insights #upcoming-acts > div{
  padding:10px 12px;
  border:1px solid var(--pro-border);
  border-radius:10px;
  margin-bottom:8px;
  background:var(--pro-surface-2);
}
body #dash-legacy-insights #upcoming-acts > div:hover{
  border-color:var(--pro-fg-muted);
}

/* Occupation widget — barre progresso più Pro (font, contrast) */
body #dash-legacy-insights #occupation-widget{
  font-family:var(--pro-font);
}

/* Revenue card — accent emerald per "Incasso" */
body #dash-legacy-insights #dash-revenue-card{
  font-family:var(--pro-font);
}

/* Spaziatura uniforme tra card */
body #dash-legacy-insights > .vibe-legacy-wrap > * {
  margin-bottom:16px!important;
}
body #dash-legacy-insights > .vibe-legacy-wrap > *:last-child{
  margin-bottom:0!important;
}

/* ── Accessibilità: rispetta prefers-reduced-motion (WCAG 2.3.3) ──────
   Catch-all globale: azzera (quasi) animazioni/transition per chi richiede
   movimento ridotto. Usiamo .001ms invece di 0/none così gli eventi
   transitionend/animationend continuano a scattare e i flussi JS che ne
   dipendono (modali, toast) restano funzionanti. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}