/**
 * SPDX-FileCopyrightText: 2026 Nosco.One
 * SPDX-License-Identifier: GPL-2.0-or-later
 */

/* ============================================================
   Sintesi Vendor Widget Skins — Boreal (dark) override layer
   ------------------------------------------------------------
   The vendored date-picker / color-picker / carousel / lightbox
   skins (flatpickr, choices, pickr monolith, slick, splide,
   simplelightbox) ship white-only surfaces. This sheet layers
   Boreal dark surfaces over them using the canonical design
   tokens, under the same dual triggers as the token sheet:
     • prefers-color-scheme: dark (unless .sintesi-light-mode)
     • the .sintesi-dark-mode / .dark-mode class toggle
   It is enqueued AFTER the vendor widget styles so these rules
   win at equal specificity; vendor files are never edited.
   Playbook ch.12: boreal-1 cards · boreal-2 raised · parchment
   text · boreal-3 strokes · atlantic-3 interactive accents ·
   warmth accents unchanged · no pure black/white.
   ============================================================ */

/* ── flatpickr (date / time picker) ─────────────────────────── */

.sintesi-dark-mode .flatpickr-calendar,
.dark-mode .flatpickr-calendar {
	background: var(--boreal-1, #1A2832);
	border-color: var(--boreal-3, #2E4050);
	box-shadow: 0 4px 16px rgba(var(--boreal-0-rgb), 0.45);
	color: var(--text-primary, #E9E4DC);
}

.sintesi-dark-mode .flatpickr-calendar .flatpickr-months .flatpickr-month,
.dark-mode .flatpickr-calendar .flatpickr-months .flatpickr-month {
	background: transparent;
	color: var(--text-primary, #E9E4DC);
	fill: var(--text-primary, #E9E4DC);
}

.sintesi-dark-mode .flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
.sintesi-dark-mode .flatpickr-calendar .flatpickr-months .flatpickr-next-month,
.dark-mode .flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
.dark-mode .flatpickr-calendar .flatpickr-months .flatpickr-next-month {
	color: var(--atlantic-3, #6A9ABC);
	fill: var(--atlantic-3, #6A9ABC);
}

.sintesi-dark-mode .flatpickr-calendar .flatpickr-day,
.dark-mode .flatpickr-calendar .flatpickr-day {
	background: transparent;
	border-color: var(--boreal-3, #2E4050);
	color: var(--text-primary, #E9E4DC);
}

.sintesi-dark-mode .flatpickr-calendar .flatpickr-day:hover,
.dark-mode .flatpickr-calendar .flatpickr-day:hover {
	background: var(--boreal-2, #243440);
	border-color: var(--atlantic-3, #6A9ABC);
	color: var(--text-primary, #E9E4DC);
}

.sintesi-dark-mode .flatpickr-calendar .flatpickr-day.selected,
.sintesi-dark-mode .flatpickr-calendar .flatpickr-day.today,
.dark-mode .flatpickr-calendar .flatpickr-day.selected,
.dark-mode .flatpickr-calendar .flatpickr-day.today {
	background: var(--atlantic-1, #2B577D);
	border-color: var(--atlantic-3, #6A9ABC);
	color: var(--shore-0, #FDFBF7);
}

.sintesi-dark-mode .flatpickr-calendar .flatpickr-time,
.dark-mode .flatpickr-calendar .flatpickr-time {
	border-top-color: var(--boreal-3, #2E4050);
}

.sintesi-dark-mode .flatpickr-calendar .flatpickr-time input,
.dark-mode .flatpickr-calendar .flatpickr-time input {
	background: transparent;
	color: var(--text-primary, #E9E4DC);
}

/* ── choices (select / tags) ────────────────────────────────── */

.sintesi-dark-mode .choices__inner,
.dark-mode .choices__inner {
	background-color: var(--boreal-1, #1A2832);
	border-color: var(--boreal-3, #2E4050);
	color: var(--text-primary, #E9E4DC);
}

.sintesi-dark-mode .choices__list--dropdown,
.dark-mode .choices__list--dropdown {
	background-color: var(--boreal-1, #1A2832);
	border-color: var(--boreal-3, #2E4050);
	color: var(--text-primary, #E9E4DC);
}

.sintesi-dark-mode .choices__list--dropdown .choices__item,
.dark-mode .choices__list--dropdown .choices__item {
	color: var(--text-primary, #E9E4DC);
}

.sintesi-dark-mode .choices__list--dropdown .choices__item--selectable.is-highlighted,
.dark-mode .choices__list--dropdown .choices__item--selectable.is-highlighted {
	background-color: var(--boreal-2, #243440);
	color: var(--text-primary, #E9E4DC);
}

.sintesi-dark-mode .choices__input,
.dark-mode .choices__input {
	background-color: transparent;
	color: var(--text-primary, #E9E4DC);
}

.sintesi-dark-mode .choices[data-type*="select-one"]::after,
.dark-mode .choices[data-type*="select-one"]::after {
	border-color: var(--atlantic-3, #6A9ABC) transparent transparent transparent;
}

/* ── pickr (monolith theme color picker) ────────────────────── */

.sintesi-dark-mode .pcr-app,
.dark-mode .pcr-app {
	background: var(--boreal-1, #1A2832);
	border-color: var(--boreal-3, #2E4050);
	color: var(--text-primary, #E9E4DC);
	box-shadow: 0 4px 16px rgba(var(--boreal-0-rgb), 0.45);
}

.sintesi-dark-mode .pcr-app .pcr-swatches > button,
.dark-mode .pcr-app .pcr-swatches > button {
	border-color: var(--boreal-3, #2E4050);
}

.sintesi-dark-mode .pcr-app .pcr-interaction input,
.sintesi-dark-mode .pcr-app .pcr-interaction .pcr-save,
.sintesi-dark-mode .pcr-app .pcr-interaction .pcr-clear,
.dark-mode .pcr-app .pcr-interaction input,
.dark-mode .pcr-app .pcr-interaction .pcr-save,
.dark-mode .pcr-app .pcr-interaction .pcr-clear {
	background: var(--boreal-2, #243440);
	border-color: var(--boreal-3, #2E4050);
	color: var(--text-primary, #E9E4DC);
}

/* ── slick carousel ─────────────────────────────────────────── */

.sintesi-dark-mode .slick-prev,
.sintesi-dark-mode .slick-next,
.dark-mode .slick-prev,
.dark-mode .slick-next {
	background: var(--boreal-1, #1A2832);
	border-color: var(--boreal-3, #2E4050);
	color: var(--text-primary, #E9E4DC);
}

.sintesi-dark-mode .slick-prev:hover,
.sintesi-dark-mode .slick-next:hover,
.dark-mode .slick-prev:hover,
.dark-mode .slick-next:hover {
	background: var(--boreal-2, #243440);
	color: var(--text-primary, #E9E4DC);
}

.sintesi-dark-mode .slick-prev::before,
.sintesi-dark-mode .slick-next::before,
.dark-mode .slick-prev::before,
.dark-mode .slick-next::before {
	color: var(--atlantic-3, #6A9ABC);
}

.sintesi-dark-mode .slick-dots li button::before,
.dark-mode .slick-dots li button::before {
	color: var(--granite-4, #9AA8B5);
}

.sintesi-dark-mode .slick-dots li.slick-active button::before,
.dark-mode .slick-dots li.slick-active button::before {
	color: var(--warmth-0, #C97B4A);
}

/* ── splide carousel ────────────────────────────────────────── */

.sintesi-dark-mode .splide__arrow,
.dark-mode .splide__arrow {
	background: var(--boreal-1, #1A2832);
	border-color: var(--boreal-3, #2E4050);
	color: var(--text-primary, #E9E4DC);
	opacity: 1;
}

.sintesi-dark-mode .splide__arrow:hover,
.dark-mode .splide__arrow:hover {
	background: var(--boreal-2, #243440);
	color: var(--text-primary, #E9E4DC);
}

.sintesi-dark-mode .splide__arrow svg,
.dark-mode .splide__arrow svg {
	fill: var(--atlantic-3, #6A9ABC);
}

.sintesi-dark-mode .splide__pagination__page,
.dark-mode .splide__pagination__page {
	background: var(--granite-4, #9AA8B5);
	opacity: 0.6;
}

.sintesi-dark-mode .splide__pagination__page.is-active,
.dark-mode .splide__pagination__page.is-active {
	background: var(--warmth-0, #C97B4A);
	opacity: 1;
}

/* ── simplelightbox lightbox ────────────────────────────────── */

.sintesi-dark-mode .sl-overlay,
.dark-mode .sl-overlay {
	background: rgba(var(--boreal-0-rgb), 0.92);
}

.sintesi-dark-mode .sl-wrapper .sl-close,
.sintesi-dark-mode .sl-wrapper .sl-counter,
.sintesi-dark-mode .sl-wrapper .sl-navigation button,
.dark-mode .sl-wrapper .sl-close,
.dark-mode .sl-wrapper .sl-counter,
.dark-mode .sl-wrapper .sl-navigation button {
	color: var(--text-primary, #E9E4DC);
}

.sintesi-dark-mode .sl-wrapper .sl-caption,
.dark-mode .sl-wrapper .sl-caption {
	background: var(--boreal-0, #0F1A22);
	color: var(--text-primary, #E9E4DC);
}

.sintesi-dark-mode .sl-spinner,
.dark-mode .sl-spinner {
	border-color: var(--atlantic-3, #6A9ABC) transparent transparent transparent;
}

/* ── media-query trigger (mirrors the class toggle above) ───── */

@media (prefers-color-scheme: dark) {

	:root:where(:not(.sintesi-light-mode)) .flatpickr-calendar {
		background: var(--boreal-1, #1A2832);
		border-color: var(--boreal-3, #2E4050);
		color: var(--text-primary, #E9E4DC);
	}

	:root:where(:not(.sintesi-light-mode)) .flatpickr-calendar .flatpickr-day {
		color: var(--text-primary, #E9E4DC);
		border-color: var(--boreal-3, #2E4050);
	}

	:root:where(:not(.sintesi-light-mode)) .flatpickr-calendar .flatpickr-day:hover {
		background: var(--boreal-2, #243440);
	}

	:root:where(:not(.sintesi-light-mode)) .choices__inner,
	:root:where(:not(.sintesi-light-mode)) .choices__list--dropdown {
		background-color: var(--boreal-1, #1A2832);
		border-color: var(--boreal-3, #2E4050);
		color: var(--text-primary, #E9E4DC);
	}

	:root:where(:not(.sintesi-light-mode)) .choices__list--dropdown .choices__item--selectable.is-highlighted {
		background-color: var(--boreal-2, #243440);
	}

	:root:where(:not(.sintesi-light-mode)) .pcr-app {
		background: var(--boreal-1, #1A2832);
		border-color: var(--boreal-3, #2E4050);
		color: var(--text-primary, #E9E4DC);
	}

	:root:where(:not(.sintesi-light-mode)) .slick-prev,
	:root:where(:not(.sintesi-light-mode)) .slick-next,
	:root:where(:not(.sintesi-light-mode)) .splide__arrow {
		background: var(--boreal-1, #1A2832);
		border-color: var(--boreal-3, #2E4050);
		color: var(--text-primary, #E9E4DC);
	}

	:root:where(:not(.sintesi-light-mode)) .sl-overlay {
		background: rgba(var(--boreal-0-rgb), 0.92);
	}
}