/* ---- Material time picker (timepicker-ui): rebrand m3-green -> brand green #01493b ---- */
[data-theme="m3-green"] {
    --tp-bg: #ffffff;
    --tp-surface: #f1f5f3;
    --tp-surface-hover: #e7efeb;
    --tp-input-bg: #eef3f1;
    --tp-primary: #01493b;
    --tp-on-primary: #ffffff;
    --tp-primary-container: #d6e8e2;
    --tp-on-primary-container: #01493b;
    --tp-tertiary-container: #ffe2c2;
    --tp-on-tertiary-container: #7a3d00;
    --tp-am-pm-active: #d6e8e2;
    --tp-am-pm-text-selected: #01493b;
    --tp-outline: #01493b;
    --tp-wheel-selected-color: #01493b;
    --tp-wheel-highlight-bg: rgba(1, 73, 59, 0.08);
}
[data-theme="m3-green"] .tp-ui-ok-btn { color: #01493b; font-weight: 700; }

/* ---- Material date picker (flatpickr): brand colours + dialog presentation ---- */
.flatpickr-calendar { font-family: inherit; }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #01493b; border-color: #01493b; color: #fff;
}
.flatpickr-day.today { border-color: #01493b; }
.flatpickr-day.today:hover { background: #01493b; color: #fff; }
.flatpickr-day:hover { background: rgba(1, 73, 59, 0.08); }
/* Unify the whole calendar header (month nav + dropdowns) to brand green. */
.flatpickr-months,
.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: #01493b !important; color: #fff !important; fill: #fff !important;
}
.flatpickr-current-month .numInputWrapper span.arrowUp::after { border-bottom-color: #fff; }
.flatpickr-current-month .numInputWrapper span.arrowDown::after { border-top-color: #fff; }
.flatpickr-current-month input.cur-year,
.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { color: #fff; background: #01493b; }
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { fill: #fff; }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: #ff7f00; }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover { color: rgba(57, 57, 57, 0.28); background: transparent; }

/* Present the calendar as a centered Material dialog with a dimmed backdrop. */
.fp-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 99998; opacity: 0; transition: opacity 0.2s ease; }
.fp-backdrop.is-visible { opacity: 1; }
.flatpickr-calendar.fp-modal.open {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 99999 !important;
    width: 23rem;
    max-width: calc(100vw - 2rem);
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.30);
}
.flatpickr-calendar.fp-modal::before,
.flatpickr-calendar.fp-modal::after { display: none !important; }

/* Header: comfortable vertical rhythm. */
.fp-modal-title {
    background: #01493b; color: #fff; padding: 1.1rem 1.5rem 0.1rem;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
/* No prev/next arrows — month and year are both dropdowns, centered in the header. */
.flatpickr-calendar.fp-modal .flatpickr-months { position: relative; justify-content: center; padding: 0.5rem 0.25rem 1rem; }
.flatpickr-calendar.fp-modal .flatpickr-prev-month,
.flatpickr-calendar.fp-modal .flatpickr-next-month { display: none !important; }
.flatpickr-calendar.fp-modal .numInputWrapper { display: none !important; } /* hide native year spinner */
.flatpickr-calendar.fp-modal .flatpickr-current-month {
    position: static; width: auto; left: auto; padding: 0;
    display: flex; align-items: center; justify-content: center; gap: 0.35rem;
}
.flatpickr-calendar.fp-modal .flatpickr-monthDropdown-months,
.flatpickr-calendar.fp-modal .fp-year-dd {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-color: transparent; color: #fff; border: 0; outline: none;
    font-weight: 600; font-size: 1rem; line-height: 1.2; margin: 0;
    padding: 0.3rem 1.4rem 0.3rem 0.6rem; cursor: pointer; border-radius: 0.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.4rem center; background-size: 0.7rem;
    transition: background-color 0.15s ease;
}
/* flatpickr ships its own background rule for the month select, so force the caret. */
.flatpickr-calendar.fp-modal .flatpickr-current-month .flatpickr-monthDropdown-months {
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.4rem center !important;
    background-size: 0.7rem !important;
}
.flatpickr-calendar.fp-modal .flatpickr-monthDropdown-months:hover,
.flatpickr-calendar.fp-modal .fp-year-dd:hover { background-color: rgba(255, 255, 255, 0.14) !important; }
.flatpickr-calendar.fp-modal .flatpickr-monthDropdown-months:focus-visible,
.flatpickr-calendar.fp-modal .fp-year-dd:focus-visible { background-color: rgba(255, 255, 255, 0.18); }
.flatpickr-calendar.fp-modal .fp-year-dd option,
.flatpickr-calendar.fp-modal .flatpickr-monthDropdown-months option { color: #1a1c18; background: #fff; font-weight: 500; }

/* Weekday row: white (no teal band), spaced and aligned with the day grid. */
.flatpickr-calendar.fp-modal .flatpickr-weekdays { background: #fff !important; height: auto; padding: 0.85rem 1rem 0.35rem; box-sizing: border-box; }
.flatpickr-calendar.fp-modal .flatpickr-weekdaycontainer { gap: 0; }
.flatpickr-calendar.fp-modal span.flatpickr-weekday { background: transparent !important; color: rgba(1, 73, 59, 0.55) !important; font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; }

/* Day grid: padding so dates never touch the card edges; roomy, tappable cells. */
.flatpickr-calendar.fp-modal .flatpickr-innerContainer { padding-bottom: 0.5rem; }
.flatpickr-calendar.fp-modal .flatpickr-rContainer { width: 100%; }
.flatpickr-calendar.fp-modal .flatpickr-days { width: 100%; padding: 0 1rem 1rem; box-sizing: border-box; }
.flatpickr-calendar.fp-modal .dayContainer { width: 100% !important; min-width: 100% !important; max-width: 100% !important; padding: 0; }
.flatpickr-calendar.fp-modal .flatpickr-day {
    max-width: none; height: 42px; line-height: 42px; margin: 2px 0; border-radius: 9999px; font-size: 0.9rem;
}