/* =============================================================================
   Flatpickr, in the site theme.

   Load after flatpickr.min.css. Colours, radius and shadow come from the
   design tokens (app/base/tokens.css), so the calendar follows the same
   primary blue, slate text and soft elevation as the rest of the app.
   ============================================================================= */

:root .flatpickr-calendar {
    width: 296px;
    padding: 10px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    background: var(--surface, #ffffff);
    box-shadow: var(--shadow-lg, 0 8px 20px rgba(15, 23, 42, .06), 0 24px 64px rgba(15, 23, 42, .12));
    font-family: inherit;
    color: var(--color-text, #0f172a);
}

/* The little arrow that points at the input. */
:root .flatpickr-calendar.arrowTop::before,
:root .flatpickr-calendar.arrowBottom::before { border-color: transparent; }
:root .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--surface, #ffffff); }
:root .flatpickr-calendar.arrowBottom::after { border-top-color: var(--surface, #ffffff); }

/* ---- Month header ---- */
:root .flatpickr-months { align-items: center; padding: 2px 0 8px; }
:root .flatpickr-months .flatpickr-month {
    height: 36px;
    color: var(--color-text, #0f172a);
    fill: var(--color-text, #0f172a);
}
:root .flatpickr-current-month {
    padding-top: 6px;
    font-size: 14px;
    font-weight: 600;
}
:root .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
:root .flatpickr-calendar .flatpickr-current-month .numInputWrapper input.cur-year {
    font-weight: 600;
    color: inherit;
}
:root .flatpickr-current-month .flatpickr-monthDropdown-months {
    border-radius: 6px;
    padding: 2px 4px;
}
:root .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
:root .flatpickr-current-month .numInputWrapper:hover { background: var(--theme-surface-subtle, var(--slate-100, #f1f5f9)); border-radius: 6px; }

:root .flatpickr-months .flatpickr-prev-month,
:root .flatpickr-months .flatpickr-next-month {
    top: 10px;
    width: 32px;
    height: 32px;
    padding: 8px;
    border-radius: 8px;
    color: var(--theme-muted, var(--slate-500, #64748b));
    fill: var(--slate-500, #64748b);
}
:root .flatpickr-months .flatpickr-prev-month { left: 10px; }
:root .flatpickr-months .flatpickr-next-month { right: 10px; }
:root .flatpickr-months .flatpickr-prev-month:hover,
:root .flatpickr-months .flatpickr-next-month:hover { background: var(--theme-surface-subtle, var(--slate-100, #f1f5f9)); }
:root .flatpickr-months .flatpickr-prev-month:hover svg,
:root .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--color-primary, #2563eb); }
:root .flatpickr-months .flatpickr-prev-month svg,
:root .flatpickr-months .flatpickr-next-month svg { width: 12px; height: 12px; }

/* ---- Weekday row ---- */
:root .flatpickr-weekdays { height: 30px; }
:root span.flatpickr-weekday {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--theme-muted, var(--slate-500, #64748b));
}

/* ---- Days ---- */
:root .flatpickr-innerContainer,
:root .flatpickr-rContainer,
:root .flatpickr-days,
:root .dayContainer { width: 274px; min-width: 274px; max-width: 274px; }

:root .flatpickr-day {
    max-width: 38px;
    height: 36px;
    line-height: 34px;
    margin: 1px 0;
    border-radius: 9px;
    font-size: 13.5px;
    color: var(--color-text, #0f172a);
}
:root .flatpickr-day:hover,
:root .flatpickr-day:focus,
:root .flatpickr-day.prevMonthDay:hover,
:root .flatpickr-day.nextMonthDay:hover {
    background: var(--theme-surface-subtle, var(--slate-100, #f1f5f9));
    border-color: var(--theme-border, var(--slate-100, #f1f5f9));
}
:root .flatpickr-day:focus-visible { outline: 2px solid var(--color-primary, #2563eb); outline-offset: 1px; }

:root .flatpickr-day.today {
    border-color: var(--color-primary, #2563eb);
    color: var(--theme-primary-text, var(--color-primary, #2563eb));
    font-weight: 600;
}
:root .flatpickr-day.today:hover,
:root .flatpickr-day.today:focus {
    background: rgba(37, 99, 235, .08);
    border-color: var(--color-primary, #2563eb);
    color: var(--theme-primary-text, var(--color-primary, #2563eb));
}

:root .flatpickr-day.selected,
:root .flatpickr-day.startRange,
:root .flatpickr-day.endRange,
:root .flatpickr-day.selected:hover,
:root .flatpickr-day.selected:focus,
:root .flatpickr-day.startRange:hover,
:root .flatpickr-day.endRange:hover {
    background: var(--color-primary, #2563eb);
    border-color: var(--color-primary, #2563eb);
    color: #ffffff;
    font-weight: 600;
    box-shadow: none;
}
:root .flatpickr-day.inRange {
    background: rgba(37, 99, 235, .08);
    border-color: transparent;
    box-shadow: -5px 0 0 rgba(37, 99, 235, .08), 5px 0 0 rgba(37, 99, 235, .08);
}

:root .flatpickr-day.prevMonthDay,
:root .flatpickr-day.nextMonthDay { color: var(--slate-300, #cbd5e1); }
:root .flatpickr-day.flatpickr-disabled,
:root .flatpickr-day.flatpickr-disabled:hover {
    color: var(--slate-300, #cbd5e1);
    background: transparent;
    border-color: transparent;
}

/* ---- Optional "Today" footer, added by the page script ---- */
:root .flatpickr-theme-footer {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--theme-border, var(--slate-100, #f1f5f9));
}
:root .flatpickr-theme-footer button {
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    background: var(--surface, #ffffff);
    color: var(--color-text, #0f172a);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
:root .flatpickr-theme-footer button:hover { background: var(--theme-surface-muted, var(--slate-50, #f8fafc)); }
:root .flatpickr-theme-footer button.is-primary {
    border-color: var(--color-primary, #2563eb);
    background: var(--color-primary, #2563eb);
    color: #ffffff;
}
:root .flatpickr-theme-footer button.is-primary:hover {
    background: var(--color-primary-hover, #1d4ed8);
    border-color: var(--color-primary-hover, #1d4ed8);
}

:root .flatpickr-theme-footer-start { display: flex; gap: 8px; }
:root .flatpickr-theme-footer button[hidden] { display: none; }

/* ---- Time row (datetime-local fields) ---- */
:root .flatpickr-calendar.hasTime .flatpickr-time {
    height: 44px;
    line-height: 44px;
    margin-top: 6px;
    border-top: 1px solid var(--theme-border, var(--slate-100, #f1f5f9));
}
:root .flatpickr-time input,
:root .flatpickr-time .flatpickr-am-pm,
:root .flatpickr-time .flatpickr-time-separator {
    color: var(--color-text, #0f172a);
    font-size: 15px;
}
:root .flatpickr-time input:hover,
:root .flatpickr-time input:focus,
:root .flatpickr-time .flatpickr-am-pm:hover {
    background: var(--theme-surface-subtle, var(--slate-100, #f1f5f9));
    border-radius: 8px;
}

/* The display input flatpickr puts in front of a converted date field reads
   like a field, not a text box people type in. */
.flatpickr-alt-input[readonly] { cursor: pointer; }