/* RF-4 (2026-10-11) — Flatpickr calendars styled from the template's semantic tokens, so they follow the active Theme Library
   profile and the RF-3 colour mode (light / dark) with no brand colour defined here; and laid out for the page direction
   (js/rf-flatpickr.js copies <html dir> onto every calendar). */
.flatpickr-calendar.rf-flatpickr {
    background: var(--dropdown-bg, #ffffff);
    color: var(--dropdown-fg, #212529);
    border: 1px solid var(--dropdown-border, #dee2e6);
    box-shadow: 0 6px 18px rgba(var(--shadow-rgb, 0, 0, 0), 0.18);
    font-family: inherit;
}

.flatpickr-calendar.rf-flatpickr.arrowTop::after,
.flatpickr-calendar.rf-flatpickr.arrowTop::before {
    border-bottom-color: var(--dropdown-bg, #ffffff);
}

.flatpickr-calendar.rf-flatpickr.arrowBottom::after,
.flatpickr-calendar.rf-flatpickr.arrowBottom::before {
    border-top-color: var(--dropdown-bg, #ffffff);
}

.rf-flatpickr .flatpickr-months .flatpickr-month,
.rf-flatpickr .flatpickr-current-month .flatpickr-monthDropdown-months,
.rf-flatpickr .flatpickr-current-month input.cur-year,
.rf-flatpickr span.flatpickr-weekday {
    color: var(--dropdown-fg, #212529);
    fill: var(--dropdown-fg, #212529);
    background: transparent;
}

.rf-flatpickr .flatpickr-monthDropdown-months option {
    background: var(--dropdown-bg, #ffffff);
    color: var(--dropdown-fg, #212529);
}

.rf-flatpickr .flatpickr-months .flatpickr-prev-month,
.rf-flatpickr .flatpickr-months .flatpickr-next-month {
    color: var(--dropdown-fg, #212529);
    fill: var(--dropdown-fg, #212529);
}

.rf-flatpickr .flatpickr-months .flatpickr-prev-month:hover svg,
.rf-flatpickr .flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--rf-color-primary, #0d6efd);
}

.rf-flatpickr .flatpickr-day {
    color: var(--dropdown-fg, #212529);
}

.rf-flatpickr .flatpickr-day:hover,
.rf-flatpickr .flatpickr-day:focus {
    background: var(--panel-hover, #e9ecef);
    border-color: var(--panel-hover, #e9ecef);
}

.rf-flatpickr .flatpickr-day.today {
    border-color: var(--rf-color-primary, #0d6efd);
}

.rf-flatpickr .flatpickr-day.selected,
.rf-flatpickr .flatpickr-day.selected:hover,
.rf-flatpickr .flatpickr-day.selected:focus {
    background: var(--rf-color-primary, #0d6efd);
    border-color: var(--rf-color-primary, #0d6efd);
    color: var(--menu-active-fg, #ffffff); /* the profile's text-on-primary pairing */
}

.rf-flatpickr .flatpickr-day.prevMonthDay,
.rf-flatpickr .flatpickr-day.nextMonthDay,
.rf-flatpickr .flatpickr-day.flatpickr-disabled {
    color: var(--muted-fg, #6c757d);
    opacity: 0.7;
}

.rf-flatpickr .flatpickr-time input,
.rf-flatpickr .flatpickr-time .flatpickr-am-pm,
.rf-flatpickr .flatpickr-time .flatpickr-time-separator {
    color: var(--dropdown-fg, #212529);
    background: transparent;
}

.rf-flatpickr .flatpickr-time input:hover,
.rf-flatpickr .flatpickr-time input:focus {
    background: var(--panel-hover, #e9ecef);
}

.rf-flatpickr.hasTime .flatpickr-time {
    border-top-color: var(--dropdown-border, #dee2e6);
}

/* Right-to-left: the day grid follows the inherited direction; the month arrows swap sides and point the reading way. */
.flatpickr-calendar.rf-flatpickr[dir="rtl"] {
    direction: rtl;
}

.flatpickr-calendar.rf-flatpickr[dir="rtl"] .flatpickr-months .flatpickr-prev-month {
    left: auto;
    right: 0;
}

.flatpickr-calendar.rf-flatpickr[dir="rtl"] .flatpickr-months .flatpickr-next-month {
    right: auto;
    left: 0;
}

.flatpickr-calendar.rf-flatpickr[dir="rtl"] .flatpickr-months .flatpickr-prev-month svg,
.flatpickr-calendar.rf-flatpickr[dir="rtl"] .flatpickr-months .flatpickr-next-month svg {
    transform: scaleX(-1);
}

.flatpickr-calendar.rf-flatpickr[dir="rtl"] .flatpickr-time input {
    direction: ltr; /* digits read the same way in both directions */
}

/* The value reads left to right (js/rf-flatpickr.js sets dir="ltr") but stays at the reading start of an Arabic form. */
html[dir="rtl"] input[data-rf-flatpickr="ready"] {
    text-align: right;
}

/* A calendar kept inside a modal (static) sits above the modal's own content. */
.flatpickr-wrapper {
    display: block;
}

.flatpickr-calendar.rf-flatpickr.static {
    z-index: 1060;
}