/* ==========================================================================
   Air Datepicker theme (plugin/air-datepicker, v3.6.0, MIT)
   Used by: utils/common/ui/field_date.html and every .form-outline.date-outline input (the forms/filters that used
   the MDB datepicker), wired by utils/common/js/air_datepicker.html
   (loaded in every base). Colours come from color/custom_color.css.
   ========================================================================== */

.air-datepicker {
    --adp-font-family: 'Custom-Font', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --adp-font-size: 13px;
    --adp-width: 272px;
    --adp-z-index: 1100;            /* above Bootstrap/MDB modals (1055) */
    --adp-padding: 8px;
    --adp-border-radius: 12px;
    --adp-cell-border-radius: 8px;
    --adp-border-color: var(--custom_color_mercury);
    --adp-border-color-inner: var(--custom_color_zircon);
    --adp-color: var(--custom_color_bunker);
    --adp-color-secondary: var(--custom_color_rolling_stone);
    --adp-nav-color-secondary: var(--custom_color_bunker);
    --adp-accent-color: var(--custom_color_matisse);
    --adp-color-current-date: var(--custom_color_matisse);
    --adp-color-other-month: var(--custom_color_bombay);
    --adp-color-other-month-hover: var(--custom_color_rolling_stone);
    --adp-color-disabled: var(--custom_color_mercury);
    --adp-background-color-hover: var(--custom_color_zircon);
    --adp-background-color-active: var(--custom_color_mercury);
    --adp-cell-background-color-hover: var(--custom_color_zircon);
    --adp-cell-background-color-selected: var(--custom_color_v2_dark_navi_blue);
    --adp-cell-background-color-selected-hover: var(--custom_color_v2_navi_medium);
    --adp-background-color-selected-other-month: var(--custom_color_v2_abstract_blue);
    --adp-background-color-selected-other-month-focused: var(--custom_color_v2_navi_medium);
    --adp-day-name-color: var(--custom_color_bombay);
    --adp-day-name-color-hover: var(--custom_color_matisse);
    --adp-nav-arrow-color: var(--custom_color_rolling_stone);
    --adp-nav-height: 38px;
    --adp-day-cell-height: 34px;
    --adp-month-cell-height: 44px;
    --adp-year-cell-height: 48px;
    --adp-btn-height: 34px;
    --adp-btn-color: var(--custom_color_matisse);
    --adp-btn-color-hover: var(--custom_color_v2_dark_navi_blue);
    --adp-btn-background-color-hover: var(--custom_color_zircon);
    --adp-btn-background-color-active: var(--custom_color_mercury);
    box-shadow: 0 12px 32px rgba(12, 27, 61, 0.14), 0 2px 6px rgba(12, 27, 61, 0.06);
}
.air-datepicker-overlay { --adp-overlay-background-color: rgba(2, 6, 23, 0.45); --adp-overlay-z-index: 1099; }
.air-datepicker--pointer { display: none; }

.air-datepicker-nav--title { font-family: 'Custom-Font-Semibold', sans-serif; font-size: 13.5px; }
.air-datepicker-nav--title i { font-style: normal; font-weight: 400; color: var(--custom_color_rolling_stone); }
.air-datepicker-nav--action svg { width: 26px; }
.air-datepicker-body--day-names { margin: 8px 0 4px; }
.air-datepicker-body--day-name { font-size: 10px; font-weight: 700; letter-spacing: .35px; text-transform: uppercase; }
.air-datepicker-cell { font-size: 13px; transition: background .12s, color .12s; }
.air-datepicker-cell.-current-:not(.-selected-) { box-shadow: inset 0 0 0 1px var(--custom_color_regent_st_blue); font-family: 'Custom-Font-Semibold', sans-serif; }
.air-datepicker-cell.-selected- { font-family: 'Custom-Font-Semibold', sans-serif; }
.air-datepicker--buttons { padding: 6px; }
.air-datepicker-button { font-family: 'Custom-Font-Semibold', sans-serif; font-size: 12.5px; border-radius: 8px; }
.air-datepicker.-is-mobile- { --adp-border-radius: 16px; --adp-mobile-day-cell-height: 40px; }

/* ---------- the input (ui-field--date) ---------- */
.ui-field--date .ui-field__control { position: relative; }
.ui-field--date .form-control { padding-right: 32px; }
.ui-field--date .ui-field__icon {
    position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
    font-size: 12px; color: var(--custom_color_bombay); pointer-events: none; transition: color .12s;
}
.ui-field--date .form-control:focus + .ui-field__icon { color: var(--custom_color_matisse); }

/* ---------- the input inside an MDB .form-outline.date-outline (forms and report filters) ---------- */
/* Same calendar icon as .ui-field--date; replaces the toggle button the MDB datepicker used to inject. */
.form-outline.date-outline > .form-control { padding-right: 32px; }
.date-outline::after {
    content: "\f073"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; right: 11px; top: 50%; transform: translateY(-50%); z-index: 2;
    font-size: 12px; line-height: 1; color: var(--custom_color_bombay); pointer-events: none; transition: color .12s;
}
.date-outline:focus-within::after { color: var(--custom_color_matisse); }

/* ---------- phones: the library marks the field readonly to keep the keyboard shut ---------- */
/* It is still a live field, so undo the site's "locked field" look (input[readonly] cursor, MDB's grey .form-outline
   readonly fill, the plan form's grey). */
input.form-control[data-datepicker][readonly]:not(:disabled) { cursor: pointer; }
.form-outline input.form-control[data-datepicker][readonly]:not(:disabled) { background-color: transparent; }
.input-group input.form-control[data-datepicker][readonly]:not(:disabled) { background-color: #fff; }
.mpf input.form-control[data-datepicker][readonly]:not(:disabled) { background: #fff; color: var(--custom_color_ebony_clay); }