html[data-surface="staff"] .filters > select { display: none; }
html[data-surface="admin"] #staff-filter, html[data-surface="admin"] #staff-filter-chips { display: none; }
#staff-filter { display: inline-flex; align-items: center; justify-content: center; gap: 5px; position: relative; }
#staff-filter.active { color: var(--primary); border-color: var(--primary); }
#staff-filter small { display: grid; place-items: center; border-radius: 50%; width: 17px; height: 17px; font-size: 10px; background: var(--primary); color: white; }
#staff-filter-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
#staff-filter-chips button { display: flex; gap: 6px; align-items: center; padding: 7px 10px; font-size: 12px; border-color: var(--line); background: white; }
#staff-filter-chips svg { width: 14px; height: 14px; min-width: 14px; flex-basis: 14px; }
.staff-filter-panel section { margin: 18px 0 24px; }
.staff-filter-panel h3 { font-size: 13px; margin: 0 0 12px; }
.filter-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.filter-options button { font-size: 13px; padding: 12px 6px; min-height: 44px; }
html[data-surface="staff"] .filter-options [aria-pressed="true"], html[data-surface="staff"] .filter-options [aria-pressed="true"]:hover { background: var(--primary); color: white; border-color: var(--primary); }
.filter-footer { display: flex; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.filter-footer button { flex: 1; }
@media(max-width:600px) {
  html[data-surface="staff"] .date-nav { gap: 4px; }
  html[data-surface="staff"] .date-title { font-size: 18px; }
  html[data-surface="staff"] #staff-filter { min-width: 40px; padding: 7px; }
  #staff-filter .filter-caption { display: none; }
  #staff-filter small { position: absolute; top: -5px; right: -5px; }
}