/* ===================== DASHBOARD LAYOUT ===================== */

/* Contenitore centrato */
.dashboard-wrapper {
  max-width: 900px;
  margin: 0 auto;
}

/* Card compatta */
.stat-card {
  border: none;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
}

/* Testo e numero */
.stat-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: #6b7280;
}

.stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  color: #111827;
}

.stat-subtext {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-top: 0.2rem;
}

/* Icone piccole e tonde */
.stat-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #fff;
}

/* Varianti di colore */
.stat-icon--blue {
  background: #1a73e8;
  box-shadow: 0 4px 14px rgba(26, 115, 232, 0.35);
}

.stat-icon--green {
  background: #16a34a;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
}

.stat-icon--orange {
  background: #f97316;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
}

/* ===================== TABELLE ===================== */
.table-hover tbody tr:hover {
  background-color: #f9fafb;
}

.table thead input,
.table thead select {
  font-size: 0.8rem;
  padding: 0.2rem 0.4rem;
}

.table thead th {
  vertical-align: middle;
}

/* ===================== BOTTONI ===================== */
.btn-success.btn-lg {
  font-size: 1.1rem;
  padding: 0.6rem 1.2rem;
  border-radius: 12px;
}

/* ===================== MODALI ===================== */
.modal-xl .modal-content {
  border-radius: 12px;
  overflow: hidden;
}

/* Spinner nel modal */
#modalLoading .spinner-border {
  width: 2.5rem;
  height: 2.5rem;
}

/* ===================== UTILITIES ===================== */
.badge.text-bg-warning.text-dark {
  color: #000 !important;
}

/* ================== MODALE "NUOVA VISITA" ================== */
#nuovaVisitaModal .modal-content {
  border: none;
  border-radius: 16px;
  background: linear-gradient(145deg, #ffffff, #f3f6fa);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

#nuovaVisitaModal .modal-header {
  background: linear-gradient(90deg, #007bff, #00b4d8);
  color: white;
  border-bottom: none;
  padding: 1rem 1.25rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#nuovaVisitaModal .modal-title {
  font-weight: 600;
  letter-spacing: 0.3px;
}

#nuovaVisitaModal .btn-close {
  filter: brightness(0) invert(1); /* bottone chiudi bianco */
}

#nuovaVisitaModal .modal-body {
  background-color: #f8f9fb;
  padding: 1.25rem 1.5rem;
}

/* ================== CARD SECTION ================== */
#nuovaVisitaModal .card {
  border: none;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease-in-out;
}

#nuovaVisitaModal .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

#nuovaVisitaModal .card-header {
  border-bottom: none;
  font-weight: 600;
  background: linear-gradient(90deg, #f8f9fa, #eef1f5);
  color: #333;
  border-radius: 12px 12px 0 0;
}

#nuovaVisitaModal .form-label {
  font-weight: 500;
  color: #555;
}

#nuovaVisitaModal .form-control,
#nuovaVisitaModal .form-select {
  border-radius: 8px;
  border: 1px solid #dee2e6;
  transition: box-shadow 0.2s;
}

#nuovaVisitaModal .form-control:focus,
#nuovaVisitaModal .form-select:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

/* ================== BOTTONI ================== */
#nuovaVisitaModal .modal-footer,
#nuovaVisitaModal .card .d-flex.pt-2 {
  background: transparent;
  border-top: none;
}

#nuovaVisitaModal .btn-primary {
  background: linear-gradient(90deg, #007bff, #00b4d8);
  border: none;
  font-weight: 600;
  transition: 0.2s ease-in-out;
}

#nuovaVisitaModal .btn-primary:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 14px rgba(0, 123, 255, 0.3);
}

#nuovaVisitaModal .btn-secondary {
  background: #e9ecef;
  border: none;
  color: #333;
}

/* ================== PICCOLE FINITURE ================== */
#nuovaVisitaModal h6,
#nuovaVisitaModal .fw-semibold {
  color: #1e2a37;
}

#nuovaVisitaModal .badge.text-bg-success {
  background: linear-gradient(90deg, #198754, #20c997);
}

#nuovaVisitaModal .badge.text-bg-warning {
  background: linear-gradient(90deg, #ffc107, #ffcd39);
  color: #333 !important;
}

#nuovaVisitaModal .badge.text-bg-secondary {
  background: linear-gradient(90deg, #adb5bd, #ced4da);
}

#nuovaVisitaModal .card-header {
  font-weight: 600;
  color: #fff;
  border-bottom: none;
  padding: 0.65rem 1rem;
  border-radius: 12px 12px 0 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.15);
}

/* 🎨 Palette gradiente per sezioni */
/* ================== HEADER COLORATI TENUI ================== */

#nuovaVisitaModal .card-header {
  font-weight: 600;
  color: #2d3748;
  border-bottom: none;
  padding: 0.65rem 1rem;
  border-radius: 12px 12px 0 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.05);
  transition: background 0.3s ease-in-out;
}

/* 🎨 Palette delicata e trasparente per sezioni */
#nuovaVisitaModal .section-anagrafica .card-header {
  background: linear-gradient(
    90deg,
    rgba(0, 123, 255, 0.12),
    rgba(0, 180, 216, 0.1)
  );
  color: #004085;
}

#nuovaVisitaModal .section-info-visita .card-header {
  background: linear-gradient(
    90deg,
    rgba(32, 201, 151, 0.12),
    rgba(25, 135, 84, 0.1)
  );
  color: #0f5132;
}

#nuovaVisitaModal .section-importi .card-header {
  background: linear-gradient(
    90deg,
    rgba(139, 255, 7, 0.15),
    rgba(24, 228, 150, 0.12)
  );
  color: #664d03;
}

.section-branche .section-branche-header {
  background: linear-gradient(
    90deg,
    rgba(98, 239, 3, 0.18),
    rgba(142, 213, 35, 0.12)
  ) !important;

  color: #4b2b82 !important;
  border-bottom: 1px solid #d1c4e9;
}

#nuovaVisitaModal .section-incassi .card-header {
  background: linear-gradient(
    90deg,
    rgba(111, 66, 193, 0.15),
    rgba(140, 104, 211, 0.1)
  );
  color: #38225a;
}

#nuovaVisitaModal .section-convenzione .card-header {
  background: linear-gradient(
    90deg,
    rgba(232, 62, 140, 0.15),
    rgba(253, 126, 20, 0.12)
  );
  color: #842029;
}

#nuovaVisitaModal .section-altre-info .card-header {
  background: linear-gradient(
    90deg,
    rgba(23, 162, 184, 0.15),
    rgba(13, 202, 240, 0.12)
  );
  color: #055160;
}

/* 🩵 Testo in leggero rilievo per contrasto soft */
#nuovaVisitaModal .card-header span {
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}

/* Effetto “hover” sottile */
#nuovaVisitaModal .card:hover .card-header {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.7),
    rgba(240, 244, 248, 0.7)
  );
}

/* ================== MODALE "MODIFICA VISITA" (stile coerente) ================== */

#editVisitaModal .modal-content {
  border: none;
  border-radius: 16px;
  background: linear-gradient(145deg, #ffffff, #f3f6fa);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

#editVisitaModal .modal-header {
  background: linear-gradient(90deg, #007bff, #00b4d8);
  color: white;
  border-bottom: none;
  padding: 1rem 1.25rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#editVisitaModal .btn-close {
  filter: brightness(0) invert(1);
}

#editVisitaModal .modal-body {
  background-color: #f8f9fb;
  padding: 1.25rem 1.5rem;
}

/* ================== CARD SECTION ================== */
#editVisitaModal .card {
  border: none;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease-in-out;
}

#editVisitaModal .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

/* ================== HEADER COLORATI TENUI ================== */
#editVisitaModal .card-header {
  font-weight: 600;
  color: #2d3748;
  border-bottom: none;
  padding: 0.65rem 1rem;
  border-radius: 12px 12px 0 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.05);
  transition: background 0.3s ease-in-out;
}

/* 🎨 Palette delicata e trasparente per sezioni */
#editVisitaModal .section-anagrafica .card-header {
  background: linear-gradient(
    90deg,
    rgba(0, 123, 255, 0.12),
    rgba(0, 180, 216, 0.1)
  );
  color: #004085;
}

#editVisitaModal .section-info-visita .card-header {
  background: linear-gradient(
    90deg,
    rgba(32, 201, 151, 0.12),
    rgba(25, 135, 84, 0.1)
  );
  color: #0f5132;
}

#editVisitaModal .section-importi .card-header {
  background: linear-gradient(
    90deg,
    rgba(255, 193, 7, 0.15),
    rgba(255, 179, 71, 0.12)
  );
  color: #664d03;
}

#editVisitaModal .section-incassi .card-header {
  background: linear-gradient(
    90deg,
    rgba(111, 66, 193, 0.15),
    rgba(140, 104, 211, 0.1)
  );
  color: #38225a;
}

#editVisitaModal .section-convenzione .card-header {
  background: linear-gradient(
    90deg,
    rgba(232, 62, 140, 0.15),
    rgba(253, 126, 20, 0.12)
  );
  color: #842029;
}

#editVisitaModal .section-altre-info .card-header {
  background: linear-gradient(
    90deg,
    rgba(23, 162, 184, 0.15),
    rgba(13, 202, 240, 0.12)
  );
  color: #055160;
}

/* 🩵 Testo in leggero rilievo */
#editVisitaModal .card-header span {
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}

/* Hover sottile */
#editVisitaModal .card:hover .card-header {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.7),
    rgba(240, 244, 248, 0.7)
  );
}

/* ================== SEZIONE RICHIAMO (tenue e graduale) ================== */
#nuovaVisitaModal .section-richiamo .card-header,
#editVisitaModal .section-richiamo .card-header {
  background: linear-gradient(
    90deg,
    rgba(255, 165, 0, 0.1),
    rgba(255, 210, 0, 0.08)
  );
  color: #6b4e00;
}

#nuovaVisitaModal .section-richiamo .card-header span,
#editVisitaModal .section-richiamo .card-header span {
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
}

/* Corpo sezione richiamo */
#nuovaVisitaModal .section-richiamo .card-body,
#editVisitaModal .section-richiamo .card-body {
  background: rgba(255, 250, 230, 0.35);
  border-radius: 0 0 12px 12px;
  transition: background 0.2s ease-in-out;
}

/* Quando la sezione è attiva */
#nuovaVisitaModal .section-richiamo .card-body.border-warning,
#editVisitaModal .section-richiamo .card-body.border-warning {
  background: rgba(255, 245, 200, 0.45);
  border-left: 4px solid rgba(255, 193, 7, 0.6);
}

/* Hover */
#nuovaVisitaModal .section-richiamo:hover .card-header,
#editVisitaModal .section-richiamo:hover .card-header {
  background: linear-gradient(
    90deg,
    rgba(255, 193, 7, 0.2),
    rgba(255, 179, 71, 0.15)
  );
}

.frase-giorno-rosa {
  background: linear-gradient(90deg, #ffeaf4 0%, #fff6fb 100%);
  border-left: 5px solid #ff80b5;
  border-radius: 1rem;
  color: #b30d5c;
  font-style: italic;
}

.section-flag i {
  font-size: 1.1rem;
  vertical-align: middle;
}
.section-flag .ok {
  color: #198754; /* verde bootstrap */
}
.section-flag .warn {
  color: #fd7e14; /* arancione bootstrap */
}

.dup-bg-1 {
  background-color: #fff3cd;
} /* giallo chiaro */
.dup-bg-2 {
  background-color: #e7f1ff;
} /* azzurro */
.dup-bg-3 {
  background-color: #e6fffa;
} /* verde acqua */
.dup-bg-4 {
  background-color: #fce7f3;
} /* rosa */
.dup-bg-5 {
  background-color: #f3f4f6;
} /* grigio */

.agenda-pv-wrapper {
  max-width: 520px; /* 🔥 NON full width */
}

.agenda-pv-card {
  border-radius: 14px;
  border: 1px solid #eef2f7;
  background: #ffffff;
}

.agenda-pv-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #6c757d;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.agenda-pv-section {
  padding: 8px 0;
  border-bottom: 1px dashed #eef2f7;
}

.agenda-pv-section:last-child {
  border-bottom: none;
}

.agenda-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  font-size: 0.88rem;
  border-radius: 6px;
  transition: 0.15s;
}

.agenda-item:hover {
  background: #f8f9fc;
}

.agenda-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.agenda-time {
  font-weight: 600;
  font-size: 0.85rem;
  color: #212529;
  min-width: 46px;
}

.agenda-title-text {
  color: #495057;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agenda-empty {
  font-size: 0.8rem;
  color: #adb5bd;
  padding-left: 14px;
}

/* ===== PRIMEVISITE CALENDAR STYLE ===== */

.fc {
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
}

/* header giorni */
.fc-col-header-cell {
  background: #f8fafc;
  font-weight: 600;
  font-size: 13px;
  border-bottom: 1px solid #e5e7eb;
}

/* colonna orari */
.fc-timegrid-axis {
  background: #f8fafc;
  color: #64748b;
  font-weight: 500;
}

/* griglia soft (no excel) */
.fc-timegrid-slot {
  border-color: #f1f5f9 !important;
}

/* colonna oggi */
.fc-day-today {
  background: rgba(59, 130, 246, 0.05) !important;
}

/* eventi stile SaaS */
.fc-event {
  border-radius: 10px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  border: none !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

/* testo evento */
.fc-event-title {
  font-weight: 600;
}

/* nasconde mezzanotte */
.fc-timegrid-slot-label[data-time="00:00:00"] {
  display: none;
}

/* modal agenda più premium */
#agendaHomeModal .modal-content {
  border-radius: 16px;
}

.agenda-floating {
  position: absolute;
  top: 90px;
  right: 40px;
  width: 320px;
  z-index: 100;
  animation: fadeSlide 0.2s ease-out;
}

@keyframes fadeSlide {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.agenda-badge-urgent {
  animation: pulseAgenda 1s infinite;
}

@keyframes pulseAgenda {
  0% {
    transform: translate-middle scale(1);
  }
  50% {
    transform: translate-middle scale(1.2);
  }
  100% {
    transform: translate-middle scale(1);
  }
}

#suggestionsBox {
  position: absolute;
  z-index: 2000; /* sopra le card */
  background: #fff;
}

.section-anagrafica {
  position: relative;
  z-index: 10;
}

#modalHelpImporti .modal-body {
  max-height: 70vh;
  overflow-y: auto;
}

/* ================== TIMELINE STATO VISITA (dettaglio e modifica) ================== */
.vtl {
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: .75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.vtl--fissa {
  position: sticky;
  top: 0;
  z-index: 5;
}

.vtl-fasi {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.vtl-fase {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  padding-right: .75rem;
}

.vtl-fase:last-child {
  padding-right: 0;
}

/* Tratto che collega ogni fase alla successiva */
.vtl-fase::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 28px;
  right: 0;
  height: 2px;
  background: var(--bs-border-color);
}

.vtl-fase:last-child::before {
  display: none;
}

.vtl-fase--fatto::before {
  background: var(--bs-success);
}

.vtl-pallino {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: .9rem;
  color: #fff;
}

.vtl-fase--fatto .vtl-pallino { background: var(--bs-success); }
.vtl-fase--corso .vtl-pallino { background: var(--bs-primary); }
.vtl-fase--attenzione .vtl-pallino { background: var(--bs-warning); color: #000; }
.vtl-fase--problema .vtl-pallino,
.vtl-fase--negativo .vtl-pallino { background: var(--bs-danger); }
.vtl-fase--attesa .vtl-pallino { background: #fff; border: 2px solid #ced4da; }

.vtl-testo {
  margin-top: .4rem;
}

.vtl-titolo {
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.25;
}

.vtl-fase--attesa .vtl-titolo { color: var(--bs-secondary-color); }
.vtl-fase--problema .vtl-titolo,
.vtl-fase--negativo .vtl-titolo { color: var(--bs-danger-text-emphasis); }

.vtl-riga {
  font-size: .8rem;
  line-height: 1.3;
  color: var(--bs-secondary-color);
  overflow-wrap: anywhere;
}

.vtl-progresso {
  height: 5px;
  max-width: 130px;
  margin-top: .3rem;
}

.vtl-parallele {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .5rem;
  list-style: none;
  margin: .75rem 0 0;
  padding: 0;
}

.vtl-parallela {
  font-size: .8rem;
  padding: .15rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
}

.vtl-parallela--fatto { background: var(--bs-success-bg-subtle); border-color: var(--bs-success-border-subtle); }
.vtl-parallela--corso { background: var(--bs-primary-bg-subtle); border-color: var(--bs-primary-border-subtle); }

.vtl-prossimo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .5rem;
  margin-top: .75rem;
  padding-top: .6rem;
  border-top: 1px solid var(--bs-border-color);
  font-size: .9rem;
}

.vtl-prossimo-testo {
  flex: 1 1 12rem;
  min-width: 0;
}

.vtl-prossimo--problema > i { color: var(--bs-danger); }
.vtl-prossimo--attenzione > i { color: #b58900; }
.vtl-prossimo--corso > i { color: var(--bs-primary); }
.vtl-prossimo--ok > i { color: var(--bs-success); }
.vtl-prossimo--neutro { color: var(--bs-secondary-color); }

.vtl-anteprima {
  margin-left: auto;
  font-size: .75rem;
  font-style: italic;
  color: var(--bs-secondary-color);
}

.vtl-storia {
  margin-bottom: 1rem;
  padding: 0 .25rem;
  font-size: .85rem;
}

.vtl-storia summary {
  cursor: pointer;
  color: var(--bs-secondary-color);
}

.vtl-storia-elenco {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
}

.vtl-storia-elenco li {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .75rem;
  padding: .3rem 0;
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

.vtl-storia-data {
  min-width: 7.5rem;
  color: var(--bs-secondary-color);
  font-variant-numeric: tabular-nums;
}

.vtl-storia-utente {
  margin-left: auto;
  color: var(--bs-secondary-color);
}

/* Su schermi bassi la barra fissa ruberebbe troppo spazio al modulo */
@media (max-height: 700px), (max-width: 767.98px) {
  .vtl--fissa {
    position: static;
  }
}

/* Su telefono le fasi vanno in colonna, col tratto in verticale */
@media (max-width: 767.98px) {
  .vtl-fasi {
    flex-direction: column;
  }

  .vtl-fase {
    display: flex;
    gap: .75rem;
    padding: 0 0 .75rem;
  }

  .vtl-fase:last-child {
    padding-bottom: 0;
  }

  .vtl-fase::before {
    top: 28px;
    bottom: 0;
    left: 13px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .vtl-pallino {
    flex: 0 0 28px;
  }

  .vtl-testo {
    margin-top: .2rem;
  }
}

/* ================== NUOVA VISITA: esito, riepilogo importi, riassunti delle sezioni ================== */
.vn-esito .btn {
  width: 100%;
  font-weight: 600;
}

.vn-riepilogo {
  font-size: .9rem;
  padding: .5rem .75rem;
  border-radius: 8px;
  background: var(--bs-tertiary-bg);
  overflow-wrap: anywhere;
}

.vn-riassunto {
  font-weight: 400;
  font-size: .85rem;
  color: var(--bs-secondary-color);
  margin-left: .5rem;
}

.vn-autoaltezza {
  resize: vertical;
  overflow-y: auto;
}

/* Modifica a pagina intera: su telefono il bottone va sotto il nome, non sopra */
@media (max-width: 767.98px) {
  .vm-titolo {
    flex-direction: column;
    gap: .5rem;
    text-align: center;
  }

  .vm-titolo .btn {
    position: static !important;
    transform: none !important;
  }
}