/* ═══════════════════════════════════════════════════════════════════════
   check_festival.css — Refonte Proposition C
   Suppression des surcharges !important, remplacées par Tailwind dark:.
   Conservé : animations, overlay, variables de statut, tabs.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Variables de status (clair/sombre) ─────────────────────────── */
[data-jsp-check-shell] {
	--jsp-danger-bg: #fef2f2;
	--jsp-danger-border: #fecaca;
	--jsp-danger-text: #b91c1c;
	--jsp-success-bg: #ecfdf5;
	--jsp-success-border: #86efac;
	--jsp-success-text: #166534;
	--jsp-warning-bg: #fffbeb;
	--jsp-warning-border: #fcd34d;
	--jsp-warning-text: #92400e;
	--jsp-info-bg: #eff6ff;
	--jsp-info-border: #bfdbfe;
	--jsp-info-text: #1d4ed8;
}

html[data-jsp-global-theme="dark"] [data-jsp-check-shell],
[data-jsp-check-shell][data-theme="dark"] {
	--jsp-danger-bg: rgba(127, 29, 29, 0.28);
	--jsp-danger-border: rgba(248, 113, 113, 0.45);
	--jsp-danger-text: #fecaca;
	--jsp-success-bg: rgba(6, 78, 59, 0.3);
	--jsp-success-border: rgba(74, 222, 128, 0.45);
	--jsp-success-text: #bbf7d0;
	--jsp-warning-bg: rgba(120, 53, 15, 0.3);
	--jsp-warning-border: rgba(251, 191, 36, 0.45);
	--jsp-warning-text: #fde68a;
	--jsp-info-bg: rgba(30, 58, 138, 0.3);
	--jsp-info-border: rgba(96, 165, 250, 0.45);
	--jsp-info-text: #bfdbfe;
}

/* ── Tabs et panels ──────────────────────────────────────────────── */
.tab-panel {
	display: none;
}
.tab-panel.active {
	display: block;
	animation: jspTabFadeIn 0.3s ease-out;
}
.tab-btn {
	cursor: pointer;
	user-select: none;
}
.tab-btn.active {
	border-color: #10b981;
	color: #047857;
}
:where(.dark) .tab-btn.active {
	border-color: #34d399;
	color: #6ee7b7;
}
@keyframes jspTabFadeIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ── Scrollbar fine pour la nav tabs ─────────────────────────────── */
.jsp-tab-nav::-webkit-scrollbar {
	height: 3px;
}
.jsp-tab-nav::-webkit-scrollbar-track {
	background: transparent;
}
.jsp-tab-nav::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 2px;
}
:where([data-jsp-global-theme="dark"]) .jsp-tab-nav::-webkit-scrollbar-thumb {
	background: #475569;
}

/* ── Skeleton loading ─────────────────────────────────────────────── */
@keyframes jspSkeletonPulse {
	0%,
	100% {
		opacity: 0.5;
	}
	50% {
		opacity: 1;
	}
}

[data-jsp-check-shell] .jsp-skeleton {
	border-radius: 0.75rem;
	animation: jspSkeletonPulse 1.6s ease-in-out infinite;
}

[data-jsp-check-shell] .jsp-skeleton-block {
	height: 1rem;
	margin-bottom: 0.75rem;
	background: var(--jsp-section-soft-bg, #f1f5f9);
	border-radius: 0.375rem;
}

[data-jsp-check-shell] .jsp-skeleton-title {
	height: 1.75rem;
	width: 40%;
	margin-bottom: 1.25rem;
	background: var(--jsp-section-soft-bg, #f1f5f9);
	border-radius: 0.5rem;
}

/* ── Panneau modale "#check" — overlay duplication/transposition ── */
[data-jsp-check-shell] .js-check-panel {
	background: var(--jsp-panel-bg) !important;
	border-color: var(--jsp-panel-border) !important;
}


[data-jsp-check-shell] #overlay_message {
	background: var(--jsp-loading-bg) !important;
	backdrop-filter: blur(14px);
}

/* ── Legacy : checkbox accent ──────────────────────────────────── */
[data-jsp-check-shell] input[type="checkbox"] {
	accent-color: #0f766e;
}
html[data-jsp-global-theme="dark"]
	[data-jsp-check-shell]
	input[type="checkbox"],
[data-jsp-check-shell][data-theme="dark"] input[type="checkbox"] {
	accent-color: #34d399;
}

/* ── Style unifié pour toutes les sections (comme le panneau Config) ─ */
.jsp-festival-section .bg-menthe-500,
.jsp-festival-section .bg-menthe-600,
.jsp-festival-section .bg-menthe-700 {
	background-color: #059669;
}
.jsp-festival-section .bg-blue-600 {
	background-color: #2563eb;
}
.jsp-festival-section .bg-blue-300 {
	background-color: #93c5fd;
	opacity: 0.6;
}
.jsp-festival-section .bg-gray-700 {
	background-color: #374151;
}
.jsp-festival-section .bg-gray-400 {
	background-color: #9ca3af;
}
.jsp-festival-section .bg-amber-600 {
	background-color: #d97706;
}

.jsp-festival-soft-card {
	background: #fff;
	border-color: #e2e8f0;
	border-radius: 1rem;
}
:where([data-jsp-global-theme="dark"]) .jsp-festival-soft-card {
	background: #1e293b;
	border-color: #334155;
}

.jsp-festival-section-sticky-inner {
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid #e2e8f0;
	border-radius: 1.75rem;
}
:where([data-jsp-global-theme="dark"]) .jsp-festival-section-sticky-inner {
	background: rgba(15, 23, 42, 0.88);
	border-color: #334155;
}

.jsp-festival-section-body {
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid #e2e8f0;
	border-radius: 2rem;
	padding: 1.5rem;
}
:where([data-jsp-global-theme="dark"]) .jsp-festival-section-body {
	background: rgba(15, 23, 42, 0.88);
	border-color: #334155;
}

/* Boutons legacy harmonisés */
.jsp-festival-section .inline-flex.items-center.rounded {
	border-radius: 0.75rem !important;
}
.jsp-festival-section button:not(.tab-btn):hover {
	filter: brightness(1.1);
}

/* ── Legacy check_festival styles (conservés pour compatibilité) ── */
.jsp-config-day-color-options {
	align-items: center;
}
.jsp-config-day-color-option {
	min-height: 2.5rem;
	white-space: nowrap;
}
.jsp-config-day-color-option-label {
	display: inline;
}

@media (max-width: 640px) {
	.jsp-config-day-color-options {
		gap: 0.5rem;
	}
	.jsp-config-day-color-option {
		padding-right: 0.75rem;
		padding-left: 0.75rem;
	}
	.jsp-config-day-color-option[data-active="false"] {
		padding-right: 0.65rem;
		padding-left: 0.65rem;
	}
}

/* ── Sections (conteneurs) — utilisent les variables du shell ─────── */
[data-jsp-check-shell] .jsp-festival-section {
	margin: 0 auto 1.5rem;
}

[data-jsp-check-shell] .jsp-festival-section-sticky-inner {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0.75rem 1rem;
	border: 1px solid var(--jsp-panel-border, #e2e8f0);
	border-radius: 1.75rem;
	background: var(--jsp-panel-bg, rgba(255, 255, 255, 0.9));
	backdrop-filter: blur(18px);
}

[data-jsp-check-shell] .jsp-festival-section-title {
	color: var(--jsp-section-title, #0f172a);
}

[data-jsp-check-shell] .jsp-festival-section-body {
	max-width: 1120px;
	margin: 1rem auto 0;
	padding: 1.5rem;
	border: 1px solid var(--jsp-panel-border, #e2e8f0);
	border-radius: 2rem;
	background: var(--jsp-panel-bg, rgba(255, 255, 255, 0.9));
	backdrop-filter: blur(18px);
}

@media (min-width: 768px) {
	[data-jsp-check-shell] .jsp-festival-section-body {
		padding: 2rem;
	}
}

/* ── Admin bar offset (WordPress #wpadminbar 32px / 46px mobile) ──── */
body.admin-bar .jsp-check-tab-bar {
	top: calc(4rem + 32px) !important; /* 64px header + 32px admin */
}

body.admin-bar .jsp-planning-day-header {
	top: calc(7rem + 32px) !important; /* 112px tab bar + 32px admin */
}

@media (max-width: 782px) {
	body.admin-bar .jsp-check-tab-bar {
		top: calc(4rem + 46px) !important;
	}
	body.admin-bar .jsp-planning-day-header {
		top: calc(7rem + 46px) !important;
	}
}

/* ── User dropdown (legacy — conservé pour compatibilité) ────────── */
.jsp-pro-user-btn img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	border-radius: 9999px !important;
	object-fit: cover !important;
}

.jsp-pro-user-dropdown .jsp-pro-user-menu {
	display: none;
	max-height: 80vh;
	overflow-y: auto;
}

.jsp-pro-user-dropdown.is-open .jsp-pro-user-menu {
	display: block;
}

/* ════════════════════════════════════════════════════════════
   Harmonisation check-festival — utiliser les --jsp-* variables
   du shell pour toutes les sections (même comportement que
   check-ateliers). Les classes Tailwind classiques sont
   surchargées via [data-jsp-check-shell] scoping.
   ════════════════════════════════════════════════════════════ */