/* Filter panel layout for the list/report pages (includes/_filters.html).
 *
 * Its own file rather than an addition to sidebar.css or chrome.css: static
 * files are uploaded under stable names with `max-age=94608000`, so a new file
 * is never served from a stale cache -- see the note at the top of chrome.css.
 * The `?v={{ STATIC_VERSION }}` the base templates append covers later edits.
 *
 * Two problems this solves:
 *
 * 1. The panel used to be a `col-md-2` next to a `col-md-10` of table. A table
 *    wider than its column overflows *visibly*, and because the panel is the
 *    earlier sibling in the DOM the panel's `bg-light` background paints over
 *    the spill -- whole table columns disappeared underneath the filters.
 *    The content column now scrolls on its own instead of overflowing.
 *
 * 2. Two twelfths of a laptop screen (minus the 244px navigation panel) is
 *    ~190px: too narrow for the fields, and it steals the width the table
 *    needs. From laptop widths down the panel becomes a full-width band above
 *    the content, with the fields laid out in a row.
 */

:root {
  /* Width of the side panel on wide screens. The viewport width it appears
     from (1600px) has to stay a literal below -- a media query cannot read a
     custom property. */
  --filters-panel-width: 260px;
}

.filters-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem;
}

.filters-layout__panel,
.filters-layout__content {
  /* Stacked by default; `min-width: 0` lets the content shrink to the layout
     instead of pushing it wider. */
  flex: 1 1 100%;
  min-width: 0;
}

/* The panel is first in the DOM, so stacked it already sits on top of the
   content and needs no `order` of its own. */
.filters-layout__content {
  overflow-x: auto;
}

@media (min-width: 1600px) {
  .filters-layout {
    flex-wrap: nowrap;
  }

  .filters-layout__content {
    flex: 1 1 auto;
    order: 1;
  }

  .filters-layout__panel {
    flex: 0 0 var(--filters-panel-width);
    width: var(--filters-panel-width);
    order: 2;
  }
}

/* The panel itself. `auto-fit` does the responsive work without a second
   breakpoint: in the 260px side column the fields get one track and stack, and
   in the full-width band they spread across as many tracks as fit. */
.filters-panel__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: end;
  gap: 0 1rem;
}

.filters-panel__fields > * {
  min-width: 0;
}

/* Select2 sizes itself off the field it replaces and can end up wider than the
   track it sits in. */
.filters-panel .select2-container {
  max-width: 100%;
}