/**
 * Data Tables - Ajax Filters (interim) - panel layout
 *
 * Adjust per site or per page by overriding the custom properties, e.g. in
 * Cornerstone's page CSS:
 *
 *   .cs-dtf-panel { --cs-dtf-panel-width: 1300px; --cs-dtf-col-min: 220px; }
 */

.cs-datatable-filter-panel.x-dropdown.cs-dtf-panel {
  --cs-dtf-panel-width: 1100px;  /* widest the panel gets */
  --cs-dtf-panel-max: 90vw;      /* share of the screen it may use below that */
  --cs-dtf-col-min: 180px;       /* narrowest a column may be before wrapping */
  --cs-dtf-list-height: 260px;   /* scroll height of each option list */
  --cs-dtf-gap: 1.5em 2.5em;     /* row gap, column gap */

  box-sizing: border-box;
  width: min(var(--cs-dtf-panel-width), var(--cs-dtf-panel-max));
  max-width: var(--cs-dtf-panel-max);
  max-height: 85vh;
}

/* Full-width Clear Filters button across the top. Keeps the element's own
   Clear button colours and border; only its size and position change. */
.cs-dtf-panel .cs-datatable-filter-clear.cs-dtf-clear {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 1.25em;
  padding: 0.6em 1em;
  text-align: center;
}

/* As many columns as fit, each at least --cs-dtf-col-min wide. auto-fit
   stretches the columns across the full width instead of leaving empty
   tracks on the right. */
.cs-dtf-panel .cs-dtf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--cs-dtf-col-min), 1fr));
  gap: var(--cs-dtf-gap);
  align-items: start;
}

/* The stacked layout's spacing between groups isn't needed in a grid. */
.cs-dtf-panel .cs-dtf-grid .cs-datatable-filter-group + .cs-datatable-filter-group {
  margin-top: 0;
}

.cs-dtf-panel .cs-datatable-filter-group {
  min-width: 0;
}

/* Each list scrolls on its own; its search box stays above it. */
.cs-dtf-panel .cs-dtf-options {
  max-height: var(--cs-dtf-list-height);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.25em;
}

/* Breathing room between options, and wrapped labels hang neatly beside
   their checkbox rather than centring on it. Three classes so this wins over
   the element's own option padding. */
.cs-dtf-panel .cs-dtf-options .cs-datatable-filter-option {
  align-items: flex-start;
  padding: 0.3em 0;
  line-height: 1.35;
}

.cs-dtf-panel .cs-dtf-options .cs-datatable-filter-option input {
  flex-shrink: 0;
  margin-top: 0.2em;
}

/* Long unit and ship names wrap rather than widen the column. */
.cs-dtf-panel .cs-datatable-filter-option span {
  overflow-wrap: anywhere;
}

.cs-dtf-panel .cs-datatable-filter-group-title {
  margin-bottom: 0.6em;
}

/* Phones: one column, nearly full width, and shorter lists so several
   columns fit on screen before the panel itself needs scrolling. */
@media (max-width: 600px) {
  .cs-datatable-filter-panel.x-dropdown.cs-dtf-panel {
    --cs-dtf-panel-max: 94vw;
    --cs-dtf-list-height: 180px;
    --cs-dtf-gap: 1.25em;
  }

  .cs-dtf-panel .cs-dtf-grid {
    grid-template-columns: 1fr;
  }
}