/* Shared tenant/time filter toolbar — used by every page that scopes by
   tenant (Notifications, Insights, Node Health, Tenant Profiling, Release
   Status, …). The goal is ONE look across the app instead of per-page
   bespoke selects. See static/ts/utils/TenantScopeToggle.ts. */

/* Right-aligned column that stacks the TENANTS toggle above an optional
   SINCE/time field — mirrors the original Notifications range column. */
.filter-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

/* One label+control row (e.g. "TENANTS" + the toggle, "SINCE" + the picker). */
.filter-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-label {
  font-size: 11px;
  font-weight: 700;
  color: #6c757d;
  letter-spacing: 0.5px;
  margin: 0;
  min-width: 7ch;
  text-align: right;
}

/* Flat control styling matching the DataTables "entries per page" select:
   13px DM Sans, 1px solid #aaa, 3px radius, transparent. Applied to any
   <select>/<input> placed in a .filter-field. */
.filter-input {
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 400;
  padding: 4px;
  border: 1px solid #aaa;
  border-radius: 3px;
  background-color: transparent;
  color: inherit;
  line-height: 1;
  box-shadow: none;
}
.filter-input:focus {
  outline: none;
  border-color: #888;
}

/* The "All Tenants" checkbox toggle. Visually matches the Nodes "Show All"
   header checkbox (label + checkbox, flat, pointer). */
.tenant-scope-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  user-select: none;
}
.tenant-scope-toggle input[type="checkbox"] {
  cursor: pointer;
  margin: 0;
}