@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Inconsolata:wght@200..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
/* ================================
   Palette - Definizione Variabili
================================ */
:root {
  /* Accent color Scale */
  --white: #fdfdff;
  --accent-1: #fdfdff;
  --accent-2: #f7f9ff;
  --accent-3: #edf1ff;
  --accent-4: #e0e8ff;
  --accent-5: #d2ddff;
  --accent-6: #c1ceff;
  --accent-7: #aabaff;
  --accent-8: #8d9eff;
  --accent-9: #5151f9;
  --accent-10: #4747de;
  --accent-11: #494ae1;
  --accent-12: #22266b;


  /* Color for echart & graph / calendar event */
  --color-1: #fe7f2d;
  --color-2: #fcca46;
  --color-3: #a1c181;
  --color-4: #233d4d;
  --color-5: #619b8a;
  --color-6: #e9d8a6;

  /* Color border  */
  --color-1-border: #d96c26;
  --color-2-border: #d4a63d;
  --color-3-border: #8ca06f;
  --color-4-border: #1d323e;
  --color-5-border: #517c6e;
  --color-6-border: #bdb088;

  /* Gray-Orange Scale */
  --gray-1: #fffcfb;
  --gray-2: #fbf8f7;
  --gray-3: #f4efed;
  --gray-4: #eee7e4;
  --gray-5: #e7dfdc;
  --gray-6: #e1d7d3;
  --gray-7: #d8ccc7;
  --gray-8: #c6b8b2;
  --gray-9: #978984;
  --gray-10: #8c7f79;
  --gray-11: #6c5f5a;
  --gray-12: #2c2c2c;

  /* Box shadow-color */
  --box-shadow-color: rgba(0, 0, 0, 0.2); /* Ombra scura per il tema chiaro */

  /* Success Color */
  --success-color: #4caf50;
  --success-bg: #a1c181;
  --success-bg-hover: #619b8a;

  /* Error Color */
  --error-color: #f44336;
  --error-bg: #ffebee;

  /* Icon color */
  --telephone-color: #29b224; /* per le icone delle card contratti relativi al cliente*/
  --wifi-color: #0183ff; /* per le icone delle card contratti relativi al cliente*/
  --light-bulb-color: #ffcc01; /* per le icone delle card contratti relativi al cliente*/
  --orange-flame-color: #e46020; /* per le icone delle card contratti relativi al cliente*/

  /* Calendar event color */
  --generic-event-bg: #d5f0da;
  --customer-event-bg: #d1ecf1;
  --contract-event-bg: #fdeccc;
  --learning-event-bg: #f7d7d7;
  --reunion-event-bg: #d2e1f3;

  /* Stile font */
  /* Font */
  --font-primary: "Inter", sans-serif;

  /* Font sizes */
  --font-size-h1: 28px;
  --font-size-h2: 24px;
  --font-size-h3: 20px;
  --font-size-h4: 18px; /* Menu principali */
  --font-size-h5: 16px; /* Menu secondari */
  --font-size-body: 14px;
  --font-size-small: 12px;

  /* Font weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Letter spacing */
  --letter-spacing-tight: -0.5px;
  --letter-spacing-normal: 0px;
  --letter-spacing-wide: 0.5px;

  /* Line height */
  --line-height-small: 1.2;
  --line-height-normal: 1.5;
  --line-height-large: 1.8;
}

/* ================================
   Palette - Tema Scuro
================================ */
[data-theme="dark"] {
  /* Accent color Scale (Dark Mode) */
  --white: #fdfdff;
  --accent-1: #0d101e; /* Sfondo più scuro */
  --accent-2: #121629;
  --accent-3: #1b2051;
  --accent-4: #232670;
  --accent-5: #2c3083;
  --accent-6: #353b93;
  --accent-7: #3f47a9;
  --accent-8: #4b54c7;
  --accent-9: #8d9eff; /* Colore principale */
  --accent-10: #aabaff;
  --accent-11: #c1ceff; /* Grigio chiaro */
  --accent-12: #d2ddff;

  /* Color for echart & graph / calendar event */
  --color-1: #fe7f2d;
  --color-2: #fcca46;
  --color-3: #a1c181;
  --color-4: #233d4d;
  --color-5: #619b8a;
  --color-6: #e9d8a6;

  /* Color border  */
  --color-1-border: #d96c26;
  --color-2-border: #d4a63d;
  --color-3-border: #8ca06f;
  --color-4-border: #1d323e;
  --color-5-border: #517c6e;
  --color-6-border: #bdb088;

  /* Gray-Orange Scale (Dark Mode) */
  --gray-1: #292929;
  --gray-2: #1a1624;
  --gray-3: #121212;
  --gray-4: #2a2636;
  --gray-5: #322e3e;
  --gray-6: #3b3747;
  --gray-7: #494456;
  --gray-8: #615d6f;
  --gray-9: #6e6a7c; /* Testo primario */
  --gray-10: #7b778a; /* Testo secondario */
  --gray-11: #b4b0c4; /* Testo chiaro */
  --gray-12: #eeebfa; /* Bianco puro */

  /* Box Shadow color */
  --box-shadow-color: rgba(0, 0, 0, 0.3); /* Ombra scura per il tema scuro */

  /* Success Color */
  --success-color: #66bb6a; /* Verde meno brillante */
  --success-bg: #a1c181;
  --success-bg-hover: #619b8a; /* Verde più scuro per hover */

  /* Error Color */
  --error-color: #ef5350; /* Rosso meno acceso */
  --error-bg: #b71c1c;

  /* Icon Colors */
  --telephone-color: #4caf50;
  --wifi-color: #42a5f5;
  --light-bulb-color: #ffeb3b;
  --orange-flame-color: #ff5722;
}
/* ================================
  Mobile Adjustments
================================ */
@media (max-width: 768px) {
  :root {
    --font-size-h1: 28px;
    --font-size-h2: 22px;
    --font-size-h3: 18px;
    --font-size-h4: 16px;
    --font-size-h5: 14px;
    --font-size-body: 14px;
    --font-size-small: 12px;
  }
}

/* ================================
   Global Styles
================================ */
/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-primary) !important;
  user-select: none;
  -webkit-user-select: none; /* Supporto per browser WebKit */
  -ms-user-select: none; /* Supporto per browser Microsoft */
  -moz-user-select: none; /* Supporto per browser Mozilla */
}
/* ================================
   Box shadow
================================ */
.shadow-cc {
  box-shadow: 0 0.2rem 0.5rem var(--box-shadow-color);
}

/* ================================
   Layout - Sfondi e Bordi
================================ */
.bg-primary-cc {
  background-color: var(--gray-1);
}

.bg-secondary-cc {
  background-color: var(--gray-2);
}

.bg-highlight-cc {
  background-color: var(--accent-4);
}

.border-primary-cc {
  border-color: var(--gray-6);
}

.border-secondary-cc {
  border-color: var(--gray-7);
}

.border-highlight-cc {
  border-color: var(--accent-7);
}

/* ================================
   Testo
================================ */
h1,
.h1 {
  font-size: var(--font-size-h1);
}
h2,
.h2 {
  font-size: var(--font-size-h2);
}
h3,
.h3 {
  font-size: var(--font-size-h3);
}
h4,
.h4 {
  font-size: var(--font-size-h4);
}
h5,
.h5 {
  font-size: var(--font-size-h5);
}
p {
  font-size: var(--font-size-body);
}

.text-primary-cc {
  color: var(--gray-12);
}

.text-secondary-cc {
  color: var(--gray-11);
}

.text-accent-cc {
  color: var(--accent-11);
}

.text-inverse-cc {
  color: var(--accent-1);
}

.text-danger-cc {
  color: var(--error-color);
}

/* ================================
   Pulsanti
================================ */
.btn-sm-cc {
  max-height: 30px !important;
  padding: 0.2rem 0.5rem !important;
}
.btn-md-cc {
  max-height: 40px;
  padding: 0.2rem 0.8rem !important;
}
.btn-primary-cc {
  min-height: 36px;
  min-width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--accent-9);
  color: var(--white) !important;
  border: 1px solid var(--accent-7);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  max-width: max-content;
}

.btn-primary-cc:hover {
  background-color: var(--accent-10);
}

.btn-primary-cc:disabled,
.btn-primary-outline-cc:disabled {
  background-color: var(--gray-5);
  color: var(--gray-12);
  border-color: var(--gray-7);
  cursor: not-allowed;
}

.btn-secondary-cc {
  display: flex;
  align-items: center;
  gap: 3px;
  background-color: var(--gray-4);
  color: var(--gray-12);
  border: 1px solid var(--gray-6);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  max-width: max-content;
}

.btn-secondary-cc:hover {
  background-color: var(--gray-5);
}

/* ================================
   Pulsanti con Outline
================================ */

/* Outline Primary */
.btn-primary-outline-cc {
  min-height: 36px;
  min-width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: var(--gray-2);
  color: var(--accent-9);
  border: 2px solid var(--accent-9);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  max-width: max-content;
}

.btn-primary-outline-cc:hover:not(:disabled),
.btn-primary-outline-cc.selected {
  background-color: var(--accent-9);
  color: var(--accent-1);
  border-color: var(--accent-10);
}

/* Outline Secondary */
.btn-secondary-outline-cc {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: transparent;
  color: var(--gray-12);
  border: 1px solid var(--gray-6);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
}

.btn-secondary-outline-cc:hover:not(:disabled) {
  background-color: var(--gray-5);
  color: var(--gray-12);
  border-color: var(--gray-7);
}

.btn-danger-outline-cc {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: var(--gray-2);
  color: var(--error-color);
  border: 2px solid var(--error-color);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
}

.btn-danger-outline-cc:hover {
  background-color: var(--error-color);
  color: var(--gray-1);
  border-color: var(--error-color);
}

.btn-danger-outline-cc:disabled {
  background-color: var(--gray-6);
  color: var(--gray-11);
  border-color: var(--gray-6);
}

.btn-danger-outline-cc:disabled:hover {
  background-color: var(--gray-6);
  color: var(--gray-11);
  border-color: var(--gray-6);
}

.btn-danger-cc {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--error-color);
  color: var(--white);
  border: 1px solid var(--error-color);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
}

.btn-danger-cc:hover {
  background-color: #f44336;
  border: 1px solid #f44336;
}

.btn-success-cc {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--success-bg);
  color: var(--white);
  border: 1px solid var(--success-bg);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
}

.btn-success-cc:hover {
  background-color: var(--success-bg-hover);
  border: 1px solid var(--success-bg-hover);
}
/* ================================
   Stile globale per le tabelle
================================ */
/* Stile header della tabella */
.table-custom thead th {
  background-color: var(--gray-3);
  color: var(--gray-12);
  border-bottom: 1px solid var(--gray-6);
}

.table tbody tr:hover {
  background-color: var(--gray-3);
}

/* Colore di background per le tabelle lato client che
    all'interno della riga contengono delle card
  */
.table tbody .custom-row-card-container td {
  background-color: var(--gray-3) !important;
}

.table tbody tr.empty-row {
  background-color: var(--gray-1);
}

/* ===========================
  Fine colorazione tabella
  ============================== */

/* ==================================
  Allineamento verticale degli elementi
  ==================================== */
tr {
  vertical-align: middle;
}

/* ============================ */
/* Input */
/* ============================ */
.input-cc {
  background-color: var(--gray-2);
  border: 1px solid var(--gray-6);
  color: var(--gray-11);
  padding: 0.5em;
  border-radius: 8px;
  width: 100%;
}

.input-cc:focus {
  border-color: var(--accent-7);
  outline: none;
}

/* ================================
   Badge
================================ */
.badge-cc {
  background-color: var(--accent-6);
  color: var(--accent-1);
  padding: 0.2em 0.6em;
  border-radius: 12px;
  font-size: 0.85em;
  font-weight: bold;
}

/* ================================
   Notifiche di Stato
================================ */
.alert-success-cc {
  background-color: #ecfdf3; /* Aggiungi il verde specifico */
  color: #387e62; /* Contrasto */
  border: 1px solid #00500549;
  font-size: 14px;
  padding: 0 0.5rem;
  font-weight: 600;
  border-radius: 20px;
  min-width: 100px;
  max-width: max-content;
  margin: auto;
  display: flex;
  align-items: center !important;
  justify-content: center;
  gap: 5px;
}

.percentage-success-cc {
  background-color: #ecfdf3; /* Aggiungi il verde specifico */
  color: #387e62; /* Contrasto */
  border: 1px solid #00500549;
  font-size: 14px;
  padding: 0 0.5rem;
  font-weight: 600;
  border-radius: 20px;
  margin: 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 25px;
}

.icon-success-cc {
  color: #387e62;
  border-radius: 50%;
  font-size: var(--font-size-h4);
  margin-bottom: 0;
}

.alert-warning-cc {
  background-color: #fff3e0; /* Aggiungi il giallo specifico */
  color: #f57c00;
  border: 1px solid #ffb74d;
  font-size: 14px;
  font-weight: 600;
  min-width: 100px;
  border-radius: 20px;
  flex-wrap: wrap;
  max-width: max-content;
  margin: auto;
  display: flex;
  align-items: center !important;
  justify-content: center;
  gap: 5px;
}

.percentage-warning-cc {
  background-color: #fff3e0; /* Aggiungi il giallo specifico */
  color: #f57c00;
  border: 1px solid #ffb74d;
  font-size: 14px;
  padding: 0 0.5rem;
  font-weight: 600;
  border-radius: 20px;
  margin: 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 25px;
}

.icon-warning-cc {
  color: #f57c00;
  border-radius: 50%;
  font-size: var(--font-size-h4);
  margin-bottom: 0;
}

.alert-error-cc {
  background-color: #fce4ec; /* Aggiungi il rosso specifico */
  color: #c62828;
  border: 1px solid #e57373;
  font-size: 14px;
  font-weight: 600;
  min-width: 100px;
  border-radius: 20px;
  max-width: max-content;
  margin: auto;
  display: flex;
  align-items: center !important;
  justify-content: center;
  gap: 5px;
}

.percentage-error-cc {
  background-color: #fce4ec; /* Aggiungi il rosso specifico */
  color: #c62828;
  border: 1px solid #e57373;
  font-size: 14px;
  padding: 0 0.5rem;
  font-weight: 600;
  border-radius: 20px;
  margin: 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 25px;
}

.icon-error-cc {
  color: #c62828;
  border-radius: 50%;
  font-size: var(--font-size-h4);
  margin-bottom: 0;
}

.alert-info-cc {
  background-color: var(--accent-3);
  color: var(--accent-12);
  border: 1px solid var(--accent-5);
  padding: 0.5em;
  border-radius: 4px;
}

/* ================================
   Tooltip
================================ */
.tooltip-cc {
  background-color: var(--gray-7);
  color: var(--gray-1);
  padding: 0.2em 0.5em;
  font-size: 0.85em;
  border-radius: 4px;
}

/* ================================
   Bottoni del Menu
================================ */

/* Stile base del bottone */
.btn-menu-cc {
  background-color: var(--gray-1);
  color: var(--gray-11);
  padding: 0.5em; /* Spaziatura standard */
  border-radius: 8px; /* Bordo arrotondato */
  border: 1px solid transparent; /* Bordo invisibile di default */
  font-size: var(--font-size-h5); /* Dimensione coerente con la palette */
  font-weight: var(--font-weight-medium); /* Peso medio per leggibilità */
  line-height: var(--line-height-normal); /* Line-height standard */
  text-align: left; /* Allinea il testo a sinistra */
  min-height: 2px; /* Altezza minima */
}

/* Bottone attivo */
.btn-menu-active-cc {
  background-color: var(--accent-4) !important; /* Colore attivo */
  color: var(--accent-9);
  border: 1px solid var(--accent-7); /* Bordo visibile per attivo */
}

/* Icona del bottone */
.icon-menu-cc {
  color: var(--gray-11);
  font-size: var(--font-size-h5); /* Stessa dimensione del testo per armonia */
  margin: 4px 0;
  width: 20px;
  height: 20px;
}

/* Icona attiva */
.btn-menu-active-cc .icon-menu-cc {
  color: var(--accent-9);
}

/* Testo del bottone */
.text-menu-cc {
  color: var(--gray-11);
  font-size: var(--font-size-h5); /* Coerente con il bottone */
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-normal);
}

/* Testo attivo */
.btn-menu-active-cc .text-menu-cc {
  color: var(--accent-12);
}

/* Hover */
.btn-menu-cc:hover {
  background-color: var(--gray-3); /* Colore di hover */
  border-color: var(--gray-7); /* Bordo visibile su hover */
}

.btn-menu-active-cc:hover {
  background-color: var(--accent-5); /* Colore di hover per attivo */
}

/* Focus */
.btn-menu-cc:focus {
  outline: 2px solid var(--accent-7); /* Evidenzia il focus */
}

/* Bottoni del menu (MOBILE) circolari nascosti */
.otherMenuEl .btn-menu-cc {
  border: 1px solid var(--gray-6);
}

/* ================================
   Modal & dropdown style
================================ */
.modal-content {
  border-radius: 12px;
  background-color: var(--gray-1);
  padding: 4px;
}

.modal-body {
  border: 1px solid var(--gray-6);
  background: rgb(233, 233, 255);
  background: -moz-linear-gradient(
    180deg,
    rgba(233, 233, 255, 1) 0%,
    rgba(255, 252, 251, 1) 25%
  );
  background: -webkit-linear-gradient(
    180deg,
    rgba(233, 233, 255, 1) 0%,
    rgba(255, 252, 251, 1) 25%
  );
  background: linear-gradient(
    180deg,
    rgba(233, 233, 255, 1) 0%,
    rgba(255, 252, 251, 1) 25%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e9e9ff",endColorstr="#fffcfb",GradientType=1);
}
.modal-body.modal-delete,
.modal-content.modal-delete {
  background: rgb(255, 233, 233);
  background: -moz-linear-gradient(
    180deg,
    rgba(255, 233, 233, 1) 0%,
    rgba(255, 251, 251, 1) 25%
  );
  background: -webkit-linear-gradient(
    180deg,
    rgba(255, 233, 233, 1) 0%,
    rgba(255, 251, 251, 1) 25%
  );
  background: linear-gradient(
    180deg,
    rgba(255, 233, 233, 1) 0%,
    rgba(255, 251, 251, 1) 25%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffe9e9",endColorstr="#fffbfb",GradientType=1);
}

.modal-header {
  border: 0;
  border-radius: 6px;
  background-color: transparent;
  font-size: var(--font-size-h2);
  padding: 0.5rem;
  margin: 0 1rem;
}

.modal-body {
  background-color: transparent;
  border-radius: 8px;
  padding: 0;
}

.modal-element {
  background-color: transparent;
  padding: 0.5rem;
  border-radius: 6px;
}
.modal-footer {
  background-color: transparent;
  padding: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-control[type="text"],
.form-control[type="email"],
.form-control[type="password"],
.form-control[type="number"],
.form-control[type="tel"] {
  border-radius: 0.375rem;
  z-index: 1 !important;
}
.dropdown-menu {
  background-color: var(--gray-1);
  padding: 0;
}
.dropdown-content {
  background-color: var(--gray-1);
}

.dropdown-element {
  background-color: var(--modal-element-bg);
  padding: 0.5rem;
  margin-bottom: 5px;
  border-radius: 0.75rem;
  border: 1px solid var(--gray-3);
}

.dropdown-element {
  min-width: 150px;
}

.form-select {
  background-color: var(--gray-1);
  border: 2px solid var(--accent-9) !important;
  color: var(--accent-9);
  border-radius: 8px;
  width: 100%;
}
.form-select:focus,
.form-control:focus {
  outline: none;
  box-shadow: none;
}

#datesFilter .btn-group button {
  width: 100%;
  max-width: 100% !important;
}

.dropdown-menu .btn-group button,
.dropdown-menu .btn-group a {
  width: 100%;
  max-width: 100% !important;
}

/* =========== */
/* Calendar class */
/* =========== */
/* Calendar Event Classes */
.calendar-event-generic {
  background-color: var(--generic-event-bg);
  color: black;
}

.calendar-event-customer {
  background-color: var(--customer-event-bg);
  color: black;
}

.calendar-event-contract {
  background-color: var(--contract-event-bg);
  color: black;
}

.calendar-event-learning {
  background-color: var(--learning-event-bg);
  color: black;
}

.calendar-event-reunion {
  background-color: var(--reunion-event-bg);
  color: black;
}

/* =================================== */
/* Stile generico per tutte le pagine */
/* =================================== */

.page-wrapper {
  padding: 20px;
}

@media (max-width: 768px) {
  .page-wrapper {
    padding: 20px 10px;
  }
}

/* =================================== */
/* !!! OVERRIDE BUG SVELECTE (SOVRAPPOSIZIONE DROPDOWN) */
/* =================================== */
.sv-btn-indicator {
  pointer-events: none !important;
}

.sv_dropdown {
  z-index: 9999 !important;
  background-color: var(--gray-1) !important;
  border-radius: 8px !important;
  border: 1px solid var(--gray-6) !important;
}