/* ============================================================
   MB Workspace — veste grafica "Officina"
   Caricato DOPO style.css: ridefinisce colori, caratteri e componenti
   comuni, così tutte le pagine del gestionale cambiano insieme.
   Un solo accento (arancio MB), fondo caldo, carattere del brand Manrope
   (numeri con cifre a larghezza fissa, così le colonne restano allineate).
   ============================================================ */

:root {
  --bg-primary:     #F5F4F1;
  --bg-secondary:   #FFFFFF;
  --bg-card:        #FFFFFF;
  --bg-hover:       #F1EFEA;
  --bg-input:       #FFFFFF;

  --border:         #E6E4DF;
  --border-light:   #EFEDE8;
  --border-strong:  #DCD9D2;

  --text-primary:   #16181C;
  --text-secondary: #3D4249;
  --text-muted:     #626771;
  --text-menu:      #3D4249;

  --accent:         #E74023;
  --accent-hover:   #C9361C;
  --accent-ink:     #B8320F;
  --accent-light:   #FDECE6;
  --accent-line:    #F8CDBF;
  --accent-glow:    rgba(231, 64, 35, 0.14);

  --success:        #1E7A4C;
  --success-ink:    #16603B;
  --success-light:  #E2F3EA;
  --warning:        #B26B00;
  --warning-ink:    #7A4A00;
  --warning-light:  #FFF1D6;
  --danger:         #B42318;
  --danger-ink:     #9E1E14;
  --danger-light:   #FDE3DF;
  --info:           #2F5BD3;
  --info-ink:       #1F44A8;
  --info-light:     #E3EEFF;

  --radius-sm:  10px;
  --radius:     12px;
  --radius-lg:  16px;

  --shadow:     0 1px 2px rgba(22,24,28,.04);
  --shadow-lg:  0 16px 40px rgba(22,24,28,.14);

  --sidebar-w:  252px;
  --header-h:   64px;

  --font-sans:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --safe-b: env(safe-area-inset-bottom, 0px);
}

html { font-size: 15px; }
body { background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-sans); line-height: 1.5; -webkit-text-size-adjust: 100%; }
a { color: var(--accent-ink); }
a:hover { color: #8E260B; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.td-mono, .text-mono, .stat-value, .d-val, .d-todo .r, .d-ptable .mt, .d-chart-x { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.text-muted { color: var(--text-muted) !important; }
.text-accent { color: var(--accent) !important; }
.text-danger { color: var(--danger) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
::-webkit-scrollbar-thumb { background: #D6D3CC; }

/* ── MENU LATERALE ─────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: #FFFFFF;
  border-right: 1px solid var(--border);
  padding: 18px 14px 14px;
  gap: 18px;
}
.sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 4px 10px 6px; min-height: 44px; }
.sidebar-logo .sidebar-logo-img { height: 34px; width: auto; max-width: 180px; display: block; }
.sidebar-logo .logo-version { display: none; }
.sidebar-nav { padding: 0; gap: 2px; display: flex; flex-direction: column; overflow-y: auto; }
.nav-section-label {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted); padding: 14px 12px 6px; margin: 0;
}
.nav-item {
  display: flex; align-items: center; gap: 12px;
  min-height: 40px; padding: 8px 12px; margin: 0;
  border-radius: 10px; border: 0;
  color: var(--text-menu); font-size: 14px; font-weight: 500;
  background: transparent;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav-item.active { background: var(--accent-light); color: var(--accent-ink); font-weight: 600; }
.nav-item.active::before { display: none; }
.nav-item .nav-icon { width: 18px; font-size: 15px; color: inherit; opacity: .85; text-align: center; }
.nav-item.active .nav-icon { opacity: 1; }
.nav-item .badge, .nav-badge {
  margin-left: auto; font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  background: var(--accent); color: #fff; border-radius: 999px; padding: 1px 7px; min-width: 0;
}
.nav-group-toggle { width: 100%; text-align: left; font-family: inherit; cursor: pointer; }
.nav-group .nav-sub { min-height: 34px; padding: 6px 12px 6px 42px; font-size: 13px; }
.sidebar-settings { margin-top: 4px; }
.sidebar-footer { margin-top: auto; padding: 0; border-top: 0; }
.sidebar-user { background: var(--bg-primary); border-radius: 12px; padding: 8px; gap: 6px; }
.sidebar-user-link { border-radius: 10px; padding: 4px; gap: 10px; }
.sidebar-user .avatar { width: 36px; height: 36px; font-size: 13px; }
.sidebar-user .user-name { font-size: 14px; }
.sidebar-user .user-role { font-size: 12px; }
.sidebar-user .logout-btn { width: 36px; height: 36px; border-radius: 10px; background: #fff; border: 1px solid var(--border); }

/* ── BARRA IN ALTO ─────────────────────────────────────────── */
.main-content { margin-left: var(--sidebar-w); min-width: 0; }
.topbar {
  height: var(--header-h);
  background: rgba(245, 244, 241, .92);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 0 32px; gap: 14px;
}
.topbar-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-title span { font-size: 13px; font-weight: 500; color: var(--text-muted); margin-left: 8px; }
.topbar-actions { margin-left: auto; gap: 10px; }
.topbar-btn {
  width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--border); background: #fff; color: var(--text-secondary);
}
.topbar-btn:hover { border-color: var(--border-strong); color: var(--text-primary); background: var(--bg-primary); }
.notification-dot { background: var(--accent); border: 2px solid #fff; }
.topbar-searchbtn {
  display: flex; align-items: center; gap: 10px;
  width: 340px; height: 42px; padding: 0 12px 0 14px;
  border: 1px solid var(--border); border-radius: 12px; background: #fff;
  color: var(--text-muted); font: 500 14px var(--font-sans); cursor: pointer; text-align: left;
}
.topbar-searchbtn:hover { border-color: var(--border-strong); color: var(--text-secondary); }
.topbar-searchbtn span { flex: 1; }
.topbar-searchbtn kbd { font-family: var(--font-mono); font-size: 11px; border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; color: var(--text-muted); }
.topbar-timer {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
  border-radius: 999px; background: var(--accent-light); color: var(--accent-ink);
  font-size: 13px; font-weight: 600; white-space: nowrap; max-width: 300px; overflow: hidden; text-overflow: ellipsis;
}
.topbar-timer:hover { color: #8E260B; }
.topbar-timer .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); animation: ofPulse 1.6s infinite; flex-shrink: 0; }
@keyframes ofPulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .topbar-timer .dot { animation: none; } }
.user-btn { border-radius: 12px; padding: 4px 8px 4px 4px; border: 1px solid transparent; }
.user-btn:hover { background: #fff; border-color: var(--border); }
.user-btn .avatar { width: 34px; height: 34px; }
.topnav-ddmenu { border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; }
.dd-item { border-radius: 8px; }

/* ── CONTENUTO ─────────────────────────────────────────────── */
.page-content { padding: 28px 32px 48px; }
.app-wrapper > .main-content > .alert { margin: 20px 32px 0; }
.page-header { margin-bottom: 22px; align-items: flex-end; }
.page-header-left .page-title, .page-title { font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; color: var(--text-primary); }
.page-header-left .page-subtitle, .page-subtitle { font-size: 14px; color: var(--text-muted); margin-top: 4px; }
.page-header-actions { gap: 10px; flex-wrap: wrap; }
.breadcrumb { font-size: 13px; color: var(--text-muted); }

.card { background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: none; }
.card-header { background: #fff; border-bottom: 1px solid var(--border-light); padding: 16px 22px; gap: 12px; }
.card-title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.card-title .text-accent, .card-title i { color: var(--accent); }
.card-body { padding: 22px; }

.stats-grid { gap: 16px; }
.stat-card { border-radius: 16px; border: 1px solid var(--border); padding: 20px; box-shadow: none; }
.stat-card:hover { transform: none; border-color: #CFCBC2; }
.stat-card::before { display: none; }
.stat-value { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.stat-label { font-size: 13px; color: var(--text-muted); font-weight: 500; text-transform: none; letter-spacing: 0; }

/* tabelle */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { font-size: 14px; }
thead th {
  background: #FAF9F7; color: var(--text-muted);
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 11px 16px; border-bottom: 1px solid var(--border-light);
}
tbody tr { border-bottom: 1px solid var(--border-light); }
tbody tr:hover { background: #FAF9F7; }
tbody td { padding: 13px 16px; }
.td-mono { font-size: 13px; }
td.td-mono, .td-mono.text-right { white-space: nowrap; }

/* stati */
.badge { border-radius: 999px; font-size: 12px; font-weight: 600; padding: 3px 10px; letter-spacing: 0; }
.badge-success   { background: var(--success-light); color: var(--success-ink); }
.badge-danger    { background: var(--danger-light);  color: var(--danger-ink); }
.badge-warning   { background: var(--warning-light); color: var(--warning-ink); }
.badge-info      { background: var(--info-light);    color: var(--info-ink); }
.badge-primary   { background: var(--accent-light);  color: var(--accent-ink); }
.badge-secondary { background: #F1EFEA; color: var(--text-secondary); }

/* pulsanti */
.btn {
  border-radius: 12px; font: 600 14px var(--font-sans);
  min-height: 40px; padding: 8px 16px; gap: 8px;
  box-shadow: none; transform: none;
}
.btn:hover { transform: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: none; transform: none; color: #fff; }
.btn-secondary { background: #fff; border: 1px solid var(--border-strong); color: var(--text-primary); }
.btn-secondary:hover { background: var(--bg-primary); border-color: #C9C5BC; color: var(--text-primary); }
.btn-ghost { background: transparent; border: 1px solid transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-hover); border-color: transparent; color: var(--text-primary); }
.btn-danger { background: #fff; border: 1px solid #F0B9B2; color: var(--danger); }
.btn-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-sm { min-height: 34px; padding: 5px 12px; font-size: 13px; border-radius: 10px; }
.btn-lg { min-height: 48px; padding: 10px 22px; font-size: 15px; }
.btn-icon { min-height: 0; width: 34px; height: 34px; padding: 0; justify-content: center; }
.btn-sm.btn-icon { width: 32px; height: 32px; }

/* campi */
.form-group { margin-bottom: 18px; }
.form-label { font-size: 13px; font-weight: 600; color: var(--text-primary); text-transform: none; letter-spacing: 0; margin-bottom: 6px; }
.form-control {
  min-height: 44px; border-radius: 12px; border: 1px solid var(--border-strong);
  background: #fff; color: var(--text-primary); font: 500 14px var(--font-sans); padding: 10px 14px;
}
textarea.form-control { min-height: 0; line-height: 1.5; }
.form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); outline: none; }
.form-control::placeholder { color: #8A8F98; }
.form-hint { font-size: 12.5px; color: var(--text-muted); }
.checkbox-custom input[type=checkbox], input[type=checkbox], input[type=radio] { accent-color: var(--accent); }

/* filtri */
.filter-bar { gap: 10px; }
.filter-bar .search-box input, .filter-bar select {
  min-height: 40px; border-radius: 999px; border: 1px solid var(--border-strong); background: #fff; font-size: 13px; padding-left: 16px;
}
.filter-bar .search-box input { padding-left: 36px; }
.filter-bar .search-box .search-icon { left: 14px; }
.settings-tabs { gap: 4px; padding: 4px; background: #fff; border: 1px solid var(--border); border-radius: 999px; display: inline-flex; flex-wrap: wrap; }
.settings-tabs .tab { border: 0; border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 500; color: var(--text-secondary); background: transparent; }
.settings-tabs .tab:hover { background: var(--bg-hover); color: var(--text-primary); }
.settings-tabs .tab.active { background: var(--text-primary); color: #fff; font-weight: 600; border: 0; box-shadow: none; }
.settings-tabs .tab.active i { color: #fff; }

/* finestre */
.modal-backdrop { background: rgba(22, 24, 28, .42); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.modal { border-radius: 20px; border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.modal-header { padding: 20px 24px; border-bottom: 1px solid var(--border-light); }
.modal-title { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.modal-close { width: 36px; height: 36px; border-radius: 10px; }
.modal-body { padding: 22px 24px; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--border-light); gap: 10px; background: #FAF9F7; border-radius: 0 0 20px 20px; }

/* avvisi */
.alert { border-radius: 14px; border: 1px solid transparent; padding: 14px 16px; font-size: 14px; gap: 12px; }
.alert-success { background: var(--success-light); color: var(--success-ink); border-color: #BFE3CE; }
.alert-danger  { background: var(--danger-light);  color: #6E140C; border-color: #F6C5BE; }
.alert-warning { background: var(--warning-light); color: #5C3800; border-color: #F2D9A6; }
.alert-info    { background: var(--info-light);    color: #17337E; border-color: #C9D9FB; }

.empty-state .empty-icon { color: #B7B3AA; }
.empty-state .empty-title { font-size: 16px; font-weight: 700; }
.empty-state .empty-text { font-size: 14px; }

.progress-bar-wrap { height: 6px; border-radius: 999px; background: var(--border-light); overflow: hidden; }
.progress-bar { border-radius: 999px; }
.progress-bar.warning { background: #C77D08; }

/* ── DASHBOARD ─────────────────────────────────────────────── */
.d-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.d-head .d-date { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.d-head h1 { margin: 4px 0 0; font-size: 32px; line-height: 1.15; letter-spacing: -.02em; font-weight: 700; }
.d-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.d-alert { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--accent-line); background: var(--accent-light); color: #5A1F0F; font-size: 14px; margin-bottom: 14px; text-decoration: none; }
a.d-alert:hover { color: #5A1F0F; }
.d-alert .d-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.d-alert.bad { background: var(--danger-light); border-color: #F6C5BE; color: #6E140C; } .d-alert.bad .d-ic { background: var(--danger); }
.d-alert.warn { background: var(--warning-light); border-color: #F2D9A6; color: #5C3800; } .d-alert.warn .d-ic { background: var(--warning); }
.d-alert .d-txt { flex: 1; min-width: 0; }
.d-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 6px 0 16px; }
a.d-kpi { padding: 20px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--text-primary); background: #fff; border: 1px solid var(--border); border-radius: 16px; }
a.d-kpi:hover { border-color: #CFCBC2; color: var(--text-primary); }
.d-kpi .d-lbl { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.d-kpi .d-val { font-family: var(--font-mono); font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.d-kpi .d-note { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.d-note.good { color: var(--success); } .d-note.bad { color: var(--danger); } .d-note.accent { color: var(--accent-ink); }
.d-bar { display: block; height: 6px; border-radius: 999px; background: var(--border-light); overflow: hidden; }
.d-bar > span { display: block; height: 100%; border-radius: 999px; }
.d-cols { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.d-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.d-sec { padding: 22px; background: #fff; border: 1px solid var(--border); border-radius: 16px; }
.d-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.d-sec-h h2 { margin: 0; font-size: 16px; font-weight: 700; }
.d-sec-h a { font-size: 13px; font-weight: 600; }
.d-legend { display: flex; gap: 14px; font-size: 12px; color: var(--text-secondary); }
.d-legend span { display: flex; align-items: center; gap: 6px; } .d-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.d-chart { display: grid; gap: 10px; align-items: end; height: 190px; padding-bottom: 4px; border-bottom: 1px solid var(--border-light); }
.d-chart .m { display: flex; gap: 3px; align-items: flex-end; height: 100%; }
.d-chart .m span { flex: 1; border-radius: 5px 5px 2px 2px; min-height: 2px; }
.d-chart-x { display: grid; gap: 10px; margin-top: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); text-align: center; }
.d-todo { list-style: none; margin: 0; padding: 0; }
.d-todo li + li { border-top: 1px solid var(--border-light); }
.d-todo a { display: flex; gap: 12px; align-items: flex-start; padding: 12px 4px; color: var(--text-primary); border-radius: 8px; }
.d-todo a:hover { background: var(--bg-primary); color: var(--text-primary); }
.d-todo .dot { width: 8px; height: 8px; margin-top: 7px; border-radius: 999px; flex-shrink: 0; }
.d-todo .t { flex: 1; min-width: 0; } .d-todo .t b { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; } .d-todo .t small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.d-todo .r { font-family: var(--font-mono); font-size: 13px; font-weight: 600; white-space: nowrap; }
details.d-more summary { cursor: pointer; list-style: none; font-size: 13px; font-weight: 600; color: var(--accent-ink); padding: 10px 4px 0; }
details.d-more summary::-webkit-details-marker { display: none; }
.d-count { font-family: var(--font-mono); font-size: 12px; font-weight: 600; background: var(--bg-primary); border-radius: 999px; padding: 3px 10px; }
.d-empty { display: flex; gap: 10px; align-items: center; padding: 14px; border-radius: 12px; background: var(--success-light); color: var(--success-ink); font-size: 14px; font-weight: 500; }
.d-ptable .ph, .d-ptable .pr { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, 1.2fr); gap: 16px; align-items: center; }
.d-ptable .ph { padding: 6px 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.d-ptable .pr { padding: 14px 4px; border-top: 1px solid var(--border-light); color: var(--text-primary); border-radius: 8px; }
.d-ptable .pr:hover { background: var(--bg-primary); color: var(--text-primary); }
.d-ptable .nm b { display: block; font-size: 14px; font-weight: 600; } .d-ptable .nm small { display: block; font-size: 12px; color: var(--text-muted); }
.d-ptable .nm [data-m] { display: none; }
.d-ptable .mt { display: block; font-family: var(--font-mono); font-size: 12px; margin-bottom: 6px; }
.d-ptable .lbl-m { display: none; }
.d-late { color: var(--danger); font-weight: 600; }
.d-tc { display: block; color: var(--text-primary); }
.d-tc:hover { color: var(--text-primary); }
.d-tc + .d-tc { margin-top: 16px; }
.d-tc-h { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; margin-bottom: 8px; }
.d-tc-h b { font-weight: 600; } .d-tc-h small { display: block; font-size: 12px; color: var(--text-muted); font-weight: 400; }
@media (min-width: 901px) and (max-width: 1200px) {
  .d-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-cols { grid-template-columns: minmax(0, 1fr); }
}

.topbar-logo { display: none; }
/* ── ACCESSO / INVITO ──────────────────────────────────────── */
.login-page { background: var(--bg-primary); }
.login-box { background: #fff; border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 16px 40px rgba(22,24,28,.08); }
.login-title { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--text-primary); }
.login-subtitle { color: var(--text-muted); }
.btn-login { background: var(--accent); border-radius: 12px; min-height: 46px; font: 600 15px var(--font-sans); box-shadow: none; }
.btn-login:hover { background: var(--accent-hover); transform: none; box-shadow: none; }
.login-google { border-radius: 12px; min-height: 46px; border: 1px solid var(--border-strong); }

/* ── PORTALE CLIENTI ───────────────────────────────────────── */
.portal-company { font-weight: 700; color: var(--text-primary); white-space: nowrap; font-size: 14px; }
.portal-company i { margin-right: 6px; opacity: .55; }
.portal-footer { background: transparent; color: var(--text-muted); border-top: 1px solid var(--border); padding: 18px 32px; }
.portal-footer a { color: var(--accent-ink); border-bottom: 0; }
.portal-footer a:hover { color: #8E260B; }
.portal-footer-text { font-size: 13px; opacity: 1; letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.6; }

/* ── BARRA IN BASSO (telefono) ─────────────────────────────── */
.tabbar { display: none; }

/* riga di riepilogo sotto il nome nelle liste-schede: solo su telefono */
.card-sub { display: none; }
.card-head-main { display: contents; }

/* ── TELEFONO E TABLET STRETTO ─────────────────────────────── */
@media (max-width: 900px) {
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 200;
    width: min(300px, 86vw);
    transform: translateX(-102%); transition: transform .22s ease;
    padding-bottom: calc(14px + var(--safe-b));
  }
  .sidebar.open { transform: none; box-shadow: 12px 0 40px rgba(22,24,28,.18); }
  .sidebar-overlay { z-index: 190; background: rgba(22,24,28,.38); }
  .main-content { margin-left: 0; }
  .menu-toggle { display: inline-flex !important; }
  .topbar { padding: 0 12px; padding-top: env(safe-area-inset-top, 0px); height: calc(60px + env(safe-area-inset-top, 0px)); gap: 8px; }
  .topbar-title { font-size: 17px; flex: 1; }
  .topbar-title span { display: none; }
  .topbar-searchbtn { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .topbar-searchbtn span, .topbar-searchbtn kbd { display: none; }
  .topbar-timer { display: none; }
  .portal-company { display: none; }
  .portal-ticket-btn .lbl { display: none; }
  .portal-ticket-btn { width: 40px; padding: 0 !important; justify-content: center; }
  .portal-footer { padding: 16px 16px calc(84px + var(--safe-b)); text-align: center; }
  .main-content:has(.portal-footer) .page-content { padding-bottom: 24px !important; }
  .topbar-logo { display: flex; align-items: center; flex: 1; min-width: 0; }
  .topbar-logo img { height: auto; max-height: 26px; width: auto; max-width: min(150px, 100%); display: block; object-fit: contain; object-position: left center; }
  .topbar-logo { overflow: hidden; margin-right: 6px; }
  .topbar-actions { gap: 6px; }
  .topbar-title-dash { display: none; }
  .user-btn .user-meta, .user-btn .dd-caret { display: none; }
  .page-content { padding: 16px 16px calc(92px + var(--safe-b)); }
  /* style.css forza il padding su telefono con !important: qui si ripristina lo spazio per la barra in basso */
  .page-content { padding-bottom: calc(92px + var(--safe-b)) !important; }
  .app-wrapper > .main-content > .alert { margin: 12px 16px 0; }
  .page-header { flex-direction: column; align-items: stretch; gap: 12px; }
  .page-header-left .page-title, .page-title { font-size: 24px; }
  .page-header-actions { width: 100%; }
  .page-header-actions .btn { flex: 1 1 auto; justify-content: center; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .stat-card { padding: 14px; }
  .stat-value { font-size: 20px; }
  .card-header { padding: 14px 16px; flex-wrap: wrap; }
  .card-body { padding: 16px; }
  thead th, tbody td { padding: 11px 12px; }
  .form-row { flex-direction: column; gap: 0; }
  .form-control, .btn { min-height: 44px; }
  .btn-sm { min-height: 38px; }
  .modal-backdrop { align-items: flex-end; }
  .modal { width: 100% !important; max-width: 100% !important; max-height: 92vh; border-radius: 20px 20px 0 0; margin: 0; }
  .modal-footer { border-radius: 0; padding-bottom: calc(16px + var(--safe-b)); }
  .filter-bar { gap: 8px; }
  .filter-bar > * { flex: 1 1 140px; }
  .settings-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; border-radius: 14px; }
  .settings-tabs .tab { white-space: nowrap; }

  /* ── Liste come schede (tabelle trasformate da app.js) ── */
  /* il contenitore non disegna una seconda cornice: le schede stanno sul fondo, con spazi regolari */
  .card:has(table.as-cards) { background: transparent; border: 0; border-radius: 0; overflow: visible; box-shadow: none; }
  .card:has(table.as-cards) > .card-header { background: transparent; border: 0; padding: 4px 2px 10px; }
  .card:has(table.as-cards) .table-wrap { overflow: visible; }
  .card:has(table.as-cards) > div:not(.card-header):not(.table-wrap):not(.card-body) { border-radius: 14px; }
  table.as-cards tr {
    border: 1px solid var(--border) !important; border-radius: 14px !important; background: #fff !important;
    box-shadow: none !important; margin: 0 0 10px !important; padding: 2px 16px !important;
  }
  table.as-cards tbody tr:hover { background: #fff !important; }
  table.as-cards td { padding: 10px 0 !important; font-size: 14px; border-bottom: 1px solid var(--border-light) !important; }
  table.as-cards td:last-child { border-bottom: 0 !important; }
  table.as-cards td[data-label]::before { font-size: 12.5px !important; font-weight: 500 !important; color: var(--text-muted) !important; }
  table.as-cards td.card-head { padding: 14px 0 !important; border-bottom: 0 !important; font-size: 15px !important; font-weight: 600 !important; gap: 10px; }
  table.as-cards tr.card-expanded td.card-head { border-bottom: 1px solid var(--border-light) !important; }
  table.as-cards td.card-head .card-head-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; text-align: left; }
  table.as-cards td.card-head .card-head-main > a { color: var(--text-primary); }
  table.as-cards .card-sub { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  table.as-cards .card-chevron { width: 32px; height: 32px; border-radius: 10px; background: var(--bg-primary); display: inline-flex !important; align-items: center; justify-content: center; font-size: 12px; margin-left: 0 !important; }
  /* righe "di gruppo" (es. cliente nella lista progetti) e messaggi di lista vuota: sempre visibili, senza scheda */
  table.as-cards tr.card-full, table.as-cards tr.client-group-header {
    border: 0 !important; background: transparent !important; padding: 0 !important; margin: 0 !important;
  }
  table.as-cards tr.card-full td, table.as-cards tr.client-group-header td { display: block !important; padding: 0 !important; border: 0 !important; }
  table.as-cards tr.client-group-header td, table.as-cards tr.client-group-header td * { background: transparent !important; border: 0 !important; box-shadow: none !important; }
  table.as-cards tr.client-group-header td { padding: 18px 4px 8px !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted) !important; }
  table.as-cards tr.card-full:not(.client-group-header) td:has(.empty-state), table.as-cards tr.card-full:not(.client-group-header) td[colspan] { background: #fff; border: 1px solid var(--border) !important; border-radius: 14px; padding: 8px !important; }
  table.as-cards tr.card-full td:empty { display: none !important; }

  /* intestazioni pagina con molti pulsanti (es. Monitoraggio siti): vanno a capo */
  .page-header > div:not(.page-header-left) { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
  .page-header > div:not(.page-header-left) > form { display: contents; }
  .page-header > div:not(.page-header-left) > .btn,
  .page-header > div:not(.page-header-left) > form > .btn { flex: 1 1 auto; justify-content: center; }

  /* filtri a pillole fatti in pagina (es. Scadenze): una riga che scorre */
  .seg-tabs { display: flex !important; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg-tabs::-webkit-scrollbar { display: none; }
  .seg-tabs > * { flex-shrink: 0; white-space: nowrap; }

  /* Permessi: legenda ruoli in griglia ordinata */
  .roles-legend { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; }
  .roles-legend > div { padding: 10px 12px !important; min-width: 0; }

  /* Calendario (FullCalendar): barra comandi su più righe, pulsanti nello stile del gestionale */
  .fc .fc-header-toolbar { flex-wrap: wrap; gap: 10px; }
  .fc .fc-header-toolbar .fc-toolbar-chunk { display: flex; align-items: center; gap: 6px; }
  .fc .fc-header-toolbar .fc-toolbar-chunk:nth-child(2) { order: -1; width: 100%; justify-content: center; }
  .fc .fc-toolbar-title { font-size: 18px !important; text-transform: capitalize; }
  .fc .fc-button { padding: 6px 10px; font-size: 13px; border-radius: 10px !important; }
  .fc .fc-daygrid-event { font-size: 10.5px; }
  .fc .fc-col-header-cell-cushion { font-size: 11px; }

  /* Time tracking */
  .harvest-header { flex-direction: column; align-items: stretch !important; gap: 12px; }
  .harvest-header .date-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 20px !important; }
  .harvest-header .return-today { font-size: 13px; }
  .harvest-header .view-tabs { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .harvest-header .view-tabs .view-tab { flex: 1 0 auto; padding: 8px 14px; }
  .tt-layout { flex-direction: column !important; gap: 12px !important; }
  .tt-layout > div:first-child { padding-top: 0 !important; display: flex; align-items: center; gap: 12px; }
  .tt-layout .track-btn { width: 48px; height: 48px; font-size: 24px; margin: 0; }
  .tt-layout .track-label { margin: 0; font-weight: 600; }
  .day-entry-card { flex-wrap: wrap; gap: 8px 12px; padding: 14px 16px !important; }
  .day-entry-card .day-entry-project { flex: 1 1 100%; min-width: 0; }
  .day-entry-card .day-entry-duration { font-size: 20px !important; }
  .day-entry-card .day-entry-actions { margin-left: auto; display: flex; gap: 8px; }
  .day-total-bar { padding: 12px 16px !important; }
  .tt-week > div:last-child { min-width: 0; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tt-week > div:last-child > * { min-width: 640px; }

  /* schede di progetto e cliente: una riga che scorre di lato */
  div:has(> .tab-btn), div:has(> button[id^="tab-btn-"]) {
    display: flex !important; flex-wrap: nowrap !important; max-width: 100%;
    overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  div:has(> .tab-btn)::-webkit-scrollbar, div:has(> button[id^="tab-btn-"])::-webkit-scrollbar { display: none; }
  .tab-btn, button[id^="tab-btn-"] { flex-shrink: 0; white-space: nowrap; }
  .tab-btn { padding: 12px 14px; }

  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--border); padding: 6px 6px calc(6px + var(--safe-b));
  }
  .tabbar a, .tabbar button {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 52px; border: 0; background: transparent; color: var(--text-muted);
    font: 600 11px var(--font-sans); text-decoration: none; border-radius: 12px; cursor: pointer; position: relative;
  }
  .tabbar i { font-size: 19px; }
  .tabbar .on { color: var(--accent-ink); }
  .tabbar .tb-count { position: absolute; top: 4px; left: calc(50% + 6px); font-family: var(--font-mono); font-size: 10px; background: var(--accent); color: #fff; border-radius: 999px; padding: 0 5px; line-height: 16px; }

  .d-head h1 { font-size: 26px; }
  .d-actions { width: 100%; } .d-actions .btn { flex: 1; justify-content: center; }
  .d-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  a.d-kpi { padding: 14px; gap: 6px; }
  .d-kpi .d-val { font-size: 20px; }
  .d-kpi .d-note { font-size: 11px; }
  .d-cols { grid-template-columns: minmax(0, 1fr); }
  .d-stack-todo { order: -1; }
  .d-sec { padding: 16px; }
  .d-chart { height: 150px; gap: 5px; } .d-chart-x { gap: 5px; font-size: 10px; }
  .d-alert { padding: 12px; gap: 10px; font-size: 13px; } .d-alert .d-ic { display: none; }
  .d-ptable .ph { display: none; }
  .d-ptable .pr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
  .d-ptable .pr .nm { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 10px; }
  .d-ptable .pr .dl { display: none; }
  .d-ptable .nm [data-m] { display: inline; }
  .d-ptable .lbl-m { display: inline; color: var(--text-muted); font-family: var(--font-sans); }
}
@media (min-width: 901px) {
  .d-only-mobile { display: none !important; }
}

/* Portale · dettaglio time card: i 4 riquadri ore su 2 colonne anche su mobile (come le KPI della home) */
@media (max-width: 900px) {
  div.tc-stats[style] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .tc-stats > .card { margin: 0; }
}
/* Portale · finestra "Apri un ticket": le 3 ore restano su una riga, compatte */
@media (max-width: 900px) {
  #ticketHoursWrap[style] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  #ticketHoursWrap > div { padding: 8px 10px !important; display: flex; flex-direction: column; justify-content: space-between; }
  #ticketHoursWrap > div > div:first-child { font-size: .62rem !important; letter-spacing: .3px !important; }
}

/* Accesso portale: stesso sfondo e stessa scheda in login, password dimenticata, invito; margini su mobile */
body.login-page { background: var(--bg-primary); font-family: var(--font-sans); padding: 16px; box-sizing: border-box; }
.login-page { padding: 16px; box-sizing: border-box; }
.login-container { border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 16px 40px rgba(22,24,28,.08); padding: clamp(24px, 7vw, 42px); }
.login-box { padding: clamp(24px, 7vw, 40px); }

/* ── Piano di fatturazione (progetto) ───────────────────────── */
.bp-toolbar { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.bp-seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 12px; }
.bp-seg .tab { border: 0; background: transparent; padding: 7px 14px; border-radius: 9px; font: 600 13px var(--font-sans); color: var(--text-secondary); cursor: pointer; }
.bp-seg .tab.active { background: #fff; color: var(--text-primary); box-shadow: 0 1px 3px rgba(22,24,28,.12); }
.bp-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--border-light); }
.bp-row:first-child { border-top: 0; padding-top: 0; }
.bp-row .form-label { font-size: 12px; margin-bottom: 4px; }
.bp-row .bp-del { margin-top: 26px; color: var(--danger); }
.bp-in { position: relative; }
.bp-in .form-control { padding-right: 30px; }
.bp-unit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-weight: 600; pointer-events: none; }
.bp-eq { display: block; margin-top: 4px; font-size: 12px; min-height: 1em; font-family: var(--font-mono); }
.bp-total { margin-top: 12px; padding: 10px 14px; background: var(--bg-primary); border-radius: 10px; font-size: 14px; }
@media (max-width: 900px) {
  .bp-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .bp-row .bp-label { grid-column: 1 / -1; }
  .bp-row .bp-del { margin-top: 24px; }
  .bp-seg { width: 100%; } .bp-seg .tab { flex: 1; }
}
/* grafico dashboard: barra del fatturato previsto (rate dei piani di fatturazione) */
.d-chart .m span.fc { background: repeating-linear-gradient(135deg, var(--accent-light) 0 4px, transparent 4px 8px); border: 1px dashed var(--accent); }
.d-legend i.fc { background: repeating-linear-gradient(135deg, var(--accent-light) 0 3px, transparent 3px 6px); border: 1px dashed var(--accent); }
/* Contabilità → Da fatturare */
.bp-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.bp-fc { list-style: none; margin: 0; padding: 0; }
.bp-fc li { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; }
.bp-fc li + li { border-top: 1px solid var(--border-light); }
.bp-fc .m { font-size: 13px; font-weight: 600; }
.bp-fc .v { font-size: 13px; font-weight: 700; min-width: 72px; text-align: right; }
@media (max-width: 900px) { .bp-fc li { grid-template-columns: 104px minmax(0, 1fr) auto; } }
/* grafico dashboard scorrevole (mesi di previsione oltre l'anno) */
.d-chart-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 6px; }
.d-chart-inner { position: relative; }
.d-chart .m { position: relative; }
.d-chart-inner .d-chart { padding-top: 0; }
.d-chart-x span { display: flex; flex-direction: column; align-items: center; gap: 1px; white-space: nowrap; }
.d-chart-x span.cur { color: var(--text-primary); font-weight: 700; }
.d-chart-x small { font-size: 10px; color: var(--accent-ink); font-weight: 600; }
.d-sec-h h2 .d-sub { font-weight: 500; color: var(--text-muted); font-size: 14px; }
/* colonne dei mesi via variabile: lo stile in linea "grid-template-columns" verrebbe appiattito dalla regola mobile di style.css */
.d-chart, .d-chart-x { grid-template-columns: repeat(var(--n, 12), minmax(0, 1fr)); }
@media (max-width: 900px) { .d-sec-h:has(.d-legend) { flex-wrap: wrap; } .d-sec-h:has(.d-legend) h2 { white-space: nowrap; } }
/* dashboard: 5 box (con il fatturato garantito dalle rate) */
.d-kpis.d-kpis-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.d-kpis-5 .d-kpi .d-val { font-size: 24px; }
@media (max-width: 1200px) {
  .d-kpis.d-kpis-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-kpis-5 > :last-child { grid-column: 1 / -1; }
}
/* piano di fatturazione: "Dividi in rate" */
.bp-split-btn { margin-left: auto; }
.bp-split { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 10px 12px; align-items: end; padding: 14px; margin-bottom: 14px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 12px; }
.bp-split .form-label { font-size: 12px; margin-bottom: 4px; }
.bp-split .form-control { background: #fff; }
@media (max-width: 900px) {
  .bp-split-btn { margin-left: 0; width: 100%; justify-content: center; }
  .bp-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-split-go { grid-column: 1 / -1; } .bp-split-go .btn { width: 100%; justify-content: center; }
}
/* Progetto: margine e chiusura guidata; piano: rate nel portale */
.ph-margin { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ph-margin > div { display: flex; flex-direction: column; gap: 2px; }
.ph-margin b { font-size: 20px; }
.ph-margin small { font-size: 11.5px; }
.ph-closing { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ph-closing li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--bg-primary); font-size: 14px; line-height: 1.45; }
.ph-closing li i { margin-top: 3px; width: 16px; text-align: center; }
.ph-closing li.danger i { color: var(--danger); } .ph-closing li.warning i { color: var(--warning); } .ph-closing li.info i { color: var(--text-muted); }
.bp-portal { margin-top: 12px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
@media (max-width: 900px) { .ph-margin { grid-template-columns: minmax(0, 1fr); } .ph-margin > div { flex-direction: row; justify-content: space-between; align-items: baseline; flex-wrap: wrap; } .ph-margin small { width: 100%; text-align: right; } }
/* Portale: barra dell'anteprima dal gestionale */
.portal-preview-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 1200; display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; padding: 8px 16px; background: #16181C; color: #fff; font-size: 13px; line-height: 1.4; }
.portal-preview-bar .fa-eye { color: #FF8A6B; margin-right: 4px; }
.portal-preview-bar .ppb-note { color: #C9CCD2; }
.portal-preview-bar .ppb-exit { color: #fff; background: var(--accent); padding: 6px 12px; border-radius: 8px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.portal-preview-bar .ppb-exit:hover { background: var(--accent-hover); color: #fff; }
.portal-preview-blocked { padding: 10px 16px; background: #FFF4E5; color: #8A4B00; font-size: 13.5px; border-bottom: 1px solid #F3D9B1; }
.portal-preview-bar .ppb-sep { display: none; }
@media (max-width: 900px) {
  .portal-preview-bar { padding: 8px 12px; font-size: 12.5px; flex-wrap: nowrap; }
  .portal-preview-bar .ppb-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .portal-preview-bar .ppb-more { display: none; } .portal-preview-bar .ppb-sep { display: inline; }
  .portal-preview-bar .ppb-exit { padding: 5px 10px; }
}
body.has-preview { padding-top: var(--ppb, 46px); }
body.has-preview .sidebar { top: var(--ppb, 46px); height: calc(100% - var(--ppb, 46px)); }
/* Portale · Contabilità: fatture in programma raggruppate per progetto */
.pf-groups { display: grid; gap: 18px; }
.pf-group-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 0 2px 8px; border-bottom: 1px solid var(--border-light); margin-bottom: 4px; }
.pf-group-h .pf-name { font-weight: 700; font-size: 15px; min-width: 0; }
.pf-group-h .pf-name a { color: var(--text-primary); text-decoration: none; } .pf-group-h .pf-name a:hover { color: var(--accent-ink); }
.pf-group-h .pf-tot { font-weight: 700; white-space: nowrap; }
@media (max-width: 900px) { .pf-groups { gap: 14px; } .pf-group-h { border-bottom: 0; margin-bottom: 0; } }
@media (min-width: 901px) {
  .pf-group table { table-layout: fixed; width: 100%; }
  .pf-group th:nth-child(1) { width: 40%; } .pf-group th:nth-child(2) { width: 20%; } .pf-group th:nth-child(3) { width: 20%; } .pf-group th:nth-child(4) { width: 20%; }
}

/* ── Pipeline commerciale ──────────────────────────────────── */
.pp-kpi { padding: 20px; display: flex; flex-direction: column; gap: 10px; color: var(--text-primary); background: #fff; border: 1px solid var(--border); border-radius: 16px; }
.pp-filters { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 14px; }
.pp-filters select { width: auto; min-width: 200px; }
.pp-filters .pp-hint { margin-left: auto; }
.pp-board { display: grid; grid-template-columns: repeat(6, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: start; scroll-snap-type: x proximity; }
.pp-col { background: #EFEDE8; border-radius: 14px; padding: 10px; min-height: 160px; scroll-snap-align: start; }
.pp-col.pp-closed { background: #F2F1EE; }
.pp-col-h { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 4px 6px 10px; }
.pp-col-t { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 7px; }
.pp-col-t i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); display: inline-block; }
.pp-col-n { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); background: #fff; border-radius: 999px; padding: 1px 8px; align-self: center; }
.pp-col-v { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
.pp-list { display: flex; flex-direction: column; gap: 8px; min-height: 60px; border-radius: 10px; transition: background .12s; }
.pp-list.is-over { background: rgba(231, 64, 35, .07); outline: 2px dashed rgba(231, 64, 35, .35); outline-offset: 2px; }
.pp-card { display: flex; flex-direction: column; gap: 5px; padding: 11px 12px; background: #fff; border: 1px solid var(--border); border-radius: 12px; color: var(--text-primary); text-decoration: none; box-shadow: 0 1px 2px rgba(22,24,28,.04); cursor: pointer; }
.pp-card[draggable="true"] { cursor: grab; }
.pp-card:hover { border-color: #CFCBC2; color: var(--text-primary); }
.pp-card.is-dragging { opacity: .5; }
.pp-card.is-stale { border-left: 3px solid var(--warning); }
.pp-card-t { font-weight: 600; font-size: 14px; line-height: 1.3; }
.pp-card-c { font-size: 12.5px; color: var(--text-secondary); }
.pp-card-m { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--text-secondary); }
.pp-card-m b { color: var(--text-primary); font-size: 13px; }
.pp-card-f { display: flex; align-items: center; gap: 8px; font-size: 11.5px; min-height: 18px; }
.pp-av { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-light); color: var(--accent-ink); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.pp-stale { color: #8A4B00; }
.pp-tag { font-style: normal; font-size: 10.5px; background: #EDEBE6; color: var(--text-secondary); border-radius: 6px; padding: 1px 6px; }
.pp-empty { font-size: 12.5px; color: var(--text-muted); text-align: center; padding: 18px 6px; }
.pp-newclient { padding: 12px 12px 2px; margin: -4px 0 14px; background: var(--bg-primary); border-radius: 10px; }
/* scheda trattativa */
.pp-steps { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 18px; overflow-x: auto; }
.pp-steps li { flex: 1; min-width: 110px; text-align: center; font-size: 12.5px; font-weight: 600; padding: 9px 8px; border-radius: 10px; background: #EFEDE8; color: var(--text-muted); white-space: nowrap; }
.pp-steps li.is-done { background: #E6F2EC; color: #1A7F4B; }
.pp-steps li.is-current { background: var(--accent); color: #fff; }
.pp-steps li.is-won { background: #1A7F4B; color: #fff; }
.pp-steps li.is-lost { background: #B42318; color: #fff; }
.pp-detail { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.pp-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 14px; } .pp-dl dt { color: var(--text-muted); } .pp-dl dd { margin: 0; }
.pp-act-form { padding-bottom: 6px; }
/* scheda cliente: elenco trattative */
.pp-mini { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; color: var(--text-primary); text-decoration: none; font-size: 13.5px; }
.pp-mini + .pp-mini { border-top: 1px solid var(--border-light); }
.pp-mini-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1200px) { .pp-detail { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  /* telefono: fasi una sotto l'altra (niente trascinamento: la fase si cambia dalla scheda) */
  .pp-board { grid-template-columns: minmax(0, 1fr); overflow: visible; gap: 10px; }
  .pp-col { min-height: 0; }
  .pp-list { min-height: 0; }
  .pp-empty { padding: 6px; text-align: left; }
  .pp-filters .pp-hint { display: none; }
  .pp-filters select { flex: 1; min-width: 0; }
  .pp-kpi { padding: 14px; gap: 6px; }
}

/* ── Modelli progetto, registro attività, riepilogo ore, carichi di lavoro ── */
.pt-list { display: grid; gap: 14px; }
.pt-dl { display: grid; grid-template-columns: 160px 1fr; gap: 6px 14px; margin: 0 0 4px; font-size: 14px; }
.pt-dl dt { color: var(--text-muted); } .pt-dl dd { margin: 0; }
.pt-edit { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-light); }
.ra-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px; }
.ra-filters .form-control { width: auto; min-width: 150px; flex: 0 1 auto; }
.ra-filters input[type=search] { flex: 1 1 200px; }
.ra-tabs { display: inline-flex; gap: 4px; padding: 4px; background: #fff; border: 1px solid var(--border); border-radius: 12px; }
.ra-tabs .tab { padding: 7px 14px; border-radius: 9px; font-weight: 600; font-size: 13.5px; color: var(--text-secondary); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.ra-tabs .tab.active { background: var(--accent-light); color: var(--accent-ink); }
.ra-pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border-light); }
.ck-wrap { overflow-x: auto; }
.ck-table { min-width: 860px; }
.ck-table th, .ck-table td { vertical-align: top; }
.ck-person { min-width: 170px; }
.ck-person strong { display: block; font-size: 14px; }
.ck-cap { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.ck-cap input { width: 46px; padding: 2px 6px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-family: var(--font-mono); text-align: right; }
.ck-cell { min-width: 110px; }
.ck-cell summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr; gap: 2px 4px; align-items: baseline; }
.ck-cell summary::-webkit-details-marker { display: none; }
.ck-h { font-family: var(--font-mono); font-weight: 700; font-size: 15px; }
.ck-of { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }
.ck-bar { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--border-light); overflow: hidden; margin-top: 4px; }
.ck-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--c, #1A7F4B); }
.ck-free { --c: transparent; } .ck-ok { --c: #1A7F4B; } .ck-full { --c: #B26B00; } .ck-over { --c: #B42318; }
.ck-over .ck-h { color: #B42318; } .ck-full .ck-h { color: #8A4B00; } .ck-free .ck-h { color: var(--text-muted); font-weight: 500; }
.ck-cell ul { list-style: none; margin: 8px 0 0; padding: 0; font-size: 12px; display: grid; gap: 4px; }
.ck-cell li { display: flex; justify-content: space-between; gap: 8px; } .ck-cell li span { color: var(--text-secondary); }
.ck-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; align-items: center; }
.ck-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); border: 1px solid var(--border); vertical-align: -1px; }
@media (max-width: 900px) {
  .pt-dl { grid-template-columns: 1fr; gap: 2px; } .pt-dl dd { margin-bottom: 8px; }
  .ra-filters .form-control { flex: 1 1 45%; min-width: 0; }
}
.ck-cell li b { white-space: nowrap; }
/* Impostazioni → Moduli dal sito */
.ms-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ms-src { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border-light); }
.ms-meta { margin: -4px 0 10px; }
.ms-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ms-actions .checkbox-custom { margin-right: auto; }
.ms-copy { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.ms-copy code { flex: 1; min-width: 0; padding: 8px 10px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; overflow-x: auto; white-space: nowrap; }
.ms-key { border-color: var(--accent); }
.ms-steps ol { margin: 0; padding-left: 20px; display: grid; gap: 12px; font-size: 14px; }
.ms-pre { margin: 6px 0; padding: 10px 12px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; overflow-x: auto; }
@media (max-width: 1100px) { .ms-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Assistente ─────────────────────────────────────────────── */
.topbar-ai { width: auto !important; padding: 0 12px !important; gap: 6px; font-weight: 600; font-size: 13.5px; color: var(--accent-ink) !important; background: var(--accent-light) !important; border-color: transparent !important; display: inline-flex; align-items: center; }
.topbar-ai i { color: var(--accent); }
.ai-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 100%; z-index: 1300; background: var(--bg-primary); border-left: 1px solid var(--border);
  box-shadow: -12px 0 40px rgba(22,24,28,.12); display: flex; flex-direction: column; transform: translateX(105%); transition: transform .22s ease; }
.ai-backdrop { position: fixed; inset: 0; z-index: 1290; background: rgba(22,24,28,.25); opacity: 0; pointer-events: none; transition: opacity .2s; }
body.ai-open .ai-panel { transform: none; }
body.ai-open .ai-backdrop { opacity: 1; pointer-events: auto; }
.ai-head { display: flex; align-items: center; gap: 6px; padding: 14px 16px; border-bottom: 1px solid var(--border); background: #fff; }
.ai-title { flex: 1; font-weight: 700; font-size: 15px; } .ai-title i { color: var(--accent); margin-right: 4px; }
.ai-head button { border: 0; background: transparent; width: 34px; height: 34px; border-radius: 9px; color: var(--text-secondary); cursor: pointer; }
.ai-head button:hover { background: var(--bg-primary); }
.ai-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.ai-msg { max-width: 92%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.ai-msg p { margin: 0; } .ai-msg p + p { margin-top: 4px; } .ai-msg ul { margin: 4px 0; padding-left: 18px; } .ai-msg li { margin: 2px 0; }
.ai-msg a { color: var(--accent-ink); font-weight: 600; }
.ai-gap { height: 6px; }
.ai-user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.ai-model { align-self: flex-start; background: #fff; border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.ai-err { color: #B42318; }
.ai-welcome { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 14px; font-size: 14px; }
.ai-welcome p { margin: 0 0 10px; }
.ai-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-chip { border: 1px solid var(--border); background: var(--bg-primary); border-radius: 999px; padding: 6px 11px; font: 500 12.5px var(--font-sans); color: var(--text-primary); cursor: pointer; }
.ai-chip:hover { border-color: var(--accent); color: var(--accent-ink); }
.ai-dots { display: inline-flex; gap: 4px; padding: 4px 2px; } .ai-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); animation: aiDot 1s infinite ease-in-out; }
.ai-dots i:nth-child(2) { animation-delay: .15s; } .ai-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes aiDot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ai-form { display: flex; gap: 8px; align-items: flex-end; padding: 12px; border-top: 1px solid var(--border); background: #fff; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.ai-form textarea { flex: 1; resize: none; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font: 14px var(--font-sans); max-height: 140px; outline: none; }
.ai-form textarea:focus { border-color: var(--accent); }
.ai-form button { width: 42px; height: 42px; border-radius: 12px; border: 0; cursor: pointer; flex-shrink: 0; }
.ai-send { background: var(--accent); color: #fff; }
.ai-mic { background: var(--bg-primary); color: var(--text-secondary); border: 1px solid var(--border) !important; }
.ai-mic.on { background: #B42318; color: #fff; animation: aiPulse 1.2s infinite; }
@keyframes aiPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(180,35,24,.35); } 50% { box-shadow: 0 0 0 7px rgba(180,35,24,0); } }
.ai-draft { align-self: stretch; background: #fff; border: 1px solid var(--accent); border-radius: 14px; padding: 12px; display: grid; gap: 8px; font-size: 13.5px; }
.ai-draft-h { font-weight: 700; } .ai-draft-h i { color: var(--accent); margin-right: 4px; }
.ai-draft-sub { color: var(--text-secondary); margin-top: -4px; }
.ai-draft label { display: grid; gap: 3px; font-size: 12px; color: var(--text-muted); font-weight: 600; flex: 1; }
.ai-draft input, .ai-draft select, .ai-draft textarea { border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; font: 13.5px var(--font-sans); color: var(--text-primary); width: 100%; box-sizing: border-box; background: #fff; }
.ai-row { display: flex; gap: 8px; }
.ai-draft-act { display: flex; gap: 6px; }
.ai-draft-done { font-weight: 600; } .ai-draft-done i { color: #1A7F4B; }
@media (max-width: 900px) {
  .ai-panel { width: 100%; border-left: 0; }
  .topbar-ai span { display: none; }
  .topbar-ai { width: 40px !important; padding: 0 !important; justify-content: center; }
}
.ai-voicehint { display: flex; justify-content: center; padding: 10px 0; }
.ai-voicehint button { border: 0; background: var(--accent); color: #fff; font: 600 16px var(--font-sans); padding: 16px 26px; border-radius: 999px; box-shadow: 0 6px 18px rgba(231,64,35,.35); cursor: pointer; }
.ai-voicehint button i { margin-right: 6px; }

/* ── DASHBOARD PERSONALIZZABILE ─────────────────────────────── */
/* griglia a 3 colonne; ogni blocco occupa 1, 2 o 3 colonne. Le regole interne si adattano alla larghezza del blocco (container query). */
.dgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; grid-auto-flow: row dense; margin-top: 6px; }
.dblk { min-width: 0; container-type: inline-size; position: relative; }
/* mattoncini (attivati da dashboard.js): righe da 4px, l'altezza di ogni blocco la calcola lo script */
.dgrid.masonry { grid-auto-rows: 4px; row-gap: 0; }
.dblk.dw-1 { grid-column: span 1; } .dblk.dw-2 { grid-column: span 2; } .dblk.dw-3 { grid-column: 1 / -1; }
.dblk > .d-kpis { margin: 0; }
@media (max-width: 1200px) {
  .dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dblk.dw-2, .dblk.dw-3 { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .dgrid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .dblk.dw-1, .dblk.dw-2, .dblk.dw-3 { grid-column: 1 / -1; }
}
/* numeri chiave e tabella progetti dentro blocchi stretti */
@container (max-width: 760px) {
  .dblk .d-kpis, .dblk .d-kpis.d-kpis-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dblk .d-kpis-5 > :last-child { grid-column: 1 / -1; }
  .dblk a.d-kpi { padding: 14px; gap: 6px; } .dblk .d-kpi .d-val { font-size: 20px; }
}
@container (max-width: 600px) {
  .dblk .d-ptable .ph { display: none; }
  .dblk .d-ptable .pr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
  .dblk .d-ptable .pr .nm { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 10px; }
  .dblk .d-ptable .pr .dl { display: none; }
  .dblk .d-ptable .nm [data-m] { display: inline; }
  .dblk .d-ptable .lbl-m { display: inline; color: var(--text-muted); font-family: var(--font-sans); }
}
@container (max-width: 420px) {
  .dblk .d-chart { gap: 4px; } .dblk .d-chart-x { gap: 4px; font-size: 10px; }
}

/* barra di modifica */
.dbar { position: sticky; top: 64px; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 16px; margin: 4px 0 14px;
        background: #22262B; color: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.dbar[hidden] { display: none; }
.dbar-txt { font-size: 14px; } .dbar-txt span { color: #C9CCD1; }
.dbar-act { display: flex; flex-wrap: wrap; gap: 8px; }
.dbar .btn-ghost { color: #fff; border-color: rgba(255,255,255,.25); } .dbar .btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
.dblk-bar { display: none; }
.dash-edit .dblk[data-id] { outline: 2px dashed #D4CFC5; outline-offset: 4px; border-radius: 16px; }
.dash-edit .dblk-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 6px 6px 6px 4px; background: #fff; border: 1px solid var(--border); border-radius: 12px; font-size: 13px; }
.dblk-grip { cursor: grab; touch-action: none; padding: 6px 8px; color: var(--text-muted); border-radius: 8px; }
.dblk-grip:hover { background: var(--bg-primary); color: var(--text-primary); }
.dash-dragging, .dash-dragging * { cursor: grabbing !important; user-select: none; }
.dblk-name { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dblk-name i { color: var(--accent); margin-right: 4px; }
.dblk-tools { display: flex; align-items: center; gap: 4px; }
.dblk-tools button { border: 1px solid var(--border); background: #fff; border-radius: 8px; min-width: 30px; height: 30px; padding: 0 6px; font-size: 12px; font-weight: 700; color: var(--text-secondary); cursor: pointer; }
.dblk-tools button:hover { border-color: var(--text-muted); color: var(--text-primary); }
.dblk-w { display: inline-flex; } .dblk-w button { border-radius: 0; margin-left: -1px; } .dblk-w button:first-child { border-radius: 8px 0 0 8px; } .dblk-w button:last-child { border-radius: 0 8px 8px 0; }
.dblk-w button.on { background: #22262B; border-color: #22262B; color: #fff; }
.dblk-tools .dblk-x:hover { background: var(--danger-light); border-color: #F6C5BE; color: var(--danger); }
.dblk.dragging { opacity: .55; }
.dblk.flash > :not(.dblk-bar) { animation: dflash 2.4s ease; border-radius: 16px; }
@keyframes dflash { 0%, 40% { box-shadow: 0 0 0 4px rgba(231,64,35,.35); } 100% { box-shadow: 0 0 0 0 rgba(231,64,35,0); } }
@media (max-width: 1200px) { .dblk-w button[data-v="2"] { display: none; } }
@media (max-width: 900px) {
  .dbar { top: 58px; padding: 8px; } .dbar-txt { display: none; }
  .dbar-act { width: 100%; flex-wrap: nowrap; gap: 6px; } .dbar-act .btn { flex: 1; justify-content: center; padding-left: 8px; padding-right: 8px; }
  .dbar-act .dbar-ic { flex: 0 0 auto; } .dbar-act .dbar-ic span { display: none; }
  .d-actions #dbEditBtn span { display: none; } .d-actions #dbEditBtn { flex: 0 0 auto; }
  .dblk-w { display: none; }
  .dash-edit .dblk-bar { padding: 4px; }
}
.dtoast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 1000; background: #22262B; color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.2); transition: opacity .4s; }
.dtoast.out { opacity: 0; }

/* pannello "Aggiungi blocco" */
.dadd { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dadd-it { display: flex; align-items: flex-start; gap: 12px; text-align: left; padding: 12px; background: #fff; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; font: inherit; color: var(--text-primary); }
.dadd-it:hover { border-color: var(--accent); }
.dadd-ic { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: var(--bg-primary); color: var(--accent); }
.dadd-it .t { flex: 1; min-width: 0; } .dadd-it .t b { display: block; font-size: 14px; } .dadd-it .t small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.35; }
.dadd-plus { color: var(--accent); padding-top: 8px; } .dadd-on { display: none; font-size: 11px; font-weight: 600; color: var(--success); white-space: nowrap; padding-top: 9px; }
.dadd-it.on { cursor: default; background: var(--bg-primary); } .dadd-it.on:hover { border-color: var(--border); }
.dadd-it.on .dadd-on { display: inline; } .dadd-it.on .dadd-plus { display: none; }
@media (max-width: 600px) { .dadd { grid-template-columns: minmax(0, 1fr); } }

/* blocchi nuovi */
.d-lbl { font-size: 12px; color: var(--text-muted); font-weight: 500; display: block; }
.d-val.sm { display: block; font-family: var(--font-mono); font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.d-val.sm small { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.d-mini2, .d-mini3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px 14px; margin-bottom: 8px; background: var(--bg-primary); border-radius: 12px; }
.d-mini3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.d-mini2 .d-bar { margin-top: 6px; }
.d-run { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 10px; border-radius: 12px; background: var(--accent-light, #FDEDE9); color: var(--text-primary); }
.d-run:hover { color: var(--text-primary); }
.d-run b { display: block; font-size: 14px; } .d-run small { display: block; font-size: 12px; color: var(--text-secondary); }
.d-run-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--accent); flex-shrink: 0; animation: dpulse 1.6s infinite; }
@keyframes dpulse { 0% { box-shadow: 0 0 0 0 rgba(231,64,35,.5); } 70% { box-shadow: 0 0 0 8px rgba(231,64,35,0); } 100% { box-shadow: 0 0 0 0 rgba(231,64,35,0); } }
.d-foot { padding: 10px 4px 0; font-size: 13px; font-weight: 600; } .d-foot.muted { font-weight: 500; color: var(--text-secondary); }
.d-subh { margin: 14px 0 2px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.d-agenda { display: flex; flex-direction: column; }
.d-ag-day { margin: 10px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.d-ag-day:first-child { margin-top: 0; }
.d-ag-it { display: flex; gap: 12px; align-items: flex-start; padding: 8px 4px; border-radius: 8px; color: var(--text-primary); }
.d-ag-it:hover { background: var(--bg-primary); color: var(--text-primary); }
.d-ag-t { width: 42px; flex-shrink: 0; font-family: var(--font-mono); font-size: 12px; font-weight: 600; padding-top: 2px; }
.d-ag-t .dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin: 4px 0 0 2px; }
.d-ag-it .t { flex: 1; min-width: 0; } .d-ag-it .t b { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; } .d-ag-it .t small { display: block; font-size: 12px; color: var(--text-muted); }
.d-stages { display: grid; gap: 4px; }
.d-stage { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 4px; border-radius: 8px; color: var(--text-primary); font-size: 14px; }
.d-stage:hover { background: var(--bg-primary); color: var(--text-primary); }
.d-stage-c { width: 8px; height: 8px; border-radius: 999px; } .d-stage b { font-family: var(--font-mono); }
.d-stage-v { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); min-width: 70px; text-align: right; }
.d-team { display: flex; flex-direction: column; }
.d-tm { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-radius: 8px; color: var(--text-primary); }
.d-tm + .d-tm { border-top: 1px solid var(--border-light); }
.d-tm:hover { background: var(--bg-primary); color: var(--text-primary); }
.d-av { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 999px; background: var(--bg-primary); font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.d-av.on { background: var(--accent); color: #fff; box-shadow: 0 0 0 3px rgba(231,64,35,.18); }
.d-tm .t { flex: 1; min-width: 0; } .d-tm .t b { display: block; font-size: 14px; font-weight: 600; } .d-tm .t small { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-live { color: var(--accent-ink); font-weight: 600; }
.d-tm .r { font-size: 13px; font-weight: 600; white-space: nowrap; } .d-tm .r small { color: var(--text-muted); font-weight: 500; }
.d-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.d-q { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: #fff; color: var(--text-primary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; }
.d-q:hover { border-color: var(--accent); color: var(--text-primary); }
.d-q i { color: var(--accent); font-size: 16px; }

/* ── CAMPANELLA: notifiche ricevute ─────────────────────────── */
.topbar-btn .inbox-count { position: absolute; top: -5px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; border: 2px solid #fff; box-sizing: content-box; }
.topbar-btn .inbox-count[hidden], .notification-dot[hidden] { display: none; }
.topnav-dropdown .inbox-menu { left: auto; right: 0; transform: none; }
.inbox-menu { width: 380px; max-width: calc(100vw - 24px); max-height: 74vh; overflow-y: auto; padding-bottom: 6px; }
.inbox-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.inbox-readall { border: 0; background: none; color: var(--accent-ink); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: 6px; white-space: nowrap; }
.inbox-readall:hover { background: var(--bg-primary); }
.inbox-readall[hidden] { display: none; }
.inbox-list { display: flex; flex-direction: column; padding: 2px 6px; }
.inbox-it { display: flex; gap: 10px; align-items: flex-start; padding: 9px 8px; border-radius: 10px; color: var(--text-primary); text-decoration: none; position: relative; }
.inbox-it:hover { background: var(--bg-primary); color: var(--text-primary); }
.inbox-it.unread { background: var(--accent-light); }
.inbox-it.unread::after { content: ''; position: absolute; top: 14px; right: 10px; width: 8px; height: 8px; border-radius: 999px; background: var(--accent); }
.inbox-ic { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; background: var(--bg-primary); color: var(--text-secondary); font-size: 13px; }
.inbox-it.unread .inbox-ic { background: #fff; color: var(--accent); }
.inbox-t { flex: 1; min-width: 0; padding-right: 14px; }
.inbox-t b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.inbox-t small { display: block; font-size: 12.5px; color: var(--text-secondary); line-height: 1.35; margin-top: 2px; overflow-wrap: anywhere; }
.inbox-t em { display: block; font-style: normal; font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.inbox-empty { padding: 22px 14px; text-align: center; color: var(--text-muted); font-size: .85rem; }
.inbox-sec { margin: 8px 14px 2px; padding-top: 10px; border-top: 1px solid var(--border-light); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.inbox-sub { padding: 6px 14px 2px; font-size: .74rem; font-weight: 600; color: var(--text-secondary); }
.inbox-sub i { margin-right: 6px; }
@media (max-width: 900px) { .topnav-dropdown .inbox-menu { position: fixed; left: 12px; right: 12px; width: auto; top: 64px; } }