/* ============================================================ FLATPICKR-THEME.CSS — the SHARED brand-green Flatpickr theme. Loaded APP-WIDE in base.html (after vendor/flatpickr/flatpickr.min.css) so EVERY Flatpickr instance on the site — the orders-list / export filter range pickers AND every single/range date field upgraded by forms/date.js (frontend-forms SP6; was date-pickers.js) — renders with the V05 brand-green accent instead of Flatpickr's default blue. These rules are intentionally GLOBAL (not scoped to a wrapper): the calendar is portalled to , so a scoping wrapper would not reach it. Selectors mirror flatpickr.min.css for matching specificity, and this file MUST load AFTER it so the green wins. frontend-forms lane M-E (D15): the range-specific field chrome this paragraph used to point at (a page-tier stylesheet, retired) is gone — the range host is class-less now (forms.css), so nothing here needs it. ============================================================ */ /* Recolour Flatpickr's default blue accent to the V05 brand green. */ .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay { background: var(--enroute-green-500); border-color: var(--enroute-green-500); color: var(--fg-on-ink); /* frontend-forms SP6 (D16): #fff -> the existing token of equal value (#FFFFFF, tokens.css:279); no value change. */ } /* in-range middle days: light green band */ .flatpickr-day.inRange { background: var(--enroute-green-50); border-color: var(--enroute-green-50); box-shadow: -5px 0 0 var(--enroute-green-50), 5px 0 0 var(--enroute-green-50); } .flatpickr-day.inRange:nth-child(7n+1) { box-shadow: -2px 0 0 var(--enroute-green-50), 5px 0 0 var(--enroute-green-50); } /* range-end adjacency + week-row connectors */ .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) { box-shadow: -10px 0 0 var(--enroute-green-500); } /* today marker */ .flatpickr-day.today { border-color: var(--enroute-green-400); } .flatpickr-day.today:hover, .flatpickr-day.today:focus { background: var(--enroute-green-500); border-color: var(--enroute-green-500); color: var(--fg-on-ink); /* frontend-forms SP6 (D16): same equal-value swap as above */ } /* ------------------------------------------------------------------ ADR 0005's 44px tap floor, which the vendor's own sizes miss. Flatpickr ships 39x39 day cells and 34x34 month arrows. Both are under the floor, on a control where a mis-tap silently picks the wrong date — and the repo's tap-target sweep structurally cannot see them: it measures `button, a, input, select, textarea, [role=button]`, and every one of these is a bare `` with no role. Scope: <= 640px, i.e. the phone case the floor exists for. Note that most date fields never build a calendar on a real phone at all — flatpickr's own UA sniff swaps them for a native ``. The two instances that opt out of that sniff, and so DO render this calendar under a finger, are the `mode: 'range'` filter pickers (forms/date.js's range mode) and the `inline: true` ETA modal (order-actions-menu.js). Those are what this block is for. 7 x 44px = 308px, which is 0.125px wider than the vendor's 307.875px calendar, so the row still lays out seven across and nothing overflows a 390px phone. */ @media (max-width: 640px) { .flatpickr-calendar, .flatpickr-days, .dayContainer { width: calc(var(--space-8) * 7); min-width: calc(var(--space-8) * 7); max-width: calc(var(--space-8) * 7); } .flatpickr-day { height: var(--space-8); line-height: var(--space-8); max-width: var(--space-8); flex-basis: var(--space-8); } /* The header has to grow WITH the arrows: they are `position: absolute; top: 0` inside it, so 44px arrows in a 34px header overhang the "Sun…Sat" row by 10px. */ .flatpickr-months, .flatpickr-months .flatpickr-month { height: var(--space-8); } /* The `.flatpickr-months` ancestor is MANDATORY, not tidiness: the vendor's `height: 34px` lives on `.flatpickr-months .flatpickr-prev-month` at (0,2,0), so a bare `.flatpickr-prev-month` loses `height` however late it loads — and leaves the arrows 44x34, wide enough to look fixed and still under the floor. */ .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { width: var(--space-8); height: var(--space-8); display: flex; align-items: center; justify-content: center; padding: 0; } .flatpickr-current-month { height: var(--space-8); line-height: var(--space-8); padding-top: 0; } }