/*
 * CWH calendar / date-picker brand styling.
 *
 * Loaded globally via sharedAssets/sharedCSS.php. Targets both date-picker
 * libraries that are in use across the portals:
 *   - daterangepicker  (used by fluger_reporting.js report filters etc.)
 *   - bootstrap-datepicker  (legacy date inputs in older pages)
 *
 * Aligns active / hover / in-range cells with the same `--cwh-light-blue`
 * highlight used by the multiselect and Select2 dropdowns, so a form
 * containing a date input + calendar reads as one cohesive control set.
 *
 * !important is used because per-portal theme.css ships with hardcoded
 * `#346ee0` (and friends) date-picker rules and is loaded earlier in each
 * portal head — without !important the legacy colours win.
 */

@import url('brandingPalette.css');

/* ── daterangepicker ─────────────────────────────────────────────────────── */

.daterangepicker {
    border: 1px solid var(--cwh-border) !important;
    border-radius: 10px !important;
    background-color: var(--cwh-white) !important;
    box-shadow: 0 4px 16px rgba(0, 51, 126, 0.10) !important;
    font-family: var(--cwh-font-family) !important;
    color: var(--cwh-dark-blue);
}

/* Calendar table headers + body cells */
.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
    color: var(--cwh-dark-blue) !important;
    font-family: var(--cwh-font-family) !important;
    font-weight: var(--cwh-font-medium);
}

/* Hover */
.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    background-color: var(--cwh-light-blue) !important;
    color: var(--cwh-dark-blue) !important;
}

/* Selected date */
.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: var(--cwh-light-blue) !important;
    color: var(--cwh-dark-blue) !important;
}

/* Range fill (between start and end in range mode) */
.daterangepicker td.in-range {
    background-color: rgba(153, 209, 250, 0.30) !important; /* --cwh-light-blue @ 30% */
    color: var(--cwh-dark-blue) !important;
}

.daterangepicker td.start-date,
.daterangepicker td.end-date {
    background-color: var(--cwh-light-blue) !important;
    color: var(--cwh-dark-blue) !important;
    font-weight: var(--cwh-font-bold);
}

/* Off-month / disabled days */
.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
    background-color: var(--cwh-white) !important;
    color: var(--cwh-light-grey) !important;
}

/* Quick-range list (Yesterday, Last 7 Days, ...) */
.daterangepicker .ranges li {
    color: var(--cwh-dark-blue);
    font-family: var(--cwh-font-family);
    font-weight: var(--cwh-font-medium);
}

.daterangepicker .ranges li:hover {
    background-color: var(--cwh-light-blue) !important;
    color: var(--cwh-dark-blue) !important;
}

.daterangepicker .ranges li.active {
    background-color: var(--cwh-light-blue) !important;
    color: var(--cwh-dark-blue) !important;
    font-weight: var(--cwh-font-bold);
}

/* Apply / Cancel buttons */
.daterangepicker .drp-buttons {
    border-top: 1px solid var(--cwh-border) !important;
}

.daterangepicker .drp-buttons .btn.btn-primary,
.daterangepicker .drp-buttons .applyBtn {
    background-color: var(--cwh-dark-blue) !important;
    border-color: var(--cwh-dark-blue) !important;
    color: var(--cwh-white) !important;
    font-family: var(--cwh-font-family);
    font-weight: var(--cwh-font-medium);
}

.daterangepicker .drp-buttons .btn.btn-default,
.daterangepicker .drp-buttons .cancelBtn {
    background-color: var(--cwh-white) !important;
    border-color: var(--cwh-border) !important;
    color: var(--cwh-dark-blue) !important;
    font-family: var(--cwh-font-family);
    font-weight: var(--cwh-font-medium);
}

/* Month / year selectors at top */
.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    border: 1px solid var(--cwh-border) !important;
    border-radius: 6px !important;
    color: var(--cwh-dark-blue) !important;
    background: var(--cwh-white) !important;
    font-family: var(--cwh-font-family) !important;
    font-weight: var(--cwh-font-medium);
    padding: 0.15rem 0.4rem;
}

/* Caret arrows on the popup */
.daterangepicker:before {
    border-bottom-color: var(--cwh-border) !important;
}
.daterangepicker:after {
    border-bottom-color: var(--cwh-white) !important;
}

/* ── bootstrap-datepicker ────────────────────────────────────────────────── */

.datepicker {
    border: 1px solid var(--cwh-border) !important;
    border-radius: 10px !important;
    background-color: var(--cwh-white) !important;
    box-shadow: 0 4px 16px rgba(0, 51, 126, 0.10);
    font-family: var(--cwh-font-family) !important;
    color: var(--cwh-dark-blue);
}

.datepicker table tr td,
.datepicker table tr th {
    color: var(--cwh-dark-blue) !important;
    font-family: var(--cwh-font-family) !important;
    font-weight: var(--cwh-font-medium);
}

/* Hover */
.datepicker table tr td.day.focused,
.datepicker table tr td.day:hover,
.datepicker table tr td span.focused,
.datepicker table tr td span:hover {
    background-color: var(--cwh-light-blue) !important;
    color: var(--cwh-dark-blue) !important;
}

/* Active (selected) — note: theme.css uses an enormous selector list of
   compound :hover/:active states; a single broad rule with !important wins
   on the colour properties without recreating the full chain. */
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active,
.datepicker table tr td.active:active,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
    background-color: var(--cwh-light-blue) !important;
    background-image: none !important;
    color: var(--cwh-dark-blue) !important;
}

/* Today */
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
    background-color: var(--cwh-light-blue) !important;
    background-image: none !important;
    color: var(--cwh-dark-blue) !important;
    font-weight: var(--cwh-font-bold);
}

/* Off-month / disabled */
.datepicker table tr td.new,
.datepicker table tr td.old,
.datepicker table tr td span.new,
.datepicker table tr td span.old {
    color: var(--cwh-light-grey) !important;
    opacity: 1; /* override the theme.css 0.4 */
}

/* Header navigation row (datepicker switch / prev / next) */
.datepicker .datepicker-switch:hover,
.datepicker .next:hover,
.datepicker .prev:hover,
.datepicker tfoot tr th:hover {
    background-color: var(--cwh-light-blue) !important;
    color: var(--cwh-dark-blue) !important;
}

/* Caret arrows */
.datepicker-dropdown:after {
    border-bottom-color: var(--cwh-white) !important;
}
.datepicker-dropdown:before {
    border-bottom-color: var(--cwh-border) !important;
}
.datepicker-dropdown.datepicker-orient-top:after {
    border-top-color: var(--cwh-white) !important;
}
.datepicker-dropdown.datepicker-orient-top:before {
    border-top-color: var(--cwh-border) !important;
}