/* Excel-style AutoFilter dropdown — SHARED by every tracker grid.
 *
 * Extracted from utility_tracker/_rows.html so a second grid (the by-account pivot) can use the
 * same popover without re-including the by-month board's whole stylesheet. Loaded from base.html;
 * the design tokens it references are defined there (custom properties resolve at use time, so
 * load order does not matter).
 *
 * The panel is appended to <body> (position:fixed) so a table's overflow container can't clip it.
 */
#ut-filter-pop {
  position: fixed; z-index: 1000; display: none; width: 232px;
  overscroll-behavior: contain;
  background: var(--surface-2); color: var(--text);
  border-radius: 10px; padding: 8px; font-size: 12px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.35), inset 0 0 0 1px var(--border);
}
#ut-filter-pop .ut-pop-sort { display: flex; gap: 6px; margin-bottom: 6px; }
#ut-filter-pop .ut-pop-sort button {
  flex: 1; cursor: pointer; font-size: 11px; padding: 5px 6px; border-radius: 7px;
  background: var(--surface-3); color: var(--text-dim); box-shadow: inset 0 0 0 1px var(--border);
}
#ut-filter-pop .ut-pop-sort button:hover { color: var(--text); }
#ut-filter-pop .ut-pop-search {
  width: 100%; box-sizing: border-box; font-size: 12px; padding: 5px 8px; border-radius: 7px;
  background: var(--surface-1, var(--surface-3)); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border); margin-bottom: 6px;
}
#ut-filter-pop .ut-pop-all {
  display: flex; align-items: center; gap: 6px; padding: 3px 4px; font-weight: 600;
  border-bottom: 1px solid var(--border); margin-bottom: 4px; cursor: pointer;
}
/* overscroll-behavior: CONTAIN is load-bearing, not cosmetic. Wheeling past the end of this list
   would otherwise chain the scroll to the nearest scrollable ancestor, which fires a `scroll`
   event targeted OUTSIDE the panel — and the close-on-scroll handler would shut the dropdown
   mid-interaction. It is belt-and-braces: ut-grid-filter.js enforces the same containment in a
   wheel handler, because this property is unsupported on Safari < 16.
   The list also carries tabindex="0" (set in JS) so it is reachable and scrollable by keyboard.
   Some engines now focus overflow containers natively (Chrome 127+), but not portably. */
#ut-filter-pop .ut-pop-list {
  max-height: 244px; overflow: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 1px;
}
#ut-filter-pop .ut-pop-list:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#ut-filter-pop .ut-pop-item {
  display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 5px; cursor: pointer;
}
#ut-filter-pop .ut-pop-item:hover { background: var(--surface-3); }
#ut-filter-pop .ut-pop-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ut-filter-pop .ut-pop-actions { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
#ut-filter-pop .ut-pop-actions button { cursor: pointer; font-size: 11px; padding: 5px 12px; border-radius: 7px; }
#ut-filter-pop .ut-pop-ok { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-line); font-weight: 600; }
#ut-filter-pop .ut-pop-cancel { background: var(--surface-3); color: var(--text-dim); box-shadow: inset 0 0 0 1px var(--border); }
#ut-filter-pop .ut-pop-clear { background: transparent; color: var(--text-dim); padding: 5px 4px; text-decoration: underline; }
#ut-filter-pop .ut-pop-clear:hover { color: var(--accent); }


/* ---------------------------------------------------------------------------
   The Excel-style column HEADER that opens the popover above.

   Deliberately unscoped: every grid using utGridFilterPopover needs it, and
   these declarations were #tracker-table-scoped inside utility_tracker/_rows.html
   until 2026-09-08. The by-account pivot does not include that file, so its
   headers had cursor:auto (nothing suggested they were clickable) and its
   .ut-funnel-active class toggled with no visual change at all — an active
   column filter was invisible. Same declarations as the board had, so the
   by-month board is unchanged.
   --------------------------------------------------------------------------- */
.ut-hd {
  cursor: pointer; user-select: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px; font-weight: 600;
}
.ut-hd:hover { color: var(--text); }
.ut-arr { font-size: 10px; color: var(--accent); }
.ut-funnel { font-size: 9px; color: var(--text-faint); }
.ut-funnel.ut-funnel-active { color: var(--accent); }