/* Celý widget — zaoblení (vnitřek oříznutý) */ .flatpickr-calendar { max-width: calc(100vw - 1.5rem); z-index: 120 !important; border-radius: 1rem !important; overflow: hidden !important; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.12), 0 4px 6px -2px rgba(0, 0, 0, 0.06) !important; } .dark .flatpickr-calendar { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.45), 0 4px 6px -2px rgba(0, 0, 0, 0.35) !important; } /* * Čas: výchozí flatpickr — input přes šířku, šipky vpravo nahoře/dole (absolute), bez mezery mezi nimi. * Lehký padding-top + line-height, aby opticky byl střed čísla mezi šipkami. */ .flatpickr-time .numInputWrapper { position: relative !important; width: 2.65rem !important; min-width: 2.65rem !important; min-height: 5rem !important; height: 5rem !important; box-sizing: border-box !important; } .flatpickr-time .numInputWrapper span { position: absolute !important; right: 0 !important; left: auto !important; width: 2.5rem !important; height: 2.5rem !important; min-height: 2.5rem !important; max-height: 2.5rem !important; line-height: 2.5rem !important; padding: 0 !important; opacity: 1 !important; border: none !important; box-sizing: border-box; } .flatpickr-time .numInputWrapper span.arrowUp { top: 0 !important; bottom: auto !important; border-bottom: 1px solid rgba(57, 57, 57, 0.12); } .flatpickr-time .numInputWrapper span.arrowDown { top: auto !important; bottom: 0 !important; } .flatpickr-time .numInputWrapper input { width: 100% !important; height: 5rem !important; min-height: 5rem !important; margin: 0 !important; padding: 0.2rem 2.55rem 0 0 !important; text-align: center !important; font-size: 1.1rem !important; line-height: calc(5rem - 0.2rem) !important; box-sizing: border-box !important; -moz-appearance: textfield; } .flatpickr-time .numInputWrapper span.arrowUp:after, .flatpickr-time .numInputWrapper span.arrowDown:after { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; } .flatpickr-time .numInputWrapper span.arrowUp:after { border-width: 0 8px 9px 8px !important; margin-top: -2px; } .flatpickr-time .numInputWrapper span.arrowDown:after { border-width: 9px 8px 0 8px !important; margin-top: 2px; } /* Výchozí flatpickr má .flatpickr-time { height: 40px } — ořezává vysoké šipky; Potvrdit pak překrývá šipku dolů */ .flatpickr-time { height: auto !important; max-height: none !important; overflow: visible !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 0.25rem; padding: 0.5rem 0.35rem !important; box-sizing: border-box !important; } /* Tmavý režim (kalendář je v document.body pod .dark na ) */ .dark .flatpickr-calendar { background: #1f2937; border-color: #374151; color: #e5e7eb; } .dark .flatpickr-months .flatpickr-month, .dark .flatpickr-current-month .flatpickr-monthDropdown-months, .dark .flatpickr-current-month input.cur-year { background: #1f2937 !important; color: #e5e7eb !important; fill: #e5e7eb !important; } .dark .flatpickr-weekdays { background: #1f2937; } .dark span.flatpickr-weekday { color: #9ca3af; } .dark .flatpickr-day { color: #e5e7eb; border-color: #374151; } .dark .flatpickr-day:hover, .dark .flatpickr-day:focus { background: #374151; border-color: #4b5563; } .dark .flatpickr-day.selected, .dark .flatpickr-day.startRange, .dark .flatpickr-day.endRange { background: #465fff; border-color: #465fff; color: #fff; } .dark .flatpickr-day.flatpickr-disabled, .dark .flatpickr-day.prevMonthDay, .dark .flatpickr-day.nextMonthDay { color: #6b7280; } .dark .flatpickr-time { border-top-color: #374151; } .dark .flatpickr-time input, .dark .flatpickr-time .flatpickr-am-pm { color: #e5e7eb; background: #111827; box-shadow: none; border-color: #374151; } .dark .flatpickr-time .numInputWrapper span.arrowUp, .dark .flatpickr-time .numInputWrapper span.arrowDown { border-color: rgba(255, 255, 255, 0.12); } .dark .flatpickr-time .numInputWrapper span.arrowUp:hover, .dark .flatpickr-time .numInputWrapper span.arrowDown:hover { background: #374151; } /* Potvrdit — pill; barvy jako Tailwind bg-brand-600 / hover:bg-brand-700 (viz header.php tailwind.config) */ .flatpickr-confirm { border-radius: 9999px !important; font-weight: 600; min-height: 2.75rem !important; max-height: none !important; margin: 0.5rem 0.75rem 0.75rem !important; padding: 0.5rem 1.5rem !important; width: auto !important; max-width: calc(100% - 1.5rem) !important; margin-left: auto !important; margin-right: auto !important; transition: background-color 0.15s ease, color 0.15s ease; } .flatpickr-confirm.visible { max-height: none !important; } .flatpickr-confirm.lightTheme, .flatpickr-confirm.darkTheme { background: #5c85d9 !important; color: #fff !important; fill: #fff !important; } .dark .flatpickr-calendar .flatpickr-confirm.lightTheme, .dark .flatpickr-calendar .flatpickr-confirm.darkTheme { background: #5c85d9 !important; color: #fff !important; fill: #fff !important; } .flatpickr-confirm.lightTheme svg path, .flatpickr-confirm.darkTheme svg path, .dark .flatpickr-calendar .flatpickr-confirm svg path { fill: currentColor !important; } .flatpickr-confirm.lightTheme:hover, .flatpickr-confirm.darkTheme:hover, .dark .flatpickr-calendar .flatpickr-confirm:hover { background: #346bd2 !important; color: #fff !important; fill: #fff !important; filter: none; } .flatpickr-confirm.lightTheme:active, .flatpickr-confirm.darkTheme:active, .dark .flatpickr-calendar .flatpickr-confirm:active { background: #2d5eb8 !important; }