/* Orders and Modify Scheduler pages: the filter panel (search, three filters, Clear Filters) is hidden until you point at a
   small "Filter" tab, tab into it, or have one of its dropdowns open; it then slides out over the top of the list below, so
   nothing moves. Mouse screens 701px or wider only; touch and narrow windows keep the original panel. Look only.
   Rollback: delete the orders-filter.css line in index.html. */
@media (hover: hover) and (min-width: 701px) {
  html:not(.of-a):not(.of-b) .filters-section {
    position: relative; z-index: 30; width: 96px; height: 30px; margin: 0 0 8px !important; padding: 0 !important;
    background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  }
  html:not(.of-a):not(.of-b) .filters-section::before {
    content: "Filter  \25BE"; position: absolute; top: 0; left: 0; z-index: 2; display: flex; align-items: center; height: 24px; padding: 0 10px;
    white-space: pre; cursor: default; font: 500 12px/1 var(--ap-font, inherit); color: var(--ap-text-2, #6e6e73); background: var(--ap-surface, #fff);
    border: .5px solid var(--ap-hair, rgba(60, 60, 67, .14)); border-radius: 980px; transition: color .15s ease, border-color .15s ease;
  }
  html:not(.of-a):not(.of-b) .filters-section:has(.mat-mdc-select:not(.mat-mdc-select-empty), input:not(:placeholder-shown))::before {
    content: "Filter  \25CF  set"; color: var(--ap-blue, #007aff); border-color: var(--ap-blue, #007aff);
  }
  html:not(.of-a):not(.of-b) .filters-section:hover::before,
  html:not(.of-a):not(.of-b) .filters-section:focus-within::before { color: var(--ap-text, #1d1d1f); border-color: var(--ap-text-2, #6e6e73); }

  html:not(.of-a):not(.of-b) .filters-section::after {
    content: ""; position: absolute; z-index: -1; top: 28px; left: -8px; width: min(716px, calc(100vw - 164px)); height: 104px;
    background: var(--ap-surface, #fff); border: .5px solid var(--ap-hair, rgba(60, 60, 67, .14)); border-radius: 12px; box-shadow: var(--ap-shadow-3, 0 12px 40px rgba(0, 0, 0, .18));
    opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .16s var(--ap-ease, ease), transform .16s var(--ap-ease, ease);
  }
  html:not(.of-a):not(.of-b) .filters-section > .row {
    position: absolute; top: 40px; left: 0; width: min(700px, calc(100vw - 180px)); margin: 0 !important; flex-wrap: nowrap;
    opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity .16s var(--ap-ease, ease), transform .16s var(--ap-ease, ease);
  }
  html:not(.of-a):not(.of-b) .filters-section > .row > .col-md-8 { flex: 1 1 auto; width: auto; max-width: none; min-width: 0; }
  html:not(.of-a):not(.of-b) .filters-section > .row > .col-md-8 > .mat-mdc-form-field { flex: 1 1 0; min-width: 0; }
  html:not(.of-a):not(.of-b) .filters-section > .row > .col-md-4 { flex: 0 0 auto; width: auto; max-width: none; margin: 0 !important; }

  html:not(.of-a):not(.of-b) .filters-section:hover::after,
  html:not(.of-a):not(.of-b) .filters-section:focus-within::after,
  html:not(.of-a):not(.of-b) .filters-section:has([aria-expanded="true"])::after { opacity: 1; transform: none; pointer-events: auto; }
  html:not(.of-a):not(.of-b) .filters-section:hover > .row,
  html:not(.of-a):not(.of-b) .filters-section:focus-within > .row,
  html:not(.of-a):not(.of-b) .filters-section:has([aria-expanded="true"]) > .row { opacity: 1; pointer-events: auto; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .filters-section::after, .filters-section > .row { transition: none !important; }
}