/*
 * Flatpickr custom theme for Family Hub.
 * This file only styles the date and time popup and should stay aligned with variables.css.
 */

/* Calendar container */
.flatpickr-calendar {
    background: rgba(255, 252, 245, 0.96);
    border: 1px solid rgba(139, 99, 85, 0.10);
    border-radius: 16px;
    box-shadow:
        0 12px 26px rgba(90, 62, 46, 0.08),
        0 2px 8px rgba(90, 62, 46, 0.03);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
}

/* Month header bar */
.flatpickr-months {
    background: rgba(255, 248, 239, 0.96);
    border-bottom: 1px solid rgba(139, 99, 85, 0.08);
    border-radius: 16px 16px 0 0;
    padding: 6px 4px 4px;
}

.flatpickr-months .flatpickr-month {
    color: #8B6355;
    fill: #8B6355;
}

.flatpickr-current-month {
    color: #8B6355;
    font-size: 12.5px;
    font-weight: 600;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: transparent;
    color: #8B6355;
    border: none;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-current-month input.cur-year:hover {
    background: rgba(139, 99, 85, 0.06);
}

.flatpickr-current-month input.cur-year {
    color: #8B6355;
    font-weight: 600;
}

/* Navigation arrows */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: #8B6355;
    fill: #8B6355;
    padding: 6px 10px;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: #B8693A;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    color: #B8693A;
}

/* Weekday headers */
.flatpickr-weekdays {
    background: rgba(255, 252, 245, 0.96);
}

span.flatpickr-weekday {
    color: #A18474;
    font-weight: 600;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: transparent;
}

/* Day cells */
.flatpickr-day {
    color: #2E2018;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 12.5px;
    line-height: 37px;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    background: rgba(184, 105, 58, 0.07);
    border-color: transparent;
    color: #B8693A;
}

.flatpickr-day.today {
    border-color: rgba(184, 105, 58, 0.28);
    color: #B8693A;
    font-weight: 600;
}

.flatpickr-day.today:hover {
    background: rgba(184, 105, 58, 0.10);
    border-color: rgba(184, 105, 58, 0.28);
    color: #B8693A;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
    background: rgba(240, 221, 208, 0.55);
    border-color: rgba(184, 105, 58, 0.26);
    color: #B8693A;
    font-weight: 600;
}

.flatpickr-day.selected.today {
    background: rgba(240, 221, 208, 0.7);
    border-color: rgba(184, 105, 58, 0.30);
    color: #B8693A;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #BBA99A;
}

.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
    color: #B8693A;
    background: rgba(184, 105, 58, 0.08);
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: #D5C8BC;
    cursor: not-allowed;
    background: transparent;
}

/* Time picker */
.flatpickr-time {
    border-top: 1px solid rgba(139, 99, 85, 0.10);
    background: rgba(255, 252, 245, 0.96);
    border-radius: 0 0 16px 16px;
    max-height: 46px;
}

.flatpickr-time input {
    color: #2E2018;
    font-weight: 500;
    background: transparent;
}

.flatpickr-time .numInputWrapper {
    flex: 1 1 0;
    min-width: 0;
}

.flatpickr-time input:hover,
.flatpickr-time input:focus {
    background: rgba(90, 62, 46, 0.05);
}

.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
    color: #7A6050;
    font-size: 0.95rem;
    font-weight: 500;
}

.flatpickr-time input.flatpickr-hour,
.flatpickr-time input.flatpickr-minute {
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1;
}

.flatpickr-time .arrowUp:hover,
.flatpickr-time .arrowDown:hover {
    background: rgba(90, 62, 46, 0.08);
    color: #B8693A;
}

.flatpickr-time .numInputWrapper span.arrowUp,
.flatpickr-time .numInputWrapper span.arrowDown {
    border: 0;
    opacity: 0.45;
}

.flatpickr-time .numInputWrapper span.arrowUp:after,
.flatpickr-time .numInputWrapper span.arrowDown:after {
    border-width: 4px;
}

.flatpickr-time .numInputWrapper:hover span.arrowUp,
.flatpickr-time .numInputWrapper:hover span.arrowDown {
    opacity: 0.8;
}

/* Tooltip arrow */
.flatpickr-calendar.arrowTop:after {
    border-bottom-color: rgba(255, 248, 239, 0.96);
}

.flatpickr-calendar.arrowTop:before {
    border-bottom-color: rgba(139, 99, 85, 0.12);
}

.flatpickr-calendar.arrowBottom:after {
    border-top-color: rgba(255, 252, 245, 0.96);
}

.flatpickr-calendar.arrowBottom:before {
    border-top-color: rgba(139, 99, 85, 0.12);
}

/* Input field styling */
.flatpickr-input {
    cursor: pointer;
}

.flatpickr-input.active {
    border-color: #8B6355 !important;
    box-shadow: 0 0 0 0.2rem rgba(90, 62, 46, 0.15) !important;
    outline: none;
}