/* Ticket page filter row (2026-09-30, Joseph): the two search boxes and Clear are hidden until you point at the small
   "Filter" tab next to "Tickets" (or tab into them, or a dropdown is open), then they slide open over the top of the ticket
   list without moving anything. Title, Add + and the refresh button stay exactly where they are and do what they did.
   Only for screens with a mouse and 701px or wider; touch and narrow windows keep the original row.
   Look only. Rollback: delete the ticket-filter.css line in index.html. */
@media (hover: hover) and (min-width: 701px) {
  app-main:not(.tf-a):not(.tf-b) .materialTableHeader { position: relative; display: flex; flex-wrap: nowrap; align-items: center; min-height: 52px; padding: 4px 8px !important; }
  app-main:not(.tf-a):not(.tf-b) .materialTableHeader > .left { flex: 1 1 auto; width: auto; min-width: 0; }
  app-main:not(.tf-a):not(.tf-b) .materialTableHeader > .right { flex: 0 0 auto; width: auto; margin-left: auto; }
  app-main:not(.tf-a):not(.tf-b) .materialTableHeader > .right .tbl-export-btn { margin: 0; }

  app-main:not(.tf-a):not(.tf-b) .header-buttons-left { position: relative; z-index: 30; display: flex; align-items: center; gap: 12px; width: fit-content; height: 40px !important; min-height: 40px; margin: 0 !important; padding: 0; }
  app-main:not(.tf-a):not(.tf-b) .header-buttons-left > .tbl-title { margin: 0; }
  app-main:not(.tf-a):not(.tf-b) .header-buttons-left > .tbl-title h2 { margin: 0; }

  /* the tab */
  app-main:not(.tf-a):not(.tf-b) .header-buttons-left::after {
    content: "Filter  \25BE"; 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;
  }
  app-main:not(.tf-a):not(.tf-b) .header-buttons-left:has(.mat-mdc-select:not(.mat-mdc-select-empty))::after { content: "Filter  \25CF  set"; color: var(--ap-blue, #007aff); border-color: var(--ap-blue, #007aff); }
  app-main:not(.tf-a):not(.tf-b) .header-buttons-left:hover::after,
  app-main:not(.tf-a):not(.tf-b) .header-buttons-left:focus-within::after { color: var(--ap-text, #1d1d1f); border-color: var(--ap-text-2, #6e6e73); }

  /* the panel behind the fields */
  app-main:not(.tf-a):not(.tf-b) .header-buttons-left::before {
    content: ""; position: absolute; z-index: -1; top: calc(100% - 2px); left: -8px; width: 548px; max-width: calc(100vw - 48px); height: 76px;
    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);
  }
  /* the fields, folded away */
  app-main:not(.tf-a):not(.tf-b) .header-buttons-left > .tbl-search-box {
    position: absolute; top: calc(100% + 6px); width: 212px; margin: 0 !important; opacity: 0; pointer-events: none; transform: translateY(-6px);
    transition: opacity .16s var(--ap-ease, ease), transform .16s var(--ap-ease, ease);
  }
  app-main:not(.tf-a):not(.tf-b) .header-buttons-left > .tbl-search-box:nth-child(2) { left: 0; }
  app-main:not(.tf-a):not(.tf-b) .header-buttons-left > .tbl-search-box:nth-child(3) { left: 224px; }
  app-main:not(.tf-a):not(.tf-b) .header-buttons-left > .tbl-search-box:nth-child(4) { left: 448px; top: calc(100% + 15px); width: auto; }

  app-main:not(.tf-a):not(.tf-b) .header-buttons-left:hover::before,
  app-main:not(.tf-a):not(.tf-b) .header-buttons-left:focus-within::before,
  app-main:not(.tf-a):not(.tf-b) .header-buttons-left:has([aria-expanded="true"])::before { opacity: 1; transform: none; pointer-events: auto; }
  app-main:not(.tf-a):not(.tf-b) .header-buttons-left:hover > .tbl-search-box,
  app-main:not(.tf-a):not(.tf-b) .header-buttons-left:focus-within > .tbl-search-box,
  app-main:not(.tf-a):not(.tf-b) .header-buttons-left:has([aria-expanded="true"]) > .tbl-search-box { opacity: 1; pointer-events: auto; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  app-main .header-buttons-left::before, app-main .header-buttons-left > .tbl-search-box { transition: none !important; }
}