/* ==========================================================================
   Date pickers - one theme skin for every calendar in the app

   Three libraries draw calendars here:
     1. bootstrap-datepicker  every <x-userinput type="datepicker"> (forms)
     2. flatpickr             exam date & time (livewire/admin/job-list)
     3. daterangepicker       form builder's date range field
   All three get the same card, header, day cells and states from the tokens
   below, so a calendar looks the same wherever it opens. Behaviour defaults
   (format, arrows, today highlight) live in assets/js/datepicker.js.

   Loaded once from includes/head-main. The libraries' own stylesheets pin
   their cell states with long selectors, and flatpickr's and daterangepicker's
   come in after this file (pushed by their page): their rules here start with
   `body` to outrank them, and the state colours carry !important.

   Flat colours only - no gradients (bootstrap-datepicker ships them).
   ========================================================================== */

:root {
    --dp-primary: #198754;
    --dp-primary-dark: #146c43;
    --dp-primary-soft: #e8f3ee;
    --dp-primary-line: #cfe0d7;
    --dp-surface: #fff;
    --dp-border: #e3e9e6;
    --dp-hover: #f1f5f3;
    --dp-text: #1b2420;
    --dp-text-muted: #5f6b66;
    --dp-text-faint: #a3ada8;
    --dp-radius: 12px;
    --dp-cell-radius: 8px;
    --dp-shadow: 0 16px 32px -8px rgba(16, 24, 40, .16), 0 4px 8px -4px rgba(16, 24, 40, .08);
    --dp-font: "Figtree", "Hind Siliguri", system-ui, -apple-system, "Segoe UI", sans-serif;
}


/* 1. bootstrap-datepicker
   ========================================================================== */

.datepicker.datepicker-dropdown {
    z-index: 1090 !important;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius);
    background: var(--dp-surface);
    box-shadow: var(--dp-shadow);
    color: var(--dp-text);
    font-family: var(--dp-font);
    font-size: .875rem;
}

/* a gap instead of the little arrow, on whichever side the input is */
.datepicker.datepicker-dropdown::before,
.datepicker.datepicker-dropdown::after {
    display: none;
}

.datepicker.datepicker-dropdown.datepicker-orient-bottom { margin-top: 6px; }
.datepicker.datepicker-dropdown.datepicker-orient-top    { margin-top: -6px; }

.datepicker table {
    border-collapse: separate;
    border-spacing: 2px;
}

.datepicker table tr td,
.datepicker table tr th {
    width: 36px;
    height: 34px;
    border: 0;
    border-radius: var(--dp-cell-radius);
    text-shadow: none;
}

/* header: ‹  November 2026  › */
.datepicker thead tr:first-child th {
    height: 36px;
    font-weight: 600;
    color: var(--dp-text);
}

.datepicker .datepicker-switch {
    font-size: .95rem;
}

.datepicker .prev,
.datepicker .next {
    color: var(--dp-text-muted);
}

.datepicker .prev svg,
.datepicker .next svg {
    display: block;
    margin: auto;
}

.datepicker thead tr:first-child th:hover,
.datepicker tfoot tr th:hover {
    background: var(--dp-hover) !important;
    color: var(--dp-primary-dark);
}

.datepicker .prev.disabled,
.datepicker .next.disabled {
    visibility: hidden;
}

/* weekday names */
.datepicker table tr th.dow {
    height: 28px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--dp-text-faint);
    cursor: default;
}

/* days, months, years, decades */
.datepicker table tr td.day,
.datepicker table tr td span {
    color: var(--dp-text);
    font-weight: 500;
    transition: background-color .12s ease, color .12s ease;
}

.datepicker table tr td span {
    height: 44px;
    line-height: 44px;
    margin: 1%;
    border-radius: var(--dp-cell-radius);
}

.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused,
.datepicker table tr td span:hover,
.datepicker table tr td span.focused {
    background: var(--dp-hover) !important;
    color: var(--dp-text) !important;
}

.datepicker table tr td.old,
.datepicker table tr td.new,
.datepicker table tr td span.old,
.datepicker table tr td span.new {
    color: var(--dp-text-faint) !important;
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover {
    background: var(--dp-primary-soft) !important;
    color: var(--dp-primary-dark) !important;
    font-weight: 700;
}

.datepicker table tr td.range,
.datepicker table tr td.range:hover {
    background: var(--dp-primary-soft) !important;
    color: var(--dp-primary-dark) !important;
    border-radius: 0;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.today,
.datepicker table tr td.selected,
.datepicker table tr td.selected:hover,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
    background: var(--dp-primary) !important;
    border-color: var(--dp-primary) !important;
    color: #fff !important;
    font-weight: 600;
    text-shadow: none;
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover,
.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover {
    background: none !important;
    color: #cdd4d0 !important;
    cursor: not-allowed;
}

/* footer: Today / Clear buttons, when a picker turns them on */
.datepicker tfoot tr th {
    height: 32px;
    font-weight: 600;
    color: var(--dp-primary-dark);
}


/* 2. flatpickr
   ========================================================================== */

body .flatpickr-calendar {
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius);
    background: var(--dp-surface);
    box-shadow: var(--dp-shadow) !important;
    font-family: var(--dp-font);
}

body .flatpickr-calendar::before,
body .flatpickr-calendar::after {
    display: none;
}

body .flatpickr-calendar.arrowTop { margin-top: 6px; }
body .flatpickr-calendar.arrowBottom { margin-top: -6px; }

body .flatpickr-months {
    padding: 8px 6px 2px;
}

body .flatpickr-months .flatpickr-month {
    height: 36px;
    color: var(--dp-text);
    fill: var(--dp-text);
}

body .flatpickr-current-month {
    padding-top: 6px;
    font-size: .95rem;
    font-weight: 600;
}

body .flatpickr-current-month .flatpickr-monthDropdown-months,
body .flatpickr-current-month input.cur-year {
    font-weight: 600;
    color: var(--dp-text);
}

body .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
body .flatpickr-current-month .numInputWrapper:hover {
    background: var(--dp-hover);
    border-radius: 6px;
}

body .flatpickr-months .flatpickr-prev-month,
body .flatpickr-months .flatpickr-next-month {
    top: 8px;
    height: 36px;
    padding: 11px;
    border-radius: var(--dp-cell-radius);
    color: var(--dp-text-muted);
    fill: var(--dp-text-muted);
}

body .flatpickr-months .flatpickr-prev-month { left: 6px !important; }
body .flatpickr-months .flatpickr-next-month { right: 6px !important; }

body .flatpickr-months .flatpickr-prev-month:hover,
body .flatpickr-months .flatpickr-next-month:hover {
    background: var(--dp-hover);
}

/* the arrows are stroked chevrons (assets/js/datepicker.js), not filled shapes */
body .flatpickr-months .flatpickr-prev-month svg path,
body .flatpickr-months .flatpickr-next-month svg path {
    fill: none;
    stroke: currentColor;
}

body .flatpickr-months .flatpickr-prev-month:hover,
body .flatpickr-months .flatpickr-next-month:hover {
    color: var(--dp-primary-dark);
}

body span.flatpickr-weekday {
    font-size: .72rem;
    font-weight: 600;
    color: var(--dp-text-faint);
}

body .flatpickr-day {
    border: 0;
    border-radius: var(--dp-cell-radius);
    color: var(--dp-text);
    font-weight: 500;
}

body .flatpickr-day:hover,
body .flatpickr-day:focus {
    background: var(--dp-hover);
}

body .flatpickr-day.prevMonthDay,
body .flatpickr-day.nextMonthDay {
    color: var(--dp-text-faint);
}

body .flatpickr-day.today {
    background: var(--dp-primary-soft);
    color: var(--dp-primary-dark);
    font-weight: 700;
}

body .flatpickr-day.today:hover,
body .flatpickr-day.today:focus {
    background: var(--dp-primary-line);
    color: var(--dp-primary-dark);
}

body .flatpickr-day.inRange {
    background: var(--dp-primary-soft) !important;
    border-radius: 0;
    box-shadow: none !important;
}

body .flatpickr-day.selected,
body .flatpickr-day.selected:hover,
body .flatpickr-day.selected:focus,
body .flatpickr-day.startRange,
body .flatpickr-day.endRange {
    background: var(--dp-primary) !important;
    border-color: var(--dp-primary) !important;
    color: #fff !important;
    font-weight: 600;
}

body .flatpickr-day.flatpickr-disabled,
body .flatpickr-day.flatpickr-disabled:hover {
    background: none;
    color: #cdd4d0;
}

/* time row, under the days */
body .flatpickr-calendar.hasTime .flatpickr-time {
    height: 44px;
    border-top: 1px solid var(--dp-border);
}

body .flatpickr-time input,
body .flatpickr-time .flatpickr-am-pm,
body .flatpickr-time .flatpickr-time-separator {
    color: var(--dp-text);
    font-weight: 600;
}

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


/* 3. daterangepicker
   ========================================================================== */

body .daterangepicker {
    z-index: 1090;
    margin-top: 6px;
    padding: 4px;
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius);
    background: var(--dp-surface);
    box-shadow: var(--dp-shadow);
    color: var(--dp-text);
    font-family: var(--dp-font);
    font-size: .875rem;
}

body .daterangepicker::before,
body .daterangepicker::after {
    display: none;
}

body .daterangepicker.drop-up {
    margin-top: -6px;
}

body .daterangepicker .drp-calendar {
    max-width: none;
}

body .daterangepicker .calendar-table {
    border: 0;
    background: transparent;
}

body .daterangepicker .calendar-table table {
    border-collapse: separate;
    border-spacing: 2px;
}

body .daterangepicker .calendar-table th,
body .daterangepicker .calendar-table td {
    width: 36px;
    min-width: 36px;
    height: 34px;
    border: 0;
    border-radius: var(--dp-cell-radius);
    font-size: .875rem;
}

body .daterangepicker th.month {
    font-size: .95rem;
    font-weight: 600;
}

body .daterangepicker thead tr:last-child th {
    font-size: .72rem;
    font-weight: 600;
    color: var(--dp-text-faint);
}

body .daterangepicker .calendar-table .next span,
body .daterangepicker .calendar-table .prev span {
    border-color: var(--dp-text-muted);
}

body .daterangepicker th.available:hover,
body .daterangepicker td.available:hover {
    background: var(--dp-hover);
}

body .daterangepicker td.available {
    font-weight: 500;
}

body .daterangepicker td.off,
body .daterangepicker td.off.in-range,
body .daterangepicker td.off.start-date,
body .daterangepicker td.off.end-date {
    background: none !important;
    color: var(--dp-text-faint) !important;
}

body .daterangepicker td.in-range {
    background: var(--dp-primary-soft) !important;
    color: var(--dp-primary-dark) !important;
    border-radius: 0;
}

body .daterangepicker td.active,
body .daterangepicker td.active:hover {
    background: var(--dp-primary) !important;
    color: #fff !important;
    font-weight: 600;
}

body .daterangepicker td.start-date { border-radius: var(--dp-cell-radius) 0 0 var(--dp-cell-radius); }
body .daterangepicker td.end-date { border-radius: 0 var(--dp-cell-radius) var(--dp-cell-radius) 0; }
body .daterangepicker td.start-date.end-date { border-radius: var(--dp-cell-radius); }

body .daterangepicker td.disabled,
body .daterangepicker option.disabled {
    color: #cdd4d0;
    text-decoration: none;
}

body .daterangepicker .drp-buttons {
    padding: 10px 12px;
    border-top: 1px solid var(--dp-border);
}

body .daterangepicker .drp-selected {
    color: var(--dp-text-muted);
    font-size: .8rem;
}

body .daterangepicker .drp-buttons .btn {
    padding: 6px 14px;
    border-radius: var(--dp-cell-radius);
    font-size: .8125rem;
    font-weight: 600;
}

body .daterangepicker .drp-buttons .btn-primary {
    background: var(--dp-primary);
    border-color: var(--dp-primary);
    color: #fff;
}

body .daterangepicker .drp-buttons .btn-primary:hover {
    background: var(--dp-primary-dark);
    border-color: var(--dp-primary-dark);
}

body .daterangepicker .drp-buttons .btn-default {
    border: 1px solid var(--dp-border);
    background: var(--dp-surface);
    color: var(--dp-text-muted);
}

body .daterangepicker .drp-buttons .btn-default:hover {
    background: var(--dp-hover);
    color: var(--dp-text);
}


@media (prefers-reduced-motion: reduce) {
    .datepicker table tr td.day,
    .datepicker table tr td span {
        transition: none;
    }
}