/* ════════════════════════════════════════════════════════════════════════════
   Thème « Verre » (liquid glass) — 3e thème de l'admin, en plus de clair / sombre.

   Activé par html[data-theme="glass"], posé par _theme_init / _theme_toggle, qui
   forcent aussi data-bs-theme="dark" comme base (texte clair de Tabler). Chargé
   APRÈS style.css → à spécificité supérieure (html[data-theme=glass]) + ordre, ces
   règles l'emportent sur le sombre standard.

   Principe : surfaces Tabler rendues translucides (override des variables --tblr-*,
   que cartes / navbar / dropdowns / SweetAlert / Tom Select lisent déjà) + un
   backdrop-filter sur les composants, le tout au-dessus d'une scène sombre animée
   (taches colorées floutées). Tokens repris du kit admin/public/liquid glass/.
   ════════════════════════════════════════════════════════════════════════════ */

html[data-theme="glass"] {
	--glass-blur: blur(18px);
	--glass-surface: rgba(255, 255, 255, 0.07);
	--glass-surface-2: rgba(255, 255, 255, 0.1);
	--glass-border: rgba(255, 255, 255, 0.16);
	--glass-border-bright: rgba(255, 255, 255, 0.3);
	--glass-reflection: inset 0 1px 0 rgba(255, 255, 255, 0.22);
	--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);

	/* Surfaces Tabler → translucides. Cartes, navbar, dropdowns, formulaires,
	   SweetAlert et Tom Select consomment ces variables : ils suivent donc seuls. */
	--tblr-body-bg: transparent;
	--tblr-bg-surface: var(--glass-surface);
	--tblr-bg-surface-primary: var(--glass-surface);
	--tblr-bg-surface-secondary: rgba(255, 255, 255, 0.05);
	--tblr-bg-surface-tertiary: rgba(255, 255, 255, 0.1);
	--tblr-bg-forms: rgba(255, 255, 255, 0.06);
	--tblr-border-color: var(--glass-border);
	--tblr-border-color-translucent: var(--glass-border);
}

/* ── Scène : base sombre + décor derrière le contenu ──────────────────────────────
   Deux fonds possibles, choisis par l'env GLASS_LEGACY_BG (cf. .env / twig.yaml) :
   • défaut (false) → bruit neuronal : canvas #glass-neuro plein écran, peuplé par le
     shader « Neural Noise » (partials/_glass_backdrop.html.twig). Couleur variant
     dans le temps et au défilement, palette bleu / cyan / violet.
   • legacy (true)  → ancien fond : taches colorées floutées en dégradé, animées
     (body::before/::after), activées par l'attribut html[data-glass-bg="legacy"] que
     le layout pose alors (et le canvas n'est PAS inclus). */
html[data-theme="glass"] {
	background-color: #070912;
}
html[data-theme="glass"] body {
	background: transparent;
}

/* ── Fond par défaut : canvas du bruit neuronal ──
   Masqué hors thème verre, posé derrière tout le contenu, inerte aux clics. La couche
   transparente du shader (alpha = bruit) laisse la base sombre #070912 transparaître
   entre les filaments. */
#glass-neuro {
	display: none;
}
html[data-theme="glass"] #glass-neuro {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
	opacity: 0.9;
}

/* ── Ancien fond (legacy) : taches colorées floutées, fixes, animées ──
   N'est posé QUE sous html[data-glass-bg="legacy"] (GLASS_LEGACY_BG=true). */
html[data-glass-bg="legacy"][data-theme="glass"] body::before,
html[data-glass-bg="legacy"][data-theme="glass"] body::after {
	content: "";
	position: fixed;
	inset: -15%;
	z-index: -1;
	pointer-events: none;
}
html[data-glass-bg="legacy"][data-theme="glass"] body::before {
	background:
		radial-gradient(
			38% 38% at 16% 22%,
			rgba(36, 80, 138, 0.4),
			transparent 72%
		),
		radial-gradient(
			42% 42% at 84% 78%,
			rgba(180, 144, 245, 0.45),
			transparent 72%
		),
		radial-gradient(
			32% 32% at 72% 14%,
			rgba(11, 18, 34, 0.32),
			transparent 72%
		);
	filter: blur(60px);
	animation:
		glass-drift-a 28s ease-in-out infinite,
		glass-hue-a 48s linear infinite;
}
html[data-glass-bg="legacy"][data-theme="glass"] body::after {
	background:
		radial-gradient(
			40% 40% at 78% 32%,
			rgba(43, 1, 159, 0.36),
			transparent 72%
		),
		radial-gradient(
			40% 40% at 22% 82%,
			rgba(59, 130, 246, 0.42),
			transparent 72%
		);
	filter: blur(72px);
	animation:
		glass-drift-b 34s ease-in-out infinite,
		glass-hue-b 60s linear infinite;
}
/* Dérive de position : trajet en boucle fermée (0 % = 100 %) à plusieurs étapes →
   les taches vagabondent au lieu d'un simple aller-retour. Amplitude large : les
   éléments débordent de 15 % (inset) et fondent en transparent avant leur bord, donc
   le déplacement n'expose pas de bord net (la base sombre #070912 transparaît). */
@keyframes glass-drift-a {
	0% {
		transform: translate3d(0, 0, 0) scale(1);
	}
	25% {
		transform: translate3d(10%, -8%, 0) scale(1.12);
	}
	50% {
		transform: translate3d(-6%, 9%, 0) scale(1.04);
	}
	75% {
		transform: translate3d(8%, 5%, 0) scale(1.1);
	}
	100% {
		transform: translate3d(0, 0, 0) scale(1);
	}
}
@keyframes glass-drift-b {
	0% {
		transform: translate3d(0, 0, 0) scale(1.05);
	}
	25% {
		transform: translate3d(-11%, 6%, 0) scale(1);
	}
	50% {
		transform: translate3d(9%, -9%, 0) scale(1.14);
	}
	75% {
		transform: translate3d(-7%, -4%, 0) scale(1.03);
	}
	100% {
		transform: translate3d(0, 0, 0) scale(1.05);
	}
}
/* Dérive chromatique : les taches font tourner leur teinte sur un cycle complet
   (linear infinite, pas d'alternance → boucle continue, sans à-coup au retour ;
   durées 48s/60s distinctes pour désynchroniser les deux couches). Le blur est
   réintégré ici car animer `filter` écrase le `filter` statique de l'élément. */
@keyframes glass-hue-a {
	0% {
		filter: blur(60px) hue-rotate(0deg);
	}
	100% {
		filter: blur(60px) hue-rotate(360deg);
	}
}
@keyframes glass-hue-b {
	0% {
		filter: blur(72px) hue-rotate(0deg);
	}
	100% {
		filter: blur(72px) hue-rotate(360deg);
	}
}
@media (prefers-reduced-motion: reduce) {
	html[data-glass-bg="legacy"][data-theme="glass"] body::before,
	html[data-glass-bg="legacy"][data-theme="glass"] body::after {
		animation: none;
	}
}
/* Repli sans backdrop-filter (vieux navigateurs) : surfaces plus opaques. */
@supports not (
	(backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
	html[data-theme="glass"] {
		--glass-surface: rgba(20, 24, 38, 0.92);
		--glass-surface-2: rgba(28, 33, 51, 0.94);
		--tblr-bg-forms: rgba(20, 24, 38, 0.92);
	}
}

/* Conteneurs de page transparents : laissent voir la scène derrière les cartes. */
html[data-theme="glass"] .page,
html[data-theme="glass"] .page-wrapper,
html[data-theme="glass"] .page-body,
html[data-theme="glass"] .page-center {
	background: transparent;
}

/* ── Surfaces en verre : flou de l'arrière-plan + reflet + bordure claire ──────── */
html[data-theme="glass"] .card,
html[data-theme="glass"] .navbar,
html[data-theme="glass"] .navbar-vertical,
html[data-theme="glass"] .dropdown-menu,
html[data-theme="glass"] .modal-content,
html[data-theme="glass"] .offcanvas,
html[data-theme="glass"] .alert,
html[data-theme="glass"] .list-group-flush,
html[data-theme="glass"] .ts-dropdown,
html[data-theme="glass"] .swal2-popup.swal-tabler {
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	background-color: var(--glass-surface);
	border: 1px solid var(--glass-border);
	box-shadow: var(--glass-shadow), var(--glass-reflection);
}

/* Sidebar (navbar verticale) : légèrement plus dense pour la lisibilité du menu. */
html[data-theme="glass"] .navbar-vertical {
	/* background-color: rgba(13, 16, 28, 0.55); */
	border-right: 1px solid var(--glass-border);
}
html[data-theme="glass"] .navbar .nav-link:hover,
html[data-theme="glass"] .navbar-nav .nav-item.active > .nav-link {
	background-color: rgba(255, 255, 255, 0.08);
	border-radius: 8px;
}
html[data-theme="glass"] .navbar-heading {
	color: rgba(255, 255, 255, 0.45);
}

/* Cartes : en-tête / pied transparents, séparateurs discrets. */
html[data-theme="glass"] .card-header,
html[data-theme="glass"] .card-footer {
	background: transparent;
	border-color: var(--glass-border);
}

/* Tables : la carte en verre fait le fond ; en-tête translucide, lignes discrètes. */
html[data-theme="glass"] .table {
	--tblr-table-bg: transparent;
	--tblr-table-striped-bg: rgba(255, 255, 255, 0.04);
	--tblr-table-hover-bg: rgba(255, 255, 255, 0.07);
	--tblr-table-border-color: var(--glass-border);
	color: var(--tblr-body-color);
}
html[data-theme="glass"] .table thead th {
	background-color: rgba(255, 255, 255, 0.06);
	border-bottom-color: var(--glass-border);
}

/* Formulaires : champs translucides. */
html[data-theme="glass"] .form-control,
html[data-theme="glass"] .form-select,
html[data-theme="glass"] .input-group-text,
html[data-theme="glass"] .ts-control {
	background-color: rgba(255, 255, 255, 0.06);
	border-color: var(--glass-border);
	color: var(--tblr-body-color);
}
html[data-theme="glass"] .form-control:focus,
html[data-theme="glass"] .form-select:focus,
html[data-theme="glass"] .ts-control.focus {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: var(--glass-border-bright);
	box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.06);
}
html[data-theme="glass"] .form-control::placeholder {
	color: rgba(255, 255, 255, 0.45);
}

/* Tom Select : le panneau d'options flotte au-dessus du contenu. La surface en verre
   standard (7 %) le rend illisible → fond sombre nettement plus opaque (le flou reste). */
html[data-theme="glass"] .ts-dropdown {
	background-color: rgba(20, 24, 38, 0.92);
}
html[data-theme="glass"] .ts-dropdown .active,
html[data-theme="glass"] .ts-dropdown .option:hover {
	background-color: rgba(255, 255, 255, 0.12);
	color: #fff;
}

/* Boutons : variantes neutres en verre ; les boutons colorés (primary, danger…)
   gardent leur couleur pleine pour rester reconnaissables. */
html[data-theme="glass"] .btn-secondary,
html[data-theme="glass"] .btn-default,
html[data-theme="glass"] .btn-outline-secondary {
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	background-color: rgba(255, 255, 255, 0.08);
	border-color: var(--glass-border);
	color: var(--tblr-body-color);
}
html[data-theme="glass"] .btn-secondary:hover,
html[data-theme="glass"] .btn-default:hover,
html[data-theme="glass"] .btn-outline-secondary:hover {
	background-color: rgba(255, 255, 255, 0.14);
	color: #fff;
}
html[data-theme="glass"] .btn-ghost-secondary:hover,
html[data-theme="glass"] .btn-link:hover {
	background-color: rgba(255, 255, 255, 0.08);
}

/* Dropdown / list-group : survol translucide. */
html[data-theme="glass"] .dropdown-item:hover,
html[data-theme="glass"] .dropdown-item:focus,
html[data-theme="glass"] .list-group-item-actions:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

/* Badges neutres translucides (les colorés restent pleins). */
html[data-theme="glass"] .badge.bg-secondary,
html[data-theme="glass"] .badge.bg-muted {
	background-color: rgba(255, 255, 255, 0.14) !important;
}

/* Séparateurs, code, modale. */
html[data-theme="glass"] hr,
html[data-theme="glass"] .hr {
	border-color: var(--glass-border);
	opacity: 1;
}
html[data-theme="glass"] .modal-header,
html[data-theme="glass"] .modal-footer {
	border-color: var(--glass-border);
}
html[data-theme="glass"] .modal-backdrop.show {
	opacity: 0.6;
}
html[data-theme="glass"] code,
html[data-theme="glass"] pre {
	background-color: rgba(255, 255, 255, 0.08);
	color: var(--tblr-body-color);
}

/* Barres de défilement discrètes. */
html[data-theme="glass"] ::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
html[data-theme="glass"] ::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.16);
	border-radius: 8px;
}
html[data-theme="glass"] ::-webkit-scrollbar-track {
	background: transparent;
}