/*
 * ApolloUI widgets (see js/apollo/ui-kit.js): date range pill, Select2 look, picker.
 * Shape rule: filter / toolbar controls are pills; labelled data-entry fields keep an
 * 8px radius (pages opt in with .ap-field on the wrapper, e.g. a report builder grid).
 */

/* ---------- Date range trigger ----------
   Qualified selectors: the Apollo reset (.ref-content * { padding: 0 }) loads after this file. */
button.ap-range {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    min-width: 250px;
    max-width: 100%;
    padding: 0 16px 0 5px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font: inherit;
    font-size: 12.8px;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
button.ap-range:hover { border-color: #bfdbfe; background: #f8fbff; }
button.ap-range:focus-visible, button.ap-range.ap-open { outline: none; border-color: #93c5fd; box-shadow: 0 0 0 3px #dbeafe; }
.ap-range > .fa-calendar.fa-calendar {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #2563eb;
    font-size: 12.5px;
}
.ap-range .ap-range-preset { flex-shrink: 0; font-weight: 800; color: #0f172a; white-space: nowrap; }
.ap-range .ap-range-dates { color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ap-range .ap-range-preset:not(:empty) + .ap-range-dates:not(:empty)::before { content: '·'; margin-right: 6px; color: #cbd5e1; }
.ap-range .ap-range-caret { flex-shrink: 0; margin-left: auto; padding-left: 8px; font-size: 9.9px; color: #94a3b8; transition: transform .15s; }
.ap-range.ap-open .ap-range-caret.ap-range-caret { transform: rotate(180deg); }

/* ---------- Picker dropdown ---------- */
.daterangepicker.ap-range-picker {
    margin-top: 8px;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 24px 48px -16px rgba(15, 23, 42, .28);
    font-family: 'Plus Jakarta Sans', 'Nunito Sans', system-ui, sans-serif;
    overflow: hidden;
}
.daterangepicker.ap-range-picker::before, .daterangepicker.ap-range-picker::after { display: none; }

/* Presets: a full list of pills, no inner scroll. */
.daterangepicker.ap-range-picker .ranges { height: auto !important; max-height: none !important; overflow: visible !important; margin: 0; padding: 10px 8px; background: #f8fafc; border-right: 1px solid #eef2f7; }
.daterangepicker.ap-range-picker .ranges ul { width: 150px; max-height: none !important; overflow: visible !important; }
.daterangepicker.ap-range-picker .ranges li {
    margin: 0 0 2px;
    padding: 5px 12px;
    border-radius: 999px;
    color: #475569;
    font-size: 12.2px;
    font-weight: 600;
    transition: background-color .12s, color .12s;
}
.daterangepicker.ap-range-picker .ranges li:hover { background: #e8effc; color: #1d4ed8; }
.daterangepicker.ap-range-picker .ranges li.active { background: #2563eb; color: #fff; box-shadow: 0 4px 10px -4px rgba(37, 99, 235, .6); }

/* Calendars */
.daterangepicker.ap-range-picker .drp-calendar { padding: 12px 12px 6px; max-width: none; }
.daterangepicker.ap-range-picker .calendar-table { border: 0; }
.daterangepicker.ap-range-picker .calendar-table th,
.daterangepicker.ap-range-picker .calendar-table td { width: 34px; min-width: 34px; height: 32px; font-size: 12.2px; border-radius: 0; border: 0; }
.daterangepicker.ap-range-picker .calendar-table thead tr:last-child th { color: #94a3b8; font-size: 10.6px; font-weight: 800; text-transform: uppercase; }
.daterangepicker.ap-range-picker .calendar-table .prev span,
.daterangepicker.ap-range-picker .calendar-table .next span { border-color: #64748b; }
.daterangepicker.ap-range-picker .calendar-table .prev:hover,
.daterangepicker.ap-range-picker .calendar-table .next:hover { background: #f1f5f9; border-radius: 999px; }
.daterangepicker.ap-range-picker select.monthselect,
.daterangepicker.ap-range-picker select.yearselect {
    padding: 4px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #0f172a;
    font: inherit;
    font-size: 12.2px;
    font-weight: 700;
}
.daterangepicker.ap-range-picker td.available { color: #334155; font-weight: 600; }
.daterangepicker.ap-range-picker td.available:hover { background: #f1f5f9; border-radius: 999px; color: #0f172a; }
.daterangepicker.ap-range-picker td.today:not(.active) { color: #2563eb; font-weight: 800; box-shadow: inset 0 -2px 0 #93c5fd; }
.daterangepicker.ap-range-picker td.off,
.daterangepicker.ap-range-picker td.off.in-range,
.daterangepicker.ap-range-picker td.off.start-date,
.daterangepicker.ap-range-picker td.off.end-date { background: transparent !important; color: #cbd5e1 !important; box-shadow: none; }
/* The chosen range reads as one band with rounded ends. */
.daterangepicker.ap-range-picker td.in-range { background: #eff6ff !important; color: #1d4ed8; border-radius: 0; }
.daterangepicker.ap-range-picker td.active,
.daterangepicker.ap-range-picker td.active:hover { background: #2563eb !important; color: #fff !important; font-weight: 800; }
.daterangepicker.ap-range-picker td.start-date { border-radius: 999px 0 0 999px; }
.daterangepicker.ap-range-picker td.end-date { border-radius: 0 999px 999px 0; }
.daterangepicker.ap-range-picker td.start-date.end-date { border-radius: 999px; }

/* Footer (cleared below the presets list, which can be taller than the calendars) */
.daterangepicker.ap-range-picker .drp-buttons { clear: both; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid #eef2f7; }
.daterangepicker.ap-range-picker .drp-selected { margin-right: auto; padding: 5px 12px; border-radius: 999px; background: #f1f5f9; color: #334155; font-size: 11.8px; font-weight: 700; }
.daterangepicker.ap-range-picker .drp-buttons .btn { margin: 0; padding: 8px 18px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.daterangepicker.ap-range-picker .drp-buttons .btn-light { background: #f1f5f9; color: #334155; border: 0; }
.daterangepicker.ap-range-picker .drp-buttons .btn-primary { background: #2563eb; border-color: #2563eb; box-shadow: 0 6px 14px -6px rgba(37, 99, 235, .7); }

@media (max-width: 680px) {
    .daterangepicker.ap-range-picker .ranges { border-right: 0; border-bottom: 1px solid #eef2f7; }
    .daterangepicker.ap-range-picker .ranges ul { width: 100%; display: flex; flex-wrap: wrap; gap: 4px; }
    .daterangepicker.ap-range-picker .ranges li { margin: 0; }
    .daterangepicker.ap-range-picker .drp-selected { display: none; }
}

/* ---------- Select2 (filter pill) ---------- */
.select2-container .ap-s2.select2-selection {
    display: flex;
    align-items: center;
    min-height: 40px;
    height: 40px;
    padding: 0 32px 0 16px;
    border: 1px solid #e2e8f0 !important;
    border-radius: 999px !important;
    background-color: #fff;
    font-size: 12.8px;
    font-weight: 700;
    color: #334155;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.select2-container .ap-s2.select2-selection:hover { border-color: #bfdbfe !important; }
.select2-container .ap-s2 .select2-selection__rendered { padding: 0 !important; color: #334155 !important; line-height: 1.2; }
.select2-container .ap-s2 .select2-selection__arrow { right: 12px !important; }
.select2-container--open .ap-s2.select2-selection,
.select2-container--focus .ap-s2.select2-selection { border-color: #93c5fd !important; box-shadow: 0 0 0 3px #dbeafe; }
.select2-dropdown.ap-s2-dropdown {
    margin-top: 6px;
    padding: 6px;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 36px -14px rgba(15, 23, 42, .25);
    font-family: 'Plus Jakarta Sans', 'Nunito Sans', system-ui, sans-serif;
    font-size: 12.8px;
}
.select2-dropdown.ap-s2-dropdown .select2-search { padding: 0 0 6px; }
.select2-dropdown.ap-s2-dropdown .select2-search__field { border-radius: 999px !important; padding: 6px 12px !important; }
.select2-dropdown.ap-s2-dropdown .select2-results__option { margin: 1px 0; padding: 7px 12px; border-radius: 999px; font-weight: 600; color: #334155; }
.select2-dropdown.ap-s2-dropdown .select2-results__option--highlighted { background: #eff6ff !important; color: #1d4ed8 !important; }
.select2-dropdown.ap-s2-dropdown .select2-results__option--selected { background: #2563eb !important; color: #fff !important; }

/* A filter that is set stands out from the defaults. */
select[data-ap-select2].ap-set + .select2-container .ap-s2.select2-selection { border-color: #bfdbfe !important; background-color: #eff6ff; }
select[data-ap-select2].ap-set + .select2-container .ap-s2 .select2-selection__rendered { color: #1d4ed8 !important; }

/* ---------- Labelled data-entry fields: 8px, not pills ---------- */
.ap-field button.ap-range { border-radius: 8px; padding-left: 6px; }
.ap-field .ap-range > .fa-calendar { border-radius: 6px; }
.ap-field .select2-container .ap-s2.select2-selection { border-radius: 8px !important; font-weight: 600; }

[data-bs-theme="dark"] .ap-range,
[data-bs-theme="dark"] .select2-container .ap-s2.select2-selection { background-color: #1c2541; border-color: rgba(255, 255, 255, .1) !important; color: #cbd5e1; }
[data-bs-theme="dark"] .ap-range-preset { color: #f8fafc; }