/* ── Creative Flatpickr theme ─────────────────────────────────────────────
   Matches the app's indigo/purple gradient branding (#6366f1 → #818cf8).
   Used by public/admin/js/custom-datepicker.js to power every
   input[type="date"] across the app. */

.flatpickr-calendar {
    border: none;
    border-radius: 16px;
    box-shadow: 0 10px 35px rgba(99, 102, 241, 0.18), 0 2px 8px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    font-family: inherit;
    width: 300px;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
    display: none;
}

/* ── Header ────────────────────────────────────────────────────────────── */
.flatpickr-months {
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    padding: 14px 0 18px;
    border-radius: 16px 16px 0 0;
}
.flatpickr-months .flatpickr-month {
    color: #fff;
    fill: #fff;
    height: 34px;
}
.flatpickr-current-month {
    padding-top: 4px;
}
.flatpickr-current-month .cur-month,
.flatpickr-current-month input.cur-year {
    color: #fff;
    font-weight: 700;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
    color: #fff;
}
.flatpickr-current-month .flatpickr-monthDropdown-months option {
    color: #1e293b;
}
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
    border-bottom-color: #fff;
}
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
    border-top-color: #fff;
}
.flatpickr-current-month .numInputWrapper:hover {
    background: rgba(255, 255, 255, 0.15);
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    top: 8px;
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    fill: #fff;
    border-radius: 50%;
    transition: background 0.15s ease;
}
.flatpickr-months .flatpickr-prev-month {
    left: 8px;
}
.flatpickr-months .flatpickr-next-month {
    right: 8px;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    fill: #fff;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    fill: #fff;
}

/* ── Weekdays ──────────────────────────────────────────────────────────── */
.flatpickr-weekdays {
    background: #f8fafc;
    padding-top: 8px;
}
span.flatpickr-weekday {
    background: #f8fafc;
    color: #94a3b8;
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Days ──────────────────────────────────────────────────────────────── */
.flatpickr-days {
    border: none;
}
.dayContainer {
    padding: 8px 6px 2px;
}
.flatpickr-day {
    max-width: none;
    border-radius: 10px;
    color: #334155;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.flatpickr-day:hover {
    background: #eef2ff;
    border-color: #eef2ff;
    color: #4f46e5;
}
.flatpickr-day.today {
    border-color: #6366f1;
    color: #6366f1;
    font-weight: 700;
}
.flatpickr-day.today:hover {
    background: #6366f1;
    color: #fff;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    border-color: transparent;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.35);
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #cbd5e1;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: #e2e8f0;
}

/* ── Footer (Today / Clear) ────────────────────────────────────────────── */
.flatpickr-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px 10px;
    margin-top: 2px;
    border-top: 1px solid #f1f5f9;
}
.flatpickr-footer button {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
}
.flatpickr-footer .fp-clear-btn {
    color: #94a3b8;
}
.flatpickr-footer .fp-clear-btn:hover {
    background: #f1f5f9;
    color: #64748b;
}
.flatpickr-footer .fp-today-btn {
    color: #6366f1;
}
.flatpickr-footer .fp-today-btn:hover {
    background: #eef2ff;
}

/* ── Alt input (the visible, friendly-formatted field) ────────────────────
   flatpickr keeps the original input[type=date] in the form (hidden) and
   shows this styled text input to the user. */
input.custom-fp-alt {
    background-color: #fff;
    cursor: pointer;
}