/* ══════════════════════════════════════════════════
   BMS Engagement — Journey Builder POC
   ══════════════════════════════════════════════════ */

/* ─── Brand palette — newbos teal-slate (embed) ──────────────────
   L'accento storico (blu #2563eb) è stato rimappato sul teal-slate
   dei tile newbos. Qui sotto i token + gli override dei componenti
   Bootstrap che usano "primary" (compilati col blu di default e che
   quindi NON seguono --bs-primary senza override esplicito). */
/* ─── Font (self-hosted, vedi assets/fonts/) ─────────────────────
   Poppins = display/heading (allineato alla chrome newBOS),
   Inter variabile = testo UI e dati (cifre tabellari disponibili). */
@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --brand-primary:       #3f5963;
  --brand-primary-rgb:   63, 89, 99;
  --brand-primary-dark:  #2c424b;
  --brand-primary-light: #5d7d89;
  --brand-primary-tint:  #eef2f4;
  /* Accento corallo del logo newBOS: identità, non interazione.
     Con parsimonia (logo, prezzi store, momenti "attivo"). */
  --brand-accent:        #c76a2e;
  --brand-accent-tint:   #fdf1e7;

  --font-ui:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Poppins", "Inter", -apple-system, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --bs-primary:          var(--brand-primary);
  --bs-primary-rgb:      var(--brand-primary-rgb);
  --bs-link-color:       var(--brand-primary);
  --bs-link-color-rgb:   var(--brand-primary-rgb);
  --bs-link-hover-color: var(--brand-primary-dark);
}

.btn-primary {
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary-dark);
  --bs-btn-hover-border-color: var(--brand-primary-dark);
  --bs-btn-active-bg: var(--brand-primary-dark);
  --bs-btn-active-border-color: var(--brand-primary-dark);
  --bs-btn-disabled-bg: var(--brand-primary);
  --bs-btn-disabled-border-color: var(--brand-primary);
  --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-active-bg: var(--brand-primary);
  --bs-btn-active-border-color: var(--brand-primary);
  --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
}
.btn-link { --bs-btn-color: var(--brand-primary); --bs-btn-hover-color: var(--brand-primary-dark); }
.bg-primary { background-color: var(--brand-primary) !important; }
.text-primary { color: var(--brand-primary) !important; }
.border-primary { border-color: var(--brand-primary) !important; }
.badge.bg-primary { background-color: var(--brand-primary) !important; }
.alert-primary {
  --bs-alert-color: var(--brand-primary-dark);
  --bs-alert-bg: var(--brand-primary-tint);
  --bs-alert-border-color: #c3d2d8;
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--brand-primary); }
.list-group-item.active { background-color: var(--brand-primary); border-color: var(--brand-primary); }

/* ─── Reset & Base ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: var(--font-ui);
  background: #eae8e2;
  color: #232b2e;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* Titoli e "numeri che contano" nel display face (eco della chrome newBOS) */
.page-title, .step-title, .hub-title, .hub-banner-title,
.dash-hero-title, .dash-kpi-val, .kpi-value,
.pp-stat-value, .pp-profile-name, .lb-pp-rank,
.topnav-logo, .modal-title, .store-reel-title {
  font-family: var(--font-display);
}

/* Dati numerici allineati in colonna (tabelle, conteggi, input numerici) */
table, .dash-table-container, .hub-count, .pp-section-count,
.lb-tier-pos-input, .dash-kpi-val, .kpi-value, .pp-stat-value {
  font-variant-numeric: tabular-nums;
}

/* ID e codici: mono coerente ovunque */
.rm-id-chip, .edge-condition-hint, code { font-family: var(--font-mono); }

/* Focus visibile uniforme (tastiera) */
:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.btn { font-weight: 600; }

/* ─── Layout ────────────────────────────────────── */
/* Embed newbos: nav orizzontale in cima, contenuto sotto (colonna). */
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  overflow-y: auto;
  min-width: 0;
}

/* ─── Top nav (embed) ───────────────────────────── */
.topnav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  background: #fff;
  border-bottom: 1px solid #e3e1da;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  padding: 0 24px;
  min-height: 62px;
  position: sticky;
  top: 0;
  z-index: 1020;
}

.topnav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 16px;
  margin-right: 6px;
  border-right: 1px solid #e3e1da;
}

/* Logo due toni "bms|engage": eco del wordmark "new|bos" del portale */
.topnav-logo {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .3px;
  color: #6a7576;
  line-height: 1;
}
.topnav-logo-accent {
  font-weight: 700;
  color: var(--brand-accent);
}
.topnav-title {
  font-size: 13px;
  color: #6a7576;
}
.topnav-version {
  font-size: 10px;
  color: #99a2a0;
}

.topnav-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }

.topnav-link {
  color: #545f60 !important;
  font-size: 14.5px;
  padding: 20px 16px !important;
  border-bottom: 2px solid transparent;
  border-radius: 0 !important;
  display: flex;
  align-items: center;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.topnav-link:hover { color: #232b2e !important; }
.topnav-link.active {
  color: var(--brand-primary) !important;
  border-bottom-color: var(--brand-primary);
  font-weight: 600;
}

.topnav-soon {
  display: flex;
  align-items: center;
  padding: 0 8px;
}
.topnav-link-disabled {
  color: #99a2a0;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  cursor: default;
  user-select: none;
}

.topnav-right { align-items: center; }
.topnav-tools .dropdown-toggle {
  color: #545f60 !important;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.topnav-tools .dropdown-toggle:hover { color: #232b2e !important; }

/* ─── Top nav: sezioni con dropdown (menu a 2 livelli) ───────────── */
.topnav-dd .dropdown-toggle {
  color: #545f60 !important;
  font-size: 14.5px;
  padding: 20px 15px !important;
  border-bottom: 2px solid transparent;
  border-radius: 0 !important;
  display: flex;
  align-items: center;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.topnav-dd .dropdown-toggle:hover { color: #232b2e !important; }
.topnav-dd.show .dropdown-toggle {
  color: var(--brand-primary) !important;
  border-bottom-color: var(--brand-primary);
}
/* pannello del menu */
.topnav-dd .dropdown-menu,
.topnav-tools .dropdown-menu {
  border: 1px solid #e3e1da;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(16,24,40,0.14);
  padding: 6px;
  margin-top: 2px;
  min-width: 250px;
}
.topnav-dd-item.dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 7px;
  white-space: normal;
}
.topnav-dd-item.dropdown-item:hover,
.topnav-dd-item.dropdown-item:focus { background: var(--brand-primary-tint); }
.topnav-dd-item .dd-ico {
  font-size: 15px;
  color: var(--brand-primary);
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.topnav-dd-item .dd-item-title { font-size: 14px; font-weight: 600; color: #232b2e; line-height: 1.2; }
.topnav-dd-item .dd-item-sub { font-size: 11.5px; color: #6a7576; line-height: 1.3; margin-top: 2px; }

/* ─── Pages ─────────────────────────────────────── */
.page-container {
  padding: 32px 40px;
  max-width: 1200px;
  margin: 0 auto;   /* centra il contenuto: senza sidebar non resta incollato a sinistra */
}
/* Wizard Journey Builder: sfrutta più spazio orizzontale (mappa + form). */
.page-container-wide {
  max-width: 1440px;
}

.page-title {
  font-size: 22px;
  font-weight: 700;
  color: #232b2e;
  margin-bottom: 4px;
}

.page-subtitle {
  color: #6a7576;
  font-size: 14px;
  margin-bottom: 28px;
}

.section-title {
  font-size: 15px;
  font-weight: 600;
  color: #232b2e;
}

/* ─── KPI cards ─────────────────────────────────── */
.kpi-card {
  border: 1px solid #e3e1da !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

.kpi-icon {
  font-size: 26px;
  flex-shrink: 0;
}

.kpi-value {
  font-size: 26px;
  font-weight: 700;
  color: #232b2e;
}

.kpi-label {
  font-size: 12px;
}

/* ─── Journey table ─────────────────────────────── */
.journey-table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6a7576;
  font-weight: 600;
  border-top: none;
}

.journey-table td {
  font-size: 14px;
  vertical-align: middle;
}

/* ─── Wizard progress ───────────────────────────── */
.wizard-progress {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.wizard-step {
  flex: 1;
  min-width: 80px;
  padding: 8px 6px;
  text-align: center;
  background: #e3e1da;
  border-radius: 8px;
  font-size: 12px;
  color: #99a2a0;
  font-weight: 500;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.wizard-step.active {
  background: #3f5963;
  color: #fff;
  font-weight: 600;
}

.wizard-step.done {
  background: #d1fae5;
  color: #065f46;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  font-size: 11px;
  font-weight: 700;
}

/* ─── Wizard card ───────────────────────────────── */
.wizard-card {
  border: 1px solid #e3e1da !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

.step-title {
  font-size: 17px;
  font-weight: 600;
  color: #232b2e;
  margin-bottom: 4px;
}

.wizard-nav {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ─── Template cards ─────────────────────────────── */
.template-card {
  border: 2px solid #e3e1da !important;
  border-radius: 12px !important;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  background: #fff !important;
}

.template-card:hover {
  border-color: #3f5963 !important;
  box-shadow: 0 0 0 3px rgba(63,89,99,0.1) !important;
  transform: translateY(-1px);
}

.template-card.selected {
  border-color: #3f5963 !important;
  box-shadow: 0 0 0 3px rgba(63,89,99,0.15) !important;
  background: #eef2f4 !important;
}

.template-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.template-label {
  font-size: 14px;
  font-weight: 600;
  color: #232b2e;
}

.template-desc {
  font-size: 12px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.template-type-badge {
  font-size: 10px !important;
  border: 1px solid #e3e1da !important;
}

/* ─── Player cards ───────────────────────────────── */
.player-card {
  border: 1px solid #e3e1da !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

/* ─── Utilities ──────────────────────────────────── */
.badge { font-weight: 500 !important; }

/* ── Step form ────────────────────────────────────────────────────────────── */
.form-check-label { font-size: 14px; }
.form-check-input:checked { background-color: #3f5963; border-color: #3f5963; }
.input-group-text { background: #f7f5f0; color: #6a7576; font-size: 14px; }
.form-control, .form-select { font-size: 14px; }
.form-control:focus, .form-select:focus {
  border-color: #3f5963;
  box-shadow: 0 0 0 3px rgba(63,89,99,0.12);
}
#s2-aud-preview .alert { font-size: 14px; border-radius: 8px; }

/* ── Step 4 cards ─────────────────────────────────────────────────────────── */
.step-card {
  border: 1px solid #e3e1da !important;
  border-radius: 10px !important;
  background: #f7f5f0 !important;
}

/* ── Preview step ──────────────────────────────────────────────────────────── */
.preview-step {
  border-left: 3px solid #3f5963;
  padding-left: 12px;
}

/* ── Template card (html.Div) ────────────────────────────────────────────── */
.template-card {
  padding: 16px !important;
}

/* ── Context banner ─────────────────────────────────────────────────────── */
.context-banner {
  background: #f7f5f0 !important;
  border-color: #dee2e6 !important;
  font-size: 13px;
}

/* ── Step sections (condizione / premio) ─────────────────────────────────── */
.step-section {
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.step-section-cond {
  background: #eef2f4;
  border-left: 3px solid #3f5963;
}
.step-section-reward {
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
}
.step-section-title {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.step-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #6a7576;
}

/* ── Mission step card header ────────────────────────────────────────────── */
.mission-step-card {
  border: 1px solid #e3e1da !important;
  border-radius: 10px !important;
  overflow: hidden;
}
.step-card-header {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  background: #f7f5f0;
  border-bottom: 1px solid #e3e1da;
}
.step-num-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.step-title-input {
  border: none !important;
  background: transparent !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 0 8px !important;
  box-shadow: none !important;
}
.step-title-input:focus {
  background: #fff !important;
  border-bottom: 1px solid #3f5963 !important;
  border-radius: 0 !important;
}
.btn-icon {
  width: 28px;
  height: 28px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px !important;
}
.form-label-sm {
  font-size: 12px;
  font-weight: 600;
  color: #545f60;
  margin-bottom: 4px;
}

/* ── Journey tree mini-map ───────────────────────────────────────────────── */
.tree-minimap {
  background: #f7f5f0;
  border: 1px solid #e3e1da;
  border-radius: 10px;
  padding: 8px;
  min-height: 60px;
}
.tree-minimap-empty {
  background: #f7f5f0;
  border: 1px dashed #d2cfc6;
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}
/* ── Legenda mappa (riusata da Step 4 e Preview) ─────────────────────────── */
.tree-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 8px 10px;
  margin-top: 8px;
  background: #f7f5f0;
  border: 1px solid #eceae3;
  border-radius: 8px;
}
.tree-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #6a7576;
  white-space: nowrap;
}
.tree-legend-swatch {
  display: inline-block;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  background: #fff;
}
.tree-legend-swatch--node {
  border-radius: 50%;
  border: 2px solid #99a2a0;
}
.tree-legend-swatch--selected {
  border-radius: 50%;
  border: 3px solid #3f5963;
}
.tree-legend-swatch--final {
  width: 11px;
  height: 11px;
  border: 2px solid #7c3aed;
  transform: rotate(45deg);
}
.tree-legend-swatch--edge {
  width: 20px;
  height: 0;
  background: none;
  border-top: 2px solid #16a34a;
}
/* Pannello tree wizard */
.tree-panel-left {
  border-right: 1px solid #e3e1da;
  padding-right: 16px;
  min-height: 300px;
}
.tree-panel-right {
  padding-left: 16px;
}
.tree-node-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.tree-no-node-selected {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #99a2a0;
  font-size: 14px;
  text-align: center;
}

/* ── Action slots ────────────────────────────────────────────────────────── */
/* Neutri: il colore è riservato ai rami SÌ/NO e alla selezione (vedi mappa). */
.action-slot {
  background: #ffffff;
  border: 1px solid #e3e1da;
  border-left: 3px solid #e3e1da;
}
.step-section-actions {
  background: #f7f5f0;
  border-left: 3px solid #e3e1da;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

/* ── Nuovo modello nodo (state machine) ───────────────────────────────────── */
.step-section-actions-arrival {
  background: #f7f5f0;
  border-left: 3px solid #e3e1da;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.step-section-yes-cond {
  background: #f7f5f0;
  border-left: 3px solid #e3e1da;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
/* Edge label hint */
.edge-condition-hint {
  font-size: 10px;
  color: #6a7576;
  font-family: monospace;
}

/* ── Template use-case cards (step 1) ───────────────────────────────────── */
.template-card-horizontal {
  border: 2px solid #e3e1da;
  border-radius: 10px;
  background: #fff;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .12s, transform .1s;
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.template-card-body { flex: 1 1 auto; min-width: 0; }
.template-card-horizontal:hover {
  border-color: #3f5963;
  box-shadow: 0 0 0 3px rgba(63,89,99,.1);
  transform: translateY(-1px);
}
.template-card-horizontal.selected {
  border-color: #3f5963;
  box-shadow: 0 0 0 3px rgba(63,89,99,.15);
  background: #eef2f4;
}
.template-use-icon  { font-size: 1.1rem; color: #6a7576; }
.template-highlights { color: #6a7576; font-size: 12px; margin-top: 4px; }
/* Tag neutri (no colore) per i template card */
.template-tag {
  font-size: 10px !important;
  font-weight: 600;
  border: 1px solid #e3e1da !important;
}
.template-select-indicator .bi { font-size: 1.25rem; opacity: .3; transition: opacity .15s; color: #6a7576; }
/* Card eliminabili: lascia spazio al pulsante elimina (top-right) spostando
   l'indicatore di selezione verso sinistra, così i due non si sovrappongono. */
.tpl-card-deletable .template-select-indicator { margin-right: 34px; }
.template-card-horizontal.selected .template-select-indicator .bi { opacity: 1; }
.template-card-horizontal:hover .template-select-indicator .bi { opacity: .7; }
.template-icon-circle {
  width: 32px; height: 32px;
  flex: 0 0 auto;
  background: #efede6;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
/* Pulsante elimina template (solo card custom) — fratello della card cliccabile */
.tpl-delete-btn {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 5;
  width: 30px; height: 30px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: #b91c1c;
  background: #fff;
  border: 1px solid #fecaca;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  opacity: .55;
  transition: opacity .15s, background .15s, color .15s;
}
.tpl-delete-btn:hover {
  opacity: 1;
  background: #fee2e2;
  color: #991b1b;
  border-color: #f87171;
}
/* Badge "modifiche non salvate" nel form nodo (step 4) */
.s4n-unsaved-badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 4px 10px;
}

/* Titolo sezione step 1 */
.step1-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #6a7576;
  margin-bottom: 14px;
}

/* Bottone journey personalizzato — coerente con le card (bordo dashed = "da zero") */
.template-custom-btn {
  border: 2px dashed #d2cfc6;
  border-radius: 12px;
  background: #fff;
  padding: 18px 20px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  transition: border-color .15s, box-shadow .12s, transform .1s, background .12s;
}
.template-custom-btn:hover {
  border-color: #3f5963;
  box-shadow: 0 0 0 3px rgba(63,89,99,.1);
  transform: translateY(-1px);
}
.template-custom-btn.selected {
  border: 2px solid #3f5963;
  background: #eef2f4;
}
.template-custom-btn.selected .template-select-indicator .bi { opacity: 1; }
.template-custom-btn:hover .template-select-indicator .bi { opacity: .7; }

/* ── Preview node cards ──────────────────────────────────────────────────── */
.preview-node-card {
  border: 1px solid #e3e1da !important;
  border-radius: 8px !important;
  border-left: 3px solid #3f5963 !important;
  font-size: 13px;
}
.preview-node-card .card-header {
  background: #f7f5f0;
  border-bottom: 1px solid #e3e1da;
  font-size: 13px;
}
.preview-node-card .card-body {
  font-size: 12px;
}
.preview-node-card hr {
  border-top: 1px dashed #e3e1da;
  opacity: 1;
}
/* Connettore a freccia tra le schede nodo del flusso journey */
.preview-flow-connector {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #9aa4a6;
  font-size: 15px;
  line-height: 1;
  height: 22px;
  position: relative;
}
.preview-flow-connector::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 50%;
  width: 2px;
  background: #e3e1da;
  transform: translateX(-50%);
  z-index: 0;
}
.preview-flow-connector .bi {
  position: relative;
  z-index: 1;
  background: #faf9f6;
  padding: 0 2px;
}
/* Mini-tabella delle fasce di un premio (preview/recap) */
.reward-tiers-table {
  width: auto;
  min-width: 55%;
  margin: 2px 0 4px;
  font-size: 11px;
  background: #fbfaf7;
  border: 1px solid #e3e1da;
  border-radius: 6px;
  overflow: hidden;
}
.reward-tiers-table th {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  color: #8a938f;
  background: #f2efe8;
  padding: 3px 10px;
}
.reward-tiers-table td {
  padding: 3px 10px;
  color: #3f4b4d;
  border-top: 1px solid #eceade;
}

/* ── Leaderboard Builder ─────────────────────────────────────────────────── */

.lb-table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6a7576;
  font-weight: 600;
  border-top: none;
}

.lb-table td {
  font-size: 14px;
  vertical-align: middle;
}

/* Link cliccabile nelle righe tabella dashboard */
.dash-row-link {
  color: #232b2e !important;
  transition: color 0.12s;
}
.dash-row-link:hover {
  color: #3f5963 !important;
}

/* Verticale selection cards */
.lb-vertical-card {
  border: 2px solid #e3e1da;
  border-radius: 12px;
  background: #fff;
  padding: 16px 24px;
  cursor: pointer;
  min-width: 160px;
  text-align: center;
  transition: border-color .15s, box-shadow .12s, transform .1s;
  display: inline-block;
}

.lb-vertical-card:hover {
  border-color: #3f5963;
  box-shadow: 0 0 0 3px rgba(63,89,99,.1);
  transform: translateY(-1px);
}

.lb-vertical-card.selected {
  border-color: #3f5963;
  box-shadow: 0 0 0 3px rgba(63,89,99,.15);
  background: #eef2f4;
}

/* Tier cards */
.lb-tier-card {
  border: 1px solid #e3e1da !important;
  border-left: 3px solid #f59e0b !important;
  border-radius: 10px !important;
}

.lb-tier-card .card-header {
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
  font-size: 13px;
}

/* Rank inputs inline */
.lb-rank-input {
  display: inline-block !important;
  width: 70px !important;
}

/* Reward badge chips */
.lb-reward-badge {
  cursor: default;
  font-size: 12px !important;
}

/* Standing row highlight */
.table-primary.fw-semibold td {
  background-color: #eef2f4 !important;
  font-weight: 600;
}

/* ── Leaderboard — Step 4: card per fascia ──────────────────────────────── */

.lb-tier-card2 {
  border: 1px solid #e3e1da;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  overflow: hidden;
}

.lb-tier-card-header2 {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  background: #f7f5f0;
  border-bottom: 1px solid #e3e1da;
  /* border-left impostato inline per colore dinamico per fascia */
}

.lb-tier-pos-derived {
  font-size: 12px;
  color: #6a7576;
  background: #efede6;
  border-radius: 12px;
  padding: 1px 8px;
}

.lb-tier-untilabel {
  font-size: 11px;
  color: #99a2a0;
  white-space: nowrap;
}

.lb-tier-pos-input {
  width: 56px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-align: center !important;
  padding: 2px 4px !important;
  border: 1px solid #d2cfc6 !important;
  border-radius: 6px !important;
  background: #fff !important;
  height: auto !important;
  line-height: 1 !important;
}

.lb-tier-pos-input:focus {
  border-color: #3f5963 !important;
  box-shadow: 0 0 0 2px rgba(63,89,99,.12) !important;
  outline: none !important;
}

.lb-tier-card-body2 {
  padding: 10px 14px 8px;
}

/* Riga singolo premio */
.lb-reward-row {
  background: #f6f8f9;
  border: 1px solid #e3e9eb;
  border-radius: 6px;
  padding: 5px 10px;
}

.lb-rew-del {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  font-size: 11px !important;
}

.lb-consolation-box {
  border: 2px dashed #99a2a0 !important;
  border-radius: 10px !important;
  background: #f7f5f0 !important;
}

/* ── Leaderboard — Unified standings tier cards (detail view) ─────────────── */
.lb-standing-tier-card {
  border-radius: 10px !important;
  overflow: hidden;
  border-width: 1px !important;
  border-left-width: 3px !important;
}
.lb-tier-card-header {
  font-size: 13px;
  padding: 8px 14px;
}
.lb-standing-tier-card.border-warning .lb-tier-card-header { background: #fffbeb; }
.lb-standing-tier-card.border-secondary .lb-tier-card-header { background: #f7f5f0; }
.lb-standing-tier-card.border-info .lb-tier-card-header { background: #eef2f4; }
.lb-demo-player-row {
  background: #eef2f4;
  border-radius: 6px;
}

/* ── Leaderboard — Player Preview gamification section ────────────────────── */
.lb-gamification-card {
  border: 1px solid #fde68a !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(245,158,11,.12) !important;
  overflow: hidden;
}
.lb-gamification-header {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
  border-bottom: 1px solid #fde68a !important;
}
.lb-pp-player-banner {
  border: 1px solid #c3d2d8 !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #eef2f4 0%, #dde6ea 100%) !important;
  box-shadow: 0 1px 4px rgba(63,89,99,.08) !important;
}
.lb-pp-rank {
  font-size: 2.2rem;
  font-weight: 700;
  color: #232b2e;
  line-height: 1;
  display: block;
}
.lb-pp-tier-header {
  background: #f7f5f0;
  font-size: 13px;
  padding: 5px 10px;
  border-bottom: 1px solid #eceae3;
}
.lb-pp-demo-row {
  background: #eef2f4 !important;
  font-weight: 600;
}
.lb-pp-active-tier {
  border: 1.5px solid #c3d2d8 !important;
  border-radius: 8px !important;
  background: #f6f8f9 !important;
  overflow: hidden;
}

/* ── Leaderboard — Standings banner (parziale / definitiva) ─────────────────── */

.lb-standings-banner {
  display: flex;
  align-items: center;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
}

.lb-standings-banner-live {
  background: #eef2f4;
  border: 1px solid #c3d2d8;
  color: #2c424b;
}

.lb-standings-banner-final {
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #166534;
}

/* Pallino rosso pulsante — usato nei banner "in corso" */
.lb-live-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
  margin-right: 8px;
  animation: lb-pulse 1.6s ease-in-out infinite;
}

/* Versione piccola (header card player preview) */
.lb-live-dot-sm {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: lb-pulse 1.6s ease-in-out infinite;
}

@keyframes lb-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}

/* Card classifiche definitiva: bordo verde invece di ambra */
.lb-gamification-card-final {
  border-color: #86efac !important;
  box-shadow: 0 2px 8px rgba(34,197,94,.10) !important;
}

.lb-gamification-card-final .lb-gamification-header {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
  border-bottom-color: #86efac !important;
}

/* ── Player Preview — Redesign ──────────────────────────────────────────────── */

.pp-profile-card {
  border: 1px solid #e3e1da !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important;
  overflow: hidden;
}

.pp-profile-header {
  background: linear-gradient(135deg, #232b2e 0%, #2c424b 100%);
  padding: 18px 24px;
  min-height: 72px;
}

.pp-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5d7d89, #2c424b);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.2);
}

.pp-profile-name {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.pp-profile-id {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}

.pp-no-tag {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  font-style: italic;
}

.pp-stats-row {
  border-top: 1px solid #efede6;
}

.pp-stat-col {
  border-right: 1px solid #efede6;
  padding: 14px 18px !important;
}

.pp-stat-col-last {
  border-right: none !important;
}

.pp-stat-item {
  min-height: 52px;
}

.pp-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: #232b2e;
  line-height: 1.1;
  display: block;
}

.pp-stat-label {
  font-size: 11px;
  color: #99a2a0;
}

/* Section headers above journey/leaderboard lists */
.pp-section-header {
  display: flex;
  align-items: center;
  color: #6a7576;
}

.pp-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #6a7576;
}

.pp-section-count {
  font-size: 11px;
  font-weight: 600;
  background: #efede6;
  border: 1px solid #e3e1da;
  border-radius: 12px;
  padding: 1px 8px;
  margin-left: 7px;
  color: #6a7576;
}

/* Gruppi journey/classifiche collassabili */
.pp-grp { margin-bottom: 10px; }
.pp-grp-header {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  background: #f7f5f0;
  border: 1px solid #eceae3;
  user-select: none;
  transition: background .15s ease;
}
.pp-grp-header:hover { background: #eceae3; }
.pp-grp-chevron {
  font-size: 11px;
  color: #99a2a0;
  width: 12px;
  text-align: center;
}
.pp-grp-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #545f60;
}
.pp-grp-body { padding-top: 12px; }

/* Empty state placeholder */
.pp-empty-section {
  border: 1.5px dashed #e3e1da;
  border-radius: 12px;
  padding: 28px 20px;
  text-align: center;
  color: #99a2a0;
  background: #f7f5f0;
}

/* Player position banner in leaderboard gamification card */
.pp-lb-player-pos {
  background: #eef2f4;
  border: 1px solid #c3d2d8;
  border-radius: 8px;
  padding: 10px 14px;
}

/* ── Loyalty: timeline dei periodi qualificanti ───────────────────────────── */
.loy-tl { padding: 8px 0 4px; }
.loy-tl-rows { position: relative; z-index: 1; }
.loy-tl-row { margin-bottom: 10px; }
.loy-tl-dates { margin-bottom: 2px; }
.loy-tl-track {
  position: relative;
  height: 24px;
  background: #efede6;
  border-radius: 4px;
}
.loy-tl-bar {
  position: absolute;
  top: 0;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.loy-tl-bar-label {
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 0 8px;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
.loy-tl-today {
  position: absolute;
  top: -2px;
  bottom: 0;
  width: 0;
  border-left: 2px dashed #dc2626;
  z-index: 6;
  pointer-events: none;
}
.loy-tl-today-lbl {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: #dc2626;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.loy-tl-axis {
  height: 18px;
  margin-top: 4px;
  border-top: 1px solid #d2cfc6;
}
.loy-tl-tick {
  position: absolute;
  top: 3px;
  transform: translateX(-50%);
  font-size: 10px;
  color: #6a7576;
  white-space: nowrap;
}
.loy-tl-tick::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 1px;
  height: 4px;
  background: #d2cfc6;
}
.loy-tl-tick:first-child { transform: translateX(0); }
.loy-tl-tick:first-child::before { left: 0; }
.loy-tl-tick:last-child { transform: translateX(-100%); }
.loy-tl-tick:last-child::before { left: 100%; }

/* ── Player preview: barra progresso livello ──────────────────────────────── */
.pp-lvlbar { position: relative; height: 8px; margin: 4px 4px 40px; }
.pp-lvlbar-track {
  position: absolute; left: 0; right: 0; top: 0;
  height: 8px; background: #e3e1da; border-radius: 5px;
}
.pp-lvlbar-fill {
  position: absolute; left: 0; top: 0; height: 8px;
  border-radius: 5px; opacity: .9;
  transition: width .3s ease;
}
.pp-lvlbar-tick { position: absolute; top: -1px; transform: translateX(-50%); text-align: center; }
.pp-lvlbar-tickline { width: 2px; height: 14px; margin: 0 auto; border-radius: 1px; }
.pp-lvlbar-ticklbl { display: block; font-size: 10px; line-height: 1.1; white-space: nowrap; margin-top: 3px; }
.pp-lvlbar-tickval { display: block; font-size: 9px; color: #99a2a0; }
.pp-lvlbar-marker {
  position: absolute; top: -3px; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 3px solid #3f5963; z-index: 3;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.pp-lvlbar-mk-lbl {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; color: #545f60; white-space: nowrap;
}

/* ── Store Builder: anteprima vetrina (vista utente finale) ──────────────── */
.store-preview { padding-top: 4px; }
.store-reel {
  background: #fff; border: 1px solid #eceae3; border-radius: 12px;
  padding: 16px 18px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.store-reel-head { border-bottom: 1px solid #efede6; padding-bottom: 8px; }
.store-reel-title { font-weight: 700; color: #232b2e; }
.store-reel-grid { display: grid; gap: 12px; margin-top: 12px; }
.store-card-cell { min-width: 0; }
.store-card {
  border: 1px solid #eceae3; border-radius: 10px; transition: box-shadow .15s ease, transform .15s ease;
}
.store-card { position: relative; }
.store-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); transform: translateY(-2px); }
.store-card-img {
  display: flex; align-items: center; justify-content: center;
  height: 76px; border-radius: 8px; margin-bottom: 10px;
  background: linear-gradient(135deg, #f7f5f0 0%, #eceae3 100%);
  border: 1px dashed #d9d6cd;
}
.store-card-title { font-weight: 600; color: #232b2e; line-height: 1.25; }
.store-card-desc { margin-top: 2px; min-height: 32px; }
.store-card-price { font-weight: 700; color: #c76a2e; }
.store-card-price-old { font-weight: 600; color: #99a2a0; text-decoration: line-through; font-size: .85em; }
/* badge in overlay sulla card (sconto in alto a dx, bundle in alto a sx) */
.store-card-discount { position: absolute; top: 8px; right: 8px; z-index: 2; }
.store-card-bundle-badge { position: absolute; top: 8px; left: 8px; z-index: 2; font-weight: 500; }
.store-card-bundle { margin: 4px 0 0; padding-left: 18px; min-height: 32px; }
.store-card-bundle li { line-height: 1.3; }
/* descrizione + icona del reel (anteprima) */
.store-reel-desc { max-width: 720px; }
.store-reel-icon { width: 30px; height: 30px; border-radius: 7px; object-fit: cover; }

/* ── Store Builder: editor item-bundle ────────────────────────────────────── */
.store-item-card { background: #fbfaf7; }
.store-bundle-list > .store-bundle-row + .store-bundle-row { border-top: 1px solid #efede6; }
.store-bundle-row { font-size: .9rem; }
.store-upload {
  border: 1px dashed #d2cfc6; border-radius: 8px; padding: 10px 12px;
  text-align: center; color: #6a7576; cursor: pointer; background: #fbfaf7;
  font-size: .85rem; transition: border-color .15s ease, background .15s ease;
}
.store-upload:hover { border-color: #c76a2e; background: #fdf1e7; }
.store-upload-inner { pointer-events: none; }
/* Upload disabilitato (POC): visibile ma non interattivo */
.store-upload-disabled { cursor: not-allowed; opacity: .7; }
.store-upload-disabled:hover { border-color: #d2cfc6; background: #fbfaf7; }
.store-icon-thumb {
  width: 44px; height: 44px; border-radius: 8px; object-fit: cover; border: 1px solid #e3e1da;
}

/* ── Dashboard hub: card descrittive delle sezioni ────────────────────────── */
.hub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 880px) { .hub-grid { grid-template-columns: 1fr; } }

.hub-card {
  border: 1px solid #e3e1da !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  transition: box-shadow 0.15s, transform 0.1s, border-color 0.15s;
  height: 100%;
}
.hub-card:hover {
  box-shadow: 0 6px 20px rgba(16,24,40,0.10) !important;
  transform: translateY(-2px);
  border-color: #d5d2c9 !important;
}
.hub-head { display: flex; align-items: center; gap: 13px; margin-bottom: 11px; }
/* Tile pieno squadrato: eco diretta dei tile "preferiti" newBOS */
.hub-ico {
  width: 44px; height: 44px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0; color: #fff;
}
.hub-ico-brand { background: var(--brand-primary); }
.hub-ico-amber { background: #b3812f; }
.hub-ico-sky   { background: #4a8aa5; }
.hub-title { font-size: 17px; font-weight: 600; color: #232b2e; }
.hub-count {
  font-size: 11.5px; font-weight: 600; color: #6a7576;
  background: #efede6; border: 1px solid #e3e1da; border-radius: 20px;
  padding: 2px 10px; margin-left: auto; white-space: nowrap;
}
.hub-count-active { color: var(--brand-primary); }
.hub-count-sep { color: #c8c5bc; }
.hub-desc { font-size: 13.5px; color: #545f60; line-height: 1.5; }
.hub-actions { display: flex; flex-wrap: wrap; gap: 9px; }

/* Catalogo Reward — banner trasversale sotto le card */
.hub-banner {
  display: flex; align-items: center; gap: 16px;
  background: var(--brand-primary-tint);
  border: 1px solid #c3d2d8; border-radius: 12px;
  padding: 16px 20px; margin-top: 4px;
}
.hub-banner-ico {
  width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; color: #fff; background: var(--brand-primary);
}
.hub-banner-body { flex: 1; min-width: 0; }
.hub-banner-title { font-size: 15px; font-weight: 700; color: #232b2e; }
.hub-banner-desc { font-size: 13px; color: #545f60; line-height: 1.45; margin-top: 2px; }
@media (max-width: 640px) { .hub-banner { flex-direction: column; align-items: flex-start; } }

/* ── Dashboard hero: pannello teal pieno (lingua dei tile newBOS) ─────────── */
.dash-hero {
  background: linear-gradient(120deg, #415c66 0%, var(--brand-primary-dark) 100%);
  border: none;
  border-radius: 12px;
  padding: 22px 26px 6px;
  margin-bottom: 26px;
  box-shadow: 0 2px 10px rgba(44,66,75,.22);
  overflow: hidden;
}
.dash-hero-head { display: flex; align-items: flex-start; gap: 14px; }
.dash-hero-ico {
  width: 46px; height: 46px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff;
  background: rgba(255,255,255,.12);
}
.dash-hero-title { font-size: 23px; font-weight: 600; color: #fff; margin: 0; line-height: 1.15; letter-spacing: .2px; }
.dash-hero-sub { color: rgba(255,255,255,.72); font-size: 13.5px; margin: 3px 0 0; max-width: 760px; }

.dash-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 18px;
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 4px;
}
@media (max-width: 820px) { .dash-kpis { grid-template-columns: repeat(2, 1fr); } }
.dash-kpi { display: flex; align-items: center; gap: 12px; padding: 14px 12px; position: relative; }
.dash-kpi + .dash-kpi::before {
  content: ""; position: absolute; left: 0; top: 16px; bottom: 16px;
  width: 1px; background: rgba(255,255,255,.14);
}
.dash-kpi-ico {
  width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 19px;
  background: rgba(255,255,255,.10);
}
.dash-kpi-ico-brand { color: #a9c4cd; }
.dash-kpi-ico-amber { color: #f0b45c; }
.dash-kpi-ico-sky   { color: #85cbe9; }
.dash-kpi-ico-slate { color: #ccd6d4; }
.dash-kpi-val { font-size: 22px; font-weight: 600; color: #fff; line-height: 1; }
.dash-kpi-lbl { font-size: 11.5px; color: rgba(255,255,255,.62); margin-top: 3px; }

/* Accento superiore colorato sulle hub-card (identità per modulo) */
.hub-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--brand-primary); opacity: .85;
  border-top-left-radius: 12px; border-top-right-radius: 12px;
}
.hub-card { position: relative; overflow: hidden; }
.hub-accent-brand::before { background: var(--brand-primary); }
.hub-accent-amber::before { background: #b3812f; }
.hub-accent-sky::before   { background: #4a8aa5; }

/* ══ Modali condivise (reward + condition): header con icona, sezioni a card ══ */
#rm-modal .modal-content,
#cm-modal .modal-content {
  border: none;
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(16,24,40,0.24);
  overflow: hidden;
}
#rm-modal .modal-content { border-top: 3px solid #f59e0b; }
#cm-modal .modal-content { border-top: 3px solid var(--brand-primary); }

#rm-modal .modal-header,
#cm-modal .modal-header { padding: 16px 22px; border-bottom: 1px solid #eceae3; }
.modal-head-inner { display: flex; align-items: center; gap: 12px; }
#rm-modal .modal-title,
#cm-modal .modal-title { font-size: 17px; font-weight: 700; color: #232b2e; }

.modal-ico {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
}
.modal-ico-reward { background: #fff7e6; color: #f59e0b; }
.modal-ico-cond   { background: var(--brand-primary-tint); color: var(--brand-primary); }

#rm-modal .modal-body,
#cm-modal .modal-body { padding: 18px 22px; background: #f5f3ee; }
#rm-modal .modal-footer,
#cm-modal .modal-footer { border-top: 1px solid #eceae3; padding: 13px 22px; background: #fff; }

/* Card-sezione dentro le modali */
.modal-section {
  background: #fff;
  border: 1px solid #eceae3;
  border-radius: 12px;
  padding: 15px 16px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04);
}
.modal-section:last-of-type { margin-bottom: 0; }
.modal-section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 13px; }
.modal-section-head .bi { font-size: 14px; color: var(--brand-primary); }
.modal-section-amber .modal-section-head .bi { color: #f59e0b; }
.modal-section-title {
  font-size: 11px; font-weight: 700; letter-spacing: .7px;
  text-transform: uppercase; color: #6a7576;
}
.modal-section-hint { font-size: 11.5px; color: #99a2a0; font-weight: 500; }

/* Reward modal — rifinitura grafica delle sezioni (scoped a #rm-modal per non
   toccare le modali condizione). Icona di sezione → badge tondeggiante ambra che
   riecheggia l'icona in testata; hairline sotto l'intestazione per struttura. */
#rm-modal .modal-section {
  border-radius: 14px;
  transition: box-shadow .15s ease, border-color .15s ease;
}
#rm-modal .modal-section:focus-within {
  border-color: #f1d9a6;
  box-shadow: 0 2px 10px rgba(245,158,11,0.10);
}
#rm-modal .modal-section-head {
  gap: 9px;
  padding-bottom: 11px;
  border-bottom: 1px solid #f2f0ea;
}
#rm-modal .modal-section-head .bi {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  background: #fff7e6; color: #f59e0b;
}
#rm-modal .modal-section-title { color: #55606a; }

/* Reward modal: dropzone immagine (placeholder) */
.rm-upload {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px dashed #d2cfc6; border-radius: 10px;
  padding: 11px 14px; background: #fbfaf7; color: #99a2a0;
}
.rm-upload .bi { font-size: 20px; color: #c8c5bc; }
/* Chip ID del reward nel modal: visibile, non modificabile */
.rm-id-chip {
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  color: #6a7576; background: #efede6; border: 1px solid #e3e1da;
  border-radius: 20px; padding: 2px 10px; font-family: var(--bs-font-monospace, monospace);
}
.rm-id-chip .bi { font-size: 11px; color: #99a2a0; }
.rm-upload-txt { font-size: 12.5px; font-weight: 600; color: #99a2a0; }
.rm-upload-soon {
  font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: #b9a14a; background: #fdf6e3; border: 1px solid #f1e3b0;
  border-radius: 20px; padding: 2px 9px; margin-left: auto;
}

/* Reward modal: "Valore del bonus" come radio button a selezione singola */
.rm-radio { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.rm-radio .form-check { margin: 0; padding-left: 1.7em; }
.rm-radio .form-check-label { font-size: 13.5px; color: #3f4b4d; cursor: pointer; }
.rm-radio .form-check-input { cursor: pointer; }
.rm-radio .form-check-input:checked { background-color: var(--brand-primary);
  border-color: var(--brand-primary); }

/* Reward modal: legenda "* solo nei journey" sotto i radio Valore del bonus */
.rm-vb-note { font-size: 11.5px; line-height: 1.35; margin-top: 2px; }
.rm-vb-note .bi { color: var(--brand-primary); }
.rm-journey-mark { color: var(--brand-primary); font-weight: 700; }

/* Reward modal: tabella fasce (tiers) */
.rm-tiers-table {
  border: 1px solid #eceae3; border-radius: 10px;
  padding: 10px 12px; background: #fbfaf7;
}
.rm-tier-head { margin-bottom: 4px; }
.rm-tier-head small { font-size: 10.5px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: #99a2a0; }
.rm-tier-del { color: #c0574a !important; font-size: 15px; }
.rm-tier-del:hover { color: #a23d31 !important; }
.rm-tier-add { font-size: 13px; font-weight: 600; text-decoration: none; }

/* Condition modal: box riepilogo evidenziato (teal) */
.cm-recap-box {
  background: var(--brand-primary-tint);
  border: 1px solid #cddce1;
  border-left: 3px solid var(--brand-primary);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 13.5px;
  color: #2c424b;
  min-height: 42px;
}
.cm-recap-box .alert { background: transparent !important; border: none !important;
  padding: 0 !important; margin: 0 !important; color: inherit !important; font-size: 13.5px; }

/* ── DataTable pagine-lista (Journey / Leaderboard) ───────────────────────── */
.dash-table-container { background: #fff; border: 1px solid #e3e1da; border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05); overflow: hidden; }
/* Il font di default della DataTable è monospace: riallineato al font UI */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .dash-cell,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .dash-header {
  font-family: var(--font-ui) !important;
  font-size: 13.5px;
}
.dash-table-container .dash-header {
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #6a7576 !important;
  background: #f7f5f0 !important;
}
.dash-table-container .dash-cell a { color: var(--brand-primary); text-decoration: none; font-weight: 600; }
.dash-table-container .dash-cell a:hover { text-decoration: underline; }
/* colonna Nome: cliccabile (apre il builder) */
.dash-table-container td[data-dash-column="name"]:hover { text-decoration: underline; }
.dash-table-container .column-header--sort { color: #99a2a0; }
.dash-table-container input.dash-filter--case { border-radius: 6px !important; }
.dash-table-container .dash-filter input {
  font-size: 12px !important; color: #414c50 !important;
}
/* la colonna azioni (🗑) non ha filtro utile: nasconde l'input filtro */
.dash-table-container th[data-dash-column="del"] .dash-filter { visibility: hidden; }

/* ── Icona ⓘ di aiuto accanto alle label di form (components/help.py) ─────── */
.field-help { color: #99a2a0; cursor: help; font-size: 13px; line-height: 1; }
.field-help:hover { color: var(--brand-primary); }

/* ── Modale condizione v2 — trigger a blocchi (docs/trigger_blocks.md, fase 2) ──
   Zone numerate: marker teal, campi su card bianche uniformi (.modal-section);
   il cumulato NON ha colore proprio (blocco neutro dentro la sua card), recap in
   banda teal con badge frequenza. L'accento corallo resta ai soli micro-indicatori
   (chip attiva, badge "può scattare più volte"). */
.cm2-marker {
  flex: none; width: 21px; height: 21px; border-radius: 50%;
  background: var(--brand-primary); color: #fff;
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.cm2-event-select { font-weight: 600; }
.cm2-chips { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.cm2-chips-label { font-size: 11px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: #99a2a0; }
.cm2-chip {
  font-size: 12px; font-weight: 500; cursor: pointer;
  background: #f6f4ee; color: #6a7576;
  border: 1px solid #e3e1da; border-radius: 20px; padding: 2px 11px;
}
.cm2-chip:hover { border-color: var(--brand-accent); color: var(--brand-accent); }
.cm2-chip-active, .cm2-chip-active:hover {
  background: var(--brand-accent); color: #fff;
  border-color: var(--brand-accent); font-weight: 600;
}
.cm2-chip-active::before { content: "\2713"; margin-right: 5px; font-weight: 700; }
.cm2-radio .form-check-label { font-size: 13.5px; color: #3f4b4d; cursor: pointer; }
.cm2-radio .form-check-input { cursor: pointer; }
.cm2-radio .form-check-input:checked { background-color: var(--brand-primary);
  border-color: var(--brand-primary); }
.cm2-check .form-check-label { font-size: 13px; color: #3f4b4d; cursor: pointer; }
/* cumulato: nessun colore proprio — i campi vivono sulla card bianca della Zona 4 */
.cm2-agg-box { background: transparent; border: 0; padding: 0; }
.cm2-note { font-size: 11.5px; color: #99a2a0; }
/* sotto-etichetta dei blocchi interni (es. "Come scatta" / "Ogni quanto…") */
.cm2-sublabel { font-weight: 600; color: #3f4b4d; }
.cm2-recap-band {
  background: var(--brand-primary-tint);
  border: 1px solid #cddce1; border-left: 3px solid var(--brand-primary);
  border-radius: 10px; padding: 11px 14px;
  font-size: 13.5px; font-weight: 500; color: #2c424b; min-height: 42px;
}
.cm2-freq-pill {
  display: inline-block; margin-top: 7px; padding: 1px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 600;
}
.cm2-freq-pill:empty { display: none; }
.cm2-freq-once  { color: var(--brand-primary); border: 1px solid var(--brand-primary); }
.cm2-freq-multi { color: var(--brand-accent);  border: 1px solid var(--brand-accent); }