/* Litepicker theme overrides — matches the project's neutral palette.
   --brand-accent may be injected by layout.php; falls back to neutral-900. */

:root {
    --litepicker-container-months-color-bg: #ffffff;
    --litepicker-container-months-box-shadow-color: #e5e5e5;
    --litepicker-month-header-color: #171717;
    --litepicker-month-weekday-color: #737373;
    --litepicker-button-prev-month-color: #a3a3a3;
    --litepicker-button-next-month-color: #a3a3a3;
    --litepicker-button-prev-month-color-hover: var(--brand-accent, #171717);
    --litepicker-button-next-month-color-hover: var(--brand-accent, #171717);
    --litepicker-day-color: #262626;
    --litepicker-day-color-hover: var(--brand-accent, #171717);
    --litepicker-is-today-color: var(--brand-accent, #171717);
    --litepicker-is-in-range-color: #e5e5e5;
    --litepicker-is-locked-color: #d4d4d4;
    --litepicker-is-start-color: #ffffff;
    --litepicker-is-start-color-bg: var(--brand-accent, #171717);
    --litepicker-is-end-color: #ffffff;
    --litepicker-is-end-color-bg: var(--brand-accent, #171717);
    --litepicker-button-reset-color: #737373;
    --litepicker-button-reset-color-hover: var(--brand-accent, #171717);
}

html.dark {
    --litepicker-container-months-color-bg: #171717;
    --litepicker-container-months-box-shadow-color: rgba(0, 0, 0, 0.5);
    --litepicker-month-header-color: #f5f5f5;
    --litepicker-month-weekday-color: #a3a3a3;
    --litepicker-button-prev-month-color: #737373;
    --litepicker-button-next-month-color: #737373;
    --litepicker-button-prev-month-color-hover: #f5f5f5;
    --litepicker-button-next-month-color-hover: #f5f5f5;
    --litepicker-day-color: #e5e5e5;
    --litepicker-day-color-hover: #ffffff;
    --litepicker-is-today-color: #fafafa;
    --litepicker-is-in-range-color: #404040;
    --litepicker-is-locked-color: #525252;
    --litepicker-is-start-color: #171717;
    --litepicker-is-start-color-bg: #fafafa;
    --litepicker-is-end-color: #171717;
    --litepicker-is-end-color-bg: #fafafa;
}

.litepicker .day-item:focus,
.litepicker button:focus {
    outline: 2px solid var(--brand-accent, #171717);
    outline-offset: 1px;
}

#check-in,
#check-out {
    cursor: pointer;
}