/* ============================================================ ORDER-ACTIONS-MENU.CSS — context menu for orders (Tweak 062) Rendered into by order-actions-menu.js, positioned (fixed) at the pointer / long-press point. ============================================================ */ .oactx-menu { position: fixed; z-index: 1000; min-width: 210px; max-width: 280px; max-height: calc(100vh - 24px); overflow-y: auto; background: var(--bg-paper); border: 1px solid var(--border-1); border-radius: 10px; box-shadow: 0 8px 28px rgba(10, 13, 11, 0.16); padding: 6px; font-size: 13.5px; color: var(--fg-1); -webkit-user-select: none; user-select: none; } .oactx-head { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); padding: 4px 10px 6px; } .oactx-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; box-sizing: border-box; text-align: left; padding: 8px 10px; min-height: 44px; /* ADR 0005: >=44px tap target (UX-24) */ border: 0; border-radius: 7px; background: transparent; color: inherit; font: inherit; text-decoration: none; cursor: pointer; } .oactx-item:hover { background: var(--enroute-ink-100); } .oactx-danger { color: var(--enroute-rose-700); } .oactx-danger:hover { background: var(--enroute-rose-50); } .oactx-caret { color: var(--fg-3); font-size: 11px; transition: transform 100ms; } .oactx-group.is-open > .oactx-parent .oactx-caret { transform: rotate(90deg); } .oactx-sub { margin: 2px 0 4px 8px; padding-left: 6px; border-left: 2px solid var(--border-1); } .oactx-subitem { padding: 7px 10px; font-size: 13px; color: var(--fg-2); } .oactx-subitem:hover { color: var(--fg-1); } /* ============================================================ ETA MODAL — the "Set/Update ETA" dialog opened from the context menu. The menu item opens the shared modal chrome (window.v05Modal); the picker + Cancel/Confirm live there. The body holds ONE `.fld`: a label, the flatpickr altInput (the chosen value), then an always-visible inline calendar (`.flatpickr-calendar.inline`, ~308px wide + a time row). These rules are SCOPED to `.oactx-eta-modal` so only this dialog changes; the shared `.v05-modal*` chrome (assign / preview / accept modals) is untouched. THE SQUISH BUG (V0.11): the inline calendar renders INSIDE the `.fld`, so the generic control rules in v05-shell.css (`.fld select`, `.fld input[type=number]`) matched flatpickr's OWN internal controls — the month , and the hour/minute inputs — forcing them to min-height:44px + 10px/12px padding + the custom select caret. flatpickr's header row is only 34px tall, so the 44px month/year controls overflowed it, overlapped the weekday row, and clipped the "June 2026" label. The fix below releases those internal controls back to flatpickr's natural sizing and gives the dialog a width + vertical rhythm that fits the calendar comfortably. */ /* The calendar (308px) needs ~308 + body padding (2×18) ≈ 344px of dialog. The shared 460px max-width left it floating in the middle with dead space; cap the ETA dialog tighter so the calendar reads as the content, not lost in a void. */ .oactx-eta-modal .v05-modal__dialog { max-width: 376px; } .oactx-eta-modal .v05-modal__body { overflow: auto; } /* Comfortable vertical rhythm: value field → calendar → (footer). */ .oactx-eta-modal .fld { gap: 8px; } /* The flatpickr altInput (the chosen-value text field) keeps the full .fld control look; it's a real form control and SHOULD be 44px. */ .oactx-eta-modal .fld input.altInput, .oactx-eta-modal .fld input.form-control { width: 100%; box-sizing: border-box; } /* Centre the inline calendar with breathing room above it (below the value field) and a little below (above the footer divider). */ .oactx-eta-modal .flatpickr-calendar.inline { margin: 6px auto 2px; } /* RELEASE flatpickr's internal controls from the .fld control styling. These live inside .fld but are part of the calendar widget, NOT form fields the user fills directly — flatpickr sizes them itself. Resetting min-height / padding / appearance / shadow restores the compact header + time row flatpickr expects, which un-squishes the month/year header and the time inputs. */ .oactx-eta-modal .flatpickr-calendar select.flatpickr-monthDropdown-months, .oactx-eta-modal .flatpickr-calendar input.numInput { min-height: 0; width: auto; border-radius: 0; box-shadow: none; background-image: none; /* drop the .fld select caret */ padding: 0; font-size: inherit; } /* The hour/minute spin inputs sit in the time row; flatpickr centres them and wants ~40px height with no inset border. */ .oactx-eta-modal .flatpickr-calendar .flatpickr-time input.numInput { padding: 0; text-align: inherit; }