/* ============================================================
   Flatpickr — Glassmorphism theme   (css/flatpickr-glass.css)
   Load AFTER flatpickr base CSS. No JS changes.
   Theme accent once:  :root{ --fpg-1:#6366f1; --fpg-2:#3b82f6; --fpg-deep:#4f46e5; }
   ============================================================ */

:root {
    --fpg-1: #6366f1;
    --fpg-2: #3b82f6;
    --fpg-deep: #4f46e5;
    --fpg-ink: #1e293b;
    --fpg-soft: #64748b;
    --fpg-faint: #94a3b8;
    --fpg-border: #e2e8f0;
}

/* ---------- the floating panel ---------- */
.flatpickr-calendar {
    width: 322px !important;
    padding: 10px 12px 12px !important;
    box-sizing: border-box !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.96) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid var(--fpg-border) !important;
    box-shadow: 0 24px 50px -20px rgba(15,23,42,.4) !important;
}

    .flatpickr-calendar:before, .flatpickr-calendar:after {
        display: none !important;
    }

/* let inner containers span full width so the grid lines up */
.flatpickr-innerContainer,
.flatpickr-rContainer,
.flatpickr-weekdays,
.flatpickr-days {
    width: 100% !important;
    max-width: 100% !important;
}

.flatpickr-days {
    box-sizing: border-box !important;
}

/* ---------- header / month nav ---------- */
.flatpickr-months {
    position: relative;
    padding: 2px 0 8px;
    align-items: center;
}

    .flatpickr-months .flatpickr-month {
        height: 40px;
        background: transparent !important;
        color: var(--fpg-ink) !important;
    }

.flatpickr-current-month {
    font-size: 15px;
    padding-top: 6px;
}

    .flatpickr-current-month .cur-month,
    .flatpickr-current-month .flatpickr-monthDropdown-months {
        font-weight: 600 !important;
        color: var(--fpg-ink) !important;
    }

    .flatpickr-current-month .flatpickr-monthDropdown-months {
        appearance: none;
        -webkit-appearance: none;
        background: transparent !important;
        border: 0;
    }

    .flatpickr-current-month input.cur-year {
        font-weight: 600 !important;
        color: var(--fpg-ink) !important;
    }

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

.numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--fpg-faint);
}

.numInputWrapper span.arrowDown:after {
    border-top-color: var(--fpg-faint);
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    top: 8px;
    height: 30px;
    width: 30px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--fpg-border);
    transition: background .18s,border-color .18s,transform .18s;
}

.flatpickr-months .flatpickr-prev-month {
    left: 8px;
}

.flatpickr-months .flatpickr-next-month {
    right: 8px;
}

    .flatpickr-months .flatpickr-prev-month:hover,
    .flatpickr-months .flatpickr-next-month:hover {
        background: #fff;
        border-color: rgba(99,102,241,.4);
        transform: translateY(-1px);
    }

    .flatpickr-months .flatpickr-prev-month svg,
    .flatpickr-months .flatpickr-next-month svg {
        width: 13px;
        height: 13px;
    }

        .flatpickr-months .flatpickr-prev-month svg path,
        .flatpickr-months .flatpickr-next-month svg path,
        .flatpickr-months .flatpickr-prev-month svg,
        .flatpickr-months .flatpickr-next-month svg {
            fill: var(--fpg-soft) !important;
            transition: fill .18s;
        }

    .flatpickr-months .flatpickr-prev-month:hover svg path,
    .flatpickr-months .flatpickr-next-month:hover svg path,
    .flatpickr-months .flatpickr-prev-month:hover svg,
    .flatpickr-months .flatpickr-next-month:hover svg {
        fill: var(--fpg-deep) !important;
    }

/* ---------- weekday row: force 7 equal columns ---------- */
.flatpickr-weekdays {
    background: transparent !important;
    height: 30px;
}

.flatpickr-weekdaycontainer {
    display: grid !important;
    grid-template-columns: repeat(7,1fr) !important;
    width: 100% !important;
}

span.flatpickr-weekday {
    width: auto !important;
    max-width: none !important;
    color: var(--fpg-faint) !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ---------- day grid: force 7 equal columns (THE ALIGNMENT FIX) ---------- */
.dayContainer {
    display: grid !important;
    grid-template-columns: repeat(7,1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    row-gap: 2px !important;
    column-gap: 0 !important;
    justify-content: stretch !important;
}

.flatpickr-day {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    height: 38px !important;
    line-height: 36px !important;
    color: var(--fpg-ink);
    font-weight: 500;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    transition: background .15s,color .15s,box-shadow .15s;
}

    .flatpickr-day:hover,
    .flatpickr-day:focus {
        background: rgba(99,102,241,.12) !important;
        border-color: transparent !important;
        color: var(--fpg-ink) !important;
    }

    .flatpickr-day.today {
        border-color: transparent !important;
        box-shadow: inset 0 0 0 1.5px rgba(99,102,241,.55) !important;
    }

        .flatpickr-day.today:hover {
            background: rgba(99,102,241,.12) !important;
            color: var(--fpg-ink) !important;
        }

    .flatpickr-day.selected,
    .flatpickr-day.selected:hover,
    .flatpickr-day.selected:focus,
    .flatpickr-day.startRange,
    .flatpickr-day.endRange {
        background: linear-gradient(135deg,var(--fpg-1),var(--fpg-2)) !important;
        border-color: transparent !important;
        color: #fff !important;
        font-weight: 600;
        box-shadow: 0 8px 18px -6px rgba(79,70,229,.6) !important;
    }

    .flatpickr-day.inRange {
        background: rgba(99,102,241,.12) !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    .flatpickr-day.prevMonthDay,
    .flatpickr-day.nextMonthDay {
        color: var(--fpg-faint) !important;
        font-weight: 400;
        opacity: .55;
    }

    .flatpickr-day.flatpickr-disabled,
    .flatpickr-day.flatpickr-disabled:hover,
    .flatpickr-day.disabled,
    .flatpickr-day.disabled:hover {
        color: var(--fpg-faint) !important;
        opacity: .3;
        background: transparent !important;
        box-shadow: none !important;
        cursor: not-allowed;
    }

/* ---------- time row (only if enableTime) ---------- */
.flatpickr-time {
    border-top: 1px solid rgba(148,163,184,.25) !important;
}

    .flatpickr-time input,
    .flatpickr-time .flatpickr-time-separator,
    .flatpickr-time .flatpickr-am-pm {
        color: var(--fpg-ink) !important;
        font-weight: 500;
    }

        .flatpickr-time input:hover, .flatpickr-time input:focus,
        .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time .flatpickr-am-pm:focus {
            background: rgba(99,102,241,.1) !important;
        }

/* the visible field fills its container like a normal input
   (helps the date field match neighbouring fields in width) */
input.flatpickr-input {
    width: 100%;
    box-sizing: border-box;
}

@media (prefers-reduced-motion:reduce) {
    .flatpickr-day,
    .flatpickr-months .flatpickr-prev-month,
    .flatpickr-months .flatpickr-next-month {
        transition: none !important;
    }
}