/* filter-pill.css: the ONE filter pill + dropdown component.
 *
 * This is the Line Shop toolbar's control chassis, lifted verbatim from
 * templates/lineshop.html on 2026-08-29 when the Gap Report page needed the
 * same control and was about to grow a lookalike: the grey uppercase
 * .filter-label, the rounded .book-filter-btn pill (gold with dark bold text
 * in its .has-filter state, caret in .arrow), and the .book-dropdown panel
 * with its items, section headers, separator and sticky action row.
 *
 * templates/lineshop.html and templates/gap_report.html both load this file
 * and carry NO copy of these rules. templates/index.html still carries its
 * own older copy of the same rules inline; fold it onto this file next time
 * that template is open for work.
 *
 * The behavior (what the checkboxes do, what the pill label says) stays in
 * each page's own script; this file is the look.
 */
.filter-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.filter-label { font-size: 12px; color: var(--muted); }

/* ── Book filter dropdown ── */
.book-filter-wrap { position: relative; }
.book-filter-btn {
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--muted); padding: 6px 14px; border-radius: 20px;
  font-size: 13px; cursor: pointer; transition: all 0.15s;
  display: flex; align-items: center; gap: 6px;
}
.book-filter-btn:hover { border-color: var(--gold); color: var(--text); }
.book-filter-btn.has-filter { background: var(--gold); border-color: var(--gold); color: #000; font-weight: 600; }
.book-filter-btn .arrow { font-size: 10px; }
.book-dropdown {
  display: none; position: absolute; top: calc(100% + 6px); left: 0;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 0; min-width: 210px;
  z-index: 200; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  max-height: min(340px, 60vh); overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.book-dropdown.open { display: block; }
.book-dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; cursor: pointer; font-size: 13px;
  color: var(--text); transition: background 0.1s;
}
.book-dropdown-item:hover { background: var(--bg3); }
.book-dropdown-item input[type="checkbox"] {
  accent-color: var(--gold); width: 16px; height: 16px; cursor: pointer; flex-shrink: 0;
}
/* MOBILE SCROLL (Dan, 2026-08-26): "I can never get down to the
     'Select all' or 'clear'. then if I try to scroll back up it only
     scrolls the page in the background."
     Two faults in one panel. The actions row was the last child of a
     scrolling box holding ~20 books, so reaching it meant scrolling the
     panel to its end; it is now pinned to the bottom and always in view.
     And when an inner scroller hits its edge, iOS hands the gesture to
     the page underneath (scroll chaining), which is why scrolling back up
     moved the board instead. overscroll-behavior:contain stops that.
     The height is also capped against the viewport so the panel can never
     extend below the fold on a phone. */
.book-dropdown-actions {
  display: flex; gap: 8px; padding: 8px 16px 4px;
  border-top: 1px solid var(--border); margin-top: 4px;
  position: sticky; bottom: 0; background: var(--bg2); z-index: 1;
}
.book-dropdown-actions button {
  background: none; border: none; color: var(--gold); font-size: 12px;
  cursor: pointer; padding: 2px 0; font-weight: 600;
}
.book-dropdown-actions button:hover { text-decoration: underline; }
/* Section headers inside the books dropdown: separate "Prediction
   Markets" (Kalshi, Polymarket) from "Sportsbooks" without forcing the
   user to scan the list to figure out which is which. */
.book-dropdown-section {
  padding: 8px 16px 4px;
  font-size: 10px; font-weight: 700; color: var(--muted);
  letter-spacing: 0.5px; text-transform: uppercase;
}
.book-dropdown-sep {
  height: 1px; background: var(--border);
  margin: 6px 0;
}

@media (max-width: 600px) {
  .filter-group { flex-wrap: wrap; gap: 5px; padding-bottom: 0; }
  .filter-label { flex-shrink: 0; font-size: 11px; }
  .book-filter-btn { font-size: 12px; padding: 5px 10px; }
  .book-dropdown { min-width: 180px; max-width: calc(100vw - 24px); }
  /* Books filter group needs to escape the horizontal-scroll clipping
     that the other filter-groups use, otherwise the absolutely-
     positioned dropdown gets cut off below the toolbar on mobile. */
  .filter-group.filter-group-books { overflow: visible; }
}