/* ─────────────────────────────────────────────────────────────────────────────
   Job picker (_JobPicker + jobPicker.js), shared by the Timesheet and Expenses:
   a search box that becomes a chip once a job is picked. Its results reuse the
   header's omni-search dropdown. A job's colour comes from the same inline
   custom properties as the Timesheet (--ts-hue, --ts-l).
   ───────────────────────────────────────────────────────────────────────────── */
.job-picker { position: relative; min-width: 0; }
/* The search box and chip set their own display, which beats the plain [hidden] attribute. */
.job-picker [hidden] { display: none !important; }
.job-picker__search { height: 40px; box-sizing: border-box; display: flex; align-items: center; gap: var(--spacing-2); padding: 0 10px;
                      background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-text-muted); }
.job-picker__search:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.job-picker__input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--font-size-sm); color: var(--color-text); }
.job-picker__chip { height: 40px; box-sizing: border-box; display: flex; align-items: center; gap: var(--spacing-2); padding: 0 6px 0 10px;
                    background: var(--color-surface); border: 1px solid #bfd0fb; border-radius: 8px; min-width: 0; }
.job-picker__swatch { width: 8px; height: 8px; border-radius: 2px; background: oklch(var(--ts-l, 0.62) 0.13 var(--ts-hue, 255)); flex: none; }
.job-picker__code { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); flex: none; }
.job-picker__name { font-size: 12px; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.job-picker__clear { width: 26px; height: 26px; display: grid; place-items: center; border: 0; background: none; border-radius: 6px; color: var(--color-text-muted); cursor: pointer; flex: none; }
.job-picker__clear:hover { background: var(--color-surface-alt); color: var(--color-text); }
.job-picker__panel { left: 0; right: auto; width: min(440px, 90vw); border-radius: 12px; box-shadow: 0 14px 36px rgba(15, 23, 42, 0.16); z-index: 20; }
.job-picker__panel .omni-search__item.is-active { background: #eef3fe; }
.job-picker__panel .job-picker__swatch { margin-right: var(--spacing-1); }
.job-picker__foot { display: flex; gap: 14px; padding: 8px 10px 4px; border-top: 1px solid #f1f5f9; margin-top: 4px; font-size: var(--font-size-xs); color: var(--color-text-muted); }