/* ═══════════════════════════════════════════════════════════════════════════
   sticky-filters.css — keep search + filters in reach on long lists
   Used by Load Monitor, No-Bid Rejections and the Rules database.

   HOW IT STICKS
     The scroll container is .panels-scroll (styles.css), which sits below
     the glass header, so `top: 0` pins the bar right under the header.
     The bar's containing block is .db-layout, which spans the whole tab,
     so it stays pinned for the full length of the list.

   WHY A WRAPPER, NOT .db-toolbar ITSELF
     database.css forces `.db-toolbar { background: transparent;
     padding: 0 }` with !important, globally. A sticky bar needs an opaque
     background and a little breathing room, so both live on this wrapper.

   Z-INDEX
     The table headers are `position: sticky; z-index: 10` (styles.css),
     and they come later in the DOM. At an equal 10 they would paint over
     this bar as rows slide underneath, so the bar sits at 30. That is
     still well under the glass header (100), dropdown menus and modals.
   ═══════════════════════════════════════════════════════════════════════════ */

.sticky-filter-bar {
  --sfb-gutter: 28px;
  --sfb-pad-top: 12px;

  position: sticky;
  top: 0;
  z-index: 30;

  /* Bleed the background across .db-layout's side padding so rows can't
     peek out at the edges while they scroll underneath. */
  margin: calc(var(--sfb-pad-top) * -1) calc(var(--sfb-gutter) * -1) 0;
  padding: var(--sfb-pad-top) var(--sfb-gutter) 0;

  /* Same colour as the page behind the panels: .app-layout paints
     --navy-800 (styles.css), not --canvas, which is a shade darker. */
  background: var(--navy-800, var(--canvas));
  /* contain the children's bottom margins, so the gap under the toolbar is
     painted too instead of letting rows show through it */
  display: flow-root;

  transition: box-shadow 0.18s ease;
}

/* 1px probe placed just above the bar by sticky-filters.js */
.sticky-filter-sentinel {
  height: 1px;
  margin-bottom: -1px;
  pointer-events: none;
}

/* Only once it is actually pinned: a hairline and a soft edge, so it reads
   as a layer above the list rather than part of it. */
.sticky-filter-bar.is-stuck {
  box-shadow:
    0 1px 0 var(--border),
    0 10px 18px -14px rgba(8, 20, 16, 0.35);
}

html[data-theme='dark'] .sticky-filter-bar.is-stuck {
  box-shadow:
    0 1px 0 var(--border),
    0 10px 20px -12px rgba(0, 0, 0, 0.7);
}

/* An open filter panel inside a pinned bar must not swallow the screen.
   :is() lifts this over `#panel-monitor .rpa-filter-panel.open`
   (load-monitor.css), which sets a flat 600px. */
:is(#panel-monitor, #panel-no-bid) .sticky-filter-bar.is-stuck .rpa-filter-panel.open {
  max-height: max(220px, calc(100vh - 300px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ── one scroll, not two ─────────────────────────────────────────
   The tables used to scroll inside their own box (max-height on
   .table-container) while the page scrolled separately. With the filter bar
   pinned, that left two competing scrollbars and a page only a little taller
   than the screen, so any change in the bar's height made it pin and unpin.

   Now the page is the only scroller. The table grows to its full height and
   its column header pins directly under the filter bar.

   `overflow: clip` (not hidden/auto) keeps the rounded corners clipped
   WITHOUT making the wrapper a scroll container, which is what lets the
   header stick to the page. !important because load-monitor.css and
   rules.css set these with ids and !important. */
#panel-monitor #loads-table-wrapper,
#panel-no-bid .table-wrapper,
#rb-sub-current #rules-table-view .table-wrapper {
  overflow: clip !important;
}

#panel-monitor #loads-table-wrapper .table-container,
#panel-no-bid .table-wrapper .table-container,
#rb-sub-current #rules-table-view .table-container {
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

#panel-monitor #loads-table thead th,
#panel-no-bid #loads-table-nobid thead th,
#rb-sub-current #rules-table thead th {
  position: sticky !important;
  top: var(--sfb-height, 0px) !important;
  z-index: 12 !important;
  background: var(--surface-2) !important;
}

#rb-sub-current #rules-table thead th {
  background: var(--surface-1) !important;
}

/* ── responsive gutters: must match .db-layout padding ───────── */
@media (max-width: 860px) {
  #rb-sub-current .sticky-filter-bar {
    --sfb-gutter: 14px;
  }
}

@media (max-width: 768px) {
  .sticky-filter-bar {
    --sfb-gutter: 16px;
    --sfb-pad-top: 10px;
  }
  #rb-sub-current .sticky-filter-bar {
    --sfb-gutter: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-filter-bar {
    transition: none;
  }
}