/* * Dark theme for Air Datepicker. * * Air Datepicker ships only a light palette. Its popup is appended to , * a descendant of , so overriding its `--adp-*` custom properties under * the app's class-based dark selector (`html.dark`) themes the calendar to * match. Imported by the air-datepicker Stimulus controller so it loads only * alongside the picker. The accent reuses the app's `--accent` brand token. */ html.dark .air-datepicker { --adp-background-color: #1e293b; --adp-background-color-hover: #334155; --adp-background-color-active: #475569; --adp-background-color-in-range: rgba(56, 189, 248, 0.12); --adp-background-color-in-range-focused: rgba(56, 189, 248, 0.2); --adp-background-color-selected-other-month-focused: #0ea5e9; --adp-background-color-selected-other-month: #0c4a6e; --adp-color: #e2e8f0; --adp-color-secondary: #94a3b8; --adp-accent-color: var(--accent, #38bdf8); --adp-color-current-date: var(--accent, #38bdf8); --adp-color-other-month: #64748b; --adp-color-disabled: #475569; --adp-color-disabled-in-range: #64748b; --adp-color-other-month-hover: #94a3b8; --adp-border-color: #334155; --adp-border-color-inner: #334155; --adp-border-color-inline: #334155; --adp-nav-color-secondary: #94a3b8; --adp-nav-arrow-color: #94a3b8; --adp-day-name-color: var(--accent, #38bdf8); --adp-day-name-color-hover: #cbd5e1; --adp-cell-background-color-hover: #334155; --adp-cell-background-color-selected: var(--accent, #0ea5e9); --adp-cell-background-color-selected-hover: #0284c7; --adp-cell-background-color-in-range: rgba(56, 189, 248, 0.12); --adp-cell-background-color-in-range-hover: rgba(56, 189, 248, 0.2); --adp-cell-border-color-in-range: rgba(56, 189, 248, 0.4); --adp-btn-color: #cbd5e1; --adp-btn-color-hover: #e2e8f0; --adp-btn-background-color-hover: #334155; --adp-btn-background-color-active: #475569; --adp-time-track-color: #475569; --adp-time-track-color-hover: #64748b; --adp-time-day-period-color: #94a3b8; --adp-overlay-background-color: rgba(0, 0, 0, 0.5); }