/* Client-side search / filter box (W3-B, P3.2207). */

.search-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 16px; }
.search-box[hidden] { display: none; }
.search-input { flex: 1 1 320px; min-width: 0; max-width: 520px; padding: 8px 10px; border: 1px solid #aab7c4; border-radius: 6px; font-size: 0.95rem; background: white; }
.search-input:focus { outline: 2px solid #1a5276; outline-offset: 1px; }
.search-status { font-size: 0.85rem; color: #555; }
.search-status[hidden] { display: none; }

/* An item the current search does not match (search.js). */
.search-miss { display: none !important; }

/* P3.2225: "No matches for this search" after a list the search emptied. */
.search-no-match { display: none; color: #777; font-size: 0.9rem; padding: 10px 0; }
.search-no-match.is-shown { display: block; }

/* P3.2226 POLISH row 1: tiles are practice-wide while a search is active. */
.stats-caption { display: none; margin: 0 0 8px; font-size: 0.8rem; color: #555; }
.stats-caption.is-shown { display: block; }
/* P3.2295 POLISH row 2: the same caption under the Today totals. */
.today-caption { margin: 0 0 8px; }

@media (max-width: 640px) {
  .search-input { flex-basis: 100%; max-width: none; }
}

/* P3.2812: the Clear search button on the empty-list line. */
.search-clear-btn { margin-left: 10px; background: #1a5276; color: white; }

/* P3.2860: visible while a search is active; the tab numbers stay practice-wide. */
.tab-numbers-note { margin: -12px 0 14px; font-size: 0.8rem; color: #555; }

/* P3.3113 row 3: always-visible 'Filter on: "query" [Clear]' while a query is set (also after a reload). */
.search-filter-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 2px 4px 2px 10px; border: 1px solid #a9cce3; border-radius: 14px; background: #eaf2f8; color: #1a5276; font-size: 0.85rem; }
.search-filter-chip[hidden] { display: none; }
.search-filter-text { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.search-chip-clear { padding: 2px 10px; background: #1a5276; color: white; border-radius: 12px; }