/* Flatpickr calendar — Clarity theme (ported from Stejar/Eventya). Note: flatpickr appends the calendar to , so dark mode selectors use .dark (on ) as ancestor via html.dark. */ .flatpickr-calendar { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 0.75rem; box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 4px 10px -4px rgb(0 0 0 / 0.05); font-size: 0.875rem; padding: 0.25rem; max-width: 320px !important; min-width: 280px !important; width: 307.875px !important; } html.dark .flatpickr-calendar { background: #0f172a; border-color: #334155; box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.4); } /* Month header */ .flatpickr-months .flatpickr-month { color: #0f172a; } html.dark .flatpickr-months .flatpickr-month { color: #f1f5f9; } .flatpickr-months span.cur-month { font-size: 0.875rem; font-weight: 600; } html.dark .flatpickr-months span.cur-month { color: #f1f5f9; } /* Nav arrows */ .flatpickr-months svg { fill: #94a3b8; } .flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: #264D4A; } html.dark .flatpickr-months svg { fill: #94a3b8; } html.dark .flatpickr-months .flatpickr-prev-month:hover svg, html.dark .flatpickr-months .flatpickr-next-month:hover svg { fill: #6ee7b7; } /* Month dropdown */ .flatpickr-monthDropdown-months { appearance: none; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 600; } .flatpickr-monthDropdown-months:hover { background: #f1f5f9; } html.dark .flatpickr-monthDropdown-months { color: #f1f5f9; background: transparent; } html.dark .flatpickr-monthDropdown-months:hover { background: #1e293b; } /* Year input + arrows */ .numInputWrapper input { border-radius: 0.375rem; color: #0f172a; font-size: 0.875rem; font-weight: 600; } html.dark .numInputWrapper input { color: #f1f5f9; } .numInputWrapper:hover { background: transparent !important; } .numInputWrapper span { border-color: #e2e8f0; } html.dark .numInputWrapper span { border-color: #475569; } .numInputWrapper span:hover { background: transparent !important; } .numInputWrapper span.arrowUp::after { border-bottom-color: #64748b; } .numInputWrapper span.arrowDown::after { border-top-color: #64748b; } html.dark .numInputWrapper span.arrowUp::after { border-bottom-color: #e2e8f0; } html.dark .numInputWrapper span.arrowDown::after { border-top-color: #e2e8f0; } /* Weekday headers */ .flatpickr-weekdays { background: transparent !important; } .flatpickr-weekday { color: #94a3b8; font-weight: 400; background: transparent !important; } html.dark .flatpickr-weekday { color: #94a3b8; } /* Days */ .flatpickr-day { border-radius: 0.375rem; border-color: transparent !important; box-shadow: none !important; color: #0f172a; } html.dark .flatpickr-day { color: #e2e8f0; } .flatpickr-day:is(.today, .inRange, :hover, :focus) { background: #f1f5f9; color: #0f172a; } html.dark .flatpickr-day:is(.today, .inRange, :hover, :focus) { background: #1e293b; color: #f1f5f9; } .flatpickr-day:is(.flatpickr-disabled, .flatpickr-disabled:hover, .prevMonthDay, .nextMonthDay, .notAllowed) { color: #cbd5e1; } html.dark .flatpickr-day:is(.flatpickr-disabled, .flatpickr-disabled:hover, .prevMonthDay, .nextMonthDay, .notAllowed) { color: #475569; } .flatpickr-day:is(.selected, .startRange, .endRange, .selected.inRange, .selected:focus, .selected:hover) { background: #264D4A !important; color: white !important; } .flatpickr-calendar::before, .flatpickr-calendar::after { display: none; } /* Time picker */ .flatpickr-time .numInput { background: transparent; color: #0f172a; } html.dark .flatpickr-time .numInput { color: #f1f5f9; } .flatpickr-time .flatpickr-time-separator { color: #0f172a; } html.dark .flatpickr-time .flatpickr-time-separator { color: #f1f5f9; } .hasTime .flatpickr-time { border-top-color: #e2e8f0; } html.dark .hasTime .flatpickr-time { border-top-color: #334155; }