/* =========================================================
   Components — Filters (Shared)
   Goal:
   - Provide a single, reusable filter-bar layout across modules
   - Keep existing pages working (no breaking changes)

   IMPORTANT:
   - Rules are scoped to .tg-filters or .hr-filters wrappers to avoid
     impacting legacy Finance/Support layouts unintentionally.
   ========================================================= */

:root{
  --tg-filter-h: 40px;
  --tg-filter-gap: 10px;
}

/* Wrapper */
.tg-filters,
.hr-filters{
  width: 100%;
  min-width: 0;

  padding: 12px 14px 0;
  overflow: hidden;
}

/* Row layout: wrap to new lines instead of scrolling sideways.
   Fields grow to fill the row and reflow on smaller screens. */
.tg-filters .tg-filter-row,
.tg-filters .tg-filter-form,
.hr-filters .tg-filter-grid,
.hr-filters .hr-filter-form{
  display: flex;
  gap: var(--tg-filter-gap);
  align-items: flex-end;

  flex-wrap: wrap;
  padding-bottom: 4px;
}

/* Column — grow to fill, shrink small so a full filter set fits on one
   row on laptops/Surface; wraps only when genuinely cramped. */
.tg-filters .tg-filter-col,
.hr-filters .tg-filter-col,
.hr-filters .hr-filter-col{
  display: flex;
  flex-direction: column;
  gap: 5px;

  flex: 1 1 120px;
  min-width: 108px;
}

/* Search column — a bit wider, but still shrinks to keep one row */
.tg-filters .tg-filter-search,
.hr-filters .tg-filter-search,
.hr-filters .hr-filter-search{
  flex: 1.3 1 150px;
  min-width: 140px;
}

/* Labels */
.tg-filters .tg-filter-col label,
.hr-filters .tg-filter-col label,
.hr-filters .hr-filter-col label{
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}

/* Controls */
.tg-filters .tg-filter-col input,
.tg-filters .tg-filter-col select,
.hr-filters .tg-filter-col input,
.hr-filters .tg-filter-col select,
.hr-filters .hr-filter-col input,
.hr-filters .hr-filter-col select{
  width: 100%;
  height: var(--tg-filter-h);

  padding: 0 12px;
  border-radius: 8px;

  border: 1px solid var(--border);
  background: var(--panel);

  font-size: 14px;
  min-width: 0;
}

/* Actions */
.tg-filters .tg-filter-actions,
.hr-filters .tg-filter-actions,
.hr-filters .hr-filter-actions{
  display: flex;
  gap: var(--tg-filter-gap);
  align-items: flex-end;

  flex: 0 0 auto;
  white-space: nowrap;
}

.tg-filters .tg-filter-actions .btn,
.hr-filters .tg-filter-actions .btn,
.hr-filters .hr-filter-actions .btn{
  height: var(--tg-filter-h);
  padding: 0 18px;
  white-space: nowrap;
}