/* * Application styles — Tailwind CDN handles utility classes. * Add custom component styles below. */ @import url("https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css"); @import url("https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/themes/dark.css"); /* Flatpickr theme overrides to match app design */ [data-theme="dark"] .flatpickr-calendar { background: #1e293b; border-color: #334155; box-shadow: 0 4px 24px rgba(0,0,0,0.4); } [data-theme="dark"] .flatpickr-day { color: #e2e8f0; } [data-theme="dark"] .flatpickr-day:hover, [data-theme="dark"] .flatpickr-day:focus { background: #334155; border-color: #334155; } [data-theme="dark"] .flatpickr-day.selected, [data-theme="dark"] .flatpickr-day.selected:hover { background: #15803d; border-color: #15803d; } [data-theme="dark"] .flatpickr-months .flatpickr-month, [data-theme="dark"] .flatpickr-weekdays, [data-theme="dark"] span.flatpickr-weekday { background: #1e293b; color: #94a3b8; } [data-theme="dark"] .flatpickr-current-month input.cur-year, [data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months { color: #e2e8f0; } [data-theme="dark"] .flatpickr-time input { background: #1e293b; color: #e2e8f0; } [data-theme="dark"] .flatpickr-time .flatpickr-time-separator, [data-theme="dark"] .flatpickr-time .flatpickr-am-pm { color: #94a3b8; } /* Alt input (display input) should match app input style. review cycle 2026-07-27: this rule set border-COLOR only. With no border-style, CSS renders no border at all, so the Scheduled Date field on the project form looked borderless next to every sibling. The border those siblings show comes from an inline `border: 1px solid var(--input-border)` in the markup, and flatpickr copies the original input's className to the input it substitutes but NOT its inline style -- date_picker_controller.js patches that back for `altInput`, but on a phone flatpickr shows a separate `mobileInput` instead, which the controller never touches. Hence width and padding looked right (classes copied) while the border vanished. Set the full shorthand, not just the colour. text-align guards the other half of the report: iOS renders a native with its value centred, which made the field the only left-misaligned control on the form. */ .flatpickr-input.flatpickr-mobile, input.flatpickr-input[readonly] { background-color: var(--input-bg) !important; border: 1px solid var(--input-border) !important; color: var(--text) !important; text-align: left !important; } /* design-review 2026-07-21: the time picker's numeric up/down spinners were too small to reliably tap on a real mobile device. CSS-only enlargement -- time_picker_controller.js keeps disableMobile:true unchanged (that flag exists for a real dark-mode legibility bug on native , not something to revisit here). Applies in both themes; this is a sizing fix, not a color one. */ .flatpickr-time .numInputWrapper { width: 3em; } .flatpickr-time input.numInput { font-size: 22px; font-weight: 700; padding: 10px 0; } .flatpickr-time .numInputWrapper span.arrowUp, .flatpickr-time .numInputWrapper span.arrowDown { height: 30%; right: 3px; } .flatpickr-time .numInputWrapper span.arrowUp:after, .flatpickr-time .numInputWrapper span.arrowDown:after { border-width: 7px; } .flatpickr-time .flatpickr-am-pm { font-size: 16px; padding: 10px 8px; } /* Google Places Autocomplete dropdown (address_autocomplete_controller.js, city_autocomplete_controller.js) ships with Google's own light-only default styling and injects its .pac-container as a direct child of , so it needs its own dark-theme override here rather than through the app's normal Tailwind/ERB styling. */ [data-theme="dark"] .pac-container { background-color: var(--card-bg); border: 1px solid var(--border); box-shadow: 0 4px 24px rgba(0,0,0,0.4); } [data-theme="dark"] .pac-item { background-color: var(--card-bg); color: var(--text); border-top-color: var(--border); } [data-theme="dark"] .pac-item:hover, [data-theme="dark"] .pac-item-selected { background-color: var(--input-bg); } [data-theme="dark"] .pac-item-query { color: var(--text); } [data-theme="dark"] .pac-matched { color: var(--badge-green-text); } [data-theme="dark"] .pac-icon { filter: invert(1) grayscale(1) brightness(1.8); } /* iOS Safari auto-zooms the whole page on focus of any text input/select/ textarea rendered below 16px (many of ours use Tailwind's text-sm, 14px), and the zoomed-in state can persist after the field blurs. Force 16px on mobile only so it never triggers, without touching maximum-scale (which would disable legitimate pinch-zoom for everyone). */ @media (max-width: 640px) { input, select, textarea { font-size: 16px !important; } } /* Brief highlight when a clip's "N point sources" label scrolls you to the rows that clip produced (point_source_link_controller.js). Uses the badge green pair so it reads as "these are the ones" in both themes, and respects reduced-motion by simply not animating -- the scroll still happens. */ .point-source-flash { animation: point-source-flash 1.6s ease-out; border-radius: 6px; } @keyframes point-source-flash { 0%, 35% { background-color: var(--badge-green-bg); } 100% { background-color: transparent; } } @media (prefers-reduced-motion: reduce) { .point-source-flash { animation: none; } }