/* Eyeston picker theme - brands the flatpickr calendar/time pop-ups.
   Design system: flat and sharp (no shadows, no curves), exact brand
   blue #1f3f68 in light AND dark mode. Falls back gracefully when the
   app tokens are absent (auth/booking pages still load app.css). */

.flatpickr-calendar {
    background: var(--panel-solid, #ffffff);
    color: var(--ink, #16283c);
    border: 1px solid var(--line, #d8dfe8);
    border-radius: 0;
    box-shadow: none;
    font-family: inherit;
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
    display: none; /* flat: no chrome-style speech arrow */
}

/* Header: month + year */
.flatpickr-months {
    background: var(--brand-navy, #1f3f68);
    border-radius: 0;
}
.flatpickr-months .flatpickr-month,
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: #fff;
    fill: #fff;
    height: 38px;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: #ffd166;
}
.flatpickr-current-month {
    font-size: 14px;
    font-weight: 700;
    padding-top: 8px;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: transparent;
    color: #fff;
    font-weight: 700;
    border-radius: 0;
}
.flatpickr-current-month .flatpickr-monthDropdown-months option {
    color: var(--ink, #16283c);
    background: var(--panel-solid, #fff);
}
.flatpickr-current-month input.cur-year {
    color: #fff;
    font-weight: 700;
}
.numInputWrapper:hover {
    background: rgba(255, 255, 255, 0.08);
}
.numInputWrapper span {
    border-color: rgba(255, 255, 255, 0.25);
}
.numInputWrapper span:hover {
    background: rgba(255, 255, 255, 0.15);
}
.numInputWrapper span.arrowUp::after {
    border-bottom-color: #fff;
}
.numInputWrapper span.arrowDown::after {
    border-top-color: #fff;
}

/* Weekday strip */
.flatpickr-weekdays {
    background: var(--brand-navy, #1f3f68);
    height: 26px;
}
span.flatpickr-weekday {
    background: transparent;
    color: rgba(255, 255, 255, 0.78);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Days */
.flatpickr-day {
    border-radius: 0;
    color: var(--ink, #16283c);
    font-weight: 600;
    border: 1px solid transparent;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
    background: var(--line, #e4e9f0);
    border-color: var(--line, #e4e9f0);
    color: var(--ink, #16283c);
}
.flatpickr-day.today {
    border-color: var(--brand-navy, #1f3f68);
    color: var(--brand-navy, #1f3f68);
    background: transparent;
}
.flatpickr-day.today:hover {
    background: var(--line, #e4e9f0);
    color: var(--brand-navy, #1f3f68);
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--brand-navy, #1f3f68);
    border-color: var(--brand-navy, #1f3f68);
    color: #fff;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--muted, #93a1b3);
    opacity: 0.55;
}

/* Time picker */
.flatpickr-time {
    border-top: 1px solid var(--line, #d8dfe8) !important;
    background: var(--panel-solid, #fff);
    border-radius: 0;
}
.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
    color: var(--ink, #16283c);
    background: transparent;
    font-weight: 700;
}
.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus {
    background: var(--line, #e4e9f0);
}
.flatpickr-time .numInputWrapper span.arrowUp::after {
    border-bottom-color: var(--muted, #64748b);
}
.flatpickr-time .numInputWrapper span.arrowDown::after {
    border-top-color: var(--muted, #64748b);
}

/* The visible (alt) input inherits app field styling via copied classes;
   this keeps the calendar icon affordance consistent. */
input.flatpickr-input[readonly],
input.eyeston-date-alt[readonly] {
    cursor: pointer;
    background-image: none;
}

/* Task quick-add row sizes its date input by attribute selector; the alt
   input is type=text, so mirror that rule here. */
.eyeston-task-add input.eyeston-date-alt {
    flex: 0 0 auto;
    width: auto;
}

/* ---------- Dark mode ---------- */
:root[data-theme="dark"] .flatpickr-calendar {
    background: var(--panel-solid, #101b29);
    color: var(--ink, #e6edf5);
    border-color: var(--line, #24354a);
}
:root[data-theme="dark"] .flatpickr-day {
    color: var(--ink, #e6edf5);
}
:root[data-theme="dark"] .flatpickr-day:hover,
:root[data-theme="dark"] .flatpickr-day:focus {
    background: var(--line, #24354a);
    border-color: var(--line, #24354a);
    color: var(--ink, #e6edf5);
}
:root[data-theme="dark"] .flatpickr-day.today {
    border-color: #36a66a;
    color: #36a66a;
}
:root[data-theme="dark"] .flatpickr-day.selected,
:root[data-theme="dark"] .flatpickr-day.selected:hover {
    background: var(--brand-navy, #1f3f68);
    border-color: var(--brand-navy, #1f3f68);
    color: #fff;
}
:root[data-theme="dark"] .flatpickr-day.flatpickr-disabled,
:root[data-theme="dark"] .flatpickr-day.prevMonthDay,
:root[data-theme="dark"] .flatpickr-day.nextMonthDay {
    color: var(--muted, #7d8da0);
}
:root[data-theme="dark"] .flatpickr-time {
    background: var(--panel-solid, #101b29);
    border-top-color: var(--line, #24354a) !important;
}
:root[data-theme="dark"] .flatpickr-time input,
:root[data-theme="dark"] .flatpickr-time .flatpickr-am-pm {
    color: var(--ink, #e6edf5);
}
:root[data-theme="dark"] .flatpickr-time input:hover,
:root[data-theme="dark"] .flatpickr-time input:focus,
:root[data-theme="dark"] .flatpickr-time .flatpickr-am-pm:hover {
    background: var(--line, #24354a);
}

/* ---------------------------------------------------------------------------
   Calendar header and the year / month chooser.
   Choosing a date is three questions, so the calendar asks them one at a time
   on one surface: press the header for years, pick one and the same surface
   becomes the months, pick one and the days return. No spinner, no second
   column, no borders around every cell: the only thing that carries weight is
   where you already are.
   --------------------------------------------------------------------------- */

/* flatpickr keeps its own header in the DOM (it owns the value) but hidden. */
.flatpickr-current-month.is-replaced {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.eyeston-cal-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    margin: 0 auto;
    padding: 0 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #ffffff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    cursor: pointer;
}

.eyeston-cal-title svg {
    flex: 0 0 auto;
    opacity: 0.55;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.eyeston-cal-title:hover svg {
    opacity: 1;
}

.flatpickr-calendar.is-jumping .eyeston-cal-title svg {
    transform: rotate(180deg);
    opacity: 1;
}

/* The month arrows belong to the day view only: in the chooser they would be a
   second way to do the same thing. */
.flatpickr-calendar.is-jumping .flatpickr-prev-month,
.flatpickr-calendar.is-jumping .flatpickr-next-month,
.flatpickr-calendar.is-jumping .flatpickr-weekdays {
    visibility: hidden;
}

/* The chooser covers the day grid rather than pushing it, so the calendar keeps
   one footprint and never jumps under the pointer. */
.eyeston-jump {
    position: absolute;
    left: 0;
    right: 0;
    top: 38px;
    bottom: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: max-content;
    gap: 2px;
    padding: 10px;
    overflow-y: auto;
    scrollbar-width: none;
    background: var(--panel-solid, #ffffff);
}

/* A class that sets display beats the `hidden` attribute, so without this the
   chooser never actually goes away: it sits over the day grid and swallows the
   clicks, and no date ever reaches the field. */
.eyeston-jump[hidden] {
    display: none;
}

.eyeston-jump::-webkit-scrollbar {
    width: 0;
}

.eyeston-cell {
    padding: 11px 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink, #16283c);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.eyeston-cell:hover:not(:disabled) {
    background: var(--line, #eef1f6);
}

.eyeston-cell.is-current {
    background: var(--brand-navy, #1f3f68);
    color: #ffffff;
    font-weight: 700;
}

/* A month the field's own min/max forbids is visibly out of reach rather than
   silently ignored when tapped. */
.eyeston-cell:disabled {
    opacity: 0.28;
    cursor: not-allowed;
}

/* ---------- Dark mode: blue, never charcoal ---------- */

:root[data-theme="dark"] .eyeston-jump {
    background: #0f2038;
}

:root[data-theme="dark"] .eyeston-cell {
    color: #e6edf5;
}

:root[data-theme="dark"] .eyeston-cell:hover:not(:disabled) {
    background: #152b49;
}

:root[data-theme="dark"] .eyeston-cell.is-current {
    background: var(--brand-green, #36a66a);
    color: #06231a;
}