/* ════════════════════════════════════════════════════════════════════════
   RESTYLE PRO — GLOBAL (C+D)
   Estensione di restyle-pro.css a TUTTO il CRM.

   restyle-pro.css base è scoped a `.pro-page` (solo <main>). Questo file:
   • C — porta i token Pro a livello :root (sidebar, topbar, login, mobile,
     modali, toast — tutto eredita il look Pro)
   • D — copre i pattern visivi che lo scope `.pro-page` non raggiungeva
     (sidebar slate-pure, topbar density, login chrome, modali, toast)

   Caricamento in public/index.html (head, DOPO restyle-pro.css):
     <link rel="stylesheet" href="/restyle-pro-global.css?v=20260428-pro1">

   Caricamento in public/login.html, public/index-mobile-admin.html, ecc.:
     stesso <link>.

   Override sicuro: zero !important sui colori, zero touch ai 3000 punti
   legacy. Per disattivare → rimuovere il <link>, tutto torna a Vibe.
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   PARTE C — TOKEN GLOBALI :root
   Le var Vibe legacy (--bg, --card, --accent, ...) puntano ai valori Pro
   ════════════════════════════════════════════════════════════════════ */

:root,
html[data-theme="vibe"],
html[data-theme="default"] {
  /* Tokens Pro canonici (mirror di restyle-pro.css) */
  --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-border-strong:  #CDD2DB;

  --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-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-shadow-xl:      0 24px 56px rgba(15,17,22,.16);
  --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;

  /* ── Bridge legacy GLOBAL ─────────────────────────────────────────
     Le var Vibe sono usate in ~3000 punti del CRM. Le ridefiniamo qui
     a livello :root → tutto eredita Pro automaticamente. */
  --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:  var(--pro-border-strong);

  --accent:         var(--pro-primary);
  --accent2:        var(--pro-primary-600);
  --accent-2:       var(--pro-primary-600);
  --accent-light:   var(--pro-primary-tint);
  --accent-tint:    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-xs:      var(--pro-shadow-xs);
  --shadow-md:      var(--pro-shadow-md);
  --shadow-lg:      var(--pro-shadow-lg);

  --radius:         var(--pro-r-lg);
  --radius-sm:      var(--pro-r);
  --radius-md:      var(--pro-r-md);
  --radius-lg:      var(--pro-r-lg);
  --radius-xl:      var(--pro-r-xl);

  /* Sidebar Pro slate-pure (decisione utente: come da restyle-pro.css base) */
  --sidebar-from:   #0F172A;
  --sidebar-to:     #1E293B;

  /* Font default a livello body */
  --font-sans:      var(--pro-font);
  --font-display:   var(--pro-font);
  --font-mono:      var(--pro-mono);
}

/* ── Dark mode override globale ─────────────────────────────────────── */
html.dark,
html.dark[data-theme="vibe"],
html.dark[data-theme="default"] {
  --pro-bg:             #0F172A;
  --pro-surface:        #1E293B;
  --pro-surface-2:      #243248;
  --pro-border:         #334155;
  --pro-border-2:       #2A3849;
  --pro-border-strong:  #475569;
  --pro-fg:             #F1F5F9;
  --pro-fg-2:           #CBD5E1;
  --pro-fg-muted:       #94A3B8;
  --pro-fg-soft:        #64748B;
  --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-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);
  --pro-shadow-xl:      0 24px 56px rgba(0,0,0,.60);

  --sidebar-from:       #020617;
  --sidebar-to:         #0F172A;
}

/* Body font: Manrope ovunque (era system su molte pagine) */
body {
  font-family: var(--pro-font);
  background: var(--pro-bg);
  color: var(--pro-fg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11','ss01';
}

/* ════════════════════════════════════════════════════════════════════
   PARTE D — COVERAGE GAP
   Pattern del mockup Pro che restyle-pro.css non copre fuori da .pro-page
   ════════════════════════════════════════════════════════════════════ */

/* ── Sidebar Pro (slate-pure, niente viola) ───────────────────────── */
.sidebar {
  background: linear-gradient(180deg, var(--sidebar-from) 0%, var(--sidebar-to) 100%);
  border-right: 1px solid rgba(255,255,255,.04);
  font-family: var(--pro-font);
}
.sidebar-item,
.sidebar a.nav-link,
.sidebar .nav-item {
  border-radius: var(--pro-r);
  font-weight: 500;
  letter-spacing: -.1px;
  transition: background .12s ease, color .12s ease;
}
.sidebar-item:hover,
.sidebar a.nav-link:hover,
.sidebar .nav-item:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
}
.sidebar-item.active,
.sidebar-item.is-active,
.sidebar a.nav-link.active,
.sidebar .nav-item.active {
  background: rgba(37,99,235,.20);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(37,99,235,.35);
}
.sidebar-item.active::before,
.sidebar a.nav-link.active::before {
  background: var(--pro-primary);
}
.sidebar .nav-icon {
  opacity: .82;
}
.sidebar-item.active .nav-icon,
.sidebar a.nav-link.active .nav-icon {
  opacity: 1;
}
/* Brand block sidebar */
.sidebar .brand,
.sidebar .sidebar-brand {
  font-family: var(--pro-font);
  font-weight: 800;
  letter-spacing: -.4px;
  color: #fff;
}
/* Sidebar footer (user pill / logout) */
.sidebar .sidebar-footer,
.sidebar .user-pill {
  border-top: 1px solid rgba(255,255,255,.06);
}

/* ── Topbar Pro ──────────────────────────────────────────────────── */
.topbar,
.app-topbar,
header.topbar {
  background: var(--pro-surface);
  border-bottom: 1px solid var(--pro-border);
  box-shadow: var(--pro-shadow-xs);
  font-family: var(--pro-font);
  height: 60px;
}
.topbar-search,
.topbar input[type="search"],
.topbar .search-input {
  background: var(--pro-surface-2);
  border: 1px solid var(--pro-border);
  border-radius: var(--pro-r);
  padding: 8px 12px 8px 36px;
  font: 500 13.5px var(--pro-font);
  color: var(--pro-fg);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.topbar-search:focus,
.topbar input[type="search"]:focus,
.topbar .search-input:focus {
  outline: 0;
  border-color: var(--pro-primary);
  box-shadow: var(--pro-ring-focus);
  background: var(--pro-surface);
}
.topbar-notif,
.topbar .icon-btn,
.topbar button.notif {
  width: 36px;
  height: 36px;
  border-radius: var(--pro-r);
  border: 1px solid var(--pro-border);
  background: var(--pro-surface);
  color: var(--pro-fg-2);
  transition: background .12s ease, border-color .12s ease;
}
.topbar-notif:hover,
.topbar .icon-btn:hover,
.topbar button.notif:hover {
  background: var(--pro-surface-2);
  border-color: var(--pro-border-strong);
  color: var(--pro-fg);
}
.topbar .badge-dot,
.topbar .notif-dot {
  background: var(--pro-danger);
  border: 2px solid var(--pro-surface);
}

/* ── Modali Pro ──────────────────────────────────────────────────── */
.modal,
.modal-content,
.modal-card,
.modal-overlay > .modal,
[role="dialog"] > .modal {
  background: var(--pro-surface);
  border: 1px solid var(--pro-border);
  border-radius: var(--pro-r-xl);
  box-shadow: var(--pro-shadow-xl);
  font-family: var(--pro-font);
}
.modal-overlay,
.modal-backdrop {
  background: rgba(15,17,22,.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal-header,
.modal-title-bar {
  border-bottom: 1px solid var(--pro-border);
  padding: 18px 24px;
}
.modal-title {
  font: 700 17px var(--pro-font);
  letter-spacing: -.3px;
  color: var(--pro-fg);
}
.modal-body {
  padding: 20px 24px;
}
.modal-footer {
  border-top: 1px solid var(--pro-border);
  padding: 14px 24px;
  background: var(--pro-surface-2);
  border-radius: 0 0 var(--pro-r-xl) var(--pro-r-xl);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.modal-close {
  border-radius: var(--pro-r);
  color: var(--pro-fg-muted);
}
.modal-close:hover {
  background: var(--pro-surface-2);
  color: var(--pro-fg);
}

/* ── Toast / notifiche ───────────────────────────────────────────── */
.toast,
.crm-toast,
.notification-toast {
  background: var(--pro-surface);
  border: 1px solid var(--pro-border);
  border-radius: var(--pro-r-md);
  box-shadow: var(--pro-shadow-lg);
  font: 500 13.5px var(--pro-font);
  color: var(--pro-fg);
  padding: 12px 16px;
}
.toast.success,
.toast-success { border-left: 3px solid var(--pro-success); }
.toast.warning,
.toast-warning { border-left: 3px solid var(--pro-warning); }
.toast.error,
.toast-danger,
.toast.danger  { border-left: 3px solid var(--pro-danger); }
.toast.info,
.toast-info    { border-left: 3px solid var(--pro-primary); }

/* ── Login page (login.html) ─────────────────────────────────────── */
body.login-page,
body[data-page="login"],
.login-shell {
  background:
    radial-gradient(1200px 600px at 50% -20%, rgba(37,99,235,.08), transparent 60%),
    var(--pro-bg);
  font-family: var(--pro-font);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card,
.login-box,
.auth-card {
  background: var(--pro-surface);
  border: 1px solid var(--pro-border);
  border-radius: var(--pro-r-xl);
  box-shadow: var(--pro-shadow-lg);
  padding: 36px 32px;
  max-width: 420px;
  width: 100%;
}
.login-card h1,
.login-box h1,
.auth-card h1 {
  font: 800 24px var(--pro-font);
  letter-spacing: -.5px;
  color: var(--pro-fg);
  margin: 0 0 6px;
}
.login-card .subtitle,
.auth-card .subtitle {
  color: var(--pro-fg-muted);
  font: 500 14px var(--pro-font);
  margin: 0 0 24px;
}
.login-card label,
.auth-card label {
  display: block;
  font: 600 12px var(--pro-font);
  letter-spacing: .2px;
  color: var(--pro-fg-2);
  margin: 14px 0 6px;
  text-transform: uppercase;
}
.login-card input[type="email"],
.login-card input[type="password"],
.login-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="text"] {
  width: 100%;
  background: var(--pro-surface);
  border: 1px solid var(--pro-border);
  border-radius: var(--pro-r);
  padding: 11px 14px;
  font: 500 14px var(--pro-font);
  color: var(--pro-fg);
  transition: border-color .12s, box-shadow .12s;
}
.login-card input:focus,
.auth-card input:focus {
  outline: 0;
  border-color: var(--pro-primary);
  box-shadow: var(--pro-ring-focus);
}
.login-card button[type="submit"],
.login-card .btn-primary,
.auth-card button[type="submit"] {
  width: 100%;
  margin-top: 20px;
  background: var(--pro-primary);
  color: #fff;
  border: 0;
  border-radius: var(--pro-r);
  padding: 12px 16px;
  font: 700 14px var(--pro-font);
  letter-spacing: -.1px;
  cursor: pointer;
  transition: background .12s, box-shadow .12s, transform .04s;
}
.login-card button[type="submit"]:hover,
.auth-card button[type="submit"]:hover {
  background: var(--pro-primary-600);
  box-shadow: var(--pro-shadow-sm);
}
.login-card button[type="submit"]:active,
.auth-card button[type="submit"]:active {
  transform: translateY(1px);
}
.login-card .help-link,
.auth-card .help-link,
.login-card a,
.auth-card a {
  color: var(--pro-primary);
  font-weight: 600;
  text-decoration: none;
}
.login-card a:hover,
.auth-card a:hover {
  text-decoration: underline;
}
/* Brand block sopra la login card */
.login-brand,
.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 800 18px var(--pro-font);
  letter-spacing: -.4px;
  color: var(--pro-fg);
  margin-bottom: 24px;
  justify-content: center;
}
.login-brand .logo,
.auth-brand .logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--pro-primary), var(--pro-primary-600));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
}

/* ── Form controls globali (anche fuori .pro-page) ───────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]),
select,
textarea,
.form-control,
.form-select {
  font-family: var(--pro-font);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 0;
  border-color: var(--pro-primary);
  box-shadow: var(--pro-ring-focus);
}

/* ── Scrollbar discreta in light mode ────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--pro-border-strong) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--pro-border-strong);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--pro-fg-soft); background-clip: content-box; border: 2px solid transparent; }

/* ── Selection ──────────────────────────────────────────────────── */
::selection {
  background: rgba(37,99,235,.20);
  color: var(--pro-fg);
}

/* ════════════════════════════════════════════════════════════════════
   PARTE D2 — TABELLE / TAB / CHART / KANBAN / DATEPICKER
   ════════════════════════════════════════════════════════════════════ */

/* ── Tabelle Pro (anche fuori .pro-page) ─────────────────────────── */
table.pro-table,
.table-wrap > table,
.crm-table,
table.list,
table.data-table,
main table:not(.no-pro) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--pro-font);
  font-size: 13.5px;
  background: var(--pro-surface);
  border: 1px solid var(--pro-border);
  border-radius: var(--pro-r-md);
  overflow: hidden;
}
table.pro-table thead th,
.table-wrap > table thead th,
.crm-table thead th,
main table:not(.no-pro) thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--pro-surface-2);
  color: var(--pro-fg-muted);
  font: 700 11px var(--pro-font);
  text-transform: uppercase;
  letter-spacing: .6px;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--pro-border);
  white-space: nowrap;
}
table.pro-table tbody td,
.table-wrap > table tbody td,
.crm-table tbody td,
main table:not(.no-pro) tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--pro-border-2);
  color: var(--pro-fg);
  vertical-align: middle;
}
table.pro-table tbody tr:hover,
.table-wrap > table tbody tr:hover,
.crm-table tbody tr:hover,
main table:not(.no-pro) tbody tr:hover {
  background: var(--pro-primary-tint);
}
table.pro-table tbody tr:last-child td,
.table-wrap > table tbody tr:last-child td {
  border-bottom: 0;
}
/* Density variants */
table.density-compact tbody td { padding: 8px 12px; font-size: 13px; }
table.density-compact thead th { padding: 8px 12px; }
table.density-comfy tbody td   { padding: 16px 16px; font-size: 14px; }
table.density-comfy thead th   { padding: 14px 16px; }

/* Sort icon hint */
th[data-sort],
th.sortable {
  cursor: pointer;
  user-select: none;
}
th[data-sort]::after,
th.sortable::after {
  content: '↕';
  margin-left: 6px;
  opacity: .35;
  font-weight: 400;
}
th[data-sort="asc"]::after,
th.sort-asc::after  { content: '↑'; opacity: 1; color: var(--pro-primary); }
th[data-sort="desc"]::after,
th.sort-desc::after { content: '↓'; opacity: 1; color: var(--pro-primary); }

/* ── Tabs / Segmented control ────────────────────────────────────── */
.pro-tabs,
.tabs,
[role="tablist"],
.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  background: var(--pro-surface-2);
  border: 1px solid var(--pro-border);
  border-radius: var(--pro-r);
  font-family: var(--pro-font);
}
.pro-tabs > button,
.pro-tabs > a,
.tabs > button,
.tabs > a,
[role="tab"],
.segmented > button,
.segmented > a {
  padding: 7px 14px;
  font: 600 13px var(--pro-font);
  color: var(--pro-fg-muted);
  background: transparent;
  border: 0;
  border-radius: var(--pro-r-sm);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.pro-tabs > button:hover,
.tabs > button:hover,
[role="tab"]:hover,
.segmented > button:hover {
  color: var(--pro-fg);
}
.pro-tabs > button.active,
.pro-tabs > .active,
.tabs > .active,
[role="tab"][aria-selected="true"],
.segmented > .active {
  background: var(--pro-surface);
  color: var(--pro-primary);
  box-shadow: var(--pro-shadow-xs);
}

/* Underline-style tabs (alternativa) */
.tabs-underline {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--pro-border);
  font-family: var(--pro-font);
}
.tabs-underline > a,
.tabs-underline > button {
  padding: 10px 0;
  font: 600 13.5px var(--pro-font);
  color: var(--pro-fg-muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-bottom: -1px;
}
.tabs-underline > a.active,
.tabs-underline > button.active {
  color: var(--pro-primary);
  border-bottom-color: var(--pro-primary);
}

/* ── Chart.js / Recharts hint colors ─────────────────────────────── */
:root {
  --chart-1: #2563EB;
  --chart-2: #0E9F6E;
  --chart-3: #B7791F;
  --chart-4: #D43F3F;
  --chart-5: #7C3AED;
  --chart-6: #0891B2;
  --chart-7: #DB2777;
  --chart-8: #65A30D;
}
html.dark {
  --chart-1: #60A5FA;
  --chart-2: #6EE7B7;
  --chart-3: #FCD34D;
  --chart-4: #FCA5A5;
  --chart-5: #C4B5FD;
  --chart-6: #67E8F9;
  --chart-7: #F9A8D4;
  --chart-8: #BEF264;
}
.chartjs-tooltip {
  background: var(--pro-surface) !important;
  border: 1px solid var(--pro-border) !important;
  border-radius: var(--pro-r) !important;
  box-shadow: var(--pro-shadow-md) !important;
  color: var(--pro-fg) !important;
  font-family: var(--pro-font) !important;
}
canvas.chartjs-render-monitor {
  font-family: var(--pro-font);
  font-feature-settings: 'tnum' 1;
}

/* ── Kanban (pipeline lead) ──────────────────────────────────────── */
.kanban,
.pipeline-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: 12px;
  overflow-x: auto;
  padding: 8px 4px 16px;
  font-family: var(--pro-font);
}
.kanban-col,
.pipeline-col {
  background: var(--pro-surface-2);
  border: 1px solid var(--pro-border);
  border-radius: var(--pro-r-md);
  padding: 12px;
}
.kanban-col-header,
.pipeline-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 700 12px var(--pro-font);
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--pro-fg-muted);
  margin-bottom: 12px;
}
.kanban-col-count,
.pipeline-col-count {
  background: var(--pro-surface);
  border: 1px solid var(--pro-border);
  border-radius: var(--pro-r-pill);
  padding: 2px 8px;
  color: var(--pro-fg-2);
}
.kanban-card,
.pipeline-card {
  background: var(--pro-surface);
  border: 1px solid var(--pro-border);
  border-radius: var(--pro-r);
  padding: 12px;
  margin-bottom: 8px;
  box-shadow: var(--pro-shadow-xs);
  cursor: grab;
  transition: box-shadow .12s, transform .04s;
}
.kanban-card:hover,
.pipeline-card:hover {
  box-shadow: var(--pro-shadow-sm);
  border-color: var(--pro-border-strong);
}
.kanban-card.dragging,
.pipeline-card.dragging {
  opacity: .5;
  cursor: grabbing;
}

/* ── Date picker (input[type=date] cross-browser) ───────────────── */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  font-family: var(--pro-font);
  border: 1px solid var(--pro-border);
  border-radius: var(--pro-r);
  padding: 9px 12px;
  background: var(--pro-surface);
  color: var(--pro-fg);
  font-size: 14px;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .55;
  filter: invert(0);
}
html.dark input[type="date"]::-webkit-calendar-picker-indicator,
html.dark input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

/* ════════════════════════════════════════════════════════════════════
   PARTE D3 — MOBILE (index-mobile.html, area-clienti.html, portale.html)
   ════════════════════════════════════════════════════════════════════ */

/* Anti-zoom iOS: tutti gli input minimo 16px su mobile */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Mobile body */
@media (max-width: 768px) {
  body {
    font-family: var(--pro-font);
    background: var(--pro-bg);
    color: var(--pro-fg);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Mobile top bar */
.m-topbar,
.mobile-topbar,
header.mobile-header,
.app-mobile-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--pro-surface);
  border-bottom: 1px solid var(--pro-border);
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font: 700 16px var(--pro-font);
  color: var(--pro-fg);
  box-shadow: var(--pro-shadow-xs);
}

/* Mobile bottom nav */
.m-bottomnav,
.mobile-bottomnav,
.bottom-nav,
nav.bottom-tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--pro-surface);
  border-top: 1px solid var(--pro-border);
  padding-bottom: env(safe-area-inset-bottom);
  height: calc(56px + env(safe-area-inset-bottom));
  font-family: var(--pro-font);
}
.m-bottomnav a,
.m-bottomnav button,
.mobile-bottomnav a,
.mobile-bottomnav button,
.bottom-nav a,
.bottom-nav button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font: 600 10px var(--pro-font);
  color: var(--pro-fg-muted);
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 6px 4px;
  cursor: pointer;
}
.m-bottomnav a.active,
.m-bottomnav .active,
.mobile-bottomnav a.active,
.mobile-bottomnav .active,
.bottom-nav a.active,
.bottom-nav .active {
  color: var(--pro-primary);
}
.m-bottomnav .nav-icon,
.mobile-bottomnav .nav-icon,
.bottom-nav .nav-icon {
  width: 22px;
  height: 22px;
}

/* Mobile FAB */
.m-fab,
.mobile-fab,
.fab,
button.fab {
  position: fixed;
  right: 16px;
  bottom: calc(72px + env(safe-area-inset-bottom));
  z-index: 41;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--pro-primary);
  color: #fff;
  border: 0;
  box-shadow: 0 8px 24px rgba(37,99,235,.35), 0 2px 6px rgba(15,17,22,.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 24px;
  transition: transform .12s, box-shadow .12s;
}
.m-fab:hover,
.mobile-fab:hover,
.fab:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(37,99,235,.45), 0 3px 8px rgba(15,17,22,.12);
}
.m-fab:active,
.mobile-fab:active,
.fab:active {
  transform: translateY(0);
}

/* Mobile sheets / bottom drawer */
.m-sheet,
.bottom-sheet,
.mobile-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: var(--pro-surface);
  border-top-left-radius: var(--pro-r-xl);
  border-top-right-radius: var(--pro-r-xl);
  box-shadow: var(--pro-shadow-xl);
  padding: 16px 20px calc(20px + env(safe-area-inset-bottom));
  font-family: var(--pro-font);
  max-height: 92vh;
  overflow-y: auto;
}
.m-sheet::before,
.bottom-sheet::before,
.mobile-sheet::before {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--pro-border-strong);
  margin: 0 auto 12px;
}
.m-sheet-backdrop,
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(15,17,22,.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Mobile list rows (area clienti, portale) */
@media (max-width: 768px) {
  .m-list-row,
  .mobile-list-row,
  .list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--pro-surface);
    border-bottom: 1px solid var(--pro-border-2);
    min-height: 60px;
    font-family: var(--pro-font);
  }
  .m-list-row:active,
  .mobile-list-row:active,
  .list-row:active {
    background: var(--pro-surface-2);
  }
  .m-list-row .title,
  .mobile-list-row .title {
    font: 600 14px var(--pro-font);
    color: var(--pro-fg);
  }
  .m-list-row .subtitle,
  .mobile-list-row .subtitle {
    font: 500 12.5px var(--pro-font);
    color: var(--pro-fg-muted);
  }
}

/* Tap targets minimi 44px su mobile (Apple HIG) */
@media (max-width: 768px) {
  button, .btn, a.btn, .m-tap, [role="button"] {
    min-height: 44px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   FALLBACK — se per qualche pagina .pro-page NON è applicato a <main>,
   forziamo comunque il bg Pro sul main
   ════════════════════════════════════════════════════════════════════ */
main.main:not(.pro-page) {
  background: var(--pro-bg);
  color: var(--pro-fg);
  font-family: var(--pro-font);
}

/* ════════════════════════════════════════════════════════════════════
   ACCESSIBILITÀ — prefers-reduced-motion (WCAG 2.3.3) GLOBALE
   Catch-all su tutto il CRM: per chi richiede movimento ridotto azzeriamo
   (quasi) animazioni/transition. .001ms invece di 0/none così gli eventi
   transitionend/animationend continuano a scattare e i flussi JS che ne
   dipendono (modali, toast, sheet) 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;
  }
}