/* ============================================================
   Pipezoom - css/leadfilters.css, the filter bar of the Leads page.
   The sticky block [data-lds-filters] of leads.php: the bar, the
   count line with the active filter chips and Clear filters, and the
   More filters panel with its group cards and picker cards in 1 grid.
   Every rule is scoped under .lds-filters, over the older bar rules of
   css/leads.css. Loaded by includes/head.php after css/leadrefine.css.
   Notes: docs/notes/app.pipezoom.com/css/leadfilters.css.md
   ============================================================ */

/* The block is sticky under the top bar and the crumb row (--lds-stick,
   css/leads.css), on its own background with a line under it, over the
   rows scrolling beneath, and with padding between the controls and the
   line. The bar's layout follows the block's own width (lds-bar): the
   rail's 2 widths move it at every window width. */
.lds-filters{
  position:sticky;top:var(--lds-stick);z-index:40;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;
  margin:0 0 12px;
  padding:10px 0 9px;
  background:var(--surface-page);
  border-bottom:1px solid var(--line);
  scroll-margin-top:var(--lds-stick);
  container:lds-bar / inline-size;
}
/* With More filters open the block is in the page's flow. A stuck block
   taller than the window shows its top alone, and the panel is up to 13
   cards tall. When a rep opens More from further down the table,
   js/leadchips.js scrolls the page back to the bar. */
.lds-filters:has(> .lds-more:not([hidden])){position:static;}

/* The bar
   The 2 selects, the search and the 2 presses on the first line; the
   tally chips beside them on a wide row and on a line of their own,
   under the selects, on a narrower one. The selects and the search wrap
   on a 140px base, then grow into the width left. */
.lds-filters > .lds-one{
  order:0;flex:1 1 100%;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;
  margin:0;
}
.lds-filters .lds-one > *{flex:0 0 auto;}
.lds-filters .lds-one .lds-sel{flex:1 1 140px;width:auto;min-width:110px;max-width:180px;}
.lds-filters .lds-one .lds-in-find{flex:1 1 140px;min-width:130px;max-width:340px;}
.lds-filters .lds-one-go{display:flex;align-items:center;gap:8px;margin-left:auto;}
.lds-filters .lds-one .lds-more-go{margin-left:0;}
.lds-filters .lds-cols-go{display:inline-flex;align-items:center;gap:7px;}
.lds-filters .lds-tally{
  flex:0 1 auto;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin:0;
}
.lds-filters .lds-chip{padding:3px 10px;}

/* The row under the bar: the count line of leads.php first, then 1 chip
   for each filter off its default, then Clear filters. */
.lds-filters > .lds-count{order:1;flex:0 0 auto;margin:0;}
.lds-filters > .lds-chips{
  order:2;flex:0 1 auto;min-width:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
}
.lds-filters > .lds-clear{order:3;padding:4px 10px;font-size:.8rem;}
.lds-filters > .lds-more{order:4;flex:1 1 100%;}

/* An active filter chip: a light press in the page's ink with a neutral
   line, the filter's name in the soft ink, its value in the full ink,
   then the xmark. Pressing the chip resets the filter. */
.lds-chip-f{
  display:inline-flex;align-items:center;gap:6px;
  max-width:100%;min-width:0;
  padding:3px 5px 3px 11px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-pill);
  background:var(--surface-raised);
  color:var(--ink);
  font:inherit;font-size:.8rem;line-height:1.45;
  cursor:pointer;
}
.lds-chip-f-l{flex:none;color:var(--ink-soft);}
.lds-chip-f-v{min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lds-chip-f i{
  flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;
  border-radius:var(--radius-pill);
  color:var(--ink-soft);font-size:.72rem;
}
.lds-chip-f:hover{background:var(--surface-hover);}
.lds-chip-f:hover i{background:var(--surface-high);color:var(--ink);}
.lds-chip-f:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* More filters: the panel on the raised background with the 1px line,
   and every card in 1 grid, 3 across from 1200px, 2 from 900px, 1 under
   (docs/29-leads-workspace.md, question 8). A card is as tall as its own
   controls. Nothing in the panel folds. */
.lds-filters .lds-more{
  display:block;
  margin:2px 0 1px;
  padding:12px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.lds-fgrid{
  display:grid;gap:10px;align-items:start;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:900px){
  .lds-fgrid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width:1200px){
  .lds-fgrid{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* A card: the group's name as its heading, each select under its own
   label, the switches as 1 row. Pressing Columns scrolls the page to
   the Columns card, with the card's top under the crumb row. */
.lds-fcard{
  display:flex;flex-direction:column;gap:9px;min-width:0;
  padding:10px 12px 12px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  scroll-margin-top:calc(var(--lds-stick) + 10px);
}
.lds-fcard-h{
  display:flex;align-items:center;gap:8px;
  margin:0;padding:0;
  font-size:.86rem;font-weight:700;line-height:1.35;letter-spacing:0;text-transform:none;
  color:var(--ink);
}
.lds-fcard-b{display:flex;flex-direction:column;gap:9px;min-width:0;}
.lds-togs{display:flex;flex-wrap:wrap;gap:6px;}
.lds-fld{display:flex;flex-direction:column;gap:4px;min-width:0;}
.lds-fl{font-size:.76rem;font-weight:600;color:var(--ink-soft);}
.lds-fld .lds-sel{width:100%;min-width:0;}

/* A picker card: its list open in the card, scrolling past 240px. The
   heading has the hook of the press the picker had as a popover
   (js/leadpick.js marks it while a value is off), and the mark has no
   look of its own here: the count beside the heading shows that fact. */
.lds-fpick .lds-pan{
  position:static;width:auto;max-width:none;
  background:none;border:0;border-radius:0;box-shadow:none;
}
.lds-fpick .lds-pan-h{padding:0 0 6px;border:0;}
.lds-fpick .lds-pan-b{max-height:240px;padding:0;margin:0 -7px;}
.lds-fpick .lds-fcard-h.tog-on{background:none;border-color:transparent;color:var(--ink);}
.lds-fcard-h .lds-pan-n{margin-left:0;}

/* Under 820px of block the caption is left out, and the 2 selects, the
   search and the 2 presses stay on 1 line down to 720px. */
@container lds-bar (max-width:819px){
  .lds-filters .lds-one > .lds-one-l{display:none;}
}
/* Under 720px of block, a phone: the 2 selects side by side, the search
   across, the 2 presses side by side, then the tally chips. */
@container lds-bar (max-width:719px){
  .lds-filters .lds-one{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
  .lds-filters .lds-one .lds-sel{min-width:0;max-width:none;}
  .lds-filters .lds-one .sel-in{padding-top:6px;padding-bottom:6px;}
  .lds-filters .lds-one > .lds-in-find,
  .lds-filters .lds-one > .lds-one-go,
  .lds-filters .lds-one > .lds-tally{grid-column:1 / -1;min-width:0;max-width:none;}
  .lds-filters .lds-one > .lds-in-find{padding-top:6px;padding-bottom:6px;}
  .lds-filters .lds-one-go{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0;}
  .lds-filters .lds-one-go > .tog{justify-content:center;}
  .lds-filters .lds-tally{gap:5px;}
}
/* A phone's block: less air around the controls, for the rows under it. */
@media (max-width:699px){
  .lds-filters{gap:6px 8px;padding:8px 0 7px;}
}