/*
 * CALI shared flatpickr theme.
 * Applied to every date / datetime / time picker across the app (admin, public
 * intake, client portal, questionnaires, connect). Self-contained: each brand
 * colour falls back to its hex value so this works in layouts that don't define
 * the --cali-* custom properties.
 */

.flatpickr-calendar.cali-flatpickr,
.flatpickr-calendar {
    width: 326px;
    border: 1px solid var(--cali-border, #e6dfd4);
    border-radius: 10px;
    background: #fffdf8;
    box-shadow: 0 24px 60px rgba(32, 48, 40, 0.18);
    color: var(--cali-ink, #1a1a1a);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow: hidden;
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
    border-bottom-color: #fffdf8;
    border-top-color: #fffdf8;
}

.flatpickr-months {
    padding: 10px 10px 0;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    background: transparent;
    color: var(--cali-ink, #1a1a1a);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.94rem;
    font-weight: 500;
}

.flatpickr-current-month {
    padding-top: 4px;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background: rgba(168, 181, 162, 0.16);
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    top: 11px;
    color: var(--cali-forest, #30382b);
    fill: var(--cali-forest, #30382b);
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    color: var(--cali-rust, #c46a4a);
    fill: var(--cali-rust, #c46a4a);
}

span.flatpickr-weekday {
    color: var(--cali-muted, #746f67);
    font-size: 0.72rem;
    font-weight: 700;
}

.flatpickr-day {
    border-radius: 999px;
    color: var(--cali-ink, #1a1a1a);
    font-size: 0.86rem;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: rgba(44, 44, 42, 0.26);
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    border-color: rgba(168, 181, 162, 0.32);
    background: rgba(168, 181, 162, 0.18);
    color: var(--cali-ink, #1a1a1a);
}

.flatpickr-day.today {
    border-color: var(--cali-rust, #c46a4a);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    border-color: var(--cali-forest, #30382b);
    background: var(--cali-forest, #30382b);
    color: #fffdf8;
}

.flatpickr-time {
    border-top-color: var(--cali-border, #e6dfd4);
    background: rgba(247, 246, 242, 0.72);
}

.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
    color: var(--cali-ink, #1a1a1a);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 600;
}

.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus {
    background: rgba(168, 181, 162, 0.16);
}

/*
 * Typed-entry footer: lives inside the calendar popover. Idle it invites typing,
 * while typing it confirms the interpretation ("Saturday · August 15, 2026"),
 * and it warns about unavailable dates instead of silently rejecting them.
 */
.cali-fp-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px 10px;
    border-top: 1px solid var(--cali-border, #e6dfd4);
    background: rgba(247, 246, 242, 0.72);
    color: var(--cali-muted, #746f67);
    font-size: 0.78rem;
    line-height: 1.35;
    text-align: left;
}

.cali-fp-hint-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
}

.cali-fp-hint--idle .cali-fp-hint-icon {
    display: none;
}

.cali-fp-hint--ok .cali-fp-hint-icon {
    background: var(--cali-forest, #30382b);
    color: #fffdf8;
}

.cali-fp-hint--ok .cali-fp-hint-text {
    color: var(--cali-ink, #1a1a1a);
}

.cali-fp-hint--ok .cali-fp-hint-text strong {
    font-weight: 600;
    font-style: italic;
}

.cali-fp-hint--warn .cali-fp-hint-icon {
    background: var(--cali-rust, #c46a4a);
    color: #fffdf8;
}

.cali-fp-hint--warn .cali-fp-hint-text {
    color: var(--cali-rust, #c46a4a);
}

/* Typed text the picker couldn't read: kept in the field, flagged, never wiped. */
input.cali-date-invalid {
    border-color: var(--cali-rust, #c46a4a);
}