/* — BBR patch dashboard.html — solo sovrascritture */

body {
  font-family: var(--bbr-font-sans);
  background: var(--bbr-ink-7);
  color: var(--bbr-ink-1);
}

#app-screen {
  background: var(--bbr-ink-7);
}

#login-screen {
  background: var(--bbr-ink-7);
}

.login-card {
  border-radius: var(--bbr-r-xl);
  box-shadow: var(--bbr-shadow-md);
  border: 1.5px solid var(--bbr-ink-5);
}

.login-brand {
  letter-spacing: -0.03em;
}

.login-btn {
  border-radius: var(--bbr-r-md);
  letter-spacing: -0.01em;
}

.form-group input {
  border-radius: var(--bbr-r-md);
  background: var(--bbr-ink-7);
  border: 1.5px solid var(--bbr-ink-5);
  font-family: var(--bbr-font-sans);
}

.form-group input:focus {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.login-subtitle {
  color: var(--bbr-ink-3);
}

.login-text-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-family: var(--bbr-font-sans);
  color: var(--bbr-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.login-text-link:hover {
  color: var(--bbr-ink-1);
}

#login-forgot-panel {
  border-top-color: var(--bbr-ink-5);
}

.bbr-screen-muted {
  background: var(--bbr-ink-7);
}

.bbr-force-password-card {
  border-radius: var(--bbr-r-xl);
  box-shadow: var(--bbr-shadow-lg);
  border: 1.5px solid var(--bbr-ink-5);
}

/* Pulsanti: coerenti con landing / token */
#app-screen .btn,
#login-screen .btn,
#suspended-screen .btn,
#bbr-force-password-overlay .btn {
  font-family: var(--bbr-font-sans);
  border-radius: var(--bbr-r-md);
  border-color: var(--bbr-ink-5);
  background: var(--bbr-ink-6);
  color: var(--bbr-ink-1);
}

#app-screen .btn:hover,
#login-screen .btn:hover,
#suspended-screen .btn:hover,
#bbr-force-password-overlay .btn:hover {
  background: var(--bbr-ink-5);
  border-color: var(--bbr-ink-4);
}

#app-screen .btn-primary,
#login-screen .login-btn,
#suspended-screen .login-btn,
#bbr-force-password-overlay .login-btn {
  background: var(--bbr-ink-0);
  border-color: var(--bbr-ink-0);
  color: #fff;
}

#app-screen .btn-primary:hover,
#login-screen .login-btn:hover,
#suspended-screen .login-btn:hover,
#bbr-force-password-overlay .login-btn:hover {
  background: var(--bbr-ink-2);
  border-color: var(--bbr-ink-2);
  color: #fff;
}

.app-header {
  border-bottom: 1px solid var(--bbr-ink-5);
}

.app-brand {
  letter-spacing: -0.03em;
}

/* Tab bar: più compatta */
.app-tabs .tab-item,
.tab-item {
  padding: 10px 14px;
  font-size: 13px;
  letter-spacing: -0.01em;
}

.tab-item {
  color: var(--bbr-ink-4);
}

.tab-item:hover {
  color: var(--bbr-ink-2);
}

.tab-item.active {
  color: var(--bbr-ink-0);
  font-weight: 700;
  border-bottom-width: 2px;
  border-bottom-color: var(--bbr-ink-0);
}

.app-tabs {
  border-bottom-color: var(--bbr-ink-5);
}

/* Badge stato */
.status-active {
  background: oklch(88% 0.14 155 / 0.12);
  color: oklch(38% 0.14 155);
  border-radius: var(--bbr-r-sm);
}

.status-inactive {
  background: var(--bbr-ink-6);
  color: var(--bbr-ink-3);
  border-radius: var(--bbr-r-sm);
}

.status-called {
  background: var(--bbr-accent-dim);
  color: var(--bbr-accent);
  border-radius: var(--bbr-r-sm);
}

/* Banner dashboard (da giallo a neutro) */
.dashboard-construction-banner {
  background: var(--bbr-ink-6);
  border-color: var(--bbr-ink-5);
  border-radius: var(--bbr-r-lg);
}

.construction-tag {
  background: var(--bbr-ink-7);
  color: var(--bbr-ink-3);
  border-color: var(--bbr-ink-5);
}

.construction-title {
  color: var(--bbr-ink-0);
}

.construction-desc {
  color: var(--bbr-ink-3);
}

.construction-icon {
  border-color: var(--bbr-ink-5);
  color: var(--bbr-ink-2);
  background: #fff;
}

/* Pannello agente flottante */
.agent-float-panel {
  border-radius: var(--bbr-r-lg);
  box-shadow: var(--bbr-shadow-lg);
  border-color: var(--bbr-ink-5);
}

/* FAQ / blocchi */
.faq-block {
  border-radius: var(--bbr-r-lg);
}

.faq-input,
.faq-textarea {
  border-radius: var(--bbr-r-md);
  border: 1.5px solid var(--bbr-ink-5);
  font-family: var(--bbr-font-sans);
}

.faq-input:focus,
.faq-textarea:focus {
  outline: none;
  border-color: var(--bbr-ink-1);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

/* -------------------------------------------------------------------------
   BBR redesign integration — Bosco, light/dark, sidebar verticale.
   Layer finale: preserva HTML/id/funzioni esistenti e ridisegna la shell reale.
   ------------------------------------------------------------------------- */

:root {
  color-scheme: light;
  --bbr-r-sm: var(--radius-sm);
  --bbr-r-md: var(--radius-md);
  --bbr-r-lg: var(--radius-lg);
  --bbr-r-xl: var(--radius-xl);
  --bbr-shadow-xs: var(--shadow-sm);
  --bbr-shadow-sm: var(--shadow-sm);
  --bbr-shadow-md: var(--shadow-md);
  --bbr-shadow-lg: var(--shadow-lg);
}

[data-theme="dark"] {
  color-scheme: dark;
}

html,
body {
  font-family: var(--bbr-font-sans) !important;
  background:
    radial-gradient(circle at 18% 8%, var(--bbr-accent-soft), transparent 30rem),
    radial-gradient(circle at 86% 16%, var(--bbr-context-soft), transparent 26rem),
    var(--bbr-bg-app) !important;
  color: var(--bbr-fg-primary) !important;
  letter-spacing: var(--tracking-base);
}

body {
  min-height: 100vh;
}

button,
input,
select,
textarea {
  font-family: var(--bbr-font-sans) !important;
}

input,
select,
textarea {
  background: var(--bbr-bg-surface) !important;
  color: var(--bbr-fg-primary) !important;
  border-color: var(--bbr-bd-default) !important;
  border-radius: var(--radius-md) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--bbr-bd-focus) !important;
  box-shadow: var(--shadow-focus) !important;
  outline: none !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--bbr-fg-soft) !important;
}

/* Login */
#login-screen {
  min-height: 100vh;
  padding: var(--space-600);
  background:
    radial-gradient(circle at 30% 20%, var(--bbr-accent-soft), transparent 24rem),
    radial-gradient(circle at 72% 72%, var(--bbr-context-soft), transparent 24rem),
    var(--bbr-bg-app) !important;
}

.login-card,
.bbr-force-password-card {
  width: min(100%, 440px);
  padding: var(--space-1200) var(--space-1000) var(--space-1000) !important;
  background: color-mix(in oklch, var(--bbr-bg-surface) 96%, transparent) !important;
  border: 1px solid var(--bbr-bd-default) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-lg) !important;
}

.login-brand {
  font-family: var(--bbr-font-display);
  font-size: var(--text-3xl) !important;
  font-weight: var(--fw-regular) !important;
  line-height: var(--lh-tight);
  color: var(--bbr-fg-primary) !important;
  letter-spacing: var(--tracking-tight) !important;
}

.login-subtitle,
.form-group label,
.section-desc,
.construction-desc {
  color: var(--bbr-fg-muted) !important;
}

.form-group label {
  font-size: var(--text-xs) !important;
  font-weight: var(--fw-medium) !important;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.form-group input {
  min-height: 42px;
  padding: 10px var(--space-300) !important;
}

/* .btn.btn-primary: la ".btn { … !important }" più sotto (stessa specificità, viene dopo) vinceva e
   il bottone primario era CHIARO come un secondario - col rilievo sembrava un outline. */
.login-btn,
.btn-primary,
.btn.btn-primary {
  background: var(--bbr-btn-primary-bg, var(--bbr-accent)) !important;   /* gradiente + filo (opzione C) */
  border-color: var(--bbr-accent) !important;
  color: var(--bbr-fg-on-accent) !important;
  box-shadow: var(--bbr-shadow-btn-primary) !important;   /* rilievo condivisi; senza !important vincerebbe la .btn più sotto */
}

.login-btn:hover,
.btn-primary:hover,
.btn.btn-primary:hover {
  background: var(--bbr-btn-primary-bg-hover, var(--bbr-accent-hover)) !important;
  border-color: var(--bbr-accent-hover) !important;
  color: var(--bbr-fg-on-accent) !important;
}

/* ponytail: 23 bottoni dello shell hanno lo sfondo del marchio inline (background:var(--bbr-accent))
   e nessuna classe .btn-primary; stesso rilievo via attributo, finché non prendono la classe. */
button[style*="background:var(--bbr-accent)"] { background: var(--bbr-btn-primary-bg) !important; box-shadow: var(--bbr-shadow-btn-primary); }

.login-text-link {
  color: var(--bbr-accent) !important;
  text-decoration-thickness: 1px;
}

.bbr-login-theme-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bbr-bd-default);
  border-radius: var(--radius-full);
  background: var(--bbr-bg-elev);
  color: var(--bbr-fg-secondary);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}

.bbr-login-theme-toggle:hover {
  color: var(--bbr-fg-primary);
  border-color: var(--bbr-bd-strong);
}

.login-error {
  background: var(--bbr-red-soft) !important;
  color: var(--bbr-red-fg) !important;
  border: 1px solid color-mix(in oklch, var(--bbr-red) 25%, transparent);
}

/* App shell reale: header + sidebar + contenuti */
#app-screen[style*="display: block"],
#app-screen[style*="display:block"],
#app-screen[style*="display: flex"],
#app-screen[style*="display:flex"] {
  display: grid !important;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: 0 auto 1fr;
  /* Banner e header attraversano anche la colonna della rail (come la barra di Lenzuoli):
     in alto c'è UNA superficie, non due zone di colore affiancate. La rail parte sotto. */
  grid-template-areas:
    "banner banner"
    "header header"
    "sidebar main";
  height: 100vh;
  min-height: 0 !important;
  overflow: hidden;
  background: var(--bbr-bg-app) !important;
}

.app-header {
  grid-area: header;
  min-height: var(--header-h);
  padding: 0 var(--space-600) 0 0 !important; /* a sinistra c'è il marchio (.lz-railtop), largo quanto la rail */
  background: color-mix(in oklch, var(--bbr-bg-app) 88%, transparent) !important;
  border-bottom: 1px solid var(--bbr-bd-default) !important;
  backdrop-filter: blur(16px);
}

.app-brand {
  font-family: var(--bbr-font-display);
  font-size: var(--text-xl) !important;
  font-weight: var(--fw-regular) !important;
  color: var(--bbr-fg-primary) !important;
}

.app-brand::before {
  width: 28px !important;
  height: 28px !important;
  border-radius: var(--radius-sm) !important;
  background: var(--bbr-accent) !important;
  content: "BBR" !important;
  color: var(--bbr-fg-on-accent);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-family: var(--bbr-font-sans);
  font-size: 11px;
  font-weight: var(--fw-semibold);
}

.header-actions {
  gap: var(--space-200) !important;
}

.header-user-chip,
.header-scope-pill {
  background: var(--bbr-bg-sunken) !important;
  color: var(--bbr-fg-secondary) !important;
  border: 1px solid var(--bbr-bd-default);
  white-space: nowrap;
  border-radius: var(--radius-full) !important;
}

.header-user-avatar {
  background: var(--bbr-accent) !important;
  color: var(--bbr-fg-on-accent) !important;
}

/* PREFERENZA ANIMAZIONI (#345) — kill-switch centralizzato.
   html.no-motion viene messo/tolto da bbrApplyMotionPref() (dashboard.html):
   off = sempre; auto = segue prefers-reduced-motion; on = mai.
   Pattern standard: durata .01ms + una sola iterazione (i contatori saltano al
   valore finale, le transizioni sono istantanee, gli animationend scattano).
   Gli indicatori FUNZIONALI (spinner, puntini "sto pensando", cube loader)
   restano animati: sono stato, non decorazione — ri-dichiarati sotto con le
   loro durate reali (revert non va: torna allo user-agent, non all'autore). */
html.no-motion *, html.no-motion *::before, html.no-motion *::after {
  animation-duration: .01ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}
html.no-motion .bbr-spinner { animation-duration: .7s !important; animation-iteration-count: infinite !important; }
html.no-motion .bbr-thinking .dot { animation-duration: 1.2s !important; animation-iteration-count: infinite !important; }
html.no-motion .bbr-cube-loader::before,
html.no-motion .bbr-cube-loader::after { animation-duration: .5s !important; animation-iteration-count: infinite !important; }

/* STEPPER letti (editor camere, Config struttura): campi numerici auto-esplicativi */
.cfg-stp{display:flex;align-items:center;gap:var(--space-050)}
.cfg-stp input{width:30px;text-align:center;padding:var(--space-150) var(--space-050);border:1px solid #d2d2d7;border-radius:7px;font:inherit;-moz-appearance:textfield}
.cfg-stp input::-webkit-outer-spin-button,.cfg-stp input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cfg-stp button{width:20px;height:24px;border:1px solid #d2d2d7;background:#f6f7f9;border-radius:6px;cursor:pointer;font-size:13px;line-height:1;color:#444;padding:0}
.cfg-stp button:hover{background:#ececf0}

/* CONTENIMENTO CARD (#358) — regola riutilizzabile per qualsiasi card della UI.
   Causa tipica di fuoriuscite: gli item di flex/grid hanno min-width:auto, quindi
   un contenuto non spezzabile (email lunga, token senza spazi) allarga la colonna
   oltre il minmax() e sborda dalla card. min-width:0 su card e discendenti toglie
   quel pavimento; overflow-wrap:anywhere (ereditato) spezza i testi lunghi.
   Gli elementi a larghezza fissa (avatar con flex-shrink:0) non sono toccati. */
.bbr-card { min-width: 0; overflow-wrap: anywhere; }
.bbr-card * { min-width: 0; }

/* SISTEMA BOTTONI — INVARIANTE DI MANUTENZIONE.
   Gli !important qui sotto sono deliberati: servono a vincere sui bottoni legacy
   con style= inline sparsi in dashboard.html (7+ nel markup statico). Effetto
   collaterale: questa regola batte in cascata QUALSIASI variante .btn-* di colore
   definita altrove senza !important (stessa specificità, il patch carica dopo).
   Regola: ogni nuova variante di colore .btn-* va ridefinita QUI SOTTO col proprio
   !important, come già fatto per .btn-primary (~riga 336) e .btn-danger.
   Nota: .btn-sm/.btn-secondary/.btn-info compaiono nel markup ma non sono definite
   da nessuna parte (no-op storico, non è colpa di questo blocco).
   De-!important completo = prima bonificare gli inline style legacy + review visiva. */
.header-logout-btn,
#bbr-theme-btn,
#btn-notifications,
#btn-app-settings,
.btn {
  min-height: 36px;
  border: 1px solid var(--bbr-bd-default) !important;
  border-radius: var(--radius-md) !important;
  background: var(--bbr-btn-bg, var(--bbr-bg-surface)) !important;   /* gradiente + filo (opzione C) */
  color: var(--bbr-fg-secondary) !important;
  font-weight: var(--fw-medium) !important;
  box-shadow: var(--bbr-shadow-btn);   /* rilievo condivisi: bordo basso più scuro, filo di luce in alto */
}

/* Variante DISTRUTTIVA. Questa regola .btn qui sopra usa !important e, per posizione in
   cascata, annullava la .btn-danger di dashboard.html (stessa specificità, niente
   !important): ogni bottone "Elimina/Delete" risultava identico a un bottone neutro —
   verificato dal vivo su "svuota cestino" e "cancella contatti" (computed uguale ad
   Annulla). .btn-primary non aveva il problema solo perché il patch la ridefinisce a sua
   volta (riga ~336): qui facciamo lo stesso per la danger. */
.btn-danger {
  background: var(--bbr-bg-surface) !important;
  color: #d32f2f !important;
  border-color: #d32f2f !important;
}
.btn-danger:hover {
  background: rgba(211, 47, 47, 0.12) !important;
  color: #d32f2f !important;
  border-color: #d32f2f !important;
}

.header-logout-btn:hover,
#bbr-theme-btn:hover,
#btn-notifications:hover,
#btn-app-settings:hover,
.btn:hover {
  background: var(--bbr-btn-bg-hover, var(--bbr-bg-sunken)) !important;
  color: var(--bbr-fg-primary) !important;
  border-color: var(--bbr-bd-strong) !important;
}

#bbr-voice-btn {
  border-radius: var(--radius-md) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   LE SEI CATEGORIE DI PULSANTE (audit del 4/9/2026, docs/audit-bottoni-2026-09-04.md)
   Su 1094 pulsanti dell'app solo 1 su 5 usava una classe del design system: il resto
   si ridisegnava a mano, 228 varianti visive nel solo dashboard.html. Il ruolo lo dice
   la CLASSE, mai lo style inline — così cambiare il brand resta una riga.

     .btn.btn-primary   principale    una sola per pagina o dialogo (gradiente arancio)
     .btn               secondario    l'azione normale (gradiente chiaro + filo)
     .btn.btn-danger    distruttivo   elimina, revoca, svuota
     .btn.btn-plain     terziario     solo testo, dentro righe e card ("Modifica", "Vedi tutto")
     .btn.btn-icon      icona         quadrato senza testo (chiudi, tre puntini): serve aria-label
     .btn.btn-plain.btn-danger { background:none !important; border-color:transparent !important; color:var(--bbr-red-fg) !important; }
.btn.btn-plain.btn-danger:hover { background:var(--bbr-red-soft) !important; color:var(--bbr-red-fg) !important; }

.btn.btn-chip      chip/filtro   pillola selezionabile, stato acceso con .is-on

   Taglie: .btn-sm (28px, tabelle e barre dense) · base 36px · .btn-lg (44px, CTA a tutta larghezza).
   Le tre varianti nuove valgono anche dentro gli iframe: le stesse regole stanno in lz-theme.css.
   ───────────────────────────────────────────────────────────────────────────── */
.btn.btn-plain {
  background: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--bbr-accent) !important;
  white-space: nowrap;
  padding-left: var(--space-200) !important;
  padding-right: var(--space-200) !important;
}
.btn.btn-plain:hover {
  background: var(--bbr-accent-soft) !important;
  border-color: transparent !important;
  color: var(--bbr-accent-hover) !important;
}

.btn.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 36px;
  width: 36px;
  padding: 0 !important;
  line-height: 1;
}
.btn.btn-icon svg { width: 18px; height: 18px; }
/* Icona di testo (la × di chiusura): 13px la renderebbe un puntino. */
.btn.btn-icon { font-size: 18px !important; }
/* Icona senza cornice: grigia come oggi, ma con un'area cliccabile vera e un hover. */
.btn.btn-icon.btn-plain { color: var(--bbr-fg-muted) !important; }
.btn.btn-icon.btn-plain:hover { background: var(--bbr-bg-sunken) !important; color: var(--bbr-fg-primary) !important; }
/* #796: un pulsante disabilitato deve sembrarlo. Stessa regola di lz-theme.css:83, che il guscio
   non carica. Gli hover restano quelli di sopra: l'opacità basta a dire «non cliccabile». */
.btn:disabled,
.btn[aria-disabled="true"] { cursor: not-allowed !important; opacity: .5 !important; }

.btn.btn-chip {
  min-height: 28px;
  white-space: nowrap;
  border-radius: var(--radius-full) !important;
  padding: 0 var(--space-300) !important;
  font-size: var(--text-sm) !important;
  box-shadow: none !important;
}
.btn.btn-chip.is-on {
  background: var(--bbr-accent-soft) !important;
  border-color: var(--bbr-accent) !important;
  color: var(--bbr-accent-soft-fg) !important;
}

.btn.btn-sm {
  min-height: 28px;
  padding: 0 var(--space-300) !important;
  font-size: var(--text-sm) !important;
}
.btn.btn-sm.btn-icon { width:28px; min-width:28px; padding:0 !important; }
.btn.btn-lg {
  min-height: 44px;
  padding: 0 var(--space-500) !important;
  font-size: var(--text-md) !important;
}

.app-tabs {
  grid-area: sidebar;
  position: sticky !important;
  top: 0;
  z-index: 120;
  height: auto;       /* riempie la riga "sidebar" sotto l'header; min-height:0 perché scrolli dentro */
  min-height: 0;
  align-self: stretch;
  display: flex !important;
  flex-direction: column;
  gap: var(--space-050) !important;
  padding: 72px var(--space-200) var(--space-300) !important;
  overflow-y: auto;
  overflow-x: hidden; /* niente scroll/trascinamento orizzontale della rail quando un gruppo è espanso (mobile riattiva overflow-x:auto più sotto) */
  background: var(--bbr-bg-surface) !important;
  border-right: 1px solid var(--bbr-bd-default) !important;
  border-bottom: none !important;
}

.app-tabs::before {
  content: "Navigazione";
  position: absolute;
  top: var(--space-500);
  left: var(--space-500);
  right: var(--space-500);
  color: var(--bbr-fg-soft);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.tab-item {
  width: 100%;
  min-height: 36px;
  /* NB: niente !important su display, altrimenti sovrascrive l'inline
     display:none usato per nascondere i tab per ruolo (es. "Account portale"
     solo all'admin). Il flex resta attivo quando il tab e' mostrato. */
  display: flex;
  align-items: center;
  gap: var(--space-200);
  padding: var(--space-200) var(--space-300) !important;
  border: 0 !important;
  border-radius: var(--radius-md) !important;
  color: var(--bbr-fg-secondary) !important;
  font-size: var(--text-base) !important;
  font-weight: var(--fw-regular) !important;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.tab-item:hover {
  background: var(--bbr-bg-sunken) !important;
  color: var(--bbr-fg-primary) !important;
}

.tab-item.active {
  background: var(--bbr-bg-sunken) !important;
  color: var(--bbr-fg-primary) !important;
  font-weight: var(--fw-medium) !important;
}

#workspace-context-banner {
  grid-area: banner;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-300);
  flex-wrap: wrap;
  padding: 10px var(--space-600) !important;
  background: var(--bbr-context-soft) !important;
  border-bottom: 1px solid var(--bbr-context-bd) !important;
  color: var(--bbr-context) !important;
}

.workspace-context-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--bbr-context);
  box-shadow: 0 0 0 4px var(--bbr-context-soft);
  flex: 0 0 auto;
}

#workspace-context-name {
  color: var(--bbr-context) !important;
}

#workspace-context-banner button {
  background: var(--bbr-bg-surface) !important;
  border: 1px solid var(--bbr-context-bd) !important;
  color: var(--bbr-context) !important;
  border-radius: var(--radius-md) !important;
}

#app-screen > [id^="content-"] {
  grid-area: main;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  background: var(--bbr-bg-app) !important;
}

/* Eccezione: la vista Agente AI e alta ESATTAMENTE quanto lo spazio disponibile e
   scrolla solo al suo interno (lista conversazioni, messaggi). Con overflow-y:auto
   ereditato dalla regola sopra, un pixel di troppo in un banner faceva comparire una
   seconda scrollbar - quella di pagina - accanto a quella dei messaggi (Issue #616).
   Il selettore ripete #app-screen di proposito: la regola condivisa qui sopra
   vale (1 id + 1 attributo) e batterebbe un #content-agent da solo, lasciando
   overflow-y:auto al suo posto. */
#app-screen > #content-agent {
  overflow: hidden;
}

/* Impedisci auto-placement: assegna posizione fissa a #bbr-force-password-overlay */
#bbr-force-password-overlay {
  grid-row: 1;
  grid-column: 1;
}

#content-knowledge,
#content-database,
#content-clients,
#content-calendar,
#content-analytics,
#content-agent,
#content-strategy,
#content-instagram,
#content-textgen,
#content-portal,
#content-notifications,
#content-comms,
#content-app-settings,
#content-shifts,
#content-my-clients {
  padding: var(--space-400) !important;   /* 16px come il padding di pagina Lenzuoli */
}
/* Staff e Meeting Mode mancavano dall'elenco (titolo attaccato alla rail): questa regola copre
   OGNI pagina che parte da un .dashboard, senza elenco da tenere aggiornato. Regola separata
   di proposito: un browser senza :has() scarta solo questa, non l'elenco sopra. */
#app-screen > [id^="content-"]:has(> .dashboard) { padding: var(--space-400) !important; }
#app-screen > [id^="content-"]:has(> .tool-embed-shell) { padding: 0 !important; }

/* Tutta la larghezza, come le pagine di Lenzuoli: il respiro lo dà il padding della sezione
   (#content-*, 16px). Solo le Impostazioni restano una colonna (--settings-max). */
.dashboard {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
}
#content-app-settings .dashboard,
#content-config .dashboard,
#content-voice-agent .dashboard { max-width: var(--settings-max) !important; }   /* pagine di configurazione: colonna */

/* Titoli di pagina uniformi: Inter (non più il display Space Grotesk) e 24px/700,
   la stessa misura usata da tutti gli altri <h1> dello shell (Documenti, Storage,
   Config…) e da tutti gli strumenti embeddati (Cassa, Statistiche, Bacheca…). Prima
   queste .section-title erano 36px/400, l'unica taglia diversa → titoli incoerenti. */
.section-title.page-title,
.db-header h2 {
  font-family: var(--bbr-font-sans) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: var(--tracking-tight) !important;
  color: var(--bbr-fg-primary) !important;
}

.section-title:not(.page-title) {
  font-size: var(--text-lg) !important;
  font-weight: var(--fw-semibold) !important;
}
.btn.btn-lg.btn-icon { width:44px; min-width:44px; padding:0 !important; }

/* Il titolo di PAGINA prende il nero della barra (--bbr-fg-heading), come negli strumenti
   embeddati (h1 in lz-theme.css). Serve una classe esplicita: .section-title da
   sola marca tre cose diverse - il titolo della schermata, i sottotitoli di
   sezione (Staff: "Personale", "Ruoli e permessi") e i titoli delle card
   della home - e colorarle tutte cancellerebbe la gerarchia. Nessun criterio
   strutturale le distingue: stanno tutte dentro un .section-header. */
.page-title,
.db-header h2 {
  color: var(--bbr-fg-heading) !important;
}

/* Eccezione: dentro una .section-card la .section-title è un titolo di CARD,
   non di pagina (home "Dashboard": "Mia Dashboard Operativa", "Gestione
   Chiamate"…). A 24px superava il titolo di pagina ("Indicatori struttura")
   invertendo la gerarchia; livello card = 18px/600 come da design system. */
.section-card .section-title {
  font-size: 18px !important;
  font-weight: 600 !important;
  margin-bottom: var(--space-150);
}

.section-card,
.dashboard-card,
.user-table-container,
.modal-box,
.faq-block,
.faq-card,
.dashboard-construction-banner,
.scope-summary,
.agent-bubble,
[style*="border:1.5px solid #e5e5e5"],
[style*="border: 1.5px solid #e5e5e5"] {
  background: var(--bbr-bg-surface) !important;
  border-color: var(--bbr-bd-default) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--bbr-fg-primary) !important;
  box-shadow: var(--shadow-sm);
}

.section-card:hover,
.section-card-hover:hover {
  border-color: var(--bbr-bd-strong) !important;
  box-shadow: var(--shadow-md) !important;
}

.user-table,
table {
  color: var(--bbr-fg-primary) !important;
}

.user-table th,
table th {
  background: var(--bbr-bg-sunken) !important;
  color: var(--bbr-fg-muted) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--fw-medium) !important;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-color: var(--bbr-bd-soft) !important;
}

.user-table td,
table td {
  border-color: var(--bbr-bd-soft) !important;
}

.status-active,
.status-called,
.status-inactive {
  white-space: nowrap;
  border-radius: var(--radius-full) !important;
  font-weight: var(--fw-medium) !important;
}

.tool-embed-shell {
  /* The section owns the surface/corners; an embed is not another card. */
  overflow: hidden;
}

.tool-embed-frame {
  border: 0;
  background: #fff;
}

#bbr-notif-dropdown,
#bbr-palette-box,
#agent-rag-panel > div,
#agent-reminders-panel > div,
#agent-snapshots-panel > div {
  background: var(--bbr-bg-elev) !important;
  border-color: var(--bbr-bd-default) !important;
  color: var(--bbr-fg-primary) !important;
}

/* Il pannello vocale resta funzionalmente intatto; qui armonizziamo solo i token statici. */
#agent-panel,
.agent-float-panel {
  background: var(--bbr-bg-elev) !important;
  border-color: var(--bbr-bd-default) !important;
  color: var(--bbr-fg-primary) !important;
}

body:not(:has(#app-screen[style*="display: block"], #app-screen[style*="display:block"], #app-screen[style*="display: flex"], #app-screen[style*="display:flex"])) #bbr-undo-bar {
  display: none !important;
}

@media (max-width: 980px) {
  #app-screen[style*="display: block"],
  #app-screen[style*="display:block"],
  #app-screen[style*="display: flex"],
  #app-screen[style*="display:flex"] {
    display: block !important;
    /* La regola desktop lascia "overflow:hidden" (pensata per il grid, dove ogni pannello
       scrolla nella propria cella). Qui #app-screen non è più una grid, quindi i pannelli
       lunghi più di una schermata restavano tagliati invece che scrollabili. .app-header
       e .app-tabs sono già position:sticky, il che presuppone proprio questo antenato
       scrollabile: mancava solo l'overflow-y. */
    overflow-y: auto;
  }

  .app-header {
    position: sticky;
    top: 0;
    height: var(--header-h);   /* il drawer mobile parte esattamente qui sotto */
    box-sizing: border-box;
    padding: 0 var(--space-400) !important;
  }

  .app-tabs {
    position: sticky !important;
    top: var(--header-h);
    height: auto;
    flex-direction: row;
    padding: var(--space-200) var(--space-400) !important;
    overflow-x: auto;
    border-right: 0 !important;
    border-bottom: 1px solid var(--bbr-bd-default) !important;
  }

  .app-tabs::before {
    content: none;
  }

  .tab-item {
    width: auto;
  }

  #content-knowledge,
  #content-database,
  #content-clients,
  #content-calendar,
  #content-analytics,
  #content-agent,
  #content-strategy,
  #content-instagram,
  #content-textgen,
  #content-portal,
  #content-notifications,
  #content-comms,
  #content-app-settings,
  #content-shifts,
  #content-my-clients {
    padding: var(--space-500) !important;
  }
}

/* Tabella conversazioni */
.user-table th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bbr-ink-4);
  padding: 10px var(--space-400);
  background: transparent;
  border-bottom: 1px solid var(--bbr-ink-5);
}

.user-table td {
  padding: 11px var(--space-400);
  border-bottom-color: var(--bbr-ink-6);
}

.user-table-container {
  border-radius: var(--bbr-r-lg);
  border-color: var(--bbr-ink-5);
  box-shadow: var(--bbr-shadow-xs);
}

.changelog-time,
.changelog-stats {
  font-family: var(--bbr-font-mono);
}

.changelog-time {
  color: var(--bbr-ink-3);
}

.changelog-stats {
  color: var(--bbr-ink-3);
}

.editor-gutter {
  background: var(--bbr-ink-7);
  border-right-color: var(--bbr-ink-5);
}

/* Sezioni contenuto (lista KB / titoli pagina interna) */
.bbr-section-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--bbr-ink-4);
  margin: 0 0 var(--space-150);
}

/* Forza i pannelli interni a riempire il contenitore nella griglia */
@media (min-width: 981px) {
  #app-screen[style*="display: block"] #comms-app,
  #app-screen[style*="display:block"] #comms-app,
  #app-screen[style*="display: flex"] #comms-app,
  #app-screen[style*="display:flex"] #comms-app {
    height: 100% !important;
    max-height: none !important;
  }
  #app-screen[style*="display: block"] .tool-embed-shell,
  #app-screen[style*="display:block"] .tool-embed-shell,
  #app-screen[style*="display: flex"] .tool-embed-shell,
  #app-screen[style*="display:flex"] .tool-embed-shell {
    height: 100% !important;
  }
}

/* =========================================================================
   CRM OSPITI (#729 #721) — elenco con filtri e scheda ospite in pagina.
   Solo token: colori --bbr-*, spazi --space-*, raggi --radius-*.
   ========================================================================= */
.crm-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-300); margin: var(--space-400) 0; }
.crm-search {
  flex: 1 1 280px; min-width: 0; height: 36px; padding: 0 var(--space-300);
  font: inherit; font-size: var(--text-base); color: var(--bbr-fg-primary);
  background: var(--bbr-bg-surface); border: 1px solid var(--bbr-bd-strong); border-radius: var(--radius-md);
}
.crm-search:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-color: var(--bbr-accent); }
.crm-chips, .crm-badges, .crm-tags { display: flex; flex-wrap: wrap; gap: var(--space-150); align-items: center; }
.user-table tr.crm-row { cursor: pointer; }
.user-table tr.crm-row:hover td { background: var(--bbr-bg-sunken); }

.crm-sheet-top { margin: var(--space-200) 0 var(--space-300); }
.crm-sheet-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-300); margin-bottom: var(--space-400); }
.crm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-300); margin-bottom: var(--space-400); }
.crm-kpis .bbr-kpi { padding: var(--space-400); }
/* Solo la taglia: il font lo dà ora il componente (bbr-components.css), uguale per tutti i KPI. */
.crm-kpis .bbr-kpi__value { font-size: var(--text-xl); }
.crm-sheet-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-400); align-items: start; }
@media (max-width: 980px) { .crm-sheet-grid { grid-template-columns: minmax(0, 1fr); } }
.crm-toggles { display: flex; flex-wrap: wrap; gap: var(--space-500); margin: var(--space-300) 0 var(--space-400); }
.crm-toggle { display: inline-flex; align-items: center; gap: var(--space-200); font-size: var(--text-base); color: var(--bbr-fg-primary); cursor: pointer; }
.crm-sheet-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-200); margin-top: var(--space-400); }
.crm-note-box { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-200); margin: var(--space-300) 0 var(--space-400); }
.crm-note-box textarea, #crm-sheet-form textarea {
  width: 100%; box-sizing: border-box; padding: var(--space-200) var(--space-300); font: inherit; font-size: var(--text-base);
  color: var(--bbr-fg-primary); background: var(--bbr-bg-surface); border: 1px solid var(--bbr-bd-strong); border-radius: var(--radius-md); resize: vertical;
}
.crm-timeline { list-style: none; margin: 0; padding: 0; }
.crm-timeline li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-300); padding: var(--space-300) 0; border-top: 1px solid var(--bbr-bd-default); }
.crm-timeline li:first-child { border-top: 0; }
.crm-tl-when { font-size: var(--text-sm); color: var(--bbr-fg-muted); white-space: nowrap; }
.crm-tl-title { font-size: var(--text-base); font-weight: 600; color: var(--bbr-fg-primary); display: flex; flex-wrap: wrap; gap: var(--space-200); align-items: center; }
.crm-tl-detail { font-size: var(--text-sm); color: var(--bbr-fg-secondary); margin-top: var(--space-050); overflow-wrap: anywhere; }
.crm-empty { padding: var(--space-500) 0; text-align: center; color: var(--bbr-fg-muted); font-size: var(--text-sm); }
#crm-sheet-form[data-readonly="1"] input, #crm-sheet-form[data-readonly="1"] select, #crm-sheet-form[data-readonly="1"] textarea { pointer-events: none; background: var(--bbr-bg-sunken); }
.crm-tl-clickable { cursor: pointer; }
.crm-tl-clickable:hover { background: var(--bbr-bg-sunken); }
.crm-tl-clickable:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.crm-tl-detail.crm-booking-due { color: var(--bbr-accent); font-weight: 600; }

/* Pratica della prenotazione (#749): vista nativa in SOLA LETTURA dentro il Database clienti —
   testata + tre schede (Panoramica · Ospiti e documenti · Conto), stesso quadro di booking-detail.php. */
.crm-booking-actions { display: flex; justify-content: flex-end; margin-bottom: var(--space-400); }
.crm-booking-tabs { display: flex; flex-wrap: wrap; gap: var(--space-150); margin-bottom: var(--space-400); }
.crm-booking-panel.hidden { display: none; }
.crm-booking-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-300); }
.crm-booking-room { padding: var(--space-400); }
.crm-booking-row { display: flex; justify-content: space-between; gap: var(--space-300); padding: var(--space-150) 0; border-top: 1px solid var(--bbr-bd-default); font-size: var(--text-sm); }
.crm-booking-row:first-child { border-top: 0; }
.crm-booking-row span { color: var(--bbr-fg-muted); }
.crm-booking-row b { color: var(--bbr-fg-primary); font-weight: 600; text-align: right; }
.crm-booking-amount { font-variant-numeric: tabular-nums; }
.crm-booking-kpis .bbr-kpi__value { font-variant-numeric: tabular-nums; }
.crm-booking-due .bbr-kpi__value { color: var(--bbr-accent); }
.crm-booking-guest-room { padding: var(--space-500); margin-bottom: var(--space-300); }
.crm-booking-guests { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-300); margin-top: var(--space-300); }
.crm-booking-guest { padding: var(--space-300); border: 1px solid var(--bbr-bd-default); border-radius: var(--radius-md); }
.crm-booking-guest-name { font-size: var(--text-base); font-weight: 600; color: var(--bbr-fg-primary); }
.crm-booking-guest-meta { font-size: var(--text-sm); color: var(--bbr-fg-muted); margin-top: var(--space-050); }
.crm-booking-guest-status { font-size: var(--text-sm); margin-top: var(--space-150); color: var(--bbr-red-fg); }
.crm-booking-guest-status.is-ready { color: var(--bbr-green-fg); }

/* Consensi (#729): stato + form inline di registrazione, dentro la card "Scheda". */
.crm-consent-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-300); flex-wrap: wrap; margin: var(--space-400) 0 var(--space-300); }
.crm-consent-actions { display: flex; gap: var(--space-200); flex-wrap: wrap; }
.crm-consent-form { display: flex; gap: var(--space-200); flex-wrap: wrap; margin-bottom: var(--space-300); }
.crm-consent-form input {
  flex: 1 1 220px; min-width: 0; height: 36px; padding: 0 var(--space-300);
  font: inherit; font-size: var(--text-base); color: var(--bbr-fg-primary);
  background: var(--bbr-bg-surface); border: 1px solid var(--bbr-bd-strong); border-radius: var(--radius-md);
}
.crm-consent-form input:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-color: var(--bbr-accent); }
.crm-consent-form input.is-invalid { border-color: var(--bbr-red-fg); }
.crm-consent-error { color: var(--bbr-red-fg); }

/* Segmenti (#423 F3): griglia di card pronte/salvate + form di anteprima costruito dalla spec. */
.crm-segment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-300); margin: var(--space-300) 0 var(--space-600); }
.crm-segment-card { cursor: pointer; padding: var(--space-400); display: flex; flex-direction: column; gap: var(--space-150); }
.crm-segment-card-title { font-size: var(--text-md); font-weight: 600; color: var(--bbr-fg-primary); margin: 0; }
.crm-segment-card-count { font-size: var(--text-sm); color: var(--bbr-fg-muted); }
.crm-segment-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-300); }
.crm-segment-field label { font-size: var(--text-sm); font-weight: 600; color: var(--bbr-fg-secondary); display: block; margin-bottom: var(--space-100); }
.crm-segment-field input, .crm-segment-field select {
  width: 100%; height: 36px; padding: 0 var(--space-300); font: inherit; font-size: var(--text-base);
  color: var(--bbr-fg-primary); background: var(--bbr-bg-surface); border: 1px solid var(--bbr-bd-strong); border-radius: var(--radius-md);
}
.crm-segment-field input:focus-visible, .crm-segment-field select:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-color: var(--bbr-accent); }
.crm-segment-field .section-desc { margin-top: var(--space-100); }

/* Campagne email (#781): compositore in colonna + schermata di conferma.
   Nessun colore a mano: tutto dai token, così i tre temi (Brand / Chiaro / Mono) seguono da soli. */
.crm-camp-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-400); max-width: 720px; }
.crm-camp-form textarea {
  width: 100%; box-sizing: border-box; min-height: 180px; padding: var(--space-300); font: inherit;
  font-size: var(--text-base); color: var(--bbr-fg-primary); background: var(--bbr-bg-surface);
  border: 1px solid var(--bbr-bd-strong); border-radius: var(--radius-md); resize: vertical;
}
.crm-camp-form textarea:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-color: var(--bbr-accent); }
.crm-camp-count { font-size: var(--text-sm); color: var(--bbr-fg-muted); margin-top: var(--space-150); }
.crm-camp-count b { color: var(--bbr-fg-primary); font-variant-numeric: tabular-nums; }

/* Il riquadro della conferma: un invio non si annulla, e si deve vedere che questo passaggio è
   diverso dagli altri. Il filo d'accento a sinistra fa quel lavoro senza urlare. */
.crm-camp-warn {
  border-left: 3px solid var(--bbr-accent); background: var(--bbr-accent-soft);
  color: var(--bbr-accent-soft-fg); padding: var(--space-300) var(--space-400);
  border-radius: var(--radius-md); font-size: var(--text-base); margin-bottom: var(--space-400);
}
.crm-camp-excluded { list-style: none; margin: var(--space-300) 0 0; padding: 0; }
.crm-camp-excluded li {
  display: flex; justify-content: space-between; gap: var(--space-300);
  padding: var(--space-200) 0; border-top: 1px solid var(--bbr-bd-default); font-size: var(--text-sm);
}
.crm-camp-excluded li:first-child { border-top: 0; }
.crm-camp-excluded span { color: var(--bbr-fg-muted); }
.crm-camp-excluded b { color: var(--bbr-fg-primary); font-variant-numeric: tabular-nums; }
/* L'anteprima del messaggio: si legge come una email, non come un campo di form. */
.crm-camp-preview {
  background: var(--bbr-bg-sunken); border: 1px solid var(--bbr-bd-default); border-radius: var(--radius-md);
  padding: var(--space-400); margin-top: var(--space-300);
}
.crm-camp-preview-subject { font-size: var(--text-md); font-weight: 600; color: var(--bbr-fg-primary); margin-bottom: var(--space-200); }
.crm-camp-preview-body { font-size: var(--text-base); color: var(--bbr-fg-secondary); white-space: pre-wrap; overflow-wrap: anywhere; }
.crm-camp-2fa { max-width: 200px; }
.crm-camp-esito-detail { font-size: var(--text-xs); color: var(--bbr-fg-muted); margin-top: var(--space-050); }
.crm-camp-kpi--warn .bbr-kpi__value { color: var(--bbr-amber-fg); }
.crm-camp-excluded li.crm-camp-excluded--main {
  background: var(--bbr-amber-soft); border-radius: var(--radius-sm); padding: var(--space-200) var(--space-300);
}
.crm-camp-excluded li.crm-camp-excluded--main span,
.crm-camp-excluded li.crm-camp-excluded--main b { color: var(--bbr-amber-fg); font-weight: 600; }
/* Avviso puntuale (es. la revisione è cambiata sotto al 2FA): stessa forma del box permanente
   sopra, ma ambra invece di accento perché segnala una correzione, non la regola generale. */
.crm-camp-alert {
  border-left: 3px solid var(--bbr-amber-fg); background: var(--bbr-amber-soft);
  color: var(--bbr-amber-fg); padding: var(--space-300) var(--space-400);
  border-radius: var(--radius-md); font-size: var(--text-base); font-weight: 600; margin-bottom: var(--space-400);
}

/* Stato vuoto (skill dashboard-page, brand-guide §9): icona leggera → titolo 18/600 → riga.
   Il .btn-primary resta quello già nell'intestazione della sezione: non si duplica qui,
   una sola azione primaria per schermata (stesso criterio già scelto per il CRS, js/crs-app.js). */
.empty-state { padding: var(--space-800) var(--space-400); text-align: center; color: var(--bbr-fg-muted); }
.empty-state .page-icon { color: var(--bbr-fg-soft); margin-bottom: var(--space-300); }
.empty-state h3 { margin: 0 0 var(--space-100); font-size: var(--text-lg); font-weight: 600; color: var(--bbr-fg-primary); }
.empty-state p { margin: 0 auto; max-width: 52ch; }

/* Report CRM (#728 F7 seguito): barra periodo, imbuto chiamate->prenotazioni, KPI. */
.crm-report-card { padding: var(--space-500); margin-bottom: var(--space-400); }
.crm-report-periodbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-300); margin-bottom: var(--space-300); }
.crm-report-chips { display: flex; flex-wrap: wrap; gap: var(--space-150); }
.crm-report-daterange { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-200); font-size: var(--text-sm); color: var(--bbr-fg-secondary); }
.crm-report-daterange input[type="date"] {
  height: 36px; padding: 0 var(--space-200); font: inherit; font-size: var(--text-base);
  color: var(--bbr-fg-primary); background: var(--bbr-bg-surface); border: 1px solid var(--bbr-bd-strong); border-radius: var(--radius-md);
}
.crm-report-daterange input[type="date"]:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-color: var(--bbr-accent); }
.crm-report-error { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-300); color: var(--bbr-red-fg); font-size: var(--text-sm); margin-bottom: var(--space-400); }

.crm-report-funnel-wrap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr); gap: var(--space-600); align-items: start; }
@media (max-width: 980px) { .crm-report-funnel-wrap { grid-template-columns: minmax(0, 1fr); } }
.crm-report-funnel { display: flex; flex-direction: column; gap: var(--space-300); }
.crm-report-funnel-row { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; align-items: center; gap: var(--space-300); }
.crm-report-funnel-label { font-size: var(--text-sm); color: var(--bbr-fg-secondary); }
.crm-report-funnel-track { height: 20px; background: var(--bbr-bg-sunken); border-radius: var(--radius-sm); overflow: hidden; }
.crm-report-funnel-bar { height: 100%; border-radius: var(--radius-sm); }
.crm-report-funnel-bar--1 { background: var(--bbr-accent); }
.crm-report-funnel-bar--2 { background: color-mix(in srgb, var(--bbr-accent) 75%, transparent); }
.crm-report-funnel-bar--3 { background: color-mix(in srgb, var(--bbr-accent) 50%, transparent); }
.crm-report-funnel-bar--4 { background: color-mix(in srgb, var(--bbr-accent) 30%, transparent); }
.crm-report-funnel-value, .crm-report-card .bbr-kpi__value { font-variant-numeric: tabular-nums; }
.crm-report-funnel-value { font-family: var(--bbr-font-sans); font-size: var(--text-base); font-weight: 600; color: var(--bbr-fg-primary); white-space: nowrap; }
.crm-report-funnel-pct { font-weight: 400; color: var(--bbr-fg-muted); margin-left: var(--space-100); }
.crm-report-funnel-kpis { display: flex; flex-direction: column; gap: var(--space-300); }
.crm-report-note { font-size: var(--text-sm); color: var(--bbr-fg-muted); margin: var(--space-400) 0 0; }

.crm-report-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-300); }
.crm-report-kpis .bbr-kpi { padding: var(--space-400); }
.crm-report-kpi-desc { font-size: var(--text-sm); color: var(--bbr-fg-muted); margin: var(--space-100) 0 0; }
.crm-report-bar { display: flex; height: 8px; border-radius: var(--radius-full); overflow: hidden; margin-top: var(--space-200); background: var(--bbr-ink-5); }
.crm-report-bar span { display: block; height: 100%; background: var(--bbr-accent); }

/* Attività (#727 F5): riepilogo a chip + elenco filtrabile + link dalla scheda cliente. */
.crm-task-client-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-200); padding: var(--space-300) var(--space-400); margin: 0 0 var(--space-400); background: var(--bbr-bg-sunken); border: 1px solid var(--bbr-bd-default); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--bbr-fg-secondary); }
.crm-task-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-200); margin: 0 0 var(--space-400); }
.crm-task-count { font-weight: 600; }
.crm-task-chip--danger, .crm-task-chip--danger .crm-task-count { color: var(--bbr-red-fg); }
.crm-task-assignee-filter { height: 36px; padding: 0 var(--space-300); font: inherit; font-size: var(--text-base); color: var(--bbr-fg-primary); background: var(--bbr-bg-surface); border: 1px solid var(--bbr-bd-strong); border-radius: var(--radius-md); margin-left: auto; }
.crm-task-list { list-style: none; margin: 0; padding: 0; }
.crm-task-row { display: flex; align-items: flex-start; gap: var(--space-300); padding: var(--space-300) 0; border-top: 1px solid var(--bbr-bd-default); }
.crm-task-row:first-child { border-top: 0; }
.crm-task-check { padding-top: var(--space-050); flex-shrink: 0; }
.crm-task-main { flex: 1 1 auto; min-width: 0; }
.crm-task-title { font-size: var(--text-base); font-weight: 600; color: var(--bbr-fg-primary); display: flex; flex-wrap: wrap; gap: var(--space-150); align-items: center; }
.crm-task-sub { font-size: var(--text-sm); color: var(--bbr-fg-secondary); margin-top: var(--space-050); display: flex; flex-wrap: wrap; gap: var(--space-100); align-items: center; }
.crm-task-client { padding: 0; height: auto; }
.crm-task-actions { display: flex; gap: var(--space-100); flex-shrink: 0; }
.crm-task-sheet-link { font-size: var(--text-sm); color: var(--bbr-fg-muted); display: flex; align-items: center; gap: var(--space-100); margin: var(--space-200) 0 0; }

/* Duplicati (#726): elenco delle coppie e confronto affiancato prima dell'unione. */
.crm-dup-pairs { display: grid; gap: var(--space-300); margin: var(--space-300) 0 var(--space-600); }
.crm-dup-pair { cursor: pointer; padding: var(--space-400); display: flex; flex-direction: column; gap: var(--space-300); }
.crm-dup-pair:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.crm-dup-pair-body { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-400); align-items: center; }
.crm-dup-pair-arrow { font-size: var(--text-lg); font-weight: 600; color: var(--bbr-fg-soft); }
.crm-dup-side { min-width: 0; display: flex; flex-direction: column; gap: var(--space-050); }
.crm-dup-side-name { font-size: var(--text-md); font-weight: 600; color: var(--bbr-fg-primary); overflow-wrap: anywhere; }
.crm-dup-side-meta { font-size: var(--text-sm); color: var(--bbr-fg-muted); overflow-wrap: anywhere; }
.crm-dup-head-actions { display: flex; flex-wrap: wrap; gap: var(--space-200); }
.crm-dup-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-400); align-items: start; }
.crm-dup-col { padding: var(--space-400); display: flex; flex-direction: column; gap: var(--space-100); }
/* La scheda che sparisce si riconosce a colpo d'occhio: stesso rosso dei pulsanti distruttivi.
   `!important` perché la regola condivisa di .dashboard-card (riga 823) ne ha uno: è la guerra
   di cascata di questo foglio, non un vezzo. */
.dashboard-card.crm-dup-col--absorbed { border-color: var(--bbr-red-fg) !important; }
.crm-dup-col-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bbr-fg-muted); margin-bottom: var(--space-100); }
.crm-dup-choices { padding: var(--space-500); margin-top: var(--space-400); }
.crm-dup-field { padding: var(--space-300) 0; border-top: 1px solid var(--bbr-bd-default); }
.crm-dup-field:first-child { border-top: 0; }
.crm-dup-field-label { font-size: var(--text-sm); font-weight: 600; color: var(--bbr-fg-secondary); margin-bottom: var(--space-150); }
.crm-dup-opts { display: flex; flex-wrap: wrap; gap: var(--space-400); }
.crm-dup-opt { display: inline-flex; align-items: flex-start; gap: var(--space-200); font-size: var(--text-base); color: var(--bbr-fg-primary); cursor: pointer; max-width: 100%; overflow-wrap: anywhere; }
.crm-dup-warning { font-size: var(--text-sm); color: var(--bbr-red-fg); margin-top: var(--space-300); }
@media (max-width: 980px) {
  .crm-dup-cols { grid-template-columns: minmax(0, 1fr); }
  .crm-dup-pair-body { grid-template-columns: minmax(0, 1fr); }
  .crm-dup-pair-arrow { display: none; }
}