/* ============================================================================
   DGA Design System — Date Picker theme for Flatpickr 4.6.x
   ----------------------------------------------------------------------------
   Load AFTER /css/flatpickr.min.css.
   Applies to calendars that carry the .dga-datepicker class
   (added by /js/v2/flatpickr-init.js).
   Supports LTR and RTL (Arabic) out of the box.
   ========================================================================== */

.flatpickr-calendar.dga-datepicker {
    /* Colours are the DGA design tokens (HSL values as published):
       background-primary-default  hsl(153 66% 31%)  -> #1b8354
       text-default                hsl(0 0% 9%)      -> #171717
       text-tertiary               hsl(215 16% 47%)  -> #65758b
       text-secondary-paragraph    hsl(218 8% 46%)   -> #6c737f
       text-oncolor-primary        hsl(0 0% 100%)    -> #ffffff */
    --dga-dp-primary: #1b8354;
    --dga-dp-primary-hover: #14704a;
    --dga-dp-primary-soft: #e7f4ee;
    --dga-dp-text: #171717;
    --dga-dp-muted: #65758b;
    --dga-dp-outside: #6c737f;
    --dga-dp-border: #e4e7ec;
    --dga-dp-hover: #f2f4f7;
    --dga-dp-disabled: #d0d5dd;
    /* the fill baked into arrow-left-02.svg / arrow-right-02.svg */
    --dga-dp-arrow: #161616;
    --dga-dp-radius: 12px;
    --dga-dp-cell: 48px;
    --dga-dp-chip: 40px;

    /* Text md = 16px/24px, Text sm = 14px/20px */
    --dga-dp-text-md: 16px;
    --dga-dp-text-md-lh: 24px;
    --dga-dp-text-sm: 14px;
    --dga-dp-text-sm-lh: 20px;

    width: 368px;
    max-width: 100vw;
    padding: 16px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--dga-dp-border);
    border-radius: var(--dga-dp-radius);
    box-shadow: 0 12px 24px -8px rgba(16, 24, 40, .12), 0 4px 8px -4px rgba(16, 24, 40, .06);
    /* the site's :root sets "IBMPlexSansArabic-Regular", which is not a
       declared family — naming the real one lets numeric weights resolve
       to the actual 400/500/700 faces instead of being synthesised */
    font-family: "IBMPlexSansArabic", sans-serif;
    color: var(--dga-dp-text);
}

.flatpickr-calendar.dga-datepicker.arrowTop::before,
.flatpickr-calendar.dga-datepicker.arrowTop::after,
.flatpickr-calendar.dga-datepicker.arrowBottom::before,
.flatpickr-calendar.dga-datepicker.arrowBottom::after {
    display: none;
}

/* ---------------------------------------------------------------- header -- */

.flatpickr-calendar.dga-datepicker .flatpickr-months {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 2px 10px;
    background: transparent;
}

.flatpickr-calendar.dga-datepicker .flatpickr-month {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    text-align: start;
    background: transparent;
    color: var(--dga-dp-text);
    overflow: visible;
}

.flatpickr-calendar.dga-datepicker .flatpickr-current-month {
    position: static;
    /* flatpickr ships `transform: translate3d(0,0,0)` here, which creates a
       stacking context and would trap the year menu behind the day grid. */
    transform: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    height: auto;
    padding: 4px 6px;
    font-size: var(--dga-dp-text-md);
    font-weight: 500;
    line-height: var(--dga-dp-text-md-lh);
    color: var(--dga-dp-text);
}

/* month navigation buttons */
.flatpickr-calendar.dga-datepicker .flatpickr-prev-month,
.flatpickr-calendar.dga-datepicker .flatpickr-next-month {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    padding: 8px 16px;
    border-radius: 4px;
    color: var(--dga-dp-arrow);
    fill: currentColor;
    transition: background-color .15s ease;
}

.flatpickr-calendar.dga-datepicker .flatpickr-prev-month {
    order: 2;
}

.flatpickr-calendar.dga-datepicker .flatpickr-next-month {
    order: 3;
}

/* hover tints the button background only — the arrow keeps its resting colour */
.flatpickr-calendar.dga-datepicker .flatpickr-prev-month:hover,
.flatpickr-calendar.dga-datepicker .flatpickr-next-month:hover {
    background: var(--dga-dp-hover);
}

/* Arrow glyphs come from the project icon set:
   /images/icons/arrow-left-02.svg and /images/icons/arrow-right-02.svg.
   They are applied as masks so they inherit `color` (hover, disabled, etc.). */
.flatpickr-calendar.dga-datepicker .dga-dp-arrow {
    display: block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 20px 20px;
    mask-size: 20px 20px;
}

.flatpickr-calendar.dga-datepicker .dga-dp-arrow--prev {
    -webkit-mask-image: url("/images/icons/arrow-left-02.svg");
    mask-image: url("/images/icons/arrow-left-02.svg");
}

.flatpickr-calendar.dga-datepicker .dga-dp-arrow--next {
    -webkit-mask-image: url("/images/icons/arrow-right-02.svg");
    mask-image: url("/images/icons/arrow-right-02.svg");
}

/* In RTL "previous" points right, so the two files swap rather than mirror */
.flatpickr-calendar.dga-datepicker.dga-datepicker--rtl .dga-dp-arrow--prev {
    -webkit-mask-image: url("/images/icons/arrow-right-02.svg");
    mask-image: url("/images/icons/arrow-right-02.svg");
}

.flatpickr-calendar.dga-datepicker.dga-datepicker--rtl .dga-dp-arrow--next {
    -webkit-mask-image: url("/images/icons/arrow-left-02.svg");
    mask-image: url("/images/icons/arrow-left-02.svg");
}

.flatpickr-calendar.dga-datepicker .flatpickr-prev-month.flatpickr-disabled,
.flatpickr-calendar.dga-datepicker .flatpickr-next-month.flatpickr-disabled {
    opacity: .35;
    pointer-events: none;
}

/* month name rendered as plain text (monthSelectorType: 'static') */
/* month name — Text md/Medium, 16px/24px, weight 500 */
.flatpickr-calendar.dga-datepicker .flatpickr-current-month .cur-month {
    margin: 0;
    font-family: inherit;
    font-size: var(--dga-dp-text-md);
    font-weight: 500;
    line-height: var(--dga-dp-text-md-lh);
    color: var(--dga-dp-text);
}

.flatpickr-calendar.dga-datepicker .flatpickr-current-month .cur-month:hover {
    background: transparent;
}

/* ---- year dropdown in the header:  2024 v ---------------------------- */

/* the menu must be able to escape the header box */
.flatpickr-calendar.dga-datepicker .flatpickr-months,
.flatpickr-calendar.dga-datepicker .flatpickr-month {
    overflow: visible;
}

/* flatpickr's year number-input is replaced by the dropdown below */
.flatpickr-calendar.dga-datepicker .numInputWrapper {
    display: none;
}

.flatpickr-calendar.dga-datepicker .dga-dp-year {
    position: relative;
    z-index: 10;
    display: inline-flex;
    align-items: center;
}

.flatpickr-calendar.dga-datepicker .dga-dp-yeartrigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding:
        8px 16px;
    background: transparent;
    border: 0;
    border-radius: 4px;
    font-family: inherit;
    font-size: var(--dga-dp-text-sm);
    font-weight: 500;
    line-height: var(--dga-dp-text-sm-lh);
    color: var(--dga-dp-text);
    cursor: pointer;
    transition: background-color .15s ease;
}

.flatpickr-calendar.dga-datepicker .dga-dp-yeartrigger:hover,
.flatpickr-calendar.dga-datepicker .dga-dp-yeartrigger.is-open {
    background: var(--dga-dp-hover);
}

.flatpickr-calendar.dga-datepicker .dga-dp-yeartrigger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(27, 131, 84, .18);
}

/* caret from the project icon set: /images/icons/arrow-down.svg */
.flatpickr-calendar.dga-datepicker .dga-dp-yeartrigger::after {
    content: "";
    width: 16px;
    height: 16px;
    flex: none;
    background-color: currentColor;
    -webkit-mask: url("/images/icons/arrow-down.svg") center/16px 16px no-repeat;
    mask: url("/images/icons/arrow-down.svg") center/16px 16px no-repeat;
    transition: transform .15s ease;
}

.flatpickr-calendar.dga-datepicker .dga-dp-yeartrigger.is-open::after {
    transform: rotate(180deg);
}

/* ---- the scrollable year list ---- */

.flatpickr-calendar.dga-datepicker .dga-dp-yearmenu {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-start: 0;
    z-index: 10;
    min-width: 104px;
    max-height: 208px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--dga-dp-border);
    border-radius: 10px;
    box-shadow: 0 12px 20px -6px rgba(16, 24, 40, .16), 0 4px 8px -4px rgba(16, 24, 40, .08);
    scrollbar-width: thin;
    scrollbar-color: #d0d5dd transparent;
}

.flatpickr-calendar.dga-datepicker .dga-dp-yearmenu[hidden] {
    display: none;
}

.flatpickr-calendar.dga-datepicker .dga-dp-yearmenu::-webkit-scrollbar {
    width: 6px;
}

.flatpickr-calendar.dga-datepicker .dga-dp-yearmenu::-webkit-scrollbar-track {
    background: transparent;
}

.flatpickr-calendar.dga-datepicker .dga-dp-yearmenu::-webkit-scrollbar-thumb {
    background: #d0d5dd;
    border-radius: 999px;
}

.flatpickr-calendar.dga-datepicker .dga-dp-yearmenu__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    font-family: inherit;
    font-size: var(--dga-dp-text-sm);
    font-weight: 400;
    line-height: var(--dga-dp-text-sm-lh);
    text-align: start;
    color: var(--dga-dp-text);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.flatpickr-calendar.dga-datepicker .dga-dp-yearmenu__item:hover {
    background: var(--dga-dp-hover);
}

.flatpickr-calendar.dga-datepicker .dga-dp-yearmenu__item:focus-visible {
    outline: none;
    background: var(--dga-dp-hover);
    box-shadow: 0 0 0 2px rgba(27, 131, 84, .25) inset;
}

/* trailing check mark on the selected year */
.flatpickr-calendar.dga-datepicker .dga-dp-yearmenu__item::after {
    content: "";
    width: 16px;
    height: 16px;
    flex: none;
    opacity: 0;
    background: var(--dga-dp-text);
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px 16px no-repeat;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px 16px no-repeat;
}

.flatpickr-calendar.dga-datepicker .dga-dp-yearmenu__item.is-selected::after {
    opacity: 1;
}

/* -------------------------------------------------------------- weekdays -- */

.flatpickr-calendar.dga-datepicker .flatpickr-innerContainer,
.flatpickr-calendar.dga-datepicker .flatpickr-rContainer,
.flatpickr-calendar.dga-datepicker .flatpickr-days {
    width: 100%;
    background: transparent;
    border: 0;
    overflow: visible;
}

.flatpickr-calendar.dga-datepicker .flatpickr-weekdays {
    height: 40px;
    background: transparent;
}

.flatpickr-calendar.dga-datepicker .flatpickr-weekdaycontainer {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    width: 100%;
}

.flatpickr-calendar.dga-datepicker span.flatpickr-weekday {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-width: 0;
    padding: 0;
    background: transparent;
    font-size: var(--dga-dp-text-md);
    font-weight: 400;
    line-height: var(--dga-dp-text-md-lh);
    white-space: nowrap;
    color: var(--dga-dp-muted);
}

/* ------------------------------------------------------------------ days -- */

.flatpickr-calendar.dga-datepicker .dayContainer {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 0;
    justify-content: stretch;
}

.flatpickr-calendar.dga-datepicker .flatpickr-day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    max-width: none;
    flex-basis: auto;
    height: var(--dga-dp-cell);
    line-height: var(--dga-dp-cell);
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none !important;
    font-size: var(--dga-dp-text-md);
    font-weight: 400;
    color: var(--dga-dp-text);
    isolation: isolate;
}

/* the round chip behind the number */
.flatpickr-calendar.dga-datepicker .flatpickr-day::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--dga-dp-chip);
    height: var(--dga-dp-chip);
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: transparent;
    border: 2px solid transparent;
    transition: background-color .15s ease, border-color .15s ease;
    /* -1 + isolation on the cell keeps the chip above the range band
       but below the day number */
    z-index: -1;
}

.flatpickr-calendar.dga-datepicker .flatpickr-day:not(.flatpickr-disabled):not(.selected):not(.startRange):not(.endRange):hover::before {
    background: var(--dga-dp-hover);
}

/* outside-of-month days */
.flatpickr-calendar.dga-datepicker .flatpickr-day.prevMonthDay,
.flatpickr-calendar.dga-datepicker .flatpickr-day.nextMonthDay {
    color: var(--dga-dp-outside);
}

/* disabled */
.flatpickr-calendar.dga-datepicker .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar.dga-datepicker .flatpickr-day.flatpickr-disabled:hover {
    color: var(--dga-dp-disabled);
    background: transparent;
    cursor: not-allowed;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* today — 2px ring in the brand green */
.flatpickr-calendar.dga-datepicker .flatpickr-day.today::before {
    border-color: var(--dga-dp-primary);
}

/* today — Text md/Bold (700), background-primary-default */
.flatpickr-calendar.dga-datepicker .flatpickr-day.today {
    color: var(--dga-dp-primary);
    font-weight: 700;
}

/* keyboard focus */
.flatpickr-calendar.dga-datepicker .flatpickr-day:focus {
    outline: none;
}

.flatpickr-calendar.dga-datepicker .flatpickr-day:focus-visible::before {
    border-color: var(--dga-dp-primary);
    box-shadow: 0 0 0 3px rgba(27, 131, 84, .18);
}

/* ----------------------------------------------------------- range / sel -- */

/* band underneath the days that sit between the two ends */
.flatpickr-calendar.dga-datepicker .flatpickr-day.inRange {
    background: var(--dga-dp-primary-soft);
    color: var(--dga-dp-text);
}

.flatpickr-calendar.dga-datepicker .flatpickr-day.startRange {
    background: linear-gradient(to right, transparent 50%, var(--dga-dp-primary-soft) 50%);
}

.flatpickr-calendar.dga-datepicker .flatpickr-day.endRange {
    background: linear-gradient(to right, var(--dga-dp-primary-soft) 50%, transparent 50%);
}

.flatpickr-calendar.dga-datepicker .flatpickr-day.startRange.endRange {
    background: transparent;
}

/* round the band where a week row starts / ends */
.flatpickr-calendar.dga-datepicker .dayContainer .flatpickr-day:nth-child(7n + 1) {
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
}

.flatpickr-calendar.dga-datepicker .dayContainer .flatpickr-day:nth-child(7n) {
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
}

/* the selected end points */
/* selected — Text md/Regular (400) in text-oncolor-primary, not bold */
.flatpickr-calendar.dga-datepicker .flatpickr-day.selected,
.flatpickr-calendar.dga-datepicker .flatpickr-day.startRange,
.flatpickr-calendar.dga-datepicker .flatpickr-day.endRange {
    color: #fff;
    font-weight: 400;
    border: 0;
}

.flatpickr-calendar.dga-datepicker .flatpickr-day.selected::before,
.flatpickr-calendar.dga-datepicker .flatpickr-day.startRange::before,
.flatpickr-calendar.dga-datepicker .flatpickr-day.endRange::before {
    background: var(--dga-dp-primary);
    border-color: var(--dga-dp-primary);
}

.flatpickr-calendar.dga-datepicker .flatpickr-day.selected:hover::before,
.flatpickr-calendar.dga-datepicker .flatpickr-day.startRange:hover::before,
.flatpickr-calendar.dga-datepicker .flatpickr-day.endRange:hover::before {
    background: var(--dga-dp-primary-hover);
    border-color: var(--dga-dp-primary-hover);
}

/* a selected day that is also "today" keeps the white text */
.flatpickr-calendar.dga-datepicker .flatpickr-day.today.selected,
.flatpickr-calendar.dga-datepicker .flatpickr-day.today.startRange,
.flatpickr-calendar.dga-datepicker .flatpickr-day.today.endRange {
    color: #fff;
}

/* week numbers, if enabled */
.flatpickr-calendar.dga-datepicker .flatpickr-weekwrapper .flatpickr-weeks {
    box-shadow: none;
    border-right: 1px solid var(--dga-dp-border);
}

.flatpickr-calendar.dga-datepicker .flatpickr-weekwrapper span.flatpickr-day {
    color: var(--dga-dp-muted);
    font-size: 12px;
}

/* --------------------------------------------------------------- RTL --- */

.flatpickr-calendar.dga-datepicker.dga-datepicker--rtl {
    direction: rtl;
}

.flatpickr-calendar.dga-datepicker.dga-datepicker--rtl .flatpickr-months {
    direction: rtl;
}

.flatpickr-calendar.dga-datepicker.dga-datepicker--rtl .flatpickr-weekdaycontainer,
.flatpickr-calendar.dga-datepicker.dga-datepicker--rtl .dayContainer {
    direction: rtl;
}

/* the half-band gradients have to flip with the writing direction */
.flatpickr-calendar.dga-datepicker.dga-datepicker--rtl .flatpickr-day.startRange {
    background: linear-gradient(to left, transparent 50%, var(--dga-dp-primary-soft) 50%);
}

.flatpickr-calendar.dga-datepicker.dga-datepicker--rtl .flatpickr-day.endRange {
    background: linear-gradient(to left, var(--dga-dp-primary-soft) 50%, transparent 50%);
}

.flatpickr-calendar.dga-datepicker.dga-datepicker--rtl .flatpickr-day.startRange.endRange {
    background: transparent;
}

.flatpickr-calendar.dga-datepicker.dga-datepicker--rtl .dayContainer .flatpickr-day:nth-child(7n + 1) {
    border-radius: 0 999px 999px 0;
}

.flatpickr-calendar.dga-datepicker.dga-datepicker--rtl .dayContainer .flatpickr-day:nth-child(7n) {
    border-radius: 999px 0 0 999px;
}

.flatpickr-calendar.dga-datepicker.dga-datepicker--rtl .flatpickr-weekwrapper .flatpickr-weeks {
    border-right: 0;
    border-left: 1px solid var(--dga-dp-border);
}

/* ------------------------------------------------------------ time picker -- */

.flatpickr-calendar.dga-datepicker.hasTime .flatpickr-time {
    height: 40px;
    line-height: 40px;
    margin-top: 8px;
    border-top: 1px solid var(--dga-dp-border);
}

.flatpickr-calendar.dga-datepicker .flatpickr-time input,
.flatpickr-calendar.dga-datepicker .flatpickr-time .flatpickr-time-separator,
.flatpickr-calendar.dga-datepicker .flatpickr-time .flatpickr-am-pm {
    color: var(--dga-dp-text);
    font-weight: 500;
}

.flatpickr-calendar.dga-datepicker .flatpickr-time input:hover,
.flatpickr-calendar.dga-datepicker .flatpickr-time input:focus,
.flatpickr-calendar.dga-datepicker .flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-calendar.dga-datepicker .flatpickr-time .flatpickr-am-pm:focus {
    background: var(--dga-dp-hover);
}

/* --------------------------------------------------- the input field --- */
/* NOTE: this file must be linked AFTER style-bundle(.rtl).css, otherwise the
   bundle's top:8px on .calendar-icon wins and the icon sticks to the top edge
   of the field. */

.bilingual-date-picker .input-wrapper {
    position: relative;
}

.bilingual-date-picker .input-wrapper input.form-control {
    height: 44px;
    border: 1px solid #9da4ae;
    border-radius: 8px;
    font-size: 14px;
    color: #171717;
}

/* both affordances are vertically centred.
   `display` is deliberately NOT set on .remove-date-btn — the bundle hides it
   and the partial's JS toggles it inline when the field has a value. */
.bilingual-date-picker .calendar-icon,
.bilingual-date-picker .remove-date-btn {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    line-height: 0;
}

/* The calendar icon sits at the START of the field, right beside the value
   (the right-hand side in Arabic); the clear button goes to the opposite end.
   Logical properties keep both sides correct in LTR and RTL from this one
   file, which — unlike the bundles — is not run through rtlcss. */
.bilingual-date-picker .calendar-icon {
    display: flex;
    inset-inline-start: 12px;
    inset-inline-end: auto;
    color: var(--dga-dp-arrow, #161616);
}

.bilingual-date-picker .remove-date-btn {
    inset-inline-end: 12px;
    inset-inline-start: auto;
}

.bilingual-date-picker .calendar-icon svg,
.bilingual-date-picker .remove-date-btn svg {
    display: block;
    width: 20px;
    height: 20px;
}

/* room for the calendar icon at the start and the clear button at the end */
.bilingual-date-picker input {
    padding-inline-start: 40px !important;
    padding-inline-end: 40px !important;
}