/* Dark theme for flatpickr.
 *
 * Lifted out of create.html, which had the complete version, because
 * dashboard.html had only a partial copy: it styled the calendar, the month
 * header, the weekdays and the days, and NOTHING for the time row. flatpickr's
 * own stylesheet puts near-black text on those hour and minute fields, so on
 * the dark panel behind them the numbers were all but invisible when an author
 * tried to set a publish time.
 *
 * One file rather than two copies, so the next change lands in both places.
 * The tokens are the ones both pages already define.
 *
 * The !important flags are inherited from the original and are load-bearing:
 * flatpickr's CDN stylesheet is linked after this one on both pages, and its
 * selectors are at least as specific as these.
 */

.flatpickr-calendar {
    background: var(--bg-panel) !important;
    border: 1px solid var(--cyber-cyan) !important;
    box-shadow: var(--glow-cyan) !important;
}

/* ── Month header ─────────────────────────────────────────────────────── */
.flatpickr-months,
.flatpickr-months .flatpickr-month {
    background: var(--bg-card) !important;
    color: var(--cyber-cyan) !important;
    fill: var(--cyber-cyan) !important;
}

.flatpickr-current-month {
    font-family: var(--font-display) !important;
    color: var(--cyber-cyan) !important;
}

.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months {
    color: var(--cyber-cyan) !important;
    background: var(--bg-card) !important;
}

.flatpickr-current-month .numInputWrapper span {
    border-color: var(--cyber-cyan) !important;
}

.flatpickr-prev-month,
.flatpickr-next-month {
    fill: var(--cyber-cyan) !important;
}

.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
    fill: var(--cyber-magenta) !important;
}

/* ── Days ─────────────────────────────────────────────────────────────── */
.flatpickr-weekdays {
    background: var(--bg-card) !important;
}

.flatpickr-weekday {
    color: var(--cyber-magenta) !important;
}

.flatpickr-day {
    color: var(--text-primary) !important;
}

.flatpickr-day:hover {
    background: rgba(56, 189, 248, 0.2) !important;
    border-color: var(--cyber-cyan) !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--cyber-cyan) !important;
    border-color: var(--cyber-cyan) !important;
    color: var(--bg-void) !important;
}

.flatpickr-day.today {
    border-color: var(--cyber-magenta) !important;
}

/* Out-of-month and unavailable days. Dim, but still legible: flatpickr's own
   disabled colour is close enough to the panel to look like an empty cell. */
.flatpickr-day.disabled,
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--text-dim) !important;
}

/* ── Time row. The reason this file exists. ───────────────────────────── */
.flatpickr-time {
    background: var(--bg-card) !important;
    border-top: 1px solid var(--border-glow) !important;
}

.flatpickr-time input,
.flatpickr-time .numInput {
    color: var(--cyber-cyan) !important;
    background: transparent !important;
    font-family: var(--font-mono) !important;
    font-size: 1rem !important;
}

/* Chrome and Safari render a native caret and selection on these number
   fields; without a colour they take the page default and vanish. */
.flatpickr-time input:focus,
.flatpickr-time input:hover {
    background: var(--bg-panel) !important;
    color: var(--cyber-cyan) !important;
}

.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
    color: var(--cyber-cyan) !important;
}

.flatpickr-time .flatpickr-am-pm {
    background: var(--bg-panel) !important;
    font-weight: 600 !important;
}

.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus {
    background: var(--cyber-cyan) !important;
    color: var(--bg-void) !important;
}

/* ── Spinner arrows ───────────────────────────────────────────────────── */
.numInputWrapper span {
    border-color: var(--border-glow) !important;
}

.numInputWrapper span:hover {
    background: rgba(56, 189, 248, 0.25) !important;
}

.numInputWrapper span:after {
    border-color: var(--cyber-cyan) transparent transparent !important;
}

.numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--cyber-cyan) !important;
    border-top-color: transparent !important;
}

.numInputWrapper:hover {
    background: transparent !important;
}

/* ── Light mode ───────────────────────────────────────────────────────── */
/* The cyan-on-dark treatment above inverts badly on a white panel: pale cyan
   numerals on near-white is the same unreadable problem in the other
   direction. */
body.light-mode .flatpickr-calendar {
    background: #ffffff !important;
    border-color: #0891b2 !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16) !important;
}

body.light-mode .flatpickr-months,
body.light-mode .flatpickr-months .flatpickr-month,
body.light-mode .flatpickr-weekdays,
body.light-mode .flatpickr-time {
    background: #f2f2f6 !important;
    color: #0e7490 !important;
    fill: #0e7490 !important;
}

body.light-mode .flatpickr-day {
    color: #12121a !important;
}

body.light-mode .flatpickr-day.disabled,
body.light-mode .flatpickr-day.flatpickr-disabled,
body.light-mode .flatpickr-day.prevMonthDay,
body.light-mode .flatpickr-day.nextMonthDay {
    color: #9a9aa8 !important;
}

body.light-mode .flatpickr-time input,
body.light-mode .flatpickr-time .numInput,
body.light-mode .flatpickr-time .flatpickr-time-separator,
body.light-mode .flatpickr-time .flatpickr-am-pm,
body.light-mode .flatpickr-current-month,
body.light-mode .flatpickr-current-month input.cur-year {
    color: #0e7490 !important;
}