/* Shared "Filter & Sort" control bar for the Activities and Games hub
   collection areas. Mirrors the capabilities of the All-Content page
   (/content.html): search, child filter, type filter, date range, and sort.
   Markup is rendered by /js/hub-filters.js. Classes are .hubf-* so they
   don't collide with either hub's existing styles or content.html's
   .content-* equivalents. */

.hubf-bar { margin: 0 0 18px; }

.hubf-toprow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 12px; flex-wrap: wrap;
}
.hubf-count {
  font-size: 13px; font-weight: 600; color: var(--green-muted, #5a7a6a);
}
.hubf-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px; border: 1.5px solid var(--green-border, #d4e8dc);
  border-radius: 8px; background: white; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--green-dark, #1a3d2b);
  width: auto; margin: 0; transition: background 0.15s;
}
.hubf-toggle:hover { background: var(--green-light, #f0faf4); transform: none; box-shadow: none; }
.hubf-toggle.open { background: var(--green-dark, #1a3d2b); color: white; border-color: var(--green-dark, #1a3d2b); }

.hubf-panel {
  background: white; border: 1px solid var(--green-border, #d4e8dc);
  border-radius: 12px; padding: 14px; margin-bottom: 4px;
}

/* Child switcher */
.hubf-switcher { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.hubf-switcher-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px; border: 2px solid var(--green-border, #d4e8dc);
  border-radius: 20px; background: white; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--green-dark, #1a3d2b);
  transition: all 0.15s; width: auto; margin: 0;
}
.hubf-switcher-btn:hover { background: var(--green-light, #f0faf4); border-color: var(--green-mid, #1E6644); transform: none; box-shadow: none; }
.hubf-switcher-btn.active { background: var(--green-mid, #1E6644); color: white; border-color: var(--green-mid, #1E6644); }

/* Type filter + controls row */
.hubf-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.hubf-types { display: flex; gap: 6px; flex-wrap: wrap; }
.hubf-type-btn {
  padding: 5px 12px; border: 1.5px solid var(--green-border, #d4e8dc);
  border-radius: 16px; background: white; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--green-dark, #1a3d2b);
  transition: all 0.15s; width: auto; margin: 0;
}
.hubf-type-btn:hover { background: var(--green-light, #f0faf4); transform: none; box-shadow: none; }
.hubf-type-btn.active { background: var(--green-dark, #1a3d2b); color: white; border-color: var(--green-dark, #1a3d2b); }

.hubf-controls { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.hubf-controls input,
.hubf-controls select {
  padding: 5px 10px; border: 1.5px solid var(--green-border, #d4e8dc);
  border-radius: 8px; font-size: 12px; font-family: inherit;
  background: white; outline: none; color: var(--green-dark, #1a3d2b);
}
.hubf-controls input { width: 140px; }
.hubf-controls input:focus,
.hubf-controls select:focus { border-color: var(--green-mid, #1E6644); }
.hubf-controls select { cursor: pointer; }

/* Empty state when filters exclude everything. */
.hubf-empty {
  text-align: center; padding: 40px 20px;
  color: var(--green-muted, #5a7a6a); font-size: 14px;
}
.hubf-empty-icon { font-size: 2.4rem; margin-bottom: 8px; }