/* swal-nuvolai.css — Tema dark Nuvolai per TUTTE le modal SweetAlert2.
   Ambito: ESCLUSIVAMENTE selettori .swal2-* → nessun impatto sul resto della UI.
   Caricato dopo sweetalert2.min.css, quindi vince per ordine di cascata. */

.swal2-popup {
  background-color: #000;
  border: 1px solid #444444;
  border-radius: 6px;
  color: #fff;
}

.swal2-title {
  color: #fff;
  font-weight: 400;
}

.swal2-html-container {
  color: #fff;
}
/* Una modal con molto contenuto scorre DENTRO, e i bottoni restano visibili (23/09/2026): prima
   scorreva la modal intera e «Salva» finiva sotto il bordo dello schermo, soprattutto sul telefono.
   260px = titolo, icona, margini e la riga dei bottoni. */
.swal2-popup .swal2-html-container {
  max-height: calc(100dvh - 260px);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Pulsante di chiusura (X) in alto a destra = ANNULLA standard di TUTTE le modal.
   Al mouseover ruota di 90° (con tooltip "Annulla" impostato via JS in nuvolai.js). */
.swal2-close {
  color: #888888;
  box-shadow: none !important;
  transition: color .15s ease, transform .2s ease;
  transform-origin: center center; /* ruota sul proprio centro, senza "saltare" */
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}
.swal2-close:hover {
  color: #55d5cc;
  transform: rotate(90deg);
}
.swal2-close:focus {
  outline: none;
  box-shadow: none !important;
}

/* Campi eventualmente usati dentro le modal (swal2-input/textarea/select) */
.swal2-input,
.swal2-textarea,
.swal2-select {
  background-color: var(--nv-campo-fondo, #000);
  border: 1px solid var(--nv-campo-bordo, #6b6b6b);   /* il contorno di un controllo ≥ 3:1 (NOTTE-STILI-UX; era #3c3c3c, 1,9:1) */
  color: var(--nv-campo-testo, #fff);
}

.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
  border-color: #55d5cc;
  box-shadow: 0 0 0 1px #55d5cc;
}
.swal2-input::placeholder,
.swal2-textarea::placeholder { color: #8a8a8a; opacity: 1; }

/* Campi Bootstrap (.form-control/.form-select) usati dentro le modal → stesso tema dark,
   placeholder LEGGIBILE, opzioni/optgroup su fondo nero. */
.swal2-popup .form-control,
.swal2-popup .form-select {
  background-color: var(--nv-campo-fondo, #000);
  color: var(--nv-campo-testo, #fff);
  border: 1px solid var(--nv-campo-bordo, #6b6b6b);   /* ≥ 3:1 (NOTTE-STILI-UX; era #3c3c3c) */
}
.swal2-popup .form-control:focus,
.swal2-popup .form-select:focus {
  background-color: #000;
  color: #fff;
  border-color: #55d5cc;
  box-shadow: 0 0 0 1px #55d5cc;
}
.swal2-popup .form-control::placeholder { color: #8a8a8a; opacity: 1; }
.swal2-popup .form-control option,
.swal2-popup .form-control optgroup,
.swal2-popup .form-select option,
.swal2-popup .form-select optgroup { background-color: #000; color: #fff; }
/* Option sotto il cursore o selezionata → sfondo teal nuvolai, testo nero. Il box-shadow inset
   forza il colore anche dove i browser ignorano background su <option> (highlight di sistema). */
.swal2-popup .form-control option:hover,
.swal2-popup .form-control option:focus,
.swal2-popup .form-control option:checked,
.swal2-popup .form-select option:hover,
.swal2-popup .form-select option:focus,
.swal2-popup .form-select option:checked {
  background: #55d5cc;
  color: #000;
  -webkit-text-fill-color: #000;
  box-shadow: 0 0 10px 100px #55d5cc inset;
}
/* select2 dentro le modal: opzione sotto il cursore/tastiera → teal nuvolai, testo nero
   (nelle modal il dropdown è figlio di .swal2-popup via dropdownParent, quindi lo scoping tiene
   e NON altera il tema select2 globale dell'app). */
.swal2-popup .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.swal2-popup .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable:hover {
  background-color: #55d5cc;
  color: #000;
}
/* I <select> NATIVI con .form-control non tolgono l'appearance di sistema → su alcuni browser
   ignorano background-color e restano chiari (aspetto "non-nuvolai"). Forziamo appearance:none +
   caret bianca custom così il fondo nero viene applicato davvero. Vale per tutte le modal. */
.swal2-popup select.form-control,
.swal2-popup select.form-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  padding-right: 2.25rem;
}
.swal2-popup select.form-control[multiple],
.swal2-popup select.form-select[multiple] { background-image: none; padding-right: 0.75rem; }

/* Pulsanti nativi Swal (confirm/cancel di swalDeleteRow, swalConfirm, ecc.) */
.swal2-actions .swal2-confirm,
.swal2-actions .swal2-cancel {
  border-radius: 6px;
}

/* Backdrop coerente col tema scuro */
.swal2-container.swal2-backdrop-show {
  background-color: rgba(0, 0, 0, 0.6);
}

/* La modal deve stare SOPRA il drawer CRM (overlay 10000 / drawer 10001), sotto tooltip/cursore. */
.swal2-container { z-index: 10005; }

/* Pulsanti dentro le modal Swal: tutti outline teal Nuvolai, stessa larghezza.
   Scoping su .swal2-popup → non tocca gli outline-primary del resto della UI. */
.swal2-popup .btn-outline-primary {
  --bs-btn-color: #55d5cc;
  --bs-btn-border-color: #55d5cc;
  --bs-btn-hover-color: #000000;
  --bs-btn-hover-bg: #55d5cc;
  --bs-btn-hover-border-color: #55d5cc;
  --bs-btn-focus-shadow-rgb: 85, 213, 204;
  --bs-btn-active-color: #fff;
  /* DISABILITATO (22/09/2026). Bootstrap, per `outline-primary`, lascia il BLU anche da spento —
     `--bs-btn-disabled-color: #0d6efd` — e finché nessun bottone nasceva disabilitato non si era
     mai visto. Il «Salva» della scheda di una prenotazione nasce spento finché non c'è una
     modifica, e da lì è comparso un bottone blu in mezzo a una modal teal.
     Spento NON è un terzo colore: è lo stesso bottone, smorzato dall'opacità che Bootstrap
     applica da sé (`--bs-btn-disabled-opacity`, .65). Si rimappano i due colori sulle variabili
     che il bottone ha già, così un domani cambia il teal e lo spento lo segue. */
  --bs-btn-disabled-color: var(--bs-btn-color);
  --bs-btn-disabled-border-color: var(--bs-btn-border-color);
  --bs-btn-disabled-bg: transparent;
}


.swal2-popup .btn {
  min-width: 170px;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

/* ECCEZIONE: i passaggi di stato della scheda di una prenotazione. Sono cinque, e sono un gruppo
   di scelte, non cinque azioni della modal: con i 170px qui sopra occupavano tre righe e mezzo
   dentro una finestra larga 640. Larghezza sul contenuto, `wrap` per lo schermo stretto (la
   geometria del gruppo — flex e gap — resta in `.nv-sch-azioni`, dentro `nuvola.css`). */
.swal2-popup .nv-sch-azioni .btn { min-width: 0; }

/* I "pulsanti" che sono <a> (link) dentro le modal (es. ATTIVITÀ/OPPORTUNITÀ) devono avere lo
   STESSO testo dei <button> outline: il colore globale dei link li rendeva diversi. */
.swal2-popup a.btn-outline-primary { color: #55d5cc !important; }
.swal2-popup a.btn-outline-primary:hover { color: #000000 !important; }

/* ICONE SweetAlert Nuvolai — REGOLA UNICA E DEFINITIVA.
   Ogni icona (success/error/warning/info/question) = SOLO BORDO #55d5cc (cerchio NON riempito)
   con glifo BIANCO. Selettori .swal2-icon.<tipo> + !important per vincere sempre SweetAlert2. */
.swal2-icon.swal2-success,
.swal2-icon.swal2-error,
.swal2-icon.swal2-warning,
.swal2-icon.swal2-info,
.swal2-icon.swal2-question {
  background-color: transparent !important;
  border-color: #55d5cc !important;
  color: #ffffff !important;
}
/* Glifo testuale: info "i", question "?", warning "!" -> bianco */
.swal2-icon .swal2-icon-content { color: #ffffff !important; }
/* Icona FontAwesome passata via iconHtml (modal Foto profilo, White Label, skill, ...): il kit SVG
   la rende a dimensione piena, sproporzionata dentro il cerchio bordato. Rimpicciolita a 0.7em.
   Si vincola l'ALTEZZA, non la larghezza: il kit dà a ogni icona height:1em e una larghezza
   proporzionale al viewBox (fa-w-16 quadrata, fa-w-18 per il triangolo, fa-w-20 per il diagramma,
   fa-w-12 per la clessidra). Agendo sulla larghezza — e per giunta sulla sola fa-w-16 — le icone
   non quadrate restavano alte 1em, cioè visibilmente più grandi delle altre. Con height uniforme e
   width auto ogni icona ha la stessa dimensione percepita e mantiene le proprie proporzioni.
   Regola confinata a .swal2-icon: fuori dalle modal le icone FontAwesome restano invariate. */
.swal2-icon .svg-inline--fa { height: 0.7em; width: auto; }
/* FA7 self-hosted (webfont): l'icona passata via iconHtml resta un <i> con glifo ::before, non piu'
   un <svg>, quindi la regola .svg-inline--fa qui sopra non aggancia e il glifo esce a dimensione piena.
   Dimensioniamo il glifo webfont dentro il cerchio come nelle modal skill (2.5rem): cosi' Foto profilo,
   White Label e ogni altra modal con iconHtml restano uniformi. Confinata a .swal2-icon. */
.swal2-icon .swal2-icon-content i { font-size: 2.5rem; line-height: 1; }
/* success: anello teal, spunta bianca; maschere d'animazione al colore dello sfondo popup (#000) */
.swal2-icon.swal2-success .swal2-success-ring { border-color: #55d5cc !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'],
.swal2-icon.swal2-success [class*=' swal2-success-line'] { background-color: #ffffff !important; }
.swal2-icon.swal2-success .swal2-success-circular-line-left,
.swal2-icon.swal2-success .swal2-success-circular-line-right,
.swal2-icon.swal2-success .swal2-success-fix { background-color: #000 !important; }
/* error: X bianca */
.swal2-icon.swal2-error .swal2-x-mark-line-left,
.swal2-icon.swal2-error .swal2-x-mark-line-right { background-color: #ffffff !important; }
/* Modal skill: icona FontAwesome (rocket) dentro il cerchio standard 'info'. Il cerchio mantiene
   le dimensioni di sempre; qui dimensiono solo il glifo (bianco) come i glifi standard. */
.swal2-icon.skill-swal-icon .swal2-icon-content {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  line-height: 1;
}
/* Corner ribbon "Nuvolai Skill" (solo modal skill): fascia colore nuvolai inclinata 45°,
   testo nero, nell'angolo in alto a destra. overflow:hidden ritaglia la fascia sull'angolo. */
.swal2-popup.skill-swal-popup { position: relative; overflow: hidden; }
.swal2-popup.skill-swal-popup::after {
  content: 'Nuvolai Skill';
  position: absolute;
  top: 26px;
  right: -54px;
  width: 200px;
  transform: rotate(45deg);
  background: #55d5cc;
  color: #000;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 5px 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  pointer-events: none;
  z-index: 3;
}
/* Modal skill ATTIVA: interruttore power-off in alto a sinistra per disabilitare la skill.
   Grigio a riposo (#969696), rosso al mouseover (#db3131); tooltip flottante "Disabilita skill". */
.swal2-popup.skill-swal-popup .skill-poweroff {
  position: absolute;
  top: 14px;
  left: 16px;
  font-size: 20px;
  line-height: 1;
  color: #969696;
  cursor: pointer;
  z-index: 4;
  transition: color .15s ease;
}
.swal2-popup.skill-swal-popup .skill-poweroff:hover { color: #db3131; }

/* Modal "Nuvolai Credit Scoring" (sweetCreditScore): popup più largo e i 4 riquadri
   RATING/CREDIT/SCORE/SEVERITY spaziati (prima erano appiccicati, senza padding/gap). */
.swal2-popup.swal-creditscore { width: 47em; max-width: 96vw; padding: 2em 2.5em 2.5em; }
.swal-creditscore #swal-creditscore-container { gap: 14px; flex-wrap: wrap; margin-top: .5em; }
.swal-creditscore .swal-creditscore-div {
  flex: 1 1 0;
  min-width: 116px;
  padding: 12px 14px 16px;
  border-radius: 8px;
  text-align: center;
  white-space: nowrap; /* "RATING ?" resta su una riga (il valore va a capo col <br>) */
}
/* Tooltip Bootstrap dei "?" del modal Verifica Rischio: testo piccolo. */
.tooltip.ncs-tip .tooltip-inner { font-size: 0.9em; }
/* "?" informativo nel modal: pallino cerchiato NON-FontAwesome (FA non converte gli <i> iniettati
   in SweetAlert). Il testo è nel tooltip Bootstrap (data-bs-title, init in didOpen di sweetCreditScore). */
.swal-creditscore .ncs-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 5px;
  border: 1px solid currentColor; border-radius: 50%;
  font-size: .62em; font-weight: 700; line-height: 1;
  cursor: help; vertical-align: text-top; opacity: .7;
}
.swal-creditscore .ncs-help:hover { opacity: 1; }

/* Il messaggio di validazione di una modal (Swal.showValidationMessage: «Scegli almeno una categoria…»), 06/10/2026:
   fondo nero e testo nel rosso azione del design system, col pallino «!» pieno. Stessi selettori di SweetAlert2: questo
   file si carica dopo la libreria, quindi a parità di specificità valgono questi valori. */
div:where(.swal2-container) div:where(.swal2-validation-message) {
  align-items: center;
  justify-content: center;
  margin: 1em 0 0;
  padding: .625em;
  overflow: hidden;
  background: #000000;
  color: #db3131;
  font-size: 1em;
  font-weight: 300;
}
div:where(.swal2-container) div:where(.swal2-validation-message)::before {
  content: "!";
  display: inline-block;
  width: 1.5em;
  min-width: 1.5em;
  height: 1.5em;
  margin: 0 .625em;
  border-radius: 50%;
  background-color: #db3131;
  color: #fff;
  font-weight: 600;
  line-height: 1.5em;
  text-align: center;
}

/* I LINK D'AZIONE DENTRO UNA FINESTRA O UN AVVISO BREVE (HR-TIMBRATURE, 20/10/2026): «Giustifica le ore prima dell'entrata» nel
   toast dell'entrata, «Esco per lavoro esterno» nella modal di uscita. Il testo delle finestre li rendeva grigi come il resto:
   si leggono come link, nel colore dell'accento del tema (scuro e chiaro), sottolineati. */
/* !important come i bottoni-link qui sopra: `body a` di nuvola.css lo usa per il colore e per togliere la sottolineatura */
.swal2-popup a.nv-avviso-azione,
.swal2-popup .nv-hr-uscita a {
  color: var(--nv-accent, #55d5cc) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
.swal2-popup a.nv-avviso-azione:hover,
.swal2-popup .nv-hr-uscita a:hover { color: var(--nv-accent, #55d5cc) !important; text-decoration-thickness: 2px !important; }