/* ──────────────────────────────────────────────────────────────────────────
 * /css/_lib/list-header.css
 *
 * MANIFEST
 * Purpose: Shared LAYOUT module for the standardized portal list-page header
 *          (LOCKED C97-B Sprint 2). One header shape across the three list
 *          pages (Clients / My Leads / Marketplace):
 *            • Bar 2 (.list-head)      — page TITLE (left) + primary action OR
 *                                        an inline count (right). Scrolls with
 *                                        the content (NOT sticky — C100 bugfix).
 *            • Bar 3 (.list-filterbar) — the C97-B glass FILTER dropdown (left)
 *                                        + a free-text SEARCH field (right, on
 *                                        the records pages only). STICKY under
 *                                        the nav so the filter trigger stays
 *                                        pinned + the glass panel stays anchored
 *                                        on scroll (C100 bugfix).
 *          Both bars are constrained to the 640px content column (max-width +
 *          margin:0 auto) so the header aligns to .page-header / .feed on wide
 *          viewports; full-width at narrow widths.
 *          The filter control's own chrome is owned by the C97-B component
 *          (/css/_lib/dropdown.css select mode) — this module only sizes the
 *          slot it sits in. The search field's box-model lives here; its
 *          dark-mode Tier-2 well treatment lives in /shared-themes.css (3G.4
 *          group) so .list-search-input recesses identically to .cis-input.
 *
 * Tokens:  Layout + light/structural values are token-only (no hardcode). DARK
 *          is authoritative (LOCKED C99-A); LIGHT is provisional (Phase 4). The
 *          surface fills + the search well's dark recipe come from the bulk
 *          dark surface override + the 3G.4 well group in /shared-themes.css,
 *          whose `[data-theme="dark"] .list-*` selectors out-specify the
 *          single-class rules here regardless of source order.
 *
 * Cascade: A /css/_lib/ shared module (LOCKED C82-A). Loaded AFTER the shared
 *          base layer (tokens → … → shared-themes) and BEFORE the page CSS,
 *          after /css/_lib/dropdown.css. The owner page CSS can still override.
 *
 * Buttons: rectangular (radius-md, no pills — HOTFIX3 / C68-B-1A.6-A); the
 *          .list-head-action compact header pill preserves the prior
 *          .add-client-pill / .create-lead-pill sizing.
 *
 * Precache: Added to sw.js PRECACHE_URLS (loaded by 2+ portal pages, same
 *          rationale as cis-form.css + dropdown.css).
 *
 * Consumed by: clients.html (C97-B Sprint 2A). marketplace.html + my-leads.html
 *          adopt this same module in C97-B Sprint 2B.
 *
 * Shipped: C100 (C97-B Sprint 2A).
 * ────────────────────────────────────────────────────────────────────────── */

/* ── Bar 2 — title bar ───────────────────────────────────────────────────── *
 * Scrolls WITH the content (NOT sticky). The C100 bugfix makes the Bar 3
 * filter bar the single pinned surface so the C97-B glass filter trigger stays
 * anchored on scroll; keeping the title sticky too would require a brittle
 * hardcoded title-height offset for Bar 3 (the title font shrinks at the 399px
 * breakpoint), so the title yields stickiness to the filter bar (option i).
 * max-width/centering aligns the bar to the 640px .page-header / .feed column
 * on wide viewports (full-width at narrow widths). */
.list-head {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: var(--space-3-5) var(--space-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}

.list-head-title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  color: var(--dark);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
}

/* Inline count on the right of Bar 2 (e.g. Marketplace leads-available count
 * in Sprint 2B — no action button on that page). */
.list-head-count {
  font-size: var(--text-md);
  color: var(--text-muted);
  font-weight: var(--weight-regular);
  white-space: nowrap;
}

/* Primary action pill — compact header CTA. Preserves the prior
 * .add-client-pill / .create-lead-pill look (rectangular radius-md, red). */
.list-head-action {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3-5);
  border-radius: var(--btn-radius);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.15s ease, transform 0.18s var(--ease-spring);
  border: var(--btn-primary-border);
  box-shadow: var(--btn-primary-shadow);
  box-sizing: border-box;
}
.list-head-action:hover { filter: brightness(1.06); }
.list-head-action:active { transform: scale(var(--press-scale)); }
.list-head-action:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ── Bar 3 — filter (left) + search (right) ──────────────────────────────── *
 * Sticky under the nav (top offset matches the prior .list-head anchor: the
 * 77px nav height + the iOS safe-area inset). Pinning this bar keeps the C97-B
 * select-mode filter TRIGGER fixed on scroll, so the component's body-level
 * fixed panel (reposition-to-trigger on capture-scroll, /js/_lib/dropdown.js)
 * stays anchored instead of riding up over the nav/logo (C100 bugfix). z-index
 * sits below the sticky nav (var(--z-nav) = 100) but above the scrolling
 * cards. max-width/centering matches Bar 2 + the 640px content column. */
.list-filterbar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: var(--space-2-5) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  position: sticky;
  top: calc(77px + env(safe-area-inset-top));
  z-index: 89;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}

/* Full-width header chrome (match the Contracts/Invoices pattern, C100): the
 * bar's surface bg + border span the full window — continuous with the nav —
 * while the title/filter/search CONTENT stays centered on the 640px card column
 * via inline padding. Replaces the prior centered-640px-box look that read as a
 * hard-edged floating box on wide screens. Placed AFTER both bar rules so it
 * wins the cascade (equal specificity, later in source). On narrow viewports the
 * calc goes negative → max() falls back to the base inline padding. */
.list-head,
.list-filterbar {
  max-width: none;
  margin-inline: 0;
  padding-inline: max(var(--space-5), calc((100% - 640px) / 2));
}

/* Filter slot — holds the C97-B select-mode <select> (visually hidden) + the
 * component's .tg-dd-select-trigger (width:100%), so this fixed basis sets the
 * trigger width. */
.list-filter { flex: 0 0 150px; min-width: 0; }
/* Size only the NO-JS fallback select to the slot. When the C97-B component
 * mounts it adds .tg-dd-select-native (position:absolute; width:1px; clipped)
 * to visually hide the native <select>; this rule must NOT override that width
 * or the hidden 1px select renders full-width + absolutely positioned and blows
 * the page out horizontally (C100 overflow fix — verified on staging). */
.list-filter > select:not(.tg-dd-select-native) { width: 100%; }

/* Search slot — fills the remaining row width; min-width:0 lets it shrink on
 * narrow viewports without pushing the filter slot. */
.list-search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

.list-search-icon {
  position: absolute;
  left: var(--space-3);
  width: 16px;
  height: 16px;
  stroke: var(--text-muted);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.list-search-input {
  width: 100%;
  /* min-width:0 lets this <input type="search"> shrink below its intrinsic
   * preferred width (~170-200px) as a flex child of .list-search. Without it,
   * the input's flex `min-width:auto` floors the row width and, combined with
   * the fixed 150px filter slot + padding/gaps, overflows narrow viewports →
   * the whole page becomes horizontally pannable in the PWA (C100 bugfix). */
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-8);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--dark);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  -webkit-appearance: none;
  appearance: none;
}
.list-search-input::placeholder { color: var(--text-dim); }
.list-search-input:focus { outline: none; border-color: var(--red); }

@media (max-width: 399px) {
  .list-head-title { font-size: var(--text-2xl); }
}