/* Custom date+time picker popover for the manual-trip transport popup. Rendered by manual_datepicker_controller.js (time mode) and appended to . Colours come from the shared --trip-modal-* theme variables (the same ones the flatpickr date pickers use), so it matches the active theme — green in dark mode, red in light mode. */ .m2m-dtp { position: absolute; z-index: 100000; /* above flatpickr (99999) and the transport modal */ box-sizing: border-box; width: min(460px, calc(100vw - 24px)); background: var(--trip-modal-input-bg); border: 1px solid var(--trip-modal-input-border); border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35); font-size: 13px; color: var(--trip-modal-text-primary); } /* Top area: calendar + time list side by side. */ .m2m-dtp-body { display: flex; } /* Date-only mode: no time column, so the popover is just the calendar. */ .m2m-dtp--dateonly { width: min(300px, calc(100vw - 24px)); } /* ----- left: AM/PM toggle + scrollable 12-hour time-slot list ----- */ .m2m-dtp-times { width: 150px; flex: 0 0 150px; border-left: 1px solid var(--trip-modal-input-border); display: flex; flex-direction: column; } /* Selected-time header, shown as a bordered pill. */ .m2m-dtp-times-head { margin: 12px 12px 8px; padding: 9px 12px; border: 1px solid var(--trip-modal-input-border); border-radius: 10px; color: var(--trip-modal-text-primary); font-size: 15px; font-weight: 500; text-align: center; } /* AM/PM toggle sits below the time list, in the time column. */ .m2m-dtp-ampm { display: flex; gap: 8px; padding: 8px 12px 12px; } .m2m-dtp-ampm button { flex: 1; background: none; border: 1px solid var(--trip-modal-input-border); color: var(--trip-modal-text-secondary); font-size: 12px; font-weight: 500; padding: 7px 0; border-radius: 8px; cursor: pointer; } .m2m-dtp-ampm button.is-active { background: var(--trip-modal-button-submit-bg); border-color: var(--trip-modal-button-submit-bg); color: var(--trip-modal-button-submit-text); } .m2m-dtp-times-list { flex: 1 1 auto; min-height: 0; /* Cap so the column stays ~calendar height instead of growing to all 48 slots. */ max-height: 236px; overflow-y: auto; padding: 5px 0; /* Hide the (unstyled, out-of-theme) scrollbar; still scrollable via wheel/drag. */ scrollbar-width: none; -ms-overflow-style: none; } .m2m-dtp-times-list::-webkit-scrollbar { width: 0; height: 0; display: none; } .m2m-dtp-slot { display: block; width: auto; text-align: center; padding: 9px 8px; margin: 2px 10px; background: none; border: none; border-radius: 8px; color: var(--trip-modal-text-secondary); font-size: 13px; cursor: pointer; } .m2m-dtp-slot:hover { background: var(--trip-modal-input-border); color: var(--trip-modal-text-primary); } .m2m-dtp-slot.is-selected { background: var(--trip-modal-button-submit-bg); color: var(--trip-modal-button-submit-text); font-weight: 500; } /* ----- right: calendar column ----- */ .m2m-dtp-cal { flex: 1; min-width: 0; padding: 12px 14px 14px; display: flex; flex-direction: column; } .m2m-dtp-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } /* Month label centered, with the nav arrows flanking it on either side. */ .m2m-dtp-month { flex: 1; text-align: center; color: var(--trip-modal-text-primary); font-size: 14px; font-weight: 500; } .m2m-dtp-navbtn { flex: 0 0 auto; background: none; border: none; color: var(--trip-modal-text-secondary); width: 24px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 6px; } .m2m-dtp-navbtn:hover { background: var(--trip-modal-input-border); } .m2m-dtp-navbtn svg { width: 16px; height: 16px; } .m2m-dtp-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; margin-bottom: 4px; } .m2m-dtp-weekdays span { color: var(--trip-modal-text-secondary); font-size: 11px; opacity: 0.8; } .m2m-dtp-days { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; margin-bottom: 12px; } .m2m-dtp-day { /* Fixed-size circle centered in its (wider) column — compact rows with a small round highlight, matching the design (only the selected day is a filled dot). */ width: 34px; height: 34px; margin: 0 auto; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--trip-modal-text-primary); font-size: 13px; padding: 0; border-radius: 50%; cursor: pointer; } .m2m-dtp-day:hover { background: var(--trip-modal-input-border); } .m2m-dtp-day.is-other { color: var(--trip-modal-text-secondary); opacity: 0.45; } .m2m-dtp-day.is-disabled { opacity: 0.3; cursor: default; } .m2m-dtp-day.is-disabled:hover { background: none; } .m2m-dtp-day.is-selected, .m2m-dtp-day.is-selected:hover { background: var(--trip-modal-button-submit-bg); color: var(--trip-modal-button-submit-text); font-weight: 500; } /* Footer bar spanning the full width: Clear/Apply, left-aligned. */ .m2m-dtp-footer { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--trip-modal-input-border); } .m2m-dtp-actions { flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 8px; } .m2m-dtp-clear { background: none; border: 1px solid var(--trip-modal-input-border); color: var(--trip-modal-text-secondary); font-size: 13px; padding: 7px 15px; border-radius: 8px; cursor: pointer; } .m2m-dtp-apply { background: var(--trip-modal-button-submit-bg); border: none; color: var(--trip-modal-button-submit-text); font-size: 13px; padding: 7px 15px; border-radius: 8px; cursor: pointer; } .m2m-dtp-apply:disabled { opacity: 0.5; cursor: default; } /* Stack the two columns on narrow screens so the popover never overflows. */ @media (max-width: 560px) { .m2m-dtp { width: min(360px, calc(100vw - 24px)); } .m2m-dtp-body { flex-direction: column; } .m2m-dtp-times { width: 100%; flex: none; border-left: none; border-top: 1px solid var(--trip-modal-input-border); } .m2m-dtp-times-list { flex: none; max-height: 160px; } }