/**
 * SupportCandy - Dark Mode Toggle
 * Foglio di stile per la modalità scura.
 *
 * SupportCandy non espone variabili CSS per i colori, quindi per garantire
 * copertura completa su tutti i widget (lista ticket, form, dettaglio
 * ticket, profilo, modali) usiamo la tecnica dell'inversione colori
 * scoperta al solo contenitore del plugin, con un "contro-invert" sulle
 * immagini reali (avatar, allegati, gif di caricamento) in modo che non
 * risultino con i colori invertiti.
 */

/* Transizione morbida quando si cambia tema */
#wpsc-container,
.wpsc-modal {
	transition: filter 0.25s ease;
}

body.scdm-dark-mode #wpsc-container,
body.scdm-dark-mode .wpsc-modal {
	filter: invert(1) hue-rotate(180deg);
	/* #d6d6d6 invertito con invert(1) diventa esattamente #292929:
	   255 - 214 (0xD6) = 41 (0x29). Non usare #fff (diventerebbe nero puro #000)
	   e non ridurre l'invert (es. invert(0.84)) perché romperebbe il
	   contro-invert delle immagini/avatar più sotto. */
	background-color: #d6d6d6;
}

/* Sfondo della pagina (fuori dal widget) in modalità scura */
html:has(body.scdm-dark-mode),
body.scdm-dark-mode {
	background-color: #292929 !important;
}

/* Sfondo del wrapper del tema (.container-wrap) in modalità scura.
   Questo elemento vive fuori da #wpsc-container/.wpsc-modal, quindi non
   viene toccato dal filter:invert e va scurito esplicitamente. */
body.scdm-dark-mode .container-wrap {
	background-color: #292929 !important;
}

/* Ripristina i colori naturali di immagini, avatar, allegati e gif */
body.scdm-dark-mode #wpsc-container img,
body.scdm-dark-mode #wpsc-container svg,
body.scdm-dark-mode #wpsc-container video,
body.scdm-dark-mode #wpsc-container canvas,
body.scdm-dark-mode #wpsc-container iframe,
body.scdm-dark-mode .wpsc-modal img,
body.scdm-dark-mode .wpsc-modal svg,
body.scdm-dark-mode .wpsc-modal video,
body.scdm-dark-mode .wpsc-modal canvas,
body.scdm-dark-mode .wpsc-modal iframe {
	filter: invert(1) hue-rotate(180deg);
}

/* ==========================================================================
   Colori personalizzati richiesti dall'utente
   ==========================================================================
   Il tema scuro qui è ottenuto invertendo i colori dell'intero widget
   (filter: invert(1) hue-rotate(180deg)) e NON tramite variabili CSS,
   quindi per ottenere un colore finale ESATTO su un elemento specifico
   dobbiamo impostare come valore "reale" il colore che, una volta passato
   attraverso lo stesso filtro, produce il colore desiderato. Il calcolo è
   stato fatto invertendo la matrice del filtro (hue-rotate(180) è la
   propria inversa, essendo una rotazione di 180° su 360°).
*/

/* 1) Link: colore finale desiderato #2271b1.
   #58a6e7, passato per invert(1) hue-rotate(180deg), diventa #2271b1. */
body.scdm-dark-mode #wpsc-container a,
body.scdm-dark-mode .wpsc-modal a {
	color: #58a6e7 !important;
}

/* 2) Icone: colore finale desiderato #292929.
   Le icone SVG sono già escluse dall'inversione generale (vedi blocco
   "Ripristina i colori naturali" subito sopra: hanno il loro
   contro-invert e mostrano quindi il colore REALE impostato qui, senza
   bisogno di alcun calcolo). Se il tema usa anche icone a font (classi
   tipo .dashicons o [class*="wpsc-icon"]) invece di SVG, sono incluse
   di seguito; se nel tuo sito le icone usano una classe diversa,
   aggiungila a questa lista di selettori. */
body.scdm-dark-mode #wpsc-container svg,
body.scdm-dark-mode #wpsc-container svg *,
body.scdm-dark-mode .wpsc-modal svg,
body.scdm-dark-mode .wpsc-modal svg *,
body.scdm-dark-mode .dashicons,
body.scdm-dark-mode [class*="wpsc-icon"],
body.scdm-dark-mode [class*="wpsca-icon"] {
	color: #292929 !important;
	fill: #292929 !important;
	stroke: #292929 !important;
}

/* 3) Sfondo dei widget header: colore finale desiderato #4d4c4c.
   #b4b3b3, passato per invert(1) hue-rotate(180deg), diventa #4d4c4c.
   Non usiamo qui la tecnica del "contro-invert" (filter sull'elemento
   stesso) perché annullerebbe l'inversione anche per il testo/icone
   contenuti nell'header, rendendoli chiari su sfondo chiaro invece che
   scuri come il resto del tema: impostando direttamente il valore
   "pre-invert" del solo background, testo e icone dell'header
   continuano a essere gestiti normalmente dall'inversione generale. */
body.scdm-dark-mode .wpsc-widget-header {
	background-color: #b4b3b3 !important;
}

/* 4) Link email di supporto nel footer del tema (fuori da #wpsc-container
   e .wpsc-modal, quindi NON toccato dal filter:invert): qui il colore
   finale desiderato (#fff) può essere impostato direttamente, senza
   calcoli, perché questo elemento non passa per l'inversione. */
body.scdm-dark-mode a[href="mailto:support.informatique@mgellogement.fr"] {
	color: #fff !important;
}

/* Alcuni popover/tooltip (gpopover) e menu a tendina (select2/selectWoo)
 * vengono agganciati al body al di fuori del contenitore principale:
 * li includiamo esplicitamente. */
body.scdm-dark-mode .gpopover,
body.scdm-dark-mode .select2-container,
body.scdm-dark-mode .select2-dropdown,
body.scdm-dark-mode .ui-datepicker,
body.scdm-dark-mode .flatpickr-calendar {
	filter: invert(1) hue-rotate(180deg);
}

/* ==========================================================================
   Fix: popup di modifica campi ticket (stato, cliente, campi personalizzati)
   ==========================================================================
   SupportCandy usa elementi "position: fixed" (classi .overlay, .loader,
   .inner-container) per il popup di modifica dei campi ticket, calcolandone
   la posizione assumendo che il containing block sia il VIEWPORT reale. Per
   specifica CSS, però, "filter" (qui usato su #wpsc-container/.wpsc-modal
   per l'inversione colori) trasforma l'elemento in un nuovo containing
   block per i discendenti "fixed": il popup finisce quindi posizionato in
   modo scorretto e diventa inutilizzabile.

   Una correzione precedente tentava di risolvere spostando questi elementi
   fuori da #wpsc-container con JavaScript: sposta però rompeva la gestione
   interna di React di SupportCandy (che si aspetta che i nodi restino dove
   lui li ha creati), causando errori che bloccavano tutte le interazioni
   successive. La correzione qui sotto NON sposta alcun nodo: dark-mode.js
   aggiunge invece la classe .scdm-modal-open a #wpsc-container/.wpsc-modal
   solo mentre il popup è aperto (rilevando la presenza di .overlay/.loader/
   .inner-container al loro interno). Mentre questa classe è presente, il
   contenitore diventa esso stesso "fixed" e delle stesse dimensioni/
   posizione del viewport: il containing block "sbagliato" creato dal
   filter ha quindi comunque le stesse coordinate di quello vero, e gli
   elementi fixed al suo interno tornano a posizionarsi/dimensionarsi
   correttamente, senza che SupportCandy/React se ne accorgano in alcun
   modo (nessun nodo viene creato, spostato o rimosso da noi). */
body.scdm-dark-mode #wpsc-container.scdm-modal-open,
body.scdm-dark-mode .wpsc-modal.scdm-modal-open {
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	margin: 0 !important;
	max-width: none !important;
	max-height: none !important;
	overflow: auto !important;
	z-index: 999999 !important;
	/* Senza questo, lo sfondo #d6d6d6 impostato più sopra per
	   #wpsc-container (pensato per diventare #292929 dopo l'invert)
	   coprirebbe in modo opaco l'intero schermo, nascondendo la pagina
	   reale dietro invece di lasciarla intravedere tramite lo strato di
	   oscuramento (.overlay) di SupportCandy, come accade normalmente in
	   modalità chiara. */
	background-color: transparent !important;
}

/* .overlay è il livello di sfondo semi-trasparente di SupportCandy usato
   per oscurare la pagina dietro al popup: nel tema chiaro è nero
   semi-trasparente. Essendo un discendente di #wpsc-container, subisce
   anch'esso l'inversione colori dell'antenato e diventerebbe bianco
   semi-trasparente (da cui lo sfondo grigio chiaro "pieno" che si vedeva).
   Qui applichiamo un secondo invert direttamente su di lui: sommato a
   quello dell'antenato si annulla (stessa tecnica già usata sopra per
   immagini e icone), restituendogli il suo colore scuro/semitrasparente
   originale mentre il resto del popup resta correttamente invertito. */
body.scdm-dark-mode .scdm-modal-open .overlay,
body.scdm-dark-mode .scdm-modal-open .loader {
	filter: invert(1) hue-rotate(180deg);
}

/* ==========================================================================
   Pulsante flottante per attivare/disattivare il tema scuro
   ========================================================================== */

#scdm-toggle-btn {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 999999;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	background-color: #2c3e50;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

#scdm-toggle-btn:hover {
	transform: scale(1.08);
}

#scdm-toggle-btn:focus-visible {
	outline: 2px solid #4da3ff;
	outline-offset: 2px;
}

body.scdm-dark-mode #scdm-toggle-btn {
	background-color: #f4d35e;
	color: #2c3e50;
}

#scdm-toggle-btn .scdm-icon {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Stato chiaro (default): mostra sole, nascondi luna */
#scdm-toggle-btn .scdm-icon-sun {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

#scdm-toggle-btn .scdm-icon-moon {
	opacity: 0;
	transform: scale(0.5) rotate(-90deg);
}

/* Stato scuro: mostra luna, nascondi sole */
body.scdm-dark-mode #scdm-toggle-btn .scdm-icon-sun {
	opacity: 0;
	transform: scale(0.5) rotate(90deg);
}

body.scdm-dark-mode #scdm-toggle-btn .scdm-icon-moon {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

@media (max-width: 600px) {
	#scdm-toggle-btn {
		right: 14px;
		bottom: 14px;
		width: 44px;
		height: 44px;
	}
}

/* ==========================================================================
   Fix: menu di navigazione (.wpsc-header) illeggibile in dark mode
   ==========================================================================
   A differenza del resto del widget, .wpsc-header ha GIA' di suo, anche nel
   tema chiaro, un colore di testo scuro (#2c3e50) e uno sfondo scuro/navy
   (~#313042): non è una barra "quasi bianca" da schiarire come le altre.
   Il filter:invert(1) hue-rotate(180deg) ereditato da #wpsc-container la
   trasforma comunque in modo imprevedibile insieme a tutto il resto,
   producendo combinazioni di contrasto basso o nullo.

   Qui la trattiamo come le icone/immagini: le applichiamo un secondo
   invert (che si annulla con quello del genitore, riportandola ai suoi
   colori "reali") e le assegniamo direttamente i colori finali desiderati,
   senza dover calcolare valori "pre-invert". Le vere icone SVG al suo
   interno erediterebbero comunque un doppio-invert dalla regola generale
   più in alto: qui lo azzeriamo (filter:none) e impostiamo il colore
   finale voluto direttamente. */
body.scdm-dark-mode #wpsc-container .wpsc-header,
body.scdm-dark-mode .wpsc-modal .wpsc-header {
	filter: invert(1) hue-rotate(180deg);
	background-color: #1f1f2e !important;
}

body.scdm-dark-mode #wpsc-container .wpsc-header,
body.scdm-dark-mode #wpsc-container .wpsc-header *,
body.scdm-dark-mode .wpsc-modal .wpsc-header,
body.scdm-dark-mode .wpsc-modal .wpsc-header * {
	color: #f1f1f1 !important;
}

body.scdm-dark-mode #wpsc-container .wpsc-header svg,
body.scdm-dark-mode #wpsc-container .wpsc-header svg *,
body.scdm-dark-mode .wpsc-modal .wpsc-header svg,
body.scdm-dark-mode .wpsc-modal .wpsc-header svg * {
	filter: none !important;
	fill: #f1f1f1 !important;
	stroke: #f1f1f1 !important;
}