/* ══════════════════════════════════════════════════════════════
   Vendor Dark Mode Overrides
   ══════════════════════════════════════════════════════════════
   Dark-mode CSS for third-party UI libraries that ship with no
   [data-theme-mode="dark"] awareness of their own: flatpickr,
   bootstrap-datepicker, @simonwep/pickr, and simplebar.

   Verified live against the running app (chrome-devtools MCP,
   getComputedStyle) on 2026-09-10. Palette matches the documented
   dark tokens already used everywhere else in this codebase
   (see assets/css/atlasmps-custom.css):
     Base #171717 · Surface #1A1A1A · Card #202020 · Raised #222222
     Border #303030 · Text primary #fafafa · Text secondary #C8C8C8
     Text muted #737373

   Notes from live verification:
   - flatpickr already inherits mostly-correct dark styling from the
     Velzon base theme's CSS custom properties (--custom-white,
     --default-background, --default-border, --sa-primary-color).
     The rules below make that explicit/self-contained and fix one
     real contrast bug: the prev/next month arrow icons render in
     the brand navy primary color, which has ~1.7:1 contrast against
     the dark calendar background (fails WCAG for UI graphics).
   - bootstrap-datepicker has NO dark coverage at all. Confirmed via
     live DOM: the "today" cell renders with color: var(--sa-primary-
     color) (a dark navy, e.g. #21436c) on a transparent background
     (--sa-seconday-color is a pre-existing typo of --sa-secondary-
     color in atlasmps-custom.css, so it falls through to an unset/
     transparent fallback) — the date number is essentially unreadable
     in dark mode. The dropdown's CSS triangle pointer is also
     hardcoded to #999/#fff by the vendor CSS. Both are fixed below.
   - @simonwep/pickr (nano theme): the popup panel background/result
     input already picks up dark colors via Velzon's --custom-white /
     --default-background variables. The one real gap is the
     HEXA/RGBA/HSLA format-toggle buttons (.pcr-type), which are
     hardcoded to a light-gray chip (#f1f3f4 / #75797e) with no dark
     variant — they render as a stray light patch inside an otherwise
     dark popup. Fixed below.
   - simplebar's thumb already inherits dark coloring via Velzon's
     --default-border variable. Rules below make it explicit/
     self-contained rather than relying on that vendor variable.
   ══════════════════════════════════════════════════════════════ */

/* ------------------------------------------------------------
   1. flatpickr (assets/libs/flatpickr/flatpickr.min.css)
   ------------------------------------------------------------ */
[data-theme-mode="dark"] .flatpickr-calendar {
	background-color: #202020 !important;
	border: 1px solid #303030 !important;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .7) !important;
}
[data-theme-mode="dark"] .flatpickr-months,
[data-theme-mode="dark"] .flatpickr-current-month,
[data-theme-mode="dark"] .flatpickr-monthDropdown-months {
	background-color: #202020 !important;
	color: #fafafa !important;
}
[data-theme-mode="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
	background-color: #202020 !important;
	color: #fafafa !important;
}
[data-theme-mode="dark"] .numInput,
[data-theme-mode="dark"] .numInputWrapper {
	background-color: #1A1A1A !important;
	color: #fafafa !important;
}
[data-theme-mode="dark"] .flatpickr-weekdays {
	background-color: #202020 !important;
}
[data-theme-mode="dark"] .flatpickr-weekday {
	background-color: #202020 !important;
	color: #737373 !important;
}
[data-theme-mode="dark"] .flatpickr-day {
	color: #fafafa !important;
}
[data-theme-mode="dark"] .flatpickr-day.flatpickr-disabled,
[data-theme-mode="dark"] .flatpickr-day.flatpickr-disabled:hover,
[data-theme-mode="dark"] .flatpickr-day.prevMonthDay,
[data-theme-mode="dark"] .flatpickr-day.nextMonthDay,
[data-theme-mode="dark"] .flatpickr-day.notAllowed,
[data-theme-mode="dark"] .flatpickr-day.notAllowed.prevMonthDay,
[data-theme-mode="dark"] .flatpickr-day.notAllowed.nextMonthDay {
	color: #737373 !important;
}
[data-theme-mode="dark"] .flatpickr-day:hover,
[data-theme-mode="dark"] .flatpickr-day.prevMonthDay:hover,
[data-theme-mode="dark"] .flatpickr-day.nextMonthDay:hover,
[data-theme-mode="dark"] .flatpickr-day:focus {
	background: #222222 !important;
	border-color: #303030 !important;
	color: #fafafa !important;
}
[data-theme-mode="dark"] .flatpickr-day.today {
	border-color: var(--sa-primary-color) !important;
	background-color: var(--sa-primary-color) !important;
	color: #fff !important;
}
[data-theme-mode="dark"] .flatpickr-day.selected,
[data-theme-mode="dark"] .flatpickr-day.startRange,
[data-theme-mode="dark"] .flatpickr-day.endRange,
[data-theme-mode="dark"] .flatpickr-day.selected:hover,
[data-theme-mode="dark"] .flatpickr-day.startRange:hover,
[data-theme-mode="dark"] .flatpickr-day.endRange:hover {
	background: var(--sa-primary-color) !important;
	border-color: var(--sa-primary-color) !important;
	color: #fff !important;
}
/* Prev/next month arrow icons: fixes ~1.7:1 contrast (brand navy on
   dark card) by using the light "text secondary" token instead of
   the brand primary color for the SVG fill in dark mode only. */
[data-theme-mode="dark"] .flatpickr-months .flatpickr-prev-month,
[data-theme-mode="dark"] .flatpickr-months .flatpickr-next-month {
	color: #C8C8C8 !important;
	fill: #C8C8C8 !important;
}
[data-theme-mode="dark"] .flatpickr-months .flatpickr-prev-month svg,
[data-theme-mode="dark"] .flatpickr-months .flatpickr-next-month svg {
	fill: #C8C8C8 !important;
}
[data-theme-mode="dark"] .flatpickr-current-month .numInputWrapper span.arrowUp:after {
	border-bottom-color: #737373 !important;
}
[data-theme-mode="dark"] .flatpickr-current-month .numInputWrapper span.arrowDown:after {
	border-top-color: #737373 !important;
}
[data-theme-mode="dark"] .flatpickr-calendar.arrowTop:before,
[data-theme-mode="dark"] .flatpickr-calendar.arrowTop:after {
	border-bottom-color: #303030 !important;
}
[data-theme-mode="dark"] .flatpickr-calendar.arrowBottom:before,
[data-theme-mode="dark"] .flatpickr-calendar.arrowBottom:after {
	border-top-color: #303030 !important;
}
[data-theme-mode="dark"] .flatpickr-calendar.hasTime .flatpickr-time {
	border-top: 1px solid #303030 !important;
}
[data-theme-mode="dark"] .flatpickr-time input,
[data-theme-mode="dark"] .flatpickr-time .flatpickr-am-pm {
	color: #fafafa !important;
	background: #1A1A1A !important;
}
[data-theme-mode="dark"] .flatpickr-time input:hover,
[data-theme-mode="dark"] .flatpickr-time .flatpickr-am-pm:hover,
[data-theme-mode="dark"] .flatpickr-time input:focus,
[data-theme-mode="dark"] .flatpickr-time .flatpickr-am-pm:focus {
	background: #222222 !important;
}

/* ------------------------------------------------------------
   2. bootstrap-datepicker (cdnjs bootstrap-datepicker 1.10.0)
   ------------------------------------------------------------ */
[data-theme-mode="dark"] .datepicker.dropdown-menu {
	background: #202020 !important;
	border: 1px solid #303030 !important;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .7) !important;
}
/* Vendor CSS triangle pointer is hardcoded to #999/#fff — replace
   with dark card + border tones so it doesn't render as a stray
   white/gray arrow against the dark dropdown. */
[data-theme-mode="dark"] .datepicker-dropdown:before {
	border-bottom-color: #303030 !important;
}
[data-theme-mode="dark"] .datepicker-dropdown:after {
	border-bottom-color: #202020 !important;
}
[data-theme-mode="dark"] .datepicker-dropdown.datepicker-orient-top:before {
	border-top-color: #303030 !important;
}
[data-theme-mode="dark"] .datepicker-dropdown.datepicker-orient-top:after {
	border-top-color: #202020 !important;
}
[data-theme-mode="dark"] .datepicker table th {
	color: #737373 !important;
}
[data-theme-mode="dark"] .datepicker table td.day {
	color: #fafafa !important;
}
[data-theme-mode="dark"] .datepicker table td.old,
[data-theme-mode="dark"] .datepicker table td.new,
[data-theme-mode="dark"] .datepicker table td.disabled,
[data-theme-mode="dark"] .datepicker table td.disabled:hover {
	color: #737373 !important;
}
[data-theme-mode="dark"] .datepicker table tr td.day:hover,
[data-theme-mode="dark"] .datepicker table tr td span:hover {
	background-color: #222222 !important;
	color: #fafafa !important;
}
/* Real bug: this app's own .datepicker table tr td.today rule
   (atlasmps-custom.css) sets color: var(--sa-primary-color) — a dark
   navy — on a background driven by a typo'd, unresolved CSS variable
   (--sa-seconday-color), so it falls through to transparent. Result:
   unreadable navy-on-near-black text. Force a visible, legible combo
   in dark mode. */
[data-theme-mode="dark"] .datepicker table tr td.today,
[data-theme-mode="dark"] .datepicker table tr td.today:hover:hover {
	background-color: #222222 !important;
	background-image: none !important;
	color: #fafafa !important;
}
[data-theme-mode="dark"] .datepicker table tr td.today:before {
	border-color: #C8C8C8 !important;
	background-image: none !important;
}
[data-theme-mode="dark"] .datepicker table tr td.active.active,
[data-theme-mode="dark"] .datepicker table tr td.active:hover:hover,
[data-theme-mode="dark"] .datepicker table tr td.active.disabled,
[data-theme-mode="dark"] .datepicker table tr td span.active.active,
[data-theme-mode="dark"] .datepicker table tr td span.active:hover.active {
	background-color: var(--sa-primary-color) !important;
	background-image: none !important;
	color: #fff !important;
}
[data-theme-mode="dark"] .datepicker .datepicker-switch,
[data-theme-mode="dark"] .datepicker .prev,
[data-theme-mode="dark"] .datepicker .next {
	color: #fafafa !important;
}
[data-theme-mode="dark"] .datepicker .datepicker-switch:hover,
[data-theme-mode="dark"] .datepicker .prev:hover,
[data-theme-mode="dark"] .datepicker .next:hover {
	background-color: #222222 !important;
	color: #fafafa !important;
}
[data-theme-mode="dark"] .input-daterange .add-on {
	background-color: #222222 !important;
	border-color: #303030 !important;
	color: #C8C8C8 !important;
}

/* ------------------------------------------------------------
   3. @simonwep/pickr (assets/libs/@simonwep/pickr/themes/nano.min.css)
   ------------------------------------------------------------ */
[data-theme-mode="dark"] .pcr-app {
	background: #202020 !important;
	border: 1px solid #303030 !important;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .7) !important;
}
[data-theme-mode="dark"] .pcr-app .pcr-interaction .pcr-result {
	background: #1A1A1A !important;
	color: #fafafa !important;
}
[data-theme-mode="dark"] .pcr-app .pcr-interaction input {
	background: #1A1A1A !important;
	color: #fafafa !important;
}
/* Real bug: the HEXA/RGBA/HSLA format-toggle buttons have no dark
   variant in the nano theme — non-active ones render as a light-gray
   chip (#f1f3f4/#75797e) floating inside the otherwise dark popup. */
[data-theme-mode="dark"] .pcr-app .pcr-interaction .pcr-type {
	background: #222222 !important;
	color: #C8C8C8 !important;
}
[data-theme-mode="dark"] .pcr-app .pcr-interaction .pcr-type.active {
	background: #4285f4 !important;
	color: #fff !important;
}

/* ------------------------------------------------------------
   4. simplebar (assets/libs/simplebar/simplebar.min.css)
   ------------------------------------------------------------ */
[data-theme-mode="dark"] .simplebar-scrollbar:before {
	background: #303030 !important;
}