/*
 * Shared date-picker theme — FEA-272 / FEA-290 (2026-09-06).
 *
 * The owner wants every calendar on the platform to look like the flatpickr
 * one (month + year in the header, chevrons at the edges, round day cells,
 * a plain blue "Today" line in the footer). Three libraries are in use:
 *   - flatpickr 4.6.13   → the model; only gets the Today button
 *   - jQuery UI 1.13.2   → restyled here to the flatpickr look (#ui-datepicker-div)
 *   - daterangepicker 3.1.0 → restyled here to the flatpickr look
 * Values are lifted from public/vendor/flatpickr/4.6.13/flatpickr.min.css and
 * the DC overrides in frontend/css/style.css (.flatpickr-day weight 500,
 * .flatpickr-current-month 16px/500). Loaded by front/layouts/app.blade.php
 * and admin/elements/admin-css.blade.php after the vendor stylesheets.
 */

:root {
    --dp-primary: var(--primary-color, #065db5);
    --dp-ink: var(--field-color, #393939);
    --dp-muted: rgba(0, 0, 0, 0.54);
    --dp-dim: rgba(57, 57, 57, 0.3);
    --dp-line: #e6e6e6;
    --dp-today-ring: #959ea9;
    --dp-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08);
    --dp-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath fill='rgba(0,0,0,0.9)' d='M5.207 8.471l7.146 7.147-0.707 0.707-7.853-7.854 7.854-7.853 0.707 0.707-7.147 7.146z'/%3E%3C/svg%3E");
    --dp-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath fill='rgba(0,0,0,0.9)' d='M13.207 8.472l-7.854 7.854-0.707-0.707 7.146-7.146-7.146-7.148 0.707-0.707 7.854 7.854z'/%3E%3C/svg%3E");
    --dp-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='rgba(0,0,0,0.6)' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ */
/* "Today" control (Phase 1)                                           */
/* ------------------------------------------------------------------ */

/* flatpickr — button appended by public/frontend/js/flatpickr-today.js */
.flatpickr-today-btn {
    display: block;
    width: 100%;
    border: 0;
    border-top: 1px solid var(--dp-line);
    border-radius: 0 0 5px 5px;
    background: #fff;
    color: var(--dp-primary);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    padding: 8px 12px;
    cursor: pointer;
}
.flatpickr-today-btn:hover { background: #f2f8fd; }
.flatpickr-today-btn[hidden] { display: none; }

/* jQuery UI — footer enabled by showButtonPanel in datepicker-locales.js */
#ui-datepicker-div .ui-datepicker-buttonpane {
    display: flex;
    justify-content: center;
    gap: 1em;
    border: 0;
    border-top: 1px solid var(--dp-line);
    background: none;
    margin: 4px 0 0;
    padding: 2px 0 0;
}
#ui-datepicker-div .ui-datepicker-buttonpane button {
    float: none;
    width: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--dp-primary);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    opacity: 1;
    padding: 8px 12px;
    cursor: pointer;
}
#ui-datepicker-div .ui-datepicker-buttonpane button.ui-datepicker-close {
    color: #6c757d;
    font-weight: 500;
}
#ui-datepicker-div .ui-datepicker-buttonpane button:hover { background: #f2f8fd; }

/* daterangepicker — "Today" preset from the `ranges` option */
body .daterangepicker .ranges li {
    color: var(--dp-primary);
    font-size: 14px;
    font-weight: 600;
    padding: 10px 14px;
}
body .daterangepicker .ranges li:hover { background: #f2f8fd; }
body .daterangepicker .ranges li.active {
    background: var(--dp-primary);
    color: #fff;
}

/* ------------------------------------------------------------------ */
/* jQuery UI datepicker → flatpickr look                               */
/* ------------------------------------------------------------------ */

#ui-datepicker-div.ui-datepicker {
    width: 307px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: #fff;
    box-shadow: var(--dp-shadow);
    font-family: inherit;
    font-size: 14px;
    line-height: 24px;
    color: var(--dp-ink);
}

/* header: chevrons at the edges, month + year centred */
#ui-datepicker-div .ui-datepicker-header {
    position: relative;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font-weight: normal;
}
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next,
#ui-datepicker-div .ui-datepicker-prev-hover,
#ui-datepicker-div .ui-datepicker-next-hover {
    top: 0;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 0;
    background: none;
    cursor: pointer;
}
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-prev-hover { left: 0; }
#ui-datepicker-div .ui-datepicker-next,
#ui-datepicker-div .ui-datepicker-next-hover { right: 0; }
#ui-datepicker-div .ui-datepicker-prev .ui-icon,
#ui-datepicker-div .ui-datepicker-next .ui-icon {
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    background: var(--dp-chevron-left) center / 14px 14px no-repeat;
}
#ui-datepicker-div .ui-datepicker-next .ui-icon { background-image: var(--dp-chevron-right); }
#ui-datepicker-div .ui-datepicker-prev:hover .ui-icon,
#ui-datepicker-div .ui-datepicker-next:hover .ui-icon { opacity: .6; }

#ui-datepicker-div .ui-datepicker-title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    height: 34px;
    margin: 0 34px;
    line-height: 34px;
    font-size: 16px;
    font-weight: 500;
}
#ui-datepicker-div .ui-datepicker-title select,
#ui-datepicker-div .ui-datepicker-title span {
    width: auto;
    margin: 0;
    padding: 0 4px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 500;
    line-height: 1.4;
    height: auto;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
#ui-datepicker-div .ui-datepicker-title select.ui-datepicker-month {
    padding-right: 16px;
    background: var(--dp-caret) right 4px center / 10px 6px no-repeat;
}
#ui-datepicker-div .ui-datepicker-title select:hover { background-color: var(--label-tags-color, #15606414); }

/* grid: 7 round cells of 39px, weekday row muted */
#ui-datepicker-div table {
    width: 100%;
    margin: 0;
    padding: 0 4px 4px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}
#ui-datepicker-div th {
    padding: 6px 0 4px;
    border: 0;
    font-size: 90%;
    font-weight: bolder;
    color: var(--dp-muted);
}
#ui-datepicker-div td {
    padding: 1px 0 0;
    border: 0;
    text-align: center;
}
#ui-datepicker-div td span,
#ui-datepicker-div td a {
    display: block;
    width: 39px;
    height: 39px;
    margin: 0 auto;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 150px;
    background: none;
    color: var(--dp-ink);
    font-weight: 500;
    line-height: 37px;
    text-align: center;
    text-decoration: none;
}
#ui-datepicker-div td a:hover,
#ui-datepicker-div td a.ui-state-hover {
    background: var(--dp-line);
    border-color: var(--dp-line);
    color: var(--dp-ink);
}
#ui-datepicker-div td.ui-datepicker-today a,
#ui-datepicker-div td.ui-datepicker-today span { border-color: var(--dp-today-ring); }
#ui-datepicker-div td a.ui-state-active,
#ui-datepicker-div td.ui-datepicker-current-day a {
    background: var(--dp-primary);
    border-color: var(--dp-primary);
    color: #fff;
}
#ui-datepicker-div td.ui-datepicker-other-month span,
#ui-datepicker-div td.ui-datepicker-other-month a,
#ui-datepicker-div td.ui-state-disabled span,
#ui-datepicker-div td.ui-datepicker-unselectable span {
    color: var(--dp-dim);
    background: none;
    border-color: transparent;
    opacity: 1;
    cursor: default;
}

/* ------------------------------------------------------------------ */
/* daterangepicker → flatpickr look                                    */
/* The views link daterangepicker.css inside the page body, AFTER this  */
/* file, so every rule here carries a body prefix to outrank the vendor */
/* rules of equal specificity whatever the load order (TC-635).         */
/* ------------------------------------------------------------------ */

body .daterangepicker {
    border: 0;
    border-radius: 5px;
    box-shadow: var(--dp-shadow);
    margin-top: 4px;
    font-family: inherit;
    font-size: 14px;
    color: var(--dp-ink);
}
body .daterangepicker:before { border-bottom-color: var(--dp-line); }
body .daterangepicker.drop-up:before { border-top-color: var(--dp-line); }
body .daterangepicker .drp-calendar { max-width: none; }
body .daterangepicker .drp-calendar.left,
body .daterangepicker .drp-calendar.right { padding: 8px; }
body .daterangepicker.show-ranges.ltr .drp-calendar.left { border-left: 1px solid var(--dp-line); }
body .daterangepicker .calendar-table { border: 0; border-radius: 0; }

body .daterangepicker .calendar-table th,
body .daterangepicker .calendar-table td {
    box-sizing: border-box; /* page table rules add padding: keep the cell at exactly 39px (TC-635) */
    padding: 0;
    width: 39px;
    min-width: 39px;
    height: 39px;
    line-height: 37px;
    border: 1px solid transparent;
    border-radius: 150px;
    font-size: 14px;
    font-weight: 500;
    color: var(--dp-ink);
}
body .daterangepicker .calendar-table th {
    height: 28px;
    line-height: 28px;
    border-radius: 0;
    font-size: 90%;
    font-weight: bolder;
    color: var(--dp-muted);
}
body .daterangepicker .calendar-table th.month {
    height: 34px;
    line-height: 34px;
    font-size: 16px;
    font-weight: 500;
    color: var(--dp-ink);
}
body .daterangepicker .calendar-table th.prev,
body .daterangepicker .calendar-table th.next {
    height: 34px;
    line-height: 34px;
    border-radius: 150px;
}
body .daterangepicker .calendar-table .prev span,
body .daterangepicker .calendar-table .next span {
    display: inline-block;
    width: 14px;
    height: 14px;
    padding: 0;
    border: 0;
    border-radius: 0;
    vertical-align: middle;
    transform: none;
    -webkit-transform: none;
    background: var(--dp-chevron-left) center / 14px 14px no-repeat;
}
body .daterangepicker .calendar-table .next span { background-image: var(--dp-chevron-right); }
body .daterangepicker th.available:hover { background: none; opacity: .6; }
body .daterangepicker td.available:hover {
    background: var(--dp-line);
    border-color: var(--dp-line);
    color: var(--dp-ink);
}
body .daterangepicker td.in-range {
    background: var(--dp-line);
    border-color: var(--dp-line);
    border-radius: 0;
    color: var(--dp-ink);
}
body .daterangepicker td.start-date { border-radius: 150px 0 0 150px; }
body .daterangepicker td.end-date { border-radius: 0 150px 150px 0; }
body .daterangepicker td.start-date.end-date { border-radius: 150px; }
body .daterangepicker td.active,
body .daterangepicker td.active:hover {
    background: var(--dp-primary);
    border-color: var(--dp-primary);
    color: #fff;
}
body .daterangepicker td.off,
body .daterangepicker td.off.in-range,
body .daterangepicker td.off.start-date,
body .daterangepicker td.off.end-date {
    background: #fff;
    border-color: transparent;
    color: var(--dp-dim);
}
body .daterangepicker td.disabled { color: var(--dp-dim); text-decoration: none; }

body .daterangepicker .drp-buttons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid var(--dp-line);
    line-height: normal;
}
body .daterangepicker.show-calendar .drp-buttons { display: flex; }
body .daterangepicker .drp-selected {
    margin-right: auto;
    padding: 0;
    font-size: 13px;
    color: var(--dp-muted);
}
body .daterangepicker .drp-buttons .btn {
    margin: 0;
    padding: 6px 14px;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}
body .daterangepicker .drp-buttons .applyBtn {
    background: var(--dp-primary);
    border-color: var(--dp-primary);
    color: #fff;
}
body .daterangepicker .drp-buttons .cancelBtn {
    background: transparent;
    border-color: transparent;
    color: #6c757d;
}
body .daterangepicker .drp-buttons .cancelBtn:hover { background: #f2f8fd; }