/* ============================================================
   CLIENTI v2 — Tag clienti + Raccomandazioni (patch CSS drop-in)
   Carica DOPO css/settings.css
   ============================================================ */

/* ── TAG CLIENTI ─────────────────────────────────────────── */
.client-tags-section .template-stats,
.client-tags-section .template-controls { display: none !important; }

.client-tags-section .section-header { align-items: center; }
.ct2-headline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ct2-sub { font-size: .76rem; color: var(--text-muted); margin-top: 3px; }

.ct2-btn {
  font-family: inherit; font-size: .8rem; font-weight: 650; border-radius: 9px;
  padding: 9px 15px; cursor: pointer; border: 1px solid var(--border-medium);
  background: var(--bg-surface-raised); color: var(--text-heading);
  transition: all .16s ease; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.ct2-btn:hover { border-color: var(--gradient-app-start, #6d81e9); color: var(--gradient-app-start, #6d81e9); }
.ct2-btn.primary { background: var(--gradient-app-start, #6d81e9); border-color: transparent; color: #fff; }
.ct2-btn.primary:hover { filter: brightness(1.09); color: #fff; }
.ct2-btn.sm { padding: 6px 12px; font-size: .76rem; border-radius: 8px; }
.ct2-btn.icon { width: 32px; height: 32px; padding: 0; justify-content: center; flex: 0 0 auto; }
.ct2-btn.danger:hover { border-color: var(--danger); color: var(--danger); }
.ct2-btn svg { flex-shrink: 0; }

/* lista */
#client-tags-list.ct2-list { display: block; padding: 4px 0 0; background: none; border: 0; gap: 0; }
.ct2-row {
  display: grid; grid-template-columns: 18px auto minmax(0, 1fr) auto auto;
  align-items: center; gap: 14px; padding: 11px 12px; border-radius: 12px;
  transition: background .16s ease;
}
.ct2-row + .ct2-row { box-shadow: inset 0 1px 0 var(--border-lightest); }
.ct2-row:hover { background: var(--bg-hover); }
.ct2-row.dragging { opacity: .4; }
.ct2-row.over { background: color-mix(in srgb, var(--gradient-app-start, #6d81e9) 10%, transparent); box-shadow: inset 0 2px 0 var(--gradient-app-start, #6d81e9); }
.ct2-grip { color: var(--border-strong); cursor: grab; display: grid; place-items: center; }
.ct2-row:hover .ct2-grip { color: var(--text-muted); }
.ct2-badge {
  font-size: .76rem; font-weight: 700; border-radius: 50px; padding: 5px 13px;
  line-height: 1.25; white-space: nowrap; box-shadow: 0 1px 2px var(--shadow-sm);
}
.ct2-desc { font-size: .79rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct2-desc em { font-style: normal; opacity: .6; }
.ct2-use { font-size: .76rem; color: var(--text-muted); white-space: nowrap; }
.ct2-use b { color: var(--text-heading); font-weight: 700; }
.ct2-acts { display: flex; align-items: center; gap: 6px; }
.ct2-empty { text-align: center; padding: 34px 20px; color: var(--text-muted); font-size: .83rem; }
.ct2-empty strong { display: block; margin-bottom: 5px; color: var(--text-heading); font-size: .9rem; }
.ct2-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 2px 0; margin-top: 8px; border-top: 1px solid var(--border-light); font-size: .75rem; color: var(--text-muted); }

/* form */
.client-tags-section .form-card { background: var(--bg-surface-alt); border-radius: 14px; }
.ct2-formgrid { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 26px; align-items: start; }
.ct2-formgrid .form-row { display: block; }
.client-tags-section #client-tag-ordine { display: none; }
.client-tags-section .ct2-hide { display: none !important; }

.client-tags-section .color-preset-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 7px; }
.client-tags-section .color-preset {
  width: auto; height: auto; aspect-ratio: 1; border-radius: 8px; border: 2px solid transparent;
  cursor: pointer; padding: 0; display: grid; place-items: center;
  color: var(--ct2-ink, #fff); font-size: .8rem; font-weight: 800; line-height: 1;
  transition: transform .16s ease;
}
.client-tags-section .color-preset:hover { transform: scale(1.12); }
.client-tags-section .color-preset.selected { border-color: var(--text-heading); }
.client-tags-section .color-preset.selected::after { content: '✓'; }

.ct2-preview { border: 1px solid var(--border-light); border-radius: 12px; background: var(--bg-surface); padding: 16px; }
.ct2-preview-lab { font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; }
.ct2-prevclient { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; background: var(--bg-surface-alt); border: 1px solid var(--border-lightest); }
.ct2-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-hover-medium); color: var(--text-muted); display: grid; place-items: center; font-size: .74rem; font-weight: 700; flex-shrink: 0; }
.ct2-prevbody { min-width: 0; }
.ct2-prevbody > strong { display: block; font-size: .82rem; font-weight: 650; color: var(--text-heading); }
.ct2-prevrow { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.client-tags-section .tag-preview-container { padding: 0; background: none; border: 0; min-height: 0; }
.client-tags-section #client-tag-preview {
  font-size: .76rem; font-weight: 700; border-radius: 50px; padding: 5px 13px;
  line-height: 1.25; text-transform: none; letter-spacing: 0; box-shadow: 0 1px 2px var(--shadow-sm);
}
.ct2-hint { font-size: .71rem; color: var(--text-muted); margin-top: 6px; line-height: 1.45; }

/* ── RACCOMANDAZIONI ─────────────────────────────────────── */
#raccomandazioni-training-section.rc2-merged { display: none !important; }
#raccomandazioni-dieta-section .client-reco-summary,
#raccomandazioni-dieta-section .rc2-hide { display: none !important; }

.rc2-tabs { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.rc2-tab {
  font-family: inherit; font-size: .79rem; font-weight: 650; border-radius: 9px; padding: 8px 14px;
  cursor: pointer; border: 1px solid transparent; background: transparent; color: var(--text-muted);
  transition: all .16s ease; display: inline-flex; align-items: center; gap: 8px;
}
.rc2-tab:hover { color: var(--text-heading); }
.rc2-tab.on { background: var(--bg-surface-raised); border-color: var(--border-medium); color: var(--text-heading); box-shadow: 0 1px 2px var(--shadow-sm); }
.rc2-pip { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
.rc2-tab.filled .rc2-pip { background: var(--success, #48bb78); }
.rc2-status { margin-left: auto; font-size: .73rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 7px; }
.rc2-status.dirty { color: var(--warning, #f8c662); }

.rc2-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 24px; align-items: start; }
.rc2-panel[hidden] { display: none; }
.rc2-help { font-size: .78rem; line-height: 1.55; color: var(--text-muted); margin: 0 0 14px; }
.rc2-snips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.rc2-snip {
  font-family: inherit; font-size: .73rem; font-weight: 600; border-radius: 50px; padding: 5px 12px;
  cursor: pointer; border: 1px dashed var(--border-medium); background: transparent;
  color: var(--text-secondary); transition: all .16s ease;
}
.rc2-snip:hover { border-style: solid; border-color: var(--gradient-app-start, #6d81e9); color: var(--gradient-app-start, #6d81e9); }
#raccomandazioni-dieta-text, #raccomandazioni-training-text { min-height: 170px; line-height: 1.6; resize: vertical; }
.rc2-meta { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-top: 6px; }
.rc2-count { font-size: .71rem; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc2-count.warn { color: var(--warning, #f8c662); }

.rc2-doc { border: 1px solid var(--border-light); border-radius: 12px; background: var(--bg-surface); overflow: hidden; }
.rc2-doc-top { display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-bottom: 1px solid var(--border-lightest); background: var(--bg-surface-sunken); font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.rc2-doc-page { padding: 16px 15px; min-height: 170px; }
.rc2-doc-h { font-size: .82rem; font-weight: 700; color: var(--text-heading); padding-bottom: 7px; border-bottom: 1px solid var(--border-light); margin-bottom: 10px; }
.rc2-doc-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.rc2-doc-list li { font-size: .78rem; line-height: 1.5; color: var(--text-secondary); padding-left: 15px; position: relative; }
.rc2-doc-list li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--gradient-app-start, #6d81e9); }
.rc2-doc-list li.rc2-doc-empty { padding-left: 0; font-style: italic; color: var(--text-muted); }
.rc2-doc-list li.rc2-doc-empty::before { display: none; }
.rc2-doc-note { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border-light); font-size: .72rem; color: var(--text-muted); line-height: 1.5; }

#raccomandazioni-dieta-section .form-actions,
#raccomandazioni-dieta-section .rc2-panel .form-actions {
  display: flex; align-items: center; gap: 10px; margin-top: 18px;
  padding-top: 14px; border-top: 1px solid var(--border-light);
}
#raccomandazioni-dieta-section .form-actions .btn-danger { margin-left: auto; }

@media (max-width: 880px) {
  .ct2-formgrid, .rc2-body { grid-template-columns: 1fr; }
  .ct2-row { grid-template-columns: 18px auto 1fr; row-gap: 8px; }
  .ct2-use, .ct2-acts { grid-column: 2 / -1; }
  .ct2-acts { justify-content: flex-end; }
}