/* filters.css — the shared filter bar.
 *
 * Multi-select pickers and count chips. Written for Task Explorer,
 * which is why every class is still prefixed `te-`; the prefix is
 * historical and the pattern is not. The Support centre uses the same
 * controls, and the point of that is that combining four filters should
 * feel identical wherever you do it.
 *
 * It lives here rather than inside task-explorer.jsx because the
 * component (TeMultiPicker, on window) is reusable and its stylesheet
 * was not: a module rendering the picker without Task Explorer mounted
 * got the markup with none of the styling. That failure has already
 * shipped once in this codebase, in the support modals.
 *
 * Rules below are byte-for-byte what task-explorer.jsx used to inject,
 * so Task Explorer renders exactly as before. The mobile block at the
 * bottom is new.
 */

.te-chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border); background: var(--bg-surface); color: var(--ink-body);
  border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer;
  font-family: inherit; line-height: 1.2;
}
.te-chip:hover { background: var(--bg-hover); }
.te-chip-n {
  font-size: 11px; font-weight: 700; color: var(--ink-muted);
  background: var(--bg-subtle); border-radius: 999px; padding: 1px 7px; min-width: 20px; text-align: center;
}
.te-chip.is-on { border-color: var(--brand); background: var(--brand); color: #fff; }
.te-chip.is-on .te-chip-n { background: rgba(255,255,255,.22); color: #fff; }
.te-chip-bad:not(.is-on) .te-chip-n { background: rgba(226,68,92,.14); color: #a11c33; }
.te-chip-warn:not(.is-on) .te-chip-n { background: rgba(253,171,61,.20); color: #7a4205; }

.te-picker { position: relative; }
.te-picker-btn {
  width: 100%; display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); background: var(--bg-surface);
  border-radius: var(--r-md); padding: 6px 9px; cursor: pointer;
  font-size: 13px; font-family: inherit; color: var(--ink-body); text-align: left;
}
.te-picker-btn:hover { background: var(--bg-hover); }
.te-picker-btn.is-set { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.te-picker-label { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }
.te-picker-value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.te-picker-caret { width: 14px; height: 14px; flex: none; color: var(--ink-faint); }
.te-picker-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 60;
  min-width: 100%; width: max-content; max-width: 320px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 6px;
}
.te-picker-search {
  width: 100%; box-sizing: border-box; margin-bottom: 6px;
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 5px 8px;
  font-size: 13px; font-family: inherit; background: var(--bg-surface); color: var(--ink-body);
}
.te-picker-list { max-height: 260px; overflow-y: auto; }
.te-picker-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px;
  font-size: 13px; color: var(--ink-body); cursor: pointer; border-radius: var(--r-sm);
}
.te-picker-row:hover { background: var(--bg-hover); }
.te-picker-empty { padding: 10px 6px; font-size: 12px; color: var(--ink-faint); }
.te-picker-clear {
  width: 100%; margin-top: 6px; border: 0; border-top: 1px solid var(--border);
  background: transparent; color: var(--brand); font-size: 12px; font-family: inherit;
  padding: 7px 0 3px; cursor: pointer; text-align: left;
}

/* ── Touch ────────────────────────────────────────────────────────
   The dropdown was built for a mouse. Three things break at 375px. */
@media (max-width: 760px) {
  /* Below 16px iOS zooms the page the moment the field takes focus,
     which pushes the open menu off screen — the search box sits INSIDE
     that menu, so the control zooms itself out of view. */
  .te-picker-search { font-size: 16px; }
  /* A 320px menu anchored to a narrow button can hang off the right
     edge, where it cannot be scrolled back into view. */
  .te-picker-menu { max-width: min(320px, calc(100vw - 24px)); }
  /* 44px rows: a 5px-padded checkbox row is not a touch target. 12px
     of padding either side of a 13px/1.4 line lands on 44 exactly. */
  .te-picker-row { padding: 12px 8px; }
  .te-picker-btn { min-height: 40px; }
}