/* ── RESET & TOKENS ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }

:root {
  --bg:      #050506;
  --bg2:     #0d0d10;
  --bg3:     #141417;
  --bg4:     #1c1c20;
  --bg5:     #242429;
  --border:  rgba(255,255,255,0.07);
  --border2: rgba(128,71,225,0.40);
  --txt:     #ffffff;
  --txt2:    rgba(255,255,255,0.60);
  --txt3:    rgba(255,255,255,0.34);
  --acc:     #bb81f5;
  --acc2:    #8047e1;
  --gold:    #D1DA56;
  --green:   #4ade80;
  --r:       14px;
  --r2:      10px;
  --r3:      8px;
  --dx-btn-hover-bg:  #ffffff;
  --dx-btn-hover-txt: #000000;
  --dx-btn2-hover-bg:  #c9c9d6;
  --dx-btn2-hover-txt: #0a0a10;
  --dx-red:  #ef4444;
  --dx-red2: #dc2626;
  --red:     #f87171;   /* testi errore / hint danger */
  /* motion tokens */
  --dx-t-fast: .15s;
  --dx-t-med:  .5s;
  --dx-t-slow: .7s;
  --dx-btn-txt: #1a1a26; /* testo sui gradienti accento */
  --dx-nav-hover-bg: rgba(255,255,255,0.05); /* grigino hover sidebar */

  /* ── SCALA Z-INDEX GLOBALE ──────────────────────────────
     Unica fonte di verità per i layer dell'app. Non usare
     z-index hardcoded nei nuovi componenti: aggiungere qui.
     Il widget cliente (9998/9999) resta sopra tutto.       */
  --z-topbar:          30;   /* header sticky */
  --z-drawer:         120;   /* .dx-drawer pannelli scheda */
  --z-preview:        200;   /* .dx-preview anteprime */
  --z-modal:          210;   /* .dx-modal-back */
  --z-confirm:        220;   /* .dx-confirm-back */
  --z-toast:          300;   /* toast notifiche */
  --z-menu:          6200;   /* menu contestuali riga */
  --z-sidebar-overlay: 8500; /* overlay scuro+blur sotto la sidebar mobile */
  --z-sidebar:       8600;   /* sidebar mobile off-canvas */
  --z-menu-btn:      8800;   /* hamburger/X: sopra l'overlay, sotto solo il widget */
  --z-widget:        9999;   /* widget chat lato cliente: sempre in cima */
}

/* gradienti-slide bottoni (hover FAB-style): cambiarli qui li cambia ovunque.
   Definiti su body (non :root): i var() annidati si risolvono con le variabili
   del tema attivo (theme-light) e della skin admin (dx-admin). */
body {
  --dx-grad-primary:   linear-gradient(90deg, var(--acc2) 0%, var(--acc) 30%, var(--acc) 40%, var(--dx-btn-hover-bg) 60%, var(--dx-btn-hover-bg) 100%);
  --dx-grad-secondary: linear-gradient(90deg, var(--bg3) 0%, var(--bg3) 20%, var(--dx-btn2-hover-bg) 60%, var(--dx-btn2-hover-bg) 100%);
  --dx-grad-danger:    linear-gradient(90deg, rgba(220,38,38,0) 0%, rgba(220,38,38,0) 20%, var(--dx-red) 60%, var(--dx-red2) 100%);
}

body.theme-light {
  --bg:      #f6f6f7;
  --bg2:     #ffffff;
  --bg3:     #f0f0f2;
  --bg4:     #e7e7ea;
  --bg5:     #dddde1;
  --border:  rgba(10,10,14,0.09);
  --border2: rgba(128,71,225,0.30);
  --txt:     #101014;
  --txt2:    rgba(16,16,20,0.64);
  --txt3:    rgba(16,16,20,0.40);
  --acc:     #8047e1;   /* in light serve il viola scuro: quello chiaro non si legge */
  --acc2:    #6a35c4;
  --gold:    #8d941d;
  --green:   #16a34a;
  --dx-btn-txt: #ffffff; /* testo bianco sui gradienti accento scuri */
  --dx-btn-hover-bg:  #0a0a10;
  --dx-btn-hover-txt: #ffffff;
  --dx-btn2-hover-bg:  #4a4a56;
  --dx-btn2-hover-txt: #ffffff;
  --dx-nav-hover-bg: rgba(16,16,20,0.06); /* visibile su fondo chiaro */
  /* In light i due viola (--acc/--acc2) sono troppo vicini: il gradiente sembra
     tinta piatta. Qui allarghiamo lo spread (scuro→chiaro) come nel tema dark,
     tenendo la parte hover nera (--dx-btn-hover-bg) e il testo bianco. */
  --dx-grad-primary: linear-gradient(90deg, #6a35c4 0%, #a86ef0 30%, #a86ef0 40%, var(--dx-btn-hover-bg) 60%, var(--dx-btn-hover-bg) 100%);
}

html, body { height: 100%; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--txt);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body.theme-light .sidebar,
body.theme-light .topbar {
  background: rgba(255,255,255,0.86);
}

a { text-decoration: none; color: inherit }

:where(a,button,input,textarea,select,summary,[role="button"],.card,.stat-card,.nav-item,.badge,.field-input,.sug-input,.btn-primary,.btn-secondary,.lang-btn,.theme-btn,.app-theme-btn) {
  transition: background-color .5s ease, border-color .5s ease, color .5s ease, box-shadow .5s ease, opacity .5s ease, filter .5s ease, text-shadow .5s ease, transform .22s ease;
}

/* ── SCROLLBAR ─────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px }

/* ── LOGIN PAGE ────────────────────────────────── */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; overflow: hidden; position: relative }






.login-header { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 32px }
.login-logo { height: 80px; width: auto; opacity: 0.95 }
.login-subtitle { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--txt3) }

.login-form { display: flex; flex-direction: column; gap: 16px }
.login-error { font-size: 12px; color: var(--red); min-height: 16px }

.login-hint { font-size: 11px; color: var(--txt3); text-align: center; line-height: 1.5 }

.login-lang { display: flex; align-items: center; gap: 8px }
.lang-sep { color: var(--txt3); font-size: 12px }
.login-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center }

/* ── APP LAYOUT ────────────────────────────────── */
.app-page { display: flex; height: 100vh; overflow: hidden }

/* SIDEBAR */
.sidebar {
  width: 300px; flex-shrink: 0;
  background: rgba(10,10,12,0.94);
  border-right: 1px solid var(--border);
  backdrop-filter: blur(20px);
  display: flex; flex-direction: column;
  transition: transform .25s ease;
  z-index: 100;
}

.sidebar-top { flex: 1; display: flex; flex-direction: column; overflow: hidden }
.sidebar-brand { padding: 20px 18px 18px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 5px }
.brand-logo { width: 90%; height: auto; opacity: .9; transition: width .2s }
@media(max-width:1300px) { .brand-logo { width: 80% } }
.brand-plan {
  font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 900; text-align: center;
  letter-spacing: .16em; text-transform: uppercase;
  color: #D1DA56;
  transition: opacity .2s ease, color .5s ease;
}
.brand-plan.starter { color: #D1DA56; }

.nav { flex: 1; padding: 14px 10px 12px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto }
.nav-section { display: flex; flex-direction: column; gap: 2px }
.nav-section-title {
  padding: 8px 10px 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acc);
  font-family: 'Montserrat', sans-serif;
}
.nav-section-clients { margin-top: 2px }
.nav-section-assistance { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border) }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--r3);
  font-size: 16px; color: var(--txt2); font-weight: 500;
  transition: all .15s; cursor: pointer;
}
.nav-item:hover { background: var(--dx-nav-hover-bg); color: var(--acc) }
.nav-item.active { background: color-mix(in srgb, var(--acc) 12%, transparent); color: var(--acc) }
.nav-item svg { flex-shrink: 0; opacity: .7 }
.nav-item.active svg { opacity: 1 }
.nav-item span:not(.nav-badge){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-badge{display:none;margin-left:auto;width:8px;height:8px;min-width:8px;border-radius:999px;background:var(--gold);padding:0;box-shadow:0 0 0 4px color-mix(in srgb, var(--gold) 8%, transparent),0 0 16px color-mix(in srgb, var(--gold) 25%, transparent)}
.nav-badge.show{display:inline-block}

.sidebar-bottom { padding: 12px; border-top: 1px solid var(--border) }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r3); background: rgba(255,255,255,0.03); border: 1px solid var(--border) }
.user-av { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg,var(--acc2),var(--acc)); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0 }
.user-av img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.user-av.has-logo { background-color: transparent; background-size: cover; background-position: center; padding: 0; overflow: hidden; }
.user-info { flex: 1; min-width: 0 }
.user-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.user-role { font-size: 10px; color: var(--txt3) }
.logout-btn { background: none; border: none; color: var(--txt3); cursor: pointer; padding: 4px; border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: color .15s }
.logout-btn:hover { color: var(--txt) }

/* MAIN */
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; position: relative }

.topbar {
  height: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  background: rgba(6,6,8,0.7);
  backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: var(--z-topbar);
}
.topbar-left { display: flex; align-items: center; gap: 12px }
.topbar-right { display: flex; align-items: center; gap: 12px }
.topbar-actions { display: flex; align-items: center; gap: 8px }
.page-title { font-size: 15px; font-weight: 600 }
/* Icona utente accanto al titolo: solo mobile (≤1300px), leggermente più alta
   del testo ma dentro l'header da 52px (non ne cambia l'altezza). */
.page-title-icon { display: none; width: auto; height: 20px; flex-shrink: 0 }

.content { flex: 1; overflow-y: auto; scrollbar-gutter: stable; padding: 24px; display: flex; flex-direction: column; gap: 16px }

/* ── COMPONENTS ─────────────────────────────────── */

/* Lang switch */
.lang-switch { display: flex; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r3); overflow: hidden }
.lang-btn { padding: 5px 12px; font-size: 11px; font-weight: 700; cursor: pointer; border: none; background: none; color: var(--txt3); transition: all .15s; font-family: 'Montserrat', sans-serif; letter-spacing: .04em }
.lang-btn.active { background: var(--acc); color: var(--dx-btn-txt) }
.app-theme-btn {
  width: 32px; height: 28px; border: 1px solid var(--border);
  border-radius: var(--r3); background: var(--bg3); color: var(--txt2);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s; font-family: inherit;
}
.app-theme-btn:hover { color: var(--txt); border-color: var(--border2) }
.app-theme-btn .theme-icon-light { display: none }
.app-theme-btn.is-light .theme-icon-dark { display: none }
.app-theme-btn.is-light .theme-icon-light { display: inline-flex }

/* Status pill */
.status-pill { display: flex; align-items: center; gap: 6px; padding: 5px 12px; background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.2); border-radius: 20px; font-size: 12px; font-weight: 600; color: var(--green) }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }

/* Cards */
.card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r); padding: 18px 22px }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px }
.card-title { font-size: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--txt); margin-bottom: 10px }
.card-desc { font-size: 12px; color: var(--txt2); line-height: 1.6; margin-bottom: 14px }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }

@media(max-width:1200px) { .sidebar { width: 260px } }
@media(max-width:900px) { .two-col { grid-template-columns: 1fr } }

/* Stats */
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px }
@media(max-width:900px) { .stats-grid { grid-template-columns: repeat(2,1fr) } }

.stat-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 22px }
.stat-label { font-size: 14px; color: var(--txt3); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px }
.stat-value { font-size: 15px; font-weight: 700 }
.stat-num { font-size: 24px; font-weight: 700; font-family: 'Montserrat', sans-serif }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600 }
.badge-green { background: rgba(74,222,128,0.1); color: var(--green); border: 1px solid rgba(74,222,128,0.2) }
.badge-muted { background: var(--bg3); color: var(--txt3); border: 1px solid var(--border) }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0 }

/* Code block */
.code-block {
  background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r3);
  padding: 12px 14px; font-family: 'DM Mono', 'Fira Code', monospace; font-size: 12px;
  color: var(--acc); overflow-x: auto; white-space: nowrap;
}
.code-token { color: var(--gold) }
.btn-copy { display: flex; align-items: center; gap: 5px; padding: 5px 12px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r3); font-size: 11px; font-weight: 600; color: var(--txt2); cursor: pointer; transition: all .15s }
.btn-copy:hover { border-color: var(--border2); color: var(--txt) }
.btn-copy.copied { border-color: rgba(74,222,128,0.4); color: var(--green) }

/* Conv list */
.conv-list { display: flex; flex-direction: column; gap: 0 }
.conv-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border) }
.conv-item:last-child { border-bottom: none }
.conv-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.conv-icon-blue { background: rgba(128,71,225,0.14); color: var(--acc2) }
.conv-icon-purple { background: color-mix(in srgb, var(--acc) 13%, transparent); color: var(--acc) }
.conv-icon-gold { background: color-mix(in srgb, var(--gold) 10%, transparent); color: var(--gold) }
.conv-body { flex: 1; min-width: 0 }
.conv-text { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.conv-time { font-size: 12px; color: var(--txt3); margin-top: 1px }

/* Quick list */
.quick-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border) }
.quick-item:last-child { border-bottom: none }
.quick-label { font-size: 12px; color: var(--txt2) }
.quick-val { font-size: 12px; font-weight: 500 }

/* ── SISTEMA BOTTONI UNIFICATO ─────────────────────────────
   Stessa altezza/font ovunque. Hover FAB-style (come widget.js):
   il gradiente scorre, il testo cambia colore in transizione.
   Niente zoom all'hover; feedback solo su :active. */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 18px;
  background: var(--dx-grad-primary);
  background-size: 500% 100%;
  background-position: 0% 0%;
  background-repeat: no-repeat;
  color: var(--dx-btn-txt); border: none; border-radius: var(--r2);
  font-size: 13px; font-weight: 700; line-height: 1.3; cursor: pointer; font-family: inherit;
  letter-spacing: .02em;
  transition: background-position var(--dx-t-slow) ease, color var(--dx-t-med) ease, opacity var(--dx-t-fast) ease, box-shadow .35s ease, transform .1s ease;
}
.btn-primary:hover { background-position: 100% 0%; color: var(--dx-btn-hover-txt); }
.btn-primary:active { transform: scale(.97) }
.btn-primary.loading { opacity: .6; pointer-events: none }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 17px;
  background: var(--dx-grad-secondary);
  background-size: 500% 100%;
  background-position: 0% 0%;
  background-repeat: no-repeat;
  border: 1px solid var(--dx-btn2-hover-bg); border-radius: var(--r2);
  font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--txt2); cursor: pointer; font-family: inherit;
  letter-spacing: .02em;
  transition: background-position var(--dx-t-slow) ease, color var(--dx-t-med) ease, border-color .5s ease, transform .1s ease;
}
.btn-secondary:hover { background-position: 100% 0%; color: var(--dx-btn2-hover-txt); }
.btn-secondary:active { transform: scale(.97) }

.btn-danger, .btn-del {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 17px;
  background: var(--dx-grad-danger);
  background-size: 500% 100%;
  background-position: 0% 0%;
  border: 1px solid rgba(239,68,68,.55); border-radius: var(--r2);
  font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--dx-red); cursor: pointer; font-family: inherit;
  letter-spacing: .02em;
  transition: background-position var(--dx-t-slow) ease, color var(--dx-t-med) ease, border-color .5s ease, transform .1s ease;
}
.btn-danger:hover, .btn-del:hover { background-position: 100% 0%; color: #fff; border-color: var(--dx-red2); }
.btn-danger:active, .btn-del:active { transform: scale(.97) }


/* Forms */
.field-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px }
.field-group:last-child { margin-bottom: 0 }
.field-label { font-size: 11px; font-weight: 600; color: var(--txt2); letter-spacing: .03em; text-transform: uppercase }
.field-input {
  width: 100%;
  background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r3);
  padding: 9px 12px; font-size: 13px; color: var(--txt); outline: none;
  transition: border-color .15s; font-family: inherit;
}
.field-input:focus { border-color: var(--acc2) }
.field-input option { background: var(--bg3) }
.field-textarea { min-height: 72px; resize: vertical }
.logo-upload {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 12px;
  align-items: center;
  min-height: 92px;
  padding: 12px;
  background: var(--bg3);
  border: 1px dashed var(--border2);
  border-radius: var(--r3);
  cursor: pointer;
}
.logo-upload:hover,
.logo-upload.is-drag {
  border-color: var(--acc);
  background: var(--bg4);
}
.logo-upload-preview {
  width: 64px;
  height: 64px;
  border-radius: var(--r3);
  border: 1px solid var(--border);
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--txt3);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.logo-upload-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo-upload-main { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.logo-upload-title { display: flex; align-items: center; gap: 7px; color: var(--txt); font-size: 13px; font-weight: 800; }
.logo-upload-title svg { width: 16px; height: 16px; color: var(--acc); flex-shrink: 0; }
.logo-upload-text { color: var(--txt2); font-size: 12px; line-height: 1.45; }
.logo-upload-meta { color: var(--txt3); font-size: 11px; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
.logo-upload input[type=file] { display: none; }
@media(max-width:560px) {
  .logo-upload { grid-template-columns: 1fr; }
}

/* ── Logo cropper (modale pan + zoom, cover/contain + sfondo) ── */
.logo-cropper-overlay {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.62); backdrop-filter: blur(3px);
  padding: 16px;
}
.logo-cropper {
  width: 320px; max-width: 100%;
  background: var(--bg2, #1b1830); border: 1px solid var(--bdr, rgba(255,255,255,.12));
  border-radius: 18px; padding: 18px; box-shadow: 0 24px 64px rgba(0,0,0,.5);
  display: flex; flex-direction: column; gap: 12px;
}
.logo-cropper-title { color: var(--txt, #fff); font-size: 15px; font-weight: 800; }
.logo-cropper-hint { color: var(--txt3, #9aa); font-size: 11px; margin-top: -8px; }
.logo-cropper-stage {
  position: relative; width: 280px; height: 280px; margin: 0 auto;
  border-radius: 14px; overflow: hidden; touch-action: none; cursor: grab;
  background: repeating-conic-gradient(#2a2740 0% 25%, #232038 0% 50%) 50% / 20px 20px;
}
.logo-cropper-stage:active { cursor: grabbing; }
.logo-cropper-stage.lc-eyedrop-on { cursor: crosshair; }
.logo-cropper-canvas { display: block; width: 280px; height: 280px; }
.logo-cropper-mask {
  position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.5); pointer-events: none;
  outline: 1px solid rgba(255,255,255,.5); outline-offset: -1px;
}
.logo-cropper-modes { display: flex; gap: 6px; background: var(--bg3, rgba(255,255,255,.06)); border-radius: 11px; padding: 4px; }
.logo-cropper-modes .lc-mode {
  flex: 1; border: none; background: transparent; color: var(--txt2, #ccd);
  font-size: 12px; font-weight: 700; padding: 7px 0; border-radius: 8px; cursor: pointer; transition: background .18s, color .18s;
}
.logo-cropper-modes .lc-mode.active { background: var(--acc, #6c63ff); color: #fff; }
.logo-cropper-zoom { width: 100%; accent-color: var(--acc, #6c63ff); }
.logo-cropper-bg { display: flex; align-items: center; gap: 10px; transition: opacity .18s; }
.logo-cropper-bg.is-disabled { opacity: .4; pointer-events: none; }
.logo-cropper-bg .lc-bg-label { color: var(--txt2, #ccd); font-size: 12px; font-weight: 700; flex: 1; }
.logo-cropper-bg input[type=color] {
  width: 34px; height: 30px; padding: 0; border: 1px solid var(--bdr, rgba(255,255,255,.18));
  border-radius: 8px; background: none; cursor: pointer;
}
.logo-cropper-bg .lc-eyedrop {
  width: 34px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--bdr, rgba(255,255,255,.18)); border-radius: 8px;
  background: var(--bg3, rgba(255,255,255,.06)); color: var(--txt2, #ccd); cursor: pointer; transition: background .18s, color .18s;
}
.logo-cropper-bg .lc-eyedrop svg { width: 17px; height: 17px; }
.logo-cropper-bg .lc-eyedrop.active { background: var(--acc, #6c63ff); color: #fff; border-color: transparent; }
.logo-cropper-actions { display: flex; gap: 10px; margin-top: 2px; }
.logo-cropper-btn { flex: 1; border: none; border-radius: 11px; font-size: 13px; font-weight: 800; padding: 11px 0; cursor: pointer; transition: filter .18s, background .18s; }
.logo-cropper-btn.cancel { background: var(--bg3, rgba(255,255,255,.08)); color: var(--txt2, #ccd); }
.logo-cropper-btn.ok { background: var(--acc, #6c63ff); color: #fff; }
.logo-cropper-btn:hover { filter: brightness(1.08); }
.field-input.is-default-value,
.sug-input.is-default-value {
  color: var(--txt3);
  border-style: dashed;
  background: color-mix(in srgb, var(--bg3) 82%, transparent);
}
.field-input.is-default-value:focus,
.sug-input.is-default-value:focus {
  color: var(--txt);
  border-style: solid;
}
.config-dependent { transition: opacity .5s ease, filter .5s ease; }
.config-dependent.is-disabled { opacity: .42; filter: saturate(.72); }
.config-dependent.is-disabled .sug-list,
.config-dependent.is-disabled .btn-add-sug,
.config-dependent.is-disabled .field-input { pointer-events: none; }
.config-focus-mode .main .card { transition: opacity .3s ease, filter .3s ease, border-color .3s ease, box-shadow .3s ease; }
.config-focus-mode .main .card:not(.config-focus-target) { opacity: .28; filter: saturate(.65); }
.config-focus-mode .main .card.config-focus-target {
  opacity: 1;
  filter: none;
  border-color: color-mix(in srgb, var(--acc) 72%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--acc) 28%, transparent), 0 16px 44px color-mix(in srgb, var(--acc) 16%, transparent);
}
.config-focus-mode.config-focus-exit .main .card {
  transition: opacity 1.5s ease, filter 1.5s ease, border-color 1.5s ease, box-shadow 1.5s ease;
}
.input-wrap { position: relative }
.input-wrap .field-input { padding-right: 44px }
.eye-btn { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--txt3); cursor: pointer; padding: 2px; display: flex }
.eye-btn:hover { color: var(--txt2) }

/* Toggle */
.toggle { position: relative; width: 38px; height: 22px; flex-shrink: 0 }
.toggle input { opacity: 0; width: 0; height: 0 }
.slider { position: absolute; inset: 0; background: var(--bg4); border-radius: 22px; cursor: pointer; transition: background .2s }
.slider:before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform .2s }
.toggle input:checked + .slider { background: var(--acc2) }
.toggle input:checked + .slider:before { transform: translateX(16px) }
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; gap: 12px }
.toggle-row + .toggle-row { border-top: 1px solid var(--border) }
.toggle-label { font-size: 13px; font-weight: 500 }
.toggle-desc { font-size: 11px; color: var(--txt3); margin-top: 2px }

/* Theme toggle */
.theme-btn { display: flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 12px; font-weight: 600; background: none; border: none; color: var(--txt3); cursor: pointer; transition: all .15s; font-family: inherit }
.theme-btn.active { background: color-mix(in srgb, var(--acc) 15%, transparent); color: var(--acc) }

/* Seg control */

/* Colors row */
.colors-row { display: flex; gap: 14px; }
.color-field {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 12px; background: var(--bg2); border: 1.5px solid var(--border2);
  border-radius: var(--r2); transition: border-color .2s ease;
}
.color-field:hover { border-color: var(--acc); }
.color-swatch {
  position: relative; width: 64px; height: 64px; border-radius: 50%;
  overflow: hidden; cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--bg2), 0 0 0 1.5px var(--border2);
  transition: box-shadow .2s ease, transform .15s ease;
}
.color-field:hover .color-swatch { transform: scale(1.04); box-shadow: inset 0 0 0 2px var(--bg2), 0 0 0 1.5px var(--acc); }
.color-swatch input[type=color] {
  position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px);
  padding: 0; margin: 0; border: none; background: none; cursor: pointer;
}
.color-swatch input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.color-swatch input[type=color]::-webkit-color-swatch { border: none; border-radius: 50%; }
.color-swatch input[type=color]::-moz-color-swatch { border: none; border-radius: 50%; }
.color-name { font-size: 12px; font-weight: 600; color: var(--txt2); }
.color-hex { font-size: 11px; font-family: 'DM Mono', ui-monospace, monospace; color: var(--txt3); letter-spacing: .02em; }

/* Suggestions */
.sug-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px }
.sug-row { display: flex; align-items: center; gap: 8px; width: 100% }
.sug-input { flex: 1; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r3); padding: 8px 12px; font-size: 12px; color: var(--txt); outline: none; font-family: inherit; transition: border-color .15s }
.sug-input:focus { border-color: var(--acc2) }
.sug-counter { font-size: 10px; font-family: monospace; color: var(--txt3); width: 38px; text-align: right; flex-shrink: 0 }
.sug-del { background: none; border: none; color: var(--txt3); cursor: pointer; padding: 4px; border-radius: 6px; display: flex; align-items: center; transition: color .15s }
.sug-del:hover { color: var(--red) }
.btn-add-sug { display: flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r3); font-size: 12px; font-weight: 600; color: var(--txt2); cursor: pointer; font-family: inherit; transition: all .15s }
.btn-add-sug:hover { border-color: var(--border2); color: var(--acc) }
/* due card affiancate al 50% quando c'è spazio (Branding + Tema e colori) */
.dx-card-row { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 18px; align-items: stretch; }
.dx-card-row > .card { margin: 0; }

/* ── Riquadri selezionabili (sostituiscono i toggle) — stile allineato all'admin, palette viola ── */
/* griglia 2×2 fissa (anche mobile): mai 3+1, celle stessa larghezza/altezza */
.dx-opt-grid  { display: grid; grid-template-columns: repeat(2,1fr); grid-auto-rows: 1fr; gap: 12px; }
.dx-opt-grid.cols-3 { grid-template-columns: repeat(3,1fr); }
.dx-opt {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 15px 17px; background: var(--bg2);
  border: 1.5px solid var(--border2); border-radius: var(--r2);
  color: var(--txt); cursor: pointer; user-select: none;
  font-family: inherit; text-align: left; width: 100%;
  transition: border-color .2s ease, background-color .2s ease;
}
.dx-opt:hover { border-color: var(--acc); }
.dx-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.dx-opt-ico { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; color: var(--txt3); transition: color .2s ease; }
.dx-opt-ico svg { width: 21px; height: 21px; }
.dx-opt-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dx-opt-title { font-size: 14px; font-weight: 600; color: var(--txt); line-height: 1.3; }
.dx-opt-desc  { font-size: 12px; color: var(--txt3); line-height: 1.45; }
.dx-opt-check {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--border2); display: grid; place-items: center;
  color: #fff; transition: all .2s ease;
}
.dx-opt-check svg { width: 12px; height: 12px; opacity: 0; transform: scale(.6); transition: all .2s ease; }
/* stato attivo — checkbox (:checked) e radio guidato da JS (.active) — solo bordo colorato, nessuna ombra */
.dx-opt:has(input:checked),
.dx-opt.active { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 11%, transparent); }
.dx-opt:has(input:checked) .dx-opt-ico,
.dx-opt.active .dx-opt-ico { color: var(--acc); }
.dx-opt:has(input:checked) .dx-opt-check,
.dx-opt.active .dx-opt-check { background: var(--acc2); border-color: var(--acc2); }
.dx-opt:has(input:checked) .dx-opt-check svg,
.dx-opt.active .dx-opt-check svg { opacity: 1; transform: scale(1); }
/* disabilitato (dipendenze, es. prezzo off) */
.dx-opt:has(input:disabled) { opacity: .4; cursor: not-allowed; }
.dx-opt:has(input:disabled):hover { border-color: var(--border2); }
/* focus da tastiera — solo bordo, niente box-shadow */
.dx-opt:focus-visible,
.dx-opt:focus-within { outline: none; border-color: var(--acc); }
@supports (corner-shape: squircle) { .dx-opt { corner-shape: squircle; } }
/* ── variante GRIGLIA: card verticale (icona sopra, testo sotto, spunta angolo) come admin ── */
.dx-opt-grid .dx-opt {
  flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 10px; padding: 18px 14px; min-height: 98px;
}
.dx-opt-grid .dx-opt-ico { width: auto; height: auto; }
.dx-opt-grid .dx-opt-ico svg { width: 26px; height: 26px; }
/* ecommerce · Formato/Sfondo immagine: icone più grandi e descrittive */
#imgRatioOpts .dx-opt-ico svg,
#imgFitOpts .dx-opt-ico svg,
#imgBgOpts .dx-opt-ico svg { width: 44px; height: 44px; }
.dx-opt-grid .dx-opt-body { flex: 0 0 auto; align-items: center; }
.dx-opt-grid .dx-opt-title { font-size: 14px; }
.dx-opt-grid .dx-opt-check { position: absolute; top: 11px; right: 11px; }
/* dentro la griglia il gap gestisce tutto: niente margin tra celle (rompeva l'allineamento → altezze diverse) */
.dx-opt-grid .dx-opt + .dx-opt { margin-top: 0; }

/* ritmo verticale: i riquadri non devono mai stare attaccati ad altri elementi */
.card-desc + .dx-opt,
.card-title + .dx-opt,
.card-title + .dx-opt-grid { margin-top: 0; }
.dx-opt + .config-dependent,
.dx-opt + .field-group,
.dx-opt-grid + .config-dependent,
.dx-opt-grid + .field-group { margin-top: 16px; }

/* Login btn */
.login-btn { justify-content: center; margin-top: 4px }

/* Save btn */
.save-topbar { padding: 9px 18px }

/* Salva lead allineato a destra nella card */
#clientiLeadSaveBtn { align-self: flex-end }

/* ── SETTINGS LAYOUT ──────────────────────────── */
@property --sett-c1 { syntax: '<color>'; inherits: true; initial-value: #050506; }
@property --sett-c2 { syntax: '<color>'; inherits: true; initial-value: #050506; }
@property --sett-ov-end { syntax: '<color>'; inherits: true; initial-value: rgba(0,0,0,0.5); }

:root { --sett-c1: var(--bg); --sett-c2: var(--bg); --sett-ov-end: rgba(0,0,0,0.5); }
.settings-layout {
  flex: 1; display: flex; overflow: hidden; position: relative;
  background:
    linear-gradient(to right, rgba(0,0,0,0), var(--sett-ov-end)),
    linear-gradient(100deg, var(--bg) 0%, var(--bg) 25%, var(--sett-c1) 52%, var(--sett-c2) 85%, var(--sett-c2) 100%);
  transition:
    --sett-c1 .5s cubic-bezier(.22,1,.36,1),
    --sett-c2 .5s cubic-bezier(.22,1,.36,1),
    --sett-ov-end .5s cubic-bezier(.22,1,.36,1),
    background-color .5s ease,
    color .5s ease,
    border-color .5s ease;
}

.settings-left { flex: 1; overflow-y: auto; scrollbar-gutter: stable; padding: 20px 540px 48px 20px; min-width: 0; transition: padding-right .45s cubic-bezier(.34,1.2,.64,1) }
.settings-layout.ecom-active .settings-left { padding-right: 680px }
@media(max-width:1400px) { .settings-left { padding-right: 520px } }
@media(max-width:1400px) { .settings-layout.ecom-active .settings-left { padding-right: 660px } }

/* Tabs */
.tab-bar { display: flex; gap: 2px; background: var(--bg2); border: 1px solid var(--border); border-radius: 999px; padding: 4px; margin-bottom: 16px; position: relative }
.tab { flex: 1; padding: 7px; font-size: 13px; font-weight: 600; background: none; border: none; color: var(--txt3); cursor: pointer; border-radius: 999px; transition: color .22s ease; letter-spacing: .02em; font-family: inherit; position: relative; z-index: 1 }
.tab.active { color: var(--acc) }
.tab.ecom-tab.active { color: var(--gold) }
.tab-thumb { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: color-mix(in srgb, var(--acc) 12%, transparent); z-index: 0; pointer-events: none; transition: transform .32s cubic-bezier(.4,0,.2,1), width .32s cubic-bezier(.4,0,.2,1), background-color .22s ease }
.tab-thumb.is-ecom { background: color-mix(in srgb, var(--gold) 10%, transparent) }
.tab-panel { display: none; flex-direction: column; gap: 12px }
.tab-panel.active { display: flex }
.tab-panel .card { margin-bottom: 0 }
/* Sotto-tab (es. ecommerce Aspetto/Testi): stesso stile pill, thumb scorrevole condiviso */
.subtabs { margin-bottom: 0 }
.subtab { flex: 1; padding: 7px; font-size: 13px; font-weight: 600; background: none; border: none; color: var(--txt3); cursor: pointer; border-radius: 999px; transition: color .22s ease; letter-spacing: .02em; font-family: inherit; position: relative; z-index: 1 }
.subtab.active { color: var(--acc) }
.subpanel { display: none; flex-direction: column; gap: 12px }
.subpanel.active { display: flex }


/* ── ENTRATA BLOCCHI (client + admin) ──────────────────────
   Blur-up veloce su card e box in ingresso pagina, stagger per
   posizione nel contenitore. Solo transform/opacity/blur one-shot:
   peso ~zero. I grafici partono dopo il fetch dati → atterrano
   naturalmente durante/dopo l'ingresso del box. */
@keyframes dxBlockIn {
  from { opacity: 0; transform: translateY(22px); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
.card, .stat-card, .dx-stat, .dx-subcard, .ticket-list-card,
.dx-table-card, .prv-card {
  animation: dxBlockIn .8s cubic-bezier(.22, 1, .36, 1) both;
}
.card:nth-child(2), .stat-card:nth-child(2), .dx-stat:nth-child(2), .dx-subcard:nth-child(2), .dx-table-card:nth-child(2), .prv-card:nth-child(2) { animation-delay: .09s }
.card:nth-child(3), .stat-card:nth-child(3), .dx-stat:nth-child(3), .dx-subcard:nth-child(3), .dx-table-card:nth-child(3), .prv-card:nth-child(3) { animation-delay: .18s }
.card:nth-child(4), .stat-card:nth-child(4), .dx-stat:nth-child(4), .dx-subcard:nth-child(4), .dx-table-card:nth-child(4), .prv-card:nth-child(4) { animation-delay: .27s }
.card:nth-child(5), .stat-card:nth-child(5), .dx-stat:nth-child(5), .dx-subcard:nth-child(5), .dx-table-card:nth-child(5), .prv-card:nth-child(5) { animation-delay: .36s }
.card:nth-child(6), .stat-card:nth-child(6), .dx-stat:nth-child(6), .dx-subcard:nth-child(6), .dx-table-card:nth-child(6), .prv-card:nth-child(6) { animation-delay: .45s }
.card:nth-child(7), .stat-card:nth-child(7), .dx-stat:nth-child(7), .dx-subcard:nth-child(7), .dx-table-card:nth-child(7), .prv-card:nth-child(7) { animation-delay: .54s }
.card:nth-child(n+8), .stat-card:nth-child(n+8), .dx-stat:nth-child(n+8), .dx-subcard:nth-child(n+8), .dx-table-card:nth-child(n+8), .prv-card:nth-child(n+8) { animation-delay: .63s }
@media (prefers-reduced-motion: reduce) {
  .card, .stat-card, .dx-stat, .dx-subcard, .ticket-list-card, .dx-table-card, .prv-card { animation: none }
}

/* ── ENTRATA RIGHE ELENCHI ─────────────────────────
   Blur-up riga per riga, stagger dalla prima all'ultima. I filtri
   ricostruiscono il tbody via innerHTML, quindi l'animazione riparte
   da sola a ogni render. Righe: ticket/assistenza (client), contatti
   lead (client), clienti e supporto (admin). */
@keyframes dxRowIn {
  from { opacity: 0; transform: translateY(10px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
.ticket-table tbody tr, .contact-table tbody tr, #clientRows > tr, #rows > tr {
  animation: dxRowIn .5s cubic-bezier(.22, 1, .36, 1) both;
}
.ticket-table tbody tr:nth-child(2),  .contact-table tbody tr:nth-child(2),  #clientRows > tr:nth-child(2),  #rows > tr:nth-child(2)  { animation-delay: .05s }
.ticket-table tbody tr:nth-child(3),  .contact-table tbody tr:nth-child(3),  #clientRows > tr:nth-child(3),  #rows > tr:nth-child(3)  { animation-delay: .10s }
.ticket-table tbody tr:nth-child(4),  .contact-table tbody tr:nth-child(4),  #clientRows > tr:nth-child(4),  #rows > tr:nth-child(4)  { animation-delay: .15s }
.ticket-table tbody tr:nth-child(5),  .contact-table tbody tr:nth-child(5),  #clientRows > tr:nth-child(5),  #rows > tr:nth-child(5)  { animation-delay: .20s }
.ticket-table tbody tr:nth-child(6),  .contact-table tbody tr:nth-child(6),  #clientRows > tr:nth-child(6),  #rows > tr:nth-child(6)  { animation-delay: .25s }
.ticket-table tbody tr:nth-child(7),  .contact-table tbody tr:nth-child(7),  #clientRows > tr:nth-child(7),  #rows > tr:nth-child(7)  { animation-delay: .30s }
.ticket-table tbody tr:nth-child(8),  .contact-table tbody tr:nth-child(8),  #clientRows > tr:nth-child(8),  #rows > tr:nth-child(8)  { animation-delay: .35s }
.ticket-table tbody tr:nth-child(9),  .contact-table tbody tr:nth-child(9),  #clientRows > tr:nth-child(9),  #rows > tr:nth-child(9)  { animation-delay: .40s }
.ticket-table tbody tr:nth-child(10), .contact-table tbody tr:nth-child(10), #clientRows > tr:nth-child(10), #rows > tr:nth-child(10) { animation-delay: .45s }
.ticket-table tbody tr:nth-child(11), .contact-table tbody tr:nth-child(11), #clientRows > tr:nth-child(11), #rows > tr:nth-child(11) { animation-delay: .50s }
.ticket-table tbody tr:nth-child(12), .contact-table tbody tr:nth-child(12), #clientRows > tr:nth-child(12), #rows > tr:nth-child(12) { animation-delay: .55s }
.ticket-table tbody tr:nth-child(n+13), .contact-table tbody tr:nth-child(n+13), #clientRows > tr:nth-child(n+13), #rows > tr:nth-child(n+13) { animation-delay: .60s }
@media (prefers-reduced-motion: reduce) {
  .ticket-table tbody tr, .contact-table tbody tr, #clientRows > tr, #rows > tr { animation: none }
}
/* Mentre si digita nella ricerca: niente blur-up riga per riga (ri-render a ogni
   carattere = troppo). Resta attivo su cambio filtri e primo render. */
body.dx-searching .ticket-table tbody tr,
body.dx-searching .contact-table tbody tr,
body.dx-searching #clientRows > tr,
body.dx-searching #rows > tr { animation: none }

/* ── USCITA RIGHE (cambio tab) ─────────────────────
   Su cambio tab la tabella resta ferma: le righe attuali escono in blur salendo
   (stagger prima→ultima), poi il render sostituisce e le nuove entrano (dxRowIn).
   L'out e l'in quasi si sovrappongono → sembra un flusso continuo. */
@keyframes dxRowOut {
  from { opacity: 1; transform: translateY(0);   filter: blur(0); }
  to   { opacity: 0; transform: translateY(-9px); filter: blur(5px); }
}
@keyframes dxBlurIn  { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }
@keyframes dxBlurOut { from { opacity: 1; filter: blur(0); }   to { opacity: 0; filter: blur(6px); } }
body.dx-rows-out .ticket-table tbody tr,
body.dx-rows-out .contact-table tbody tr,
body.dx-rows-out #clientRows > tr,
body.dx-rows-out #rows > tr { animation: dxRowOut .26s cubic-bezier(.4, 0, 1, 1) both }
body.dx-rows-out .ticket-table tbody tr:nth-child(2),  body.dx-rows-out #rows > tr:nth-child(2)  { animation-delay: .03s }
body.dx-rows-out .ticket-table tbody tr:nth-child(3),  body.dx-rows-out #rows > tr:nth-child(3)  { animation-delay: .06s }
body.dx-rows-out .ticket-table tbody tr:nth-child(4),  body.dx-rows-out #rows > tr:nth-child(4)  { animation-delay: .09s }
body.dx-rows-out .ticket-table tbody tr:nth-child(5),  body.dx-rows-out #rows > tr:nth-child(5)  { animation-delay: .12s }
body.dx-rows-out .ticket-table tbody tr:nth-child(6),  body.dx-rows-out #rows > tr:nth-child(6)  { animation-delay: .14s }
body.dx-rows-out .ticket-table tbody tr:nth-child(n+7), body.dx-rows-out #rows > tr:nth-child(n+7) { animation-delay: .16s }
/* riga "Nessun ticket" (client): blur in/out, niente scatto verticale */
.ticket-table tbody tr.ticket-empty-row { animation: dxBlurIn .35s ease both }
body.dx-rows-out .ticket-table tbody tr.ticket-empty-row { animation: dxBlurOut .2s ease both }
@media (prefers-reduced-motion: reduce) {
  body.dx-rows-out .ticket-table tbody tr, body.dx-rows-out #rows > tr,
  body.dx-rows-out .contact-table tbody tr, body.dx-rows-out #clientRows > tr { animation: none }
}

/* ── PAGINAZIONE ELENCHI (dx_ui.js → dxPager) ─────────────── */
.dx-pager {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; margin-top: 14px; flex-wrap: wrap;
}
.dx-pager-btn {
  min-width: 34px; height: 32px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r3);
  color: var(--txt2); font-family: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .15s ease;
}
.dx-pager-btn:hover:not(:disabled):not(.active) { color: var(--acc); border-color: var(--border2); transform: translateY(-1px) }
.dx-pager-btn.active {
  background: color-mix(in srgb, var(--acc) 14%, transparent);
  color: var(--acc); border-color: color-mix(in srgb, var(--acc) 28%, transparent);
  cursor: default;
}
.dx-pager-btn:disabled { opacity: .35; cursor: default }
.dx-pager-dots { color: var(--txt3); font-size: 12px; padding: 0 2px }
@supports (corner-shape: squircle) { .dx-pager-btn { corner-shape: squircle } }

/* ── SQUIRCLE ─────────────────────────────────── */
@supports (corner-shape: squircle) {
  :root { --r: 56px; --r2: 40px; --r3: 32px }


  .sidebar { corner-shape: squircle }
  .nav-item { corner-shape: squircle }
  .user-chip { corner-shape: squircle }
  .logout-btn { border-radius: 24px; corner-shape: squircle }

  .stat-card, .card { corner-shape: squircle }
  .badge, .status-pill { border-radius: 80px; corner-shape: squircle }
  .code-block { corner-shape: squircle }
  .btn-copy, .btn-add-sug { corner-shape: squircle }
  .btn-primary, .btn-secondary, .btn-danger, .btn-del { corner-shape: squircle }
  .logo-cropper-btn { border-radius: 24px; corner-shape: squircle }
  .field-input, .sug-input { corner-shape: squircle }
  .lang-switch { corner-shape: squircle }
  .theme-btn { corner-shape: squircle }
  .conv-icon { border-radius: 32px; corner-shape: squircle }
  .sug-del { border-radius: 24px; corner-shape: squircle }


}

/* Bottoni gradient (salva/aggiorna ecc.): SOLO dove lo squircle non è
   supportato, li chiudiamo a capsule piena. Dove c'è squircle restano
   identici a ora (border-radius --r2 + squircle). */
@supports not (corner-shape: squircle) {
  .btn-primary, .btn-secondary, .btn-danger, .btn-del { border-radius: 999px; }
}

.brand-plan:empty { opacity: 0 }




/* ── RESPONSIVE MOBILE ───────────────────────── */

/* Hamburger button — visibile solo mobile */
.menu-btn {
  display: none; background: none; border: none; color: var(--txt);
  cursor: pointer; padding: 6px; border-radius: var(--r3);
  flex-direction: column; align-items: center; justify-content: center;
  gap: 0; transition: color .15s; flex-shrink: 0;
  position: relative; z-index: 101;
}
.menu-btn:hover { color: var(--txt) }

/* Overlay sidebar mobile: scurisce E blurra tutto ciò che non è sidebar */
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.55); z-index: var(--z-sidebar-overlay);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  opacity: 0; transition: opacity .25s ease;
}
.sidebar-overlay.active { opacity: 1; touch-action: none; overscroll-behavior: contain }
/* In tema chiaro l'overlay sotto la sidebar è bianco, non nero */
body.theme-light .sidebar-overlay { background: rgba(255,255,255,.55) }

/* lock scroll + niente interazione sotto quando la sidebar mobile è aperta (come admin) */
body.sidebar-open { overflow: hidden; }

/* X sopra l'overlay: NON si tocca l'header (resta tutto sotto il blur,
   bottoni compresi, non interagibili). La X è un clone dell'hamburger
   (#menuBtnFloat) che toggleSidebar appende a body nello stesso punto
   visivo (top/left inline): da figlio di body con z-index alto nessuno
   stacking context dell'header può intrappolarla sotto l'overlay, e il
   layout dell'header non cambia di un pixel. */
.menu-btn-float {
  position: fixed; display: flex;
  z-index: var(--z-menu-btn); margin: 0;
}
/* la topbar ha un suo backdrop-filter: in Chrome fa da "backdrop root" e il
   blur dell'overlay non la campiona (resterebbe scura ma NITIDA). Da sidebar
   aperta glielo togliamo, così finisce sfocata sotto l'overlay come il resto. */
body.sidebar-open .topbar { -webkit-backdrop-filter: none; backdrop-filter: none; }
@media(max-width:1300px){
  body.sidebar-open .main,
  body.sidebar-open .content,
  body.sidebar-open .settings-layout,
  body.sidebar-open .settings-left { overflow: hidden !important; touch-action: none; }
}

/* contatore caratteri inline (es. testo pulsante FAB) */
.field-count-wrap { position: relative; }
.field-count-wrap .field-input { padding-right: 56px; }
.field-counter { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 11px; font-family: 'DM Mono', ui-monospace, monospace; color: var(--txt3); pointer-events: none; transition: color .15s; }

@media(max-width:1300px) {
  /* hamburger grande quanto i bottoni header (.btn-primary ≈35px):
     7+7 padding + 3 barre da 3px + 2 gap da 6px = 35. La morph in X
     trasla di gap+altezza barra = 9px (override delle regole globali). */
  .menu-btn { display: flex; padding: 7px; height: 35px; box-sizing: border-box }
  .topbar-right { gap: 8px }
  .topbar-left { gap: 9px }
  .page-title-icon { display: block }
  .sidebar-overlay { display: block; pointer-events: none }
  .sidebar-overlay.active { pointer-events: auto }

  .sidebar {
    position: fixed; top: 0; left: 0; height: 100%;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.34,1.1,.64,1);
    z-index: var(--z-sidebar); width: 280px;
    box-shadow: 4px 0 32px rgba(0,0,0,.4);
  }
  .sidebar.open { transform: translateX(0) }

  /* Main occupa tutto */
  .main { width: 100%; }

  /* Topbar */
  .topbar { padding: 0 16px }
  .page-title { font-size: 14px }

  /* Stats 2x2 */
  .stats-grid { grid-template-columns: repeat(2,1fr); gap: 10px }
  .stat-num { font-size: 20px }

  /* Two col → single */
  .two-col { grid-template-columns: 1fr }

  /* Content padding */
  .content { padding: 16px }

  /* Settings layout: no widget fisso, tutto in colonna */
  .settings-layout { flex-direction: column; overflow-y: auto }
  .settings-left { padding: 16px 16px calc(env(safe-area-inset-bottom) + 160px) 16px !important; overflow-y: visible }
  .settings-layout.ecom-active .settings-left { padding: 16px 16px calc(env(safe-area-inset-bottom) + 160px) 16px !important }

  /* Widget in settings: diventa il widget normale in basso a destra */
  /* z-index sopra header sticky (.topbar z-index:90) cosi' il box aperto
     non finisce sotto l'header su mobile. Resta sotto la sidebar off-canvas. */
  #desali-widget-root { z-index: 9999 !important; }
  #desali-box {
    width: calc(100% - 12px) !important;
    height: calc(100dvh - 18px) !important;
    right: 6px !important; left: 6px !important;
    bottom: 8px !important;
    border-radius: 37px !important;
    z-index: 9999 !important;
  }
  #dc-overlay { z-index: 9998 !important; }
  #desali-fab { bottom: 20px !important; right: 20px !important; left: auto !important; z-index: 9999 !important }

  /* Chart */
  .chart-wrap { height: 120px }

  /* Conv list mobile: 5 items, resto nascosto */
  .conv-list { max-height: 280px; overflow: hidden; position: relative; transition: max-height .4s ease }
  .conv-list.expanded { max-height: 1000px }
}

@media(max-width:600px) {
  .stats-grid { grid-template-columns: repeat(2,1fr); gap: 8px }
  .stat-card { padding: 12px 14px }
  .stat-label { font-size: 11px }
  .card { padding: 14px 16px }
  .topbar { height: 48px }
  .topbar-right { gap: 6px }
  .status-pill { display: none }
  .app-theme-btn { width: 30px; height: 26px }
  .lang-btn { padding: 5px 9px }
  .content { padding: 12px; gap: 12px }
  .code-block { font-size: 11px }
}

/* ── BOX CONCENTRICI SENZA SQUIRCLE ───────────────────────────
   Con corner-shape:squircle (Chrome desktop recente) il raggio nominale
   14px "sembra" pieno. Senza squircle (Safari iOS/desktop, browser più
   vecchi) 14px è tirato: i box paiono stretti rispetto agli elementi
   interni. Qui, SOLO nel fallback senza squircle, rendiamo il raggio
   esterno concentrico: raggio contenitore = raggio interno (--r2) +
   padding del box. Due valori coerenti in tutta l'app: interno 10px,
   contenitore 26px. Chi ha lo squircle resta invariato. */
@supports not (corner-shape: squircle) {
  .card {
    --dx-card-pad: 16px;
    padding: var(--dx-card-pad);
    border-radius: calc(var(--r2) + var(--dx-card-pad)); /* 10 + 16 = 26px */
  }
}

/* ── SEGMENTED CONTROL UNIFICATO (pillola scorrevole) ─────────────
   Container .dx-seg + bottoni .dx-seg-btn + .dx-seg-thumb. Il thumb è
   mosso via JS (auth.js): misura il bottone .active/.is-active e vi trasla
   sotto width+height+translate → funziona anche a capo (2×2, diagonale).
   Stesso stile in app e admin (stesso --acc, font piccolo uniforme).
   !important perché in admin le regole di admin.css caricano dopo. */
.dx-seg {
  position: relative !important;
  display: flex !important;
  flex-wrap: nowrap !important; /* riga singola → capsule sempre full */
  align-items: stretch;
  gap: 4px !important;
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  padding: 3px !important;
}
.dx-seg .dx-seg-btn {
  position: relative; z-index: 1;
  flex: 1 1 auto; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px;
  font-size: 12px !important; font-weight: 700; font-family: inherit; line-height: 1;
  white-space: nowrap; color: var(--txt3);
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  cursor: pointer; transition: color .22s ease;
}
.dx-seg .dx-seg-btn:hover { color: var(--txt); }
.dx-seg .dx-seg-btn.active, .dx-seg .dx-seg-btn.is-active { color: var(--acc); }
.dx-seg-thumb {
  position: absolute; top: 0; left: 0; width: 0; height: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--acc) 14%, transparent);
  z-index: 0; pointer-events: none;
  transition: transform .32s cubic-bezier(.4,0,.2,1), width .32s cubic-bezier(.4,0,.2,1), height .32s cubic-bezier(.4,0,.2,1);
}
/* niente squircle qui: a raggio 999 lo squircle diventa un rettangolo
   arrotondato, non la capsule piena voluta. Restiamo su border-radius 999. */

/* Separatore mobile tra i filtri (ricerca/ordinamento) e lo switcher tab.
   Riga sottile dello stesso grigio dei bordi; il doppio spazio nasce dal gap
   del contenitore flex (gap sopra + gap sotto). Nascosto su desktop. */
.dx-filter-sep { display: none; flex: 1 1 100%; width: 100%; height: 0; border: 0; border-top: 1px solid var(--border); margin: 0; }
@media(max-width:760px){ .dx-filter-sep { display: block; } }

/* Riga pillola filtri */
.dx-seg-row { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
.dx-seg-row > .dx-seg { flex: 1 1 auto; }

/* Hamburger icon animazione */
.menu-btn .bar { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s ease, opacity .2s ease, margin .25s ease }
.menu-btn .bar + .bar { margin-top: 4px }
.menu-btn.open .bar:nth-child(1) { transform: translateY(6px) rotate(45deg) }
.menu-btn.open .bar:nth-child(2) { opacity: 0; transform: scaleX(0) }
.menu-btn.open .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg) }
/* Mobile: hamburger grande quanto i bottoni header (.btn-primary ≈35px):
   7+7 padding + 3 barre da 3px + 2 gap da 6px = 35. La morph trasla di
   gap+altezza barra = 9px. (Qui DOPO le regole globali per vincere.) */
@media(max-width:1300px) {
  .menu-btn .bar { width: 27px; height: 3px }
  .menu-btn .bar + .bar { margin-top: 6px }
  .menu-btn.open .bar:nth-child(1) { transform: translateY(9px) rotate(45deg) }
  .menu-btn.open .bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg) }
}

/* ── FOOTER ──────────────────────────────────── */
.app-footer {
  padding: 20px 24px calc(32px + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  font-family: 'DM Sans', sans-serif;
  letter-spacing: .02em;
  flex-shrink: 0;
}
.app-footer a { color: rgba(255,255,255,0.35); text-decoration: none }
.app-footer a:hover { color: rgba(255,255,255,0.6) }

/* Content: più padding bottom */
.content { padding-bottom: 8px }

/* ── GLOBAL SHELL / SIDEBAR HARDENING ───────────────────── */
html, body { min-height: 100%; }
body.app-page { display: flex; align-items: stretch; min-height: 100vh; height: 100vh; overflow: hidden; }
#sidebarMount, #sidebar-container {
  flex: 0 0 300px;
  width: 300px;
  min-width: 300px;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  display: flex;
  align-self: stretch;
  position: relative;
  z-index: 100;
}
#sidebarMount .sidebar, #sidebar-container .sidebar, body.app-page > .sidebar {
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  flex-shrink: 0;
  align-self: stretch;
}
#sidebarMount .sidebar, #sidebar-container .sidebar { width: 300px; }
@media(max-width:1300px) {
  #sidebarMount, #sidebar-container { width: 0; min-width: 0; flex-basis: 0; }
  #sidebarMount .sidebar, #sidebar-container .sidebar { width: 260px; }
}

/* ── INTERACTIVE DASHBOARD ITEMS ─────────────────────────── */

.theme-logo { transition: opacity .18s ease; }
.login-page .login-controls { position: fixed; top: 22px; right: 22px; z-index: 20; justify-content: flex-end; background: rgba(10,10,12,.72); border: 1px solid var(--border); border-radius: 999px; padding: 6px; backdrop-filter: blur(16px); box-shadow: none; }
body.theme-light.login-page .login-controls { background: rgba(255,255,255,.76); }
@media(max-width:600px){ .login-page .login-controls { top: 14px; right: 14px; } }

/* ── THEME TRANSITIONS ───────────────────────────────────── */
:root { --theme-transition-duration: .45s; --theme-transition-ease: cubic-bezier(.22,1,.36,1); }
html.theme-changing,
html.theme-changing body,
html.theme-changing :where(*):not(canvas),
html.theme-changing :where(*):not(canvas)::before,
html.theme-changing :where(*):not(canvas)::after,
body.theme-changing,
body.theme-changing :where(*):not(canvas),
body.theme-changing :where(*):not(canvas)::before,
body.theme-changing :where(*):not(canvas)::after {
  transition-property: background, background-color, border-color, color, box-shadow, opacity, filter, fill, stroke, text-shadow, outline-color, text-decoration-color, column-rule-color, caret-color, backdrop-filter, -webkit-backdrop-filter !important;
  transition-duration: var(--theme-transition-duration) !important;
  transition-timing-function: var(--theme-transition-ease) !important;
  transition-delay: 0s !important;
}
html.theme-changing svg,
html.theme-changing svg *,
body.theme-changing svg,
body.theme-changing svg * {
  transition-property: fill, stroke, color, opacity, filter !important;
  transition-duration: var(--theme-transition-duration) !important;
  transition-timing-function: var(--theme-transition-ease) !important;
  transition-delay: 0s !important;
}
html.theme-changing canvas,
body.theme-changing canvas {
  transition: opacity var(--theme-transition-duration) var(--theme-transition-ease) !important;
}
@media (prefers-reduced-motion: reduce) {
  html.theme-changing,
  html.theme-changing body,
  html.theme-changing :where(*):not(canvas),
  html.theme-changing :where(*):not(canvas)::before,
  html.theme-changing :where(*):not(canvas)::after,
  html.theme-changing svg,
  html.theme-changing svg *,
  html.theme-changing canvas,
  body.theme-changing,
  body.theme-changing :where(*):not(canvas),
  body.theme-changing :where(*):not(canvas)::before,
  body.theme-changing :where(*):not(canvas)::after,
  body.theme-changing svg,
  body.theme-changing svg *,
  body.theme-changing canvas {
    transition-duration: .01ms !important;
  }
}

/* ── HEADER SIDEBAR REDESIGN ─────────────────────────────── */
.topbar {
  height: 78px;
  padding: 0 30px;
  align-items: center;
}
.page-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}
.topbar-actions {
  gap: 10px;
}
.topbar-actions .save-topbar {
  padding: 9px 18px !important;
  border-radius: var(--r2);
  font-size: 13px !important;
  font-weight: 700;
  gap: 7px;
}
.topbar-actions .save-topbar svg {
  width: 16px;
  height: 16px;
}
.sidebar-controls {
  min-height: 78px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(6,6,8,0.42);
}
body.theme-light .sidebar-controls {
  background: rgba(255,255,255,0.48);
}
.sidebar-controls-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.sidebar-controls .lang-switch {
  flex-shrink: 0;
}
.sidebar-controls .app-theme-btn {
  flex-shrink: 0;
}
.sidebar-controls .status-pill {
  display: flex !important;
  flex-shrink: 0;
  padding: 6px 10px;
  font-size: 11px;
  height: 30px;
  box-sizing: border-box;
}
/* ── SWITCHER LINGUA + TEMA · pill monocrome stile login (senza vetro) ──
   Il raggio del bottone attivo è concentrico a quello del contenitore:
   raggio interno = raggio esterno − padding − bordo. Con squircle il
   raggio nominale cresce ma la relazione resta la stessa. */
.sidebar-controls .dx-ctrl-pill {
  --dx-pill-r: 20px; --dx-pill-pad: 3px;
  display: flex; align-items: center; flex-shrink: 0;
  height: 30px; padding: var(--dx-pill-pad); box-sizing: border-box;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--dx-pill-r);
}
.dx-ctrl-pill .lang-switch { background: transparent; border: none; border-radius: 0; overflow: visible; }
.dx-ctrl-pill .lang-btn {
  border-radius: calc(var(--dx-pill-r) - var(--dx-pill-pad) - 1px);
  padding: 4px 10px; color: var(--txt3);
  transition: background-color .35s ease, color .35s ease;
}
.dx-ctrl-pill .lang-btn.active { background: var(--txt); color: var(--bg) }
.sidebar-controls .app-theme-btn {
  width: 34px; height: 30px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 20px;
  background: var(--bg3); color: var(--txt2);
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.sidebar-controls .app-theme-btn:hover { color: var(--txt); border-color: var(--border2); background: var(--bg4) }
@supports (corner-shape: squircle) {
  .sidebar-controls .dx-ctrl-pill { --dx-pill-r: 80px; corner-shape: squircle }
  .dx-ctrl-pill .lang-btn, .sidebar-controls .app-theme-btn { corner-shape: squircle }
  .sidebar-controls .app-theme-btn { border-radius: 80px }
}
body.plan-starter .nav-item[data-page="ecommerce"],
body.plan-starter .ecom-tab,
body.plan-starter #tab-ecommerce {
  display: none !important;
}
.page-section-head > div > .card-title:first-child,
.kb-heading .kb-title {
  display: none;
}
.page-section-head .card-desc,
.kb-subtitle {
  margin-top: 0;
}
@media(max-width:1300px) {
  .topbar {
    height: 68px;
    padding: 0 18px;
  }
  .page-title {
    font-size: 22px;
  }
  .topbar-actions .save-topbar {
    height: 35px !important;         /* = altezza hamburger */
    min-height: 35px !important;
    box-sizing: border-box;
    padding: 0 18px !important;      /* y gestito da height+flex-center, x largo */
    font-size: 13px !important;
  }
  .sidebar-controls {
    min-height: 68px;
    padding: 0 14px;
  }
  .sidebar-bottom {
    margin-top: auto;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}
@media(max-width:600px) {
  .topbar {
    height: 60px;
    padding: 0 14px;
  }
  .page-title {
    font-size: 19px;
  }
  .topbar-actions {
    gap: 6px;
  }
  .topbar-actions .save-topbar {
    height: 35px !important;         /* = altezza hamburger */
    min-height: 35px !important;
    box-sizing: border-box;
    padding: 0 15px !important;
    font-size: 12px !important;
  }
  .sidebar-controls {
    min-height: 60px;
  }
}
/* Bottone azione header (Salva/Aggiorna/Apri ticket): dove lo squircle NON
   è supportato lo chiudiamo a capsule piena. Batte .topbar-actions .save-topbar
   (riga 1122, border-radius:--r2) per pari specificità + ordine sorgente.
   Vale desktop e mobile. Dove c'è squircle resta --r2 + squircle. */
@supports not (corner-shape: squircle) {
  .topbar-actions .save-topbar { border-radius: 999px; }
}
/* ── END HEADER SIDEBAR REDESIGN ─────────────────────────── */

/* ── SIDEBAR REFINEMENT ─────────────────────────────────── */
.sidebar-brand {
  padding: 22px 16px 16px;
  gap: 10px;
}
.sidebar-brand .brand-logo {
  width: 82%;
}
.sidebar-brand .sidebar-controls {
  width: 100%;
  min-height: 0;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
body.theme-light .sidebar-brand .sidebar-controls {
  background: transparent;
}
.sidebar-brand .sidebar-controls-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.theme-logo {
  opacity: 1;
  transition: opacity .26s ease, filter .45s cubic-bezier(.22,1,.36,1);
}
.theme-logo.theme-logo-fading {
  opacity: 0;
}
@media(max-width:1300px) {
  /* Layer sidebar mobile: SOLO token della scala globale (:root).
     L'header e tutto il resto della pagina restano sotto l'overlay
     scuro+blur; sopra l'overlay vivono solo sidebar, X flottante
     (#menuBtnFloat) e widget cliente. Niente z-index max-int. */
  .sidebar-overlay {
    z-index: var(--z-sidebar-overlay) !important;
  }
  #sidebarMount,
  #sidebar-container {
    z-index: var(--z-sidebar) !important;
  }
  #sidebarMount .sidebar,
  #sidebar-container .sidebar,
  body.app-page > .sidebar,
  .sidebar {
    z-index: var(--z-sidebar) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
  }
  .sidebar-top,
  .nav {
    min-height: 0 !important;
  }
  .sidebar-bottom {
    margin-top: auto !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    flex-shrink: 0 !important;
  }
  body.sidebar-open #desali-fab {
    opacity: 0 !important;
    pointer-events: none !important;
  }
}
@media(max-width:600px) {
  .sidebar-brand {
    padding-top: 18px;
  }
  .sidebar-brand .brand-logo {
    width: 78%;
  }
  .sidebar-brand .sidebar-controls {
    gap: 8px;
  }
  .sidebar-brand .status-pill {
    display: flex !important;
    padding: 5px 9px;
    font-size: 10.5px;
  }
}
/* ── END SIDEBAR REFINEMENT ─────────────────────────────── */


/* ── LOGO/SIDEBAR TAP HARDENING ───────────────────────────── */
.sidebar-brand .brand-logo {
  display: block;
  width: min(82%, 224px);
  height: auto;
  min-height: 64px;
  aspect-ratio: 1095.2 / 325.1;
  object-fit: contain;
  flex: 0 0 auto;
}
body.sidebar-temporarily-blocked #menuBtn {
  pointer-events: none;
}
@media(max-width:600px) {
  .sidebar-brand .brand-logo {
    width: min(78%, 210px);
    min-height: 58px;
  }
}
/* ── END LOGO/SIDEBAR TAP HARDENING ───────────────────────── */

/* MOBILE STICKY APP HEADER */
@media(max-width:1300px){
  body.app-page{
    height:100dvh;
    min-height:100dvh;
    overflow:hidden;
  }
  body.app-page .main{
    height:100dvh;
    max-height:100dvh;
    min-height:0;
    overflow:hidden;
  }
  body.app-page .topbar{
    position:sticky;
    top:0;
    z-index:90;
    flex-shrink:0;
  }
  body.app-page .content{
    min-height:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
}


/* TICKET MOBILE FIXED HEADER */
@media(max-width:1300px){
  body[data-page="ticket"],
  body[data-page="assistenza"]{
    --ticket-mobile-header-h:68px;
  }
  body[data-page="ticket"] #headerMount,
  body[data-page="assistenza"] #headerMount{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1800;
  }
  body[data-page="ticket"] .main,
  body[data-page="assistenza"] .main{
    padding-top:var(--ticket-mobile-header-h);
  }
  body[data-page="ticket"] .topbar,
  body[data-page="assistenza"] .topbar{
    height:var(--ticket-mobile-header-h);
  }
}
@media(max-width:600px){
  body[data-page="ticket"],
  body[data-page="assistenza"]{
    --ticket-mobile-header-h:60px;
  }
}

/* ════════════════════════════════════════════════════════════
   SIDEBAR COMPRESSA — app cliente (speculare all'admin)
   Toggle: body.dx-sidebar-collapsed. Solo desktop (>1300px): su
   mobile la sidebar è off-canvas e non va ristretta.
   ════════════════════════════════════════════════════════════ */
@media(min-width:1301px){
  /* il contenitore flex della sidebar è #sidebarMount: si anima il suo flex-basis */
  body.app-page:not(.dx-admin) #sidebarMount {
    width: auto; min-width: 0;
    transition: flex-basis .4s cubic-bezier(.4,0,.2,1);
  }
  body.app-page:not(.dx-admin) #sidebarMount .sidebar { width: 100%; min-width: 0; }
  body.app-page:not(.dx-admin).dx-sidebar-collapsed #sidebarMount { flex-basis: 74px; }

  body.app-page:not(.dx-admin) .sidebar-brand { transition: padding .4s cubic-bezier(.4,0,.2,1), gap .4s cubic-bezier(.4,0,.2,1); }
  body.app-page:not(.dx-admin) .brand-logo,
  body.app-page:not(.dx-admin) .brand-icon { transition: width .3s cubic-bezier(.4,0,.2,1), height .3s cubic-bezier(.4,0,.2,1), opacity .25s ease; }
  body.app-page:not(.dx-admin) .nav-item span:not(.nav-badge),
  body.app-page:not(.dx-admin) .user-info { max-width: 220px; transition: opacity .2s ease, max-width .35s cubic-bezier(.4,0,.2,1); }
  /* icona-only nascosta finché non si comprime */
  body.app-page:not(.dx-admin) .brand-icon { width: 0; height: auto; opacity: 0; }

  /* toggle: stesso look dell'admin; nel client sta nei controlli, prima della lingua */
  body.app-page:not(.dx-admin) .dx-side-toggle {
    flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center;
    border-radius: 9px; background: var(--bg3); border: 1px solid var(--border);
    color: var(--txt2); cursor: pointer;
    transition: transform .4s cubic-bezier(.4,0,.2,1), color .2s ease, border-color .2s ease, background-color .2s ease;
  }
  body.app-page:not(.dx-admin) .dx-side-toggle:hover { color: var(--acc); border-color: var(--acc); }

  /* tooltip flottante (segue il cursore) col nome pagina, in sidebar compressa */
  body.app-page:not(.dx-admin) .dx-tip {
    position: fixed; z-index: 300; transform: translateY(-50%);
    background: var(--bg4); border: 1px solid var(--border); color: var(--txt);
    padding: 7px 12px; border-radius: 9px; font-size: 13px; font-weight: 600;
    white-space: nowrap; pointer-events: none; box-shadow: 0 10px 28px rgba(0,0,0,.35);
    opacity: 0; transition: opacity .15s ease;
  }
  body.app-page:not(.dx-admin) .dx-tip.show { opacity: 1; }

  /* ── stato compresso ── */
  body.app-page:not(.dx-admin).dx-sidebar-collapsed .sidebar-brand { padding: 18px 12px 18px; gap: 0; }
  body.app-page:not(.dx-admin).dx-sidebar-collapsed .brand-logo { width: 0; height: 0; min-height: 0; opacity: 0; }
  body.app-page:not(.dx-admin).dx-sidebar-collapsed .brand-icon { width: 40px; opacity: 1; }
  body.app-page:not(.dx-admin).dx-sidebar-collapsed .brand-plan { opacity: 0; height: 0; overflow: hidden; }
  /* controlli: lingua, tema e stato spariscono; resta solo il toggle, centrato e ruotato */
  body.app-page:not(.dx-admin).dx-sidebar-collapsed .sidebar-controls { justify-content: center; margin-top: 18px; }
  body.app-page:not(.dx-admin).dx-sidebar-collapsed .sidebar-controls-left { justify-content: center; gap: 0; }
  body.app-page:not(.dx-admin).dx-sidebar-collapsed .lang-switch,
  body.app-page:not(.dx-admin).dx-sidebar-collapsed .app-theme-btn,
  body.app-page:not(.dx-admin).dx-sidebar-collapsed .dx-ctrl-pill,
  body.app-page:not(.dx-admin).dx-sidebar-collapsed .status-pill { display: none !important; }
  body.app-page:not(.dx-admin).dx-sidebar-collapsed .dx-side-toggle { transform: rotate(180deg); }
  /* nav: solo icone, centrate */
  body.app-page:not(.dx-admin).dx-sidebar-collapsed .nav { padding-left: 8px; padding-right: 8px; }
  body.app-page:not(.dx-admin).dx-sidebar-collapsed .nav-item { justify-content: center; gap: 0; }
  body.app-page:not(.dx-admin).dx-sidebar-collapsed .nav-item span:not(.nav-badge) { max-width: 0; opacity: 0; }
  body.app-page:not(.dx-admin).dx-sidebar-collapsed .nav-section-title { height: 0; padding: 0; opacity: 0; overflow: hidden; }
  /* chip utente: solo avatar */
  body.app-page:not(.dx-admin).dx-sidebar-collapsed .user-chip { justify-content: center; gap: 0; }
  body.app-page:not(.dx-admin).dx-sidebar-collapsed .user-info,
  body.app-page:not(.dx-admin).dx-sidebar-collapsed .user-chip .logout-btn { max-width: 0; opacity: 0; overflow: hidden; padding: 0; }

  @supports (corner-shape: squircle) {
    body.app-page:not(.dx-admin) .dx-side-toggle,
    body.app-page:not(.dx-admin) .dx-tip { corner-shape: squircle; }
  }
}
/* su mobile (≤1300) la compressione non esiste: niente freccia né icona-only */
@media(max-width:1300px){
  body.app-page:not(.dx-admin) .dx-side-toggle,
  body.app-page:not(.dx-admin) .brand-icon { display: none !important; }
}

/* iOS auto-zoom fix: su device touch il browser zooma sul campo al focus
   se il font-size dell'input è < 16px. Forziamo 16px (soglia minima) su
   tutti i campi di testo. pointer:coarse = solo touch, desktop intatto. */
@media (pointer: coarse) {
  input, textarea, select,
  .field-input, .sug-input, .dx-search2 input {
    font-size: 16px !important;
  }
}

/* ── Rondellina "Impostazioni" accanto al titolo pagina ──────────
   Iniettata da app_shell (GEAR_TABS): deep-link alla tab di
   Impostazioni relativa alla pagina corrente. */
.dx-title-gear { display: inline-flex; align-items: center; margin-left: 9px; color: var(--txt3); line-height: 1; transition: color var(--dx-t-fast) ease; }
.dx-title-gear svg { width: 15px; height: 15px; display: block; transition: transform .4s cubic-bezier(.22,1,.36,1); }
.dx-title-gear:hover { color: var(--acc); }
.dx-title-gear:hover svg { transform: rotate(60deg); }
@media (prefers-reduced-motion: reduce) { .dx-title-gear svg, .dx-title-gear:hover svg { transition: none; transform: none; } }

/* ── MODALE APP (dialog piccolo condiviso lato app) ─────────────────
   Stesse classi del modale admin (.dx-modal-back/.dx-modal in admin.css):
   nelle pagine admin admin.css carica dopo e vince, qui vale questa
   versione compatta. Usato da impostazioni (modifica account). */
.dx-modal-back { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: 22px; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility .3s ease; }
.dx-modal-back.show { opacity: 1; visibility: visible; pointer-events: auto; }
.dx-modal { width: min(440px,100%); max-height: calc(100dvh - 44px); display: flex; flex-direction: column; background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--r); box-shadow: 0 34px 90px rgba(0,0,0,.5); overflow: hidden; transform: translateY(12px) scale(.985); opacity: 0; transition: transform .46s cubic-bezier(.16,1,.3,1), opacity .32s ease; }
.dx-modal-back.show .dx-modal { transform: none; opacity: 1; }
.dx-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px 12px; border-bottom: 1px solid var(--border); }
.dx-modal-title { font-size: 18px; font-weight: 800; color: var(--txt); }
.dx-modal-body { flex: 1; overflow: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.dx-modal-foot { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }
.dx-x { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--border); background: var(--bg3); color: var(--txt2); cursor: pointer; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.dx-x:hover { color: var(--txt); border-color: var(--border2); }
@supports (corner-shape: squircle) { .dx-modal { corner-shape: squircle; } }
@media (prefers-reduced-motion: reduce) { .dx-modal, .dx-modal-back { transition: none } }