/* v3 grid filters (ADMIN_DESIGN_REFERENCE.md §3, plan §11 #82–#84).
   Markup: core/components/_lg_grid.html grid_filters(); behaviour js/v3/filters.js.
   Desktop: one row above the grid: search, compact dropdowns that apply at
   once, Clear filters. Phones: search, then "Filters (n)" + removable chips;
   the dropdowns live in a bottom sheet (native popover) with Apply filters. */

.lg-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
  margin-bottom: var(--space-3);
}
.lg-filters__form { display: contents; }

/* ---------- Search ---------- */
.lg-filters__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 16rem;    /* grows into the free space of the row (decision 285) */
}
.lg-filters__search > svg {
  position: absolute;
  left: var(--space-3);
  color: var(--text-muted);
  pointer-events: none;
}
.lg-filters__q { padding-left: calc(var(--space-3) + 1rem + var(--space-2)); padding-right: 2.25rem; }
.lg-filters__spin {
  position: absolute;
  right: var(--space-3);
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--border-strong);
  border-top-color: var(--primary);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.lg-filters__search[data-lg-busy] .lg-filters__spin { opacity: 1; }
/* Same spinner as the busy button (button.css, keyframes lg-spin). */
@media (prefers-reduced-motion: no-preference) {
  .lg-filters__spin { animation: lg-spin 700ms linear infinite; }
}

/* ---------- One filter: "Status  All ▾" ---------- */
.lg-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: 0 0 0 var(--space-3);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
}
.lg-filter__name { font-size: var(--size-label); line-height: var(--leading-label); font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.lg-filter__select {
  max-width: 11rem;            /* a long option (organiser name) can't push the row to wrap; the list shows it in full */
  text-overflow: ellipsis;
  min-height: calc(var(--control-height) - 2px);
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--size-body);
  cursor: pointer;
}
.lg-filter__select:focus-visible { outline: none; }
/* Beat v2's global `[data-theme] select` colours (see field.css). */
select.lg-filter__select { background-color: transparent; color: inherit; border-color: transparent; }
select.lg-filter__select option { background-color: var(--raised); color: var(--text); }
.lg-filter:focus-within { outline: var(--focus-ring) solid var(--focus); outline-offset: 2px; }
.lg-filter--set { border-color: var(--primary); background: var(--primary-tint); color: var(--primary-ink); }
.lg-filter--set .lg-filter__name { color: var(--primary-ink); }

/* Date: preset + the real days it covers; Custom shows From / To. */
.lg-filter-date { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); }
.lg-filter-date__range { align-self: center; font-size: var(--size-caption); color: var(--text-muted); white-space: nowrap; }
.lg-filter-date__range:empty { display: none; }
.lg-filter-date__custom { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lg-filter-date__custom[hidden] { display: none; }
.lg-filter-date__field { display: flex; flex-direction: column; gap: var(--space-1); }
.lg-filter-date__field .lg-filter__name { font-size: var(--size-caption); }

/* ---------- Applied: count, chips, clear ---------- */
.lg-filters__summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-height: var(--control-height); }
.lg-filters__summary:empty { display: none; }
.lg-filters__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--primary-tint);
  color: var(--primary-ink);
  font-size: var(--size-caption);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.lg-filters__chips { display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.lg-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 2rem;
  padding: 0 var(--space-2) 0 var(--space-3);
  border: 1px solid var(--primary);
  border-radius: var(--radius-pill);
  background: var(--primary-tint);
  color: var(--primary-ink);
  font-size: var(--size-label);
  white-space: nowrap;
  text-decoration: none;
  touch-action: manipulation;
}
.lg-chip:hover { background: var(--row-selected); }
.lg-chip:focus-visible, .lg-filters__clear:focus-visible { outline: var(--focus-ring) solid var(--focus); outline-offset: 2px; }
.lg-filters__clear { font-size: var(--size-label); color: var(--primary); white-space: nowrap; }

/* ---------- The panel: inline on desktop, a bottom sheet on phones ---------- */
.lg-filters__head { display: none; }
.lg-filters__title { margin: 0; font-size: var(--size-section); line-height: var(--leading-section); font-weight: 600; }

@media (min-width: 40em) {
  /* The panel is a popover only on phones: here it is always shown in place
     (author styles override the browser's popover defaults), and its box is
     dropped so search, every dropdown and the dates flow in ONE wrapping row
     (decision 257: the panel used to wrap as one block, 2-3 rows). */
  .lg-filters__panel {
    display: contents;
    color: inherit;
  }
  .lg-filters__apply, .lg-filters__toggle, .lg-filters__chips { display: none; }
}

@media (max-width: 39.99em) {
  /* Search and "Filters" share the first row; the applied chips (scrolling
     sideways inside themselves, Baymard) and "Clear filters" the second, only
     when a filter is set (owner, decision 285). */
  .lg-filters { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); }
  .lg-filters__search { max-width: none; grid-column: 1; grid-row: 1; }
  .lg-filters__q { min-height: var(--touch-target); font-size: 1rem; }
  .lg-filters__summary { display: contents; }
  /* Compact (decision 294): controls LOOK 2.5rem / chips 2rem, the 44px tap
     area is an invisible ::before (as buttons, decision 284). Beside a search
     box "Filters" takes the box's height. Clear lives in the sheet (and each
     chip's ×), so no third control on the row. */
  .lg-filters__toggle { grid-column: 2; grid-row: 1; align-self: stretch; }
  .lg-filters__chips { grid-column: 1 / -1; grid-row: 2; min-width: 0; overflow-x: auto; scrollbar-width: none; padding-block: var(--space-1); }
  .lg-filters__chips:not(:has(li)) { display: none; }
  .lg-chip { position: relative; min-height: 2rem; }
  .lg-chip::before { content: ""; position: absolute; inset: calc((var(--touch-target) - 100%) / -2) 0; }
  .lg-filters__clear { display: none; }
  /* No search box (Field allocation tabs): one row, "Filters" then the chips
     scrolling beside it (decision 294). */
  .lg-filters:not(:has(.lg-filters__search)) { grid-template-columns: auto minmax(0, 1fr); }
  .lg-filters:not(:has(.lg-filters__search)) .lg-filters__toggle { grid-column: 1; align-self: center; }
  .lg-filters:not(:has(.lg-filters__search)) .lg-filters__chips { grid-column: 2; grid-row: 1; }

  .lg-filters__panel:popover-open {
    position: fixed;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
    max-width: 100%;
    max-height: 85dvh;
    margin: 0;
    padding: var(--space-2) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    background: var(--raised);
    color: var(--text);
    box-shadow: var(--shadow-sheet);
  }
  .lg-filters__panel::backdrop { background: color-mix(in srgb, var(--text) 35%, transparent); }
  .lg-filters__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) 0; }
  .lg-filter { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1); padding: 0; border: 0; background: transparent; color: var(--text); }
  .lg-filter--set { background: transparent; }
  .lg-filter--set .lg-filter__name { color: var(--text-muted); }
  .lg-filter:focus-within { outline: none; }
  select.lg-filter__select {
    width: 100%;
    max-width: none;   /* the desktop 11rem cap made sheet selects half width (decision 294) */
    min-height: var(--control-height-touch);
    padding: 0 var(--space-3);
    border: 1px solid var(--border-control);
    background: var(--surface);
    font-size: 1rem;
  }
  .lg-filter__select:focus-visible { outline: var(--focus-ring) solid var(--focus); outline-offset: 2px; }
  .lg-filter-date { flex-direction: column; align-items: stretch; }
  .lg-filter-date__range { align-self: flex-start; }
  .lg-filter-date__custom { flex-direction: column; }
  .lg-filter-date__field .lg-field__input { width: 100%; min-height: var(--control-height-touch); font-size: 1rem; }
  .lg-filters__apply { position: sticky; bottom: 0; display: flex; gap: var(--space-2); padding-top: var(--space-2); background: var(--raised); }
  .lg-filters__apply .lg-btn { flex: 1 1 0; }
  .lg-filters__apply .lg-btn--primary { flex-grow: 2; }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 39.99em) {
  .lg-filters__panel:popover-open { animation: lg-filters-sheet-in var(--dur-enter) var(--ease); }
}
@keyframes lg-filters-sheet-in { from { transform: translateY(100%); } }