/* GEA · Flatpickr theme overrides — restyles the default flatpickr
   calendar to match the GEA dark/cyan design system.

   Loaded after flatpickr.min.css so these declarations win. */


/* ============== INPUT AFFORDANCE ==============
   Calendar icon as a single background on every date / datetime input. */
input[type="date"],
input[type="datetime-local"],
input.flatpickr-alt-input {
    padding-right: 40px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23a8a8a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 18px 18px !important;
    cursor: pointer;
}
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input.flatpickr-alt-input:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2301eeeb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
}
input.flatpickr-input:not(.flatpickr-alt-input) {
    background-image: none !important;
    padding-right: 0 !important;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    cursor: pointer;
    width: 24px;
}


/* ============== CALENDAR PANEL ==============
   Glass-feel surface: layered gradient over elevated bg, soft inset
   highlight on the top edge, deep cushion shadow underneath. */
.flatpickr-calendar {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .025) 0%, rgba(255, 255, 255, 0) 60%),
        var(--gea-bg-elevated);
    border: 1px solid var(--gea-border);
    border-radius: 14px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .04) inset,
        0 24px 60px -20px rgba(0, 0, 0, .6),
        0 8px 20px -8px rgba(0, 0, 0, .5);
    color: var(--gea-text);
    font-family: var(--gea-font-body, inherit);
    overflow: hidden;
    padding: 6px;
    width: auto;
    min-width: 296px;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
    border-color: transparent !important;
}


/* ============== HEADER (month + year) ============== */
.flatpickr-months {
    background: transparent;
    padding: 10px 8px 12px;
    align-items: center;
    border-bottom: 1px solid var(--gea-border-subtle);
    margin-bottom: 6px;
    position: relative;
    min-height: 44px;
    display: flex !important;
}
.flatpickr-month {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    overflow: visible;
}
.flatpickr-current-month {
    font-family: var(--gea-font-display);
    font-size: 15px;
    font-weight: var(--gea-weight-semibold);
    letter-spacing: .01em;
    color: var(--gea-text);
    padding: 4px 0;
    height: auto;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    background: transparent;
    color: var(--gea-text);
    font-family: var(--gea-font-display);
    font-size: 15px;
    font-weight: var(--gea-weight-semibold);
    border-radius: 8px;
    padding: 3px 8px;
    transition: background-color .18s var(--gea-ease-out);
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-current-month input.cur-year:hover {
    background: rgba(1, 238, 235, .08);
}
.flatpickr-current-month .flatpickr-monthDropdown-months option {
    background: var(--gea-bg-elevated);
    color: var(--gea-text);
}
.flatpickr-current-month .numInputWrapper:hover { background: rgba(1, 238, 235, .08); border-radius: 8px; }
.flatpickr-current-month .numInputWrapper span.arrowUp:after   { border-bottom-color: var(--gea-text-muted); }
.flatpickr-current-month .numInputWrapper span.arrowDown:after { border-top-color: var(--gea-text-muted); }


/* ============== PREV / NEXT ARROWS ==============
   Vertically centered against the month label, locked to 32×32 so flex
   inside .flatpickr-months can't squish them into ellipses. */
.flatpickr-prev-month,
.flatpickr-next-month {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%);
    height: 32px !important;
    width: 32px !important;
    min-width: 32px;
    min-height: 32px;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(1, 238, 235, .08);
    border: 1px solid rgba(1, 238, 235, .22);
    fill: #ffffff;
    color: #ffffff;
    z-index: 2;
    box-sizing: border-box;
    transition: background-color .18s var(--gea-ease-out),
                color .18s var(--gea-ease-out),
                border-color .18s var(--gea-ease-out),
                transform .18s var(--gea-ease-out);
}
.flatpickr-prev-month { left: 10px !important; right: auto !important; }
.flatpickr-next-month { right: 10px !important; left: auto !important; }
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    background: var(--gea-brand-500);
    border-color: var(--gea-brand-500);
    color: var(--gea-text-on-brand);
    fill: var(--gea-text-on-brand);
    transform: translateY(-50%) scale(1.06);
}
.flatpickr-prev-month svg,
.flatpickr-next-month svg {
    fill: #ffffff !important;
    width: 13px;
    height: 13px;
    display: block;
    stroke: #ffffff;
    stroke-width: 1;
}
.flatpickr-prev-month svg path,
.flatpickr-next-month svg path,
.flatpickr-prev-month svg *,
.flatpickr-next-month svg * {
    fill: #ffffff !important;
    stroke: #ffffff;
}
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg,
.flatpickr-prev-month:hover svg path,
.flatpickr-next-month:hover svg path,
.flatpickr-prev-month:hover svg *,
.flatpickr-next-month:hover svg * {
    fill: var(--gea-text-on-brand) !important;
    stroke: var(--gea-text-on-brand);
}


/* ============== DAY-OF-WEEK HEADERS ============== */
.flatpickr-weekdays {
    background: transparent;
    padding: 4px 0 6px;
}
span.flatpickr-weekday {
    color: var(--gea-text-subtle);
    font-size: 10px;
    font-weight: var(--gea-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--gea-tracking-widest);
    background: transparent;
}


/* ============== DAY CELLS ============== */
.dayContainer {
    padding: 4px 2px 6px;
}
.flatpickr-day {
    color: var(--gea-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    height: 38px;
    line-height: 36px;
    max-width: 38px;
    font-weight: var(--gea-weight-medium);
    font-size: 13.5px;
    transition: background-color .15s var(--gea-ease-out),
                color .15s var(--gea-ease-out),
                border-color .15s var(--gea-ease-out),
                box-shadow .18s var(--gea-ease-out);
}
.flatpickr-day:hover {
    background: rgba(1, 238, 235, .10);
    border-color: rgba(1, 238, 235, .22);
    color: var(--gea-text);
}
.flatpickr-day.today {
    border-color: rgba(1, 238, 235, .55);
    color: var(--gea-brand-500);
    background: transparent;
}
.flatpickr-day.today:hover {
    background: rgba(1, 238, 235, .15);
    color: var(--gea-brand-500);
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: var(--gea-brand-500);
    border-color: var(--gea-brand-500);
    color: var(--gea-text-on-brand);
    box-shadow:
        0 0 0 1px rgba(1, 238, 235, .35),
        0 6px 18px -6px rgba(1, 238, 235, .55);
    font-weight: var(--gea-weight-bold);
}
.flatpickr-day.inRange {
    background: rgba(1, 238, 235, .15);
    border-color: transparent;
    color: var(--gea-text);
    box-shadow: none;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.notAllowed {
    color: var(--gea-text-disabled);
    background: transparent;
    border-color: transparent;
    cursor: default;
}

/* Show ONLY current-month dates. */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    visibility: hidden !important;
    pointer-events: none !important;
}
.dayContainer .flatpickr-day.nextMonthDay:nth-child(36),
.dayContainer .flatpickr-day.nextMonthDay:nth-child(36) ~ .flatpickr-day {
    display: none !important;
}


/* ============== TIME PICKER (side panel · scrollable list) ==============
   2-column grid: full-width header on top, calendar left, time right.
   Calendar block determines the row height (align-self: start), the
   time list flex-shrinks within that height and scrolls internally. */
.flatpickr-calendar.hasTime {
    width: auto !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "months months"
        "cal    time";
    column-gap: 0;
    row-gap: 0;
    align-items: stretch;
}
.flatpickr-calendar.hasTime .flatpickr-months         { grid-area: months; }
.flatpickr-calendar.hasTime .flatpickr-innerContainer { grid-area: cal; align-self: start; }
.flatpickr-calendar.hasTime .flatpickr-time           { grid-area: time; }

/* Soft vertical divider between calendar and time — gradient instead
   of a solid border so it fades at top/bottom. */
.flatpickr-calendar.hasTime .flatpickr-time {
    background: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent 30%);
    border: 0;
    margin: 0 !important;
    padding: 0 0 0 10px !important;
    min-height: 0;
    height: auto !important;
    max-height: none !important;
    min-width: 148px;
    width: auto;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
    position: relative;
}
.flatpickr-calendar.hasTime .flatpickr-time::after {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: linear-gradient(180deg,
        transparent,
        var(--gea-border-subtle) 20%,
        var(--gea-border-subtle) 80%,
        transparent);
    pointer-events: none;
}

/* "Time" overline header — same rhythm as the month header on the left */
.flatpickr-calendar.hasTime .flatpickr-time::before {
    content: 'Time';
    display: block;
    text-align: center;
    padding: 12px 0 12px;
    margin: 0 0 6px;
    font-family: var(--gea-font-display);
    font-size: 10px;
    font-weight: var(--gea-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--gea-tracking-widest);
    color: var(--gea-text-subtle);
    border-bottom: 1px solid var(--gea-border-subtle);
    flex: none;
}

/* Hide Flatpickr's native hour/minute UI — we replace it with the list. */
.flatpickr-calendar.hasTime .flatpickr-time > .numInputWrapper,
.flatpickr-calendar.hasTime .flatpickr-time > .flatpickr-time-separator,
.flatpickr-calendar.hasTime .flatpickr-time > .flatpickr-am-pm {
    display: none !important;
}

/* Scrollable list — fades at top/bottom hint scroll affordance.
   The mask gradient softens the ends so slots don't pop in/out abruptly. */
.gea-time-list {
    list-style: none;
    margin: 0;
    padding: 4px 6px 8px;
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--gea-border-strong) transparent;
    -webkit-mask-image: linear-gradient(180deg,
        transparent 0,
        #000 14px,
        #000 calc(100% - 14px),
        transparent 100%);
            mask-image: linear-gradient(180deg,
        transparent 0,
        #000 14px,
        #000 calc(100% - 14px),
        transparent 100%);
}
.gea-time-list::-webkit-scrollbar       { width: 5px; }
.gea-time-list::-webkit-scrollbar-thumb { background: var(--gea-border-strong); border-radius: 999px; }
.gea-time-list::-webkit-scrollbar-track { background: transparent; }

/* Time slots match the calendar day cells — same radius, same hover &
   selected treatment, same cyan glow on selected. Uses tabular-nums so
   "09:00" lines up neatly under "10:00" in monospace columns. */
.gea-time-list__item {
    height: 34px;
    line-height: 32px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: var(--gea-font-display);
    font-size: 13.5px;
    font-weight: var(--gea-weight-medium);
    color: var(--gea-text);
    text-align: center;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    transition: background-color .15s var(--gea-ease-out),
                color .15s var(--gea-ease-out),
                border-color .15s var(--gea-ease-out),
                box-shadow .18s var(--gea-ease-out),
                transform .18s var(--gea-ease-out);
    user-select: none;
}
.gea-time-list__item:hover {
    background: rgba(1, 238, 235, .10);
    border-color: rgba(1, 238, 235, .22);
    color: var(--gea-text);
}
.gea-time-list__item.is-selected,
.gea-time-list__item.is-selected:hover {
    background: var(--gea-brand-500);
    border-color: var(--gea-brand-500);
    color: var(--gea-text-on-brand);
    font-weight: var(--gea-weight-bold);
    box-shadow:
        0 0 0 1px rgba(1, 238, 235, .35),
        0 6px 18px -6px rgba(1, 238, 235, .55);
}

/* Hide the spinner on number inputs inside flatpickr. */
.flatpickr-current-month input[type=number]::-webkit-inner-spin-button,
.flatpickr-current-month input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}