/* =========================================================
   DMU Flatpickr — themed to match the new portal design era.

   - Light defaults via :root tokens
   - Dark overrides via: html[data-color^="dark-"]
   - Mirrors the look of schedule.css + dropdown.css:
       glass surface, soft radius, primary-tinted hover/today,
       selected day filled with --primary, smooth motion.
   ========================================================= */

/* =========================================================
   0) Theme tokens (flatpickr-specific)
   ========================================================= */

:root {
    /* Surface */
    --dmu-fp-surface: var(--foreground, #ffffff);
    --dmu-fp-surface-muted: #f6f7f9;
    --dmu-fp-border: rgba(148, 163, 184, 0.24);

    /* Text */
    --dmu-fp-text: #0f172a;
    --dmu-fp-text-muted: #6b7280;
    --dmu-fp-text-faint: #9ca3af;

    /* Day states */
    --dmu-fp-hover-bg: rgba(var(--primary-rgb, 168, 85, 247), 0.10);
    --dmu-fp-range-bg: rgba(var(--primary-rgb, 168, 85, 247), 0.14);

    /* Shadow */
    --dmu-fp-shadow: 0 12px 32px rgba(15, 23, 42, 0.10),
                     0 2px 6px rgba(15, 23, 42, 0.06);

    /* Radius */
    --dmu-fp-radius: var(--border-radius-lg, 14px);
    --dmu-fp-radius-day: 10px;
}

html[data-color^="dark-"] {
    --dmu-fp-surface: var(--foreground, #1d1d1d);
    --dmu-fp-surface-muted: var(--background-light, #292929);
    --dmu-fp-border: rgba(var(--separator-rgb, 71, 71, 71), 0.75);

    --dmu-fp-text: var(--light-text, #f0f0f0);
    --dmu-fp-text-muted: var(--muted, #b3b3b3);
    --dmu-fp-text-faint: rgba(var(--light-text-rgb, 240, 240, 240), 0.40);

    --dmu-fp-hover-bg: rgba(var(--primary-rgb, 168, 85, 247), 0.18);
    --dmu-fp-range-bg: rgba(var(--primary-rgb, 168, 85, 247), 0.22);

    --dmu-fp-shadow: 0 16px 40px rgba(0, 0, 0, 0.55),
                     0 2px 8px rgba(0, 0, 0, 0.35);
}

/* =========================================================
   1) Container
   ========================================================= */

.flatpickr-calendar {
    background: var(--dmu-fp-surface);
    border: 1px solid var(--dmu-fp-border);
    border-radius: var(--dmu-fp-radius);
    box-shadow: var(--dmu-fp-shadow);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--dmu-fp-text);
    font-family: var(--font, 'Onest', sans-serif);
    font-size: 13px;
    overflow: hidden;

    /* Wider than flatpickr's 307.875px default */
    width: 340px;
    min-width: 340px;
    max-width: 340px;
}

.flatpickr-calendar .flatpickr-innerContainer,
.flatpickr-calendar .flatpickr-rContainer,
.flatpickr-calendar .flatpickr-days,
.flatpickr-calendar .dayContainer {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.flatpickr-calendar .flatpickr-rContainer {
    display: block;
}

/* Entry animation — match dropdown.css feel */
.flatpickr-calendar.open {
    animation: dmu-fp-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes dmu-fp-in {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Strip the legacy arrow */
.flatpickr-calendar::before,
.flatpickr-calendar::after {
    display: none !important;
}

/* =========================================================
   2) Header (month / year + nav)
   ========================================================= */

.flatpickr-months {
    align-items: center;
    padding: 0.25rem 0.25rem 0.5rem;
}

.flatpickr-months .flatpickr-month {
    background: transparent;
    color: var(--dmu-fp-text);
    height: 36px;
    border-radius: var(--border-radius-md, 10px);
    overflow: visible;
}

.flatpickr-current-month {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding-top: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dmu-fp-text);
}

/* Header pills — month label, year wrapper, and the (legacy) month dropdown all
   share the same visible pill. Both .cur-month and .numInputWrapper use the SAME
   inline-flex centering, so their text aligns identically vertically.

   The `span.cur-month` selector is intentional: flatpickr's default CSS uses
   `.flatpickr-current-month span.cur-month { display: inline-block }` and would
   otherwise win on specificity, breaking the flex centering and leaving the
   month label top-aligned inside the pill. */
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month span.cur-month,
.flatpickr-current-month .numInputWrapper {
    flex: 0 0 6em;
    width: 6em;
    height: 32px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dmu-fp-text);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.flatpickr-current-month span.cur-month {
    user-select: none;
}

/* The year input is invisible inside its wrapper — wrapper handles the pill.
   Fill the wrapper completely so internal padding/baseline quirks don't shift
   the text. `appearance: textfield` (not `none`) is what actually hides the
   native HTML5 number-input spinner in Chrome/WebKit. */
.flatpickr-current-month input.cur-year {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
    cursor: pointer;
}

/* Belt-and-braces: hide the WebKit number-input spinner pseudo-elements. */
.flatpickr-current-month input.cur-year::-webkit-inner-spin-button,
.flatpickr-current-month input.cur-year::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-current-month span.cur-month:hover,
.flatpickr-current-month .numInputWrapper:hover {
    background: var(--dmu-fp-hover-bg);
    border-color: transparent;
    color: var(--primary);
    outline: none;
}

.flatpickr-current-month .numInputWrapper:hover input.cur-year,
.flatpickr-current-month input.cur-year:focus {
    color: var(--primary);
    outline: none;
}

/* In month/year mode, hide the month label so only the year sits in the header */
.flatpickr-calendar.dmu-fp-month-mode .flatpickr-current-month span.cur-month,
.flatpickr-calendar.dmu-fp-year-mode .flatpickr-current-month span.cur-month {
    display: none;
}

.flatpickr-calendar.dmu-fp-month-mode .flatpickr-current-month,
.flatpickr-calendar.dmu-fp-year-mode .flatpickr-current-month {
    font-size: 1.05rem;
}

.flatpickr-calendar.dmu-fp-month-mode .flatpickr-current-month .numInputWrapper,
.flatpickr-calendar.dmu-fp-year-mode .flatpickr-current-month .numInputWrapper {
    font-size: 1.05rem;
    font-weight: 600;
}

/* When the year grid is open, mark the year wrapper as "active" */
.flatpickr-calendar.dmu-fp-year-mode .flatpickr-current-month .numInputWrapper {
    background: var(--dmu-fp-hover-bg);
    color: var(--primary);
}

.flatpickr-calendar.dmu-fp-year-mode .flatpickr-current-month .numInputWrapper input.cur-year {
    color: var(--primary);
}

/* Hide the year-input up/down spinners — clicking the year opens the year grid instead.
   !important is needed to override flatpickr's default `.numInputWrapper:hover span` rule. */
.flatpickr-calendar .flatpickr-current-month .numInputWrapper span,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper:hover span {
    display: none !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background: var(--dmu-fp-surface);
    color: var(--dmu-fp-text);
}

/* Prev / next month buttons */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    width: 30px;
    height: 30px;
    margin: 4px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--dmu-fp-text-muted);
    transition: background 0.15s ease, color 0.15s ease;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    background: var(--dmu-fp-hover-bg);
    color: var(--primary);
}

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

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

/* =========================================================
   3) Weekdays
   ========================================================= */

.flatpickr-weekdays {
    background: transparent;
    height: 28px;
    margin-top: 2px;
}

.flatpickr-weekdaycontainer {
    padding: 0 2px;
}

span.flatpickr-weekday {
    color: var(--dmu-fp-text-muted) !important;
    background: transparent;
    font-weight: 600 !important;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* =========================================================
   4) Day grid
   ========================================================= */

.flatpickr-days,
.dayContainer {
    background: transparent;
}

/* Day cell — borderless. All visible "shapes" (hover ring, today outline,
   selected disk) are drawn by a shared ::before, so the cell itself never
   needs a background or border.

   The selector mirrors airbnb's grid-line rule
       `span.flatpickr-day, span.flatpickr-day.prevMonthDay, span.flatpickr-day.nextMonthDay
        { border: 1px solid #e9e9e9 }`
   verbatim — without the `.prevMonthDay`/`.nextMonthDay` variants, our reset
   only beats it for current-month cells and out-of-month cells keep their
   borders. */
span.flatpickr-day,
span.flatpickr-day.prevMonthDay,
span.flatpickr-day.nextMonthDay {
    position: relative;
    z-index: 0;
    color: var(--dmu-fp-text);
    background: transparent;
    border: 0;
    border-radius: var(--dmu-fp-radius-day);
    box-shadow: none;
    height: 40px;
    line-height: 40px;
    max-width: none;
    font-weight: 500;
    transition: color 0.12s ease;
}

.flatpickr-day::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1.5px solid transparent;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: -1;
    transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

/* Hover — soft tinted disk on ::before; the cell itself stays transparent.

   The variant selectors below are not cosmetic — each one matches a specific
   airbnb rule that would otherwise leak through and paint the cell:
     • `.flatpickr-day.prevMonthDay:hover { background: #e9e9e9 }` (0,3,0)
     • `.flatpickr-day.today:hover { background: #f64747 }` (0,3,0)
   Both beat plain `.flatpickr-day:hover` (0,2,0) on specificity. */
.flatpickr-day:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day.nextMonthDay:focus,
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
    background: transparent;
    border-color: transparent;
    color: var(--primary);
    outline: none;
}

/* Higher-specificity reset for airbnb's
       `span.flatpickr-day.today:not(.selected):hover { border: 1px solid #f64747 }`
   which weighs in at 0,4,1 — a flat hover override can't reach it. */
span.flatpickr-day.today:not(.selected):hover,
span.flatpickr-day.prevMonthDay.today:not(.selected):hover,
span.flatpickr-day.nextMonthDay.today:not(.selected):hover {
    border: 0;
    background: transparent;
}

.flatpickr-day:hover::before,
.flatpickr-day:focus-visible::before {
    background: var(--dmu-fp-hover-bg);
}

/* Other-month days — light gray, distinct from the firmer faint tone used
   by disabled cells.

   The `span.flatpickr-day.prevMonthDay` selector (0,2,1) is required to beat
   our own border-reset rule above, which uses the same selector to set
   `color: var(--dmu-fp-text)`. A plain `.flatpickr-day.prevMonthDay` (0,2,0)
   loses to it. */
span.flatpickr-day.prevMonthDay,
span.flatpickr-day.nextMonthDay {
    color: #cbd5e1;
}

html[data-color^="dark-"] span.flatpickr-day.prevMonthDay,
html[data-color^="dark-"] span.flatpickr-day.nextMonthDay {
    color: rgba(var(--light-text-rgb, 240, 240, 240), 0.28);
}

.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
    color: var(--primary);
}

/* Today (not selected) — outlined ring */
.flatpickr-day.today:not(.selected) {
    color: var(--primary);
}

.flatpickr-day.today:not(.selected)::before {
    border-color: rgba(var(--primary-rgb, 168, 85, 247), 0.55);
}

.flatpickr-day.today:not(.selected):hover::before {
    border-color: var(--primary);
    background: var(--dmu-fp-hover-bg);
}

/* Selected — filled primary disk on the cell's ::before; the cell itself
   stays transparent. The prevMonthDay/nextMonthDay variants are needed to
   beat airbnb's `.flatpickr-day.selected.prevMonthDay { background: #4f99ff }`
   on specificity (0,3,0), which would otherwise leak a blue fill behind the
   disk when an out-of-month cell is selected. */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: transparent;
    border-color: transparent;
    color: #ffffff;
    box-shadow: none;
}

.flatpickr-day.selected::before,
.flatpickr-day.startRange::before,
.flatpickr-day.endRange::before {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb, 168, 85, 247), 0.30);
}

/* Range (between start & end) */
.flatpickr-day.inRange,
.flatpickr-day.inRange:hover {
    background: var(--dmu-fp-range-bg);
    border-color: transparent;
    color: var(--dmu-fp-text);
    box-shadow: none;
}

/* Range edge corners — keep selected pill rounded both sides */
.flatpickr-day.startRange {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.flatpickr-day.endRange {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.flatpickr-day.startRange.endRange {
    border-radius: var(--dmu-fp-radius-day);
}

/* Disabled */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
    color: var(--dmu-fp-text-faint);
    background: transparent;
    border-color: transparent;
    cursor: not-allowed;
    opacity: 0.5;
}

/* Disabled cells get no hover/today disk */
.flatpickr-day.flatpickr-disabled::before,
.flatpickr-day.flatpickr-disabled:hover::before,
.flatpickr-day.notAllowed::before,
.flatpickr-day.notAllowed:hover::before {
    display: none;
}

/* Week numbers (if enabled) */
.flatpickr-weekwrapper .flatpickr-weeks {
    border-left: 1px solid var(--dmu-fp-border);
    box-shadow: none;
}

.flatpickr-weekwrapper span.flatpickr-day,
.flatpickr-weekwrapper span.flatpickr-day:hover {
    color: var(--dmu-fp-text-faint);
    background: transparent;
    border-color: transparent;
    cursor: default;
}

/* =========================================================
   5) Time picker (when enableTime: true)
   ========================================================= */

.flatpickr-time {
    border-top: 1px solid var(--dmu-fp-border);
    background: transparent;
    height: 42px;
    line-height: 42px;
}

.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
    color: var(--dmu-fp-text);
    background: transparent;
    font-weight: 600;
    font-size: 0.95rem;
    transition: background 0.15s ease;
}

.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus {
    background: var(--dmu-fp-hover-bg);
    color: var(--primary);
    outline: none;
}

.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
    color: var(--dmu-fp-text);
}

.flatpickr-time .numInputWrapper span.arrowUp::after {
    border-bottom-color: var(--dmu-fp-text-muted);
}

.flatpickr-time .numInputWrapper span.arrowDown::after {
    border-top-color: var(--dmu-fp-text-muted);
}

.flatpickr-time .numInputWrapper span:hover.arrowUp::after {
    border-bottom-color: var(--primary);
}

.flatpickr-time .numInputWrapper span:hover.arrowDown::after {
    border-top-color: var(--primary);
}

/* =========================================================
   6) Month + Year picker grids (click month/year → 3×4 grid)
   ========================================================= */

.flatpickr-calendar .dmu-fp-month-grid,
.flatpickr-calendar .dmu-fp-year-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 12px 8px;
    align-content: center;
    width: 100%;
    box-sizing: border-box;
    /* Roughly match the day grid height (6 rows × 40px) */
    min-height: 240px;
}

.flatpickr-calendar .dmu-fp-month-grid[hidden],
.flatpickr-calendar .dmu-fp-year-grid[hidden] {
    display: none;
}

.flatpickr-calendar .dmu-fp-month,
.flatpickr-calendar .dmu-fp-year {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--dmu-fp-text);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    padding: 14px 6px;
    cursor: pointer;
    text-align: center;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.flatpickr-calendar .dmu-fp-month:hover,
.flatpickr-calendar .dmu-fp-month:focus-visible,
.flatpickr-calendar .dmu-fp-year:hover,
.flatpickr-calendar .dmu-fp-year:focus-visible {
    background: var(--dmu-fp-hover-bg);
    color: var(--primary);
    outline: none;
}

/* Currently displayed month/year — outlined like "today" */
.flatpickr-calendar .dmu-fp-month.is-current,
.flatpickr-calendar .dmu-fp-year.is-current {
    border-color: rgba(var(--primary-rgb, 168, 85, 247), 0.45);
    color: var(--primary);
}

/* Month/year matching the selected date — filled like a selected day */
.flatpickr-calendar .dmu-fp-month.is-active,
.flatpickr-calendar .dmu-fp-month.is-active:hover,
.flatpickr-calendar .dmu-fp-month.is-active:focus-visible,
.flatpickr-calendar .dmu-fp-year.is-active,
.flatpickr-calendar .dmu-fp-year.is-active:hover,
.flatpickr-calendar .dmu-fp-year.is-active:focus-visible {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb, 168, 85, 247), 0.30);
}

/* =========================================================
   7) Shortcuts row (Today / Tomorrow / Next week)
   ========================================================= */

.flatpickr-calendar .dmu-fp-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0.5rem 0.4rem 0.25rem;
    margin-top: 4px;
    border-top: 1px solid var(--dmu-fp-border);
}

.flatpickr-calendar .dmu-fp-shortcut {
    flex: 1 1 0;
    min-width: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--dmu-fp-text-muted);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 6px 8px;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s ease, color 0.15s ease;
}

.flatpickr-calendar .dmu-fp-shortcut:hover,
.flatpickr-calendar .dmu-fp-shortcut:focus-visible {
    background: var(--dmu-fp-hover-bg);
    color: var(--primary);
    outline: none;
}

.flatpickr-calendar .dmu-fp-shortcut.is-active,
.flatpickr-calendar .dmu-fp-shortcut.is-active:hover,
.flatpickr-calendar .dmu-fp-shortcut.is-active:focus-visible {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb, 168, 85, 247), 0.25);
}

/* =========================================================
   8) Input field
   ========================================================= */

.form-control.date-picker-input {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control.date-picker-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 168, 85, 247), 0.15);
}

html[data-color^="dark-"] .form-control.date-picker-input {
    background: var(--foreground, #1d1d1d);
    color: var(--light-text, #f0f0f0);
    border-color: rgba(var(--separator-light-rgb, 46, 46, 46), 1);
}

html[data-color^="dark-"] .form-control.date-picker-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 168, 85, 247), 0.22);
}